@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Submit a Product</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Share your EU-based tech product with the community</p>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <form method="POST" action="{{ route('products.store') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <!-- Title -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Product Title <span class="text-red-600 dark:text-red-400">*</span>
                    </label>
                    <div class="mt-1">
                        <input type="text"
                               id="title"
                               name="title"
                               value="{{ old('title') }}"
                               required
                               maxlength="255"
                               placeholder="e.g., My Awesome Product"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('title') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                        @error('title')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">A catchy, descriptive title for your product.</p>
                    </div>
                </div>

                <!-- Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Description <span class="text-red-600 dark:text-red-400">*</span>
                    </label>
                    <div class="mt-1">
                        <textarea id="description"
                                  name="description"
                                  rows="5"
                                  required
                                  placeholder="Tell us about your product..."
                                  class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('description') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Provide a detailed description of your product (what it does, key features, etc.).</p>
                    </div>
                </div>

                <!-- Website URL -->
                <div>
                    <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Website URL <span class="text-red-600 dark:text-red-400">*</span>
                    </label>
                    <div class="mt-1">
                        <input type="url"
                               id="website_url"
                               name="website_url"
                               value="{{ old('website_url') }}"
                               required
                               placeholder="https://example.com"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('website_url') border-red-300 text-red-900 dark:text-red-200 placeholder-red-300 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                        @error('website_url')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">The full URL to your product's website or landing page.</p>
                    </div>
                </div>

                <!-- Category -->
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Category <span class="text-red-600 dark:text-red-400">*</span>
                    </label>
                    <div class="mt-1">
                        <select id="category_id"
                                name="category_id"
                                required
                                class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm @error('category_id') border-red-300 text-red-900 dark:text-red-200 focus:ring-red-500 focus:border-red-500 @enderror dark:bg-gray-700">
                            <option value="">Select a category...</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Choose the category that best fits your product.</p>
                    </div>
                </div>

                <!-- Tags -->
                @if($tags->count() > 0)
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Tags
                    </label>
                    <div class="mt-1 space-y-2">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            @foreach($tags as $tag)
                                <label class="relative flex items-start p-3 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <div class="flex items-center h-5">
                                        <input type="checkbox"
                                               name="tags[]"
                                               value="{{ $tag->id }}"
                                               {{ is_array(old('tags')) && in_array($tag->id, old('tags')) ? 'checked' : '' }}
                                               class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
                                    </div>
                                    <div class="ml-3 flex-1">
                                        <div class="flex items-center gap-2">
                                            <span class="inline-block w-3 h-3 rounded-full" style="background-color: {{ $tag->color }}"></span>
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</span>
                                        </div>
                                        @if($tag->description)
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $tag->description }}</p>
                                        @endif
                                    </div>
                                </label>
                            @endforeach
                        </div>
                        @error('tags')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Select all tags that apply to your product.</p>
                    </div>
                </div>
                @endif

                <!-- Badges -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Badges
                    </label>
                    <div class="mt-1 grid grid-cols-2 sm:grid-cols-4 gap-3">
                        @foreach(\App\Models\Product::BADGES as $key => $label)
                            <label class="flex items-center p-3 border border-gray-300 dark:border-gray-600 rounded-md">
                                <input type="hidden" name="{{ $key }}" value="0">
                                <input type="checkbox"
                                       name="{{ $key }}"
                                       value="1"
                                       {{ old($key, false) ? 'checked' : '' }}
                                       class="focus:ring-primary-500 h-4 w-4 text-primary-600 dark:text-primary-400 border-gray-300 dark:border-gray-600 rounded">
                                <span class="ml-2 text-sm text-gray-900 dark:text-white">{{ $label }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>

                <!-- Thumbnail -->
                <div>
                    <label for="thumbnail" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Product Thumbnail
                    </label>
                    <div class="mt-1">
                        <input type="file"
                               id="thumbnail"
                               name="thumbnail"
                               accept="image/*"
                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100 @error('thumbnail') border-red-300 dark:border-red-700 @enderror">
                        @error('thumbnail')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Upload a product screenshot or logo (JPEG, PNG, or GIF, max 2MB).</p>
                    </div>
                </div>

                <!-- Image Preview -->
                <div id="imagePreview" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preview:</label>
                    <div class="mt-1">
                        <img id="preview" src="#" alt="Thumbnail preview" class="max-w-xs rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm">
                    </div>
                </div>

                <!-- Screenshots -->
                <div x-data="{ previews: [] }">
                    <label for="screenshots" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Screenshots
                    </label>
                    <div class="mt-1">
                        <input type="file"
                               id="screenshots"
                               name="screenshots[]"
                               accept="image/*"
                               multiple
                               @change="previews = Array.from($event.target.files).map(f => URL.createObjectURL(f))"
                               class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100">
                        @error('screenshots')
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                        @foreach($errors->get('screenshots.*') as $messages)
                            <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $messages[0] }}</p>
                        @endforeach
                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Add several images (JPEG, PNG, or GIF, max 2MB each).</p>
                        <div class="mt-3 flex flex-wrap gap-2" x-show="previews.length" style="display: none">
                            <template x-for="src in previews" :key="src">
                                <img :src="src" alt="" class="h-20 w-28 object-cover rounded border border-gray-300 dark:border-gray-600">
                            </template>
                        </div>
                    </div>
                </div>

                <x-product.plans-form />

                <x-product.team-form />

                <!-- Info Alert -->
                <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3 flex-1">
                            <p class="text-sm text-blue-700 dark:text-blue-300">
                                <strong>Note:</strong> Your product will be reviewed by our moderators before it appears on the site.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="flex items-center justify-between pt-5 border-t border-gray-200 dark:border-gray-700">
                    <a href="{{ route('products.index') }}"
                       class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        Cancel
                    </a>
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        Submit Product
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('thumbnail').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
                document.getElementById('imagePreview').classList.remove('hidden');
            }
            reader.readAsDataURL(file);
        } else {
            document.getElementById('imagePreview').classList.add('hidden');
        }
    });
</script>
@endpush
@endsection