@extends('layouts.app')

@section('title', __('products.create_title'))

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.products.index') }}"
            class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 hover:underline">
            ← {{ __('products.index_back_to_list') }}
        </a>
        <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-white mt-2">
            {{ __('products.create_title') }}
        </h1>
    </div>

    <div
        class="max-w-xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700">
        <form method="POST" action="{{ route('admin.products.store') }}" class="space-y-6" enctype="multipart/form-data"
            id="productCreateForm">
            @csrf

            {{-- General Errors and Success Messages --}}
            @if (session('error'))
                <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                    role="alert">
                    {{ session('error') }}
                </div>
            @endif
            @if ($errors->any())
                <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                    role="alert">
                    <span class="font-medium">{{ __('Please check the form for errors.') }}</span>
                    <ul class="mt-1.5 list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('products.form_name_label') }} <span class="text-red-500">*</span>
                </label>
                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                    class="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-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('name') border-red-500 ring-1 ring-red-500 @enderror">
                @error('name')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Campaign ID Dropdown --}}
            <div>
                <label for="campaign_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('products.form_campaign_label') }} <span class="text-red-500">*</span>
                </label>
                <select name="campaign_id" id="campaign_id" required
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none @error('campaign_id') border-red-500 ring-1 ring-red-500 @enderror">
                    <option value="" disabled @selected(old('campaign_id') == '')>
                        {{ __('products.form_campaign_placeholder') }}</option>
                    @foreach ($campaigns as $campaignOption)
                        <option value="{{ $campaignOption->id }}" @selected(old('campaign_id') == $campaignOption->id)>
                            {{ $campaignOption->title }}
                        </option>
                    @endforeach
                </select>
                @error('campaign_id')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <input type="hidden" name="type" value="inhouse">

            <div>
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('products.form_description_label') }}
                </label>
                <textarea name="description" id="description" rows="5"
                    class="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-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('description') border-red-500 ring-1 ring-red-500 @enderror">{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="price" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('products.form_price_label') }}
                </label>
                <input type="number" step="0.01" min="0" name="price" id="price"
                    value="{{ old('price') }}"
                    class="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-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('price') border-red-500 ring-1 ring-red-500 @enderror">
                @error('price')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- IMPROVED IMAGE UPLOAD SECTION --}}
            <div>
                <label for="image" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('products.form_image_label') }}
                </label>

                <!-- Image Preview Container (Hidden by default) -->
                <div id="imagePreview" class="my-2 hidden">
                    <img id="previewImg" src="" alt="Image preview"
                        class="h-20 w-20 object-cover rounded-md border border-gray-200 dark:border-gray-600">
                    <button type="button" id="removePreview"
                        class="ml-2 text-xs text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-200">
                        {{ __('Remove') }}
                    </button>
                    <div id="imageInfo" class="text-xs text-gray-500 mt-1"></div>
                </div>

                <input type="file" name="image" id="image" accept="image/*"
                    class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-l-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-200 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800/50 @error('image') border-red-500 ring-1 ring-red-500 @enderror">

                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ __('products.form_image_help') }}
                </p>

                @error('image')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex justify-end pt-2 border-t border-gray-200 dark:border-gray-600">
                <button type="submit" id="submitButton"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    {{ __('products.form_submit_create') }}
                </button>
            </div>
        </form>
    </div>

    {{-- Enhanced JavaScript for Image Preview and Debugging --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 Product Create Form - JavaScript initialized');
            console.log('📝 Form element:', document.getElementById('productCreateForm'));

            // Get elements
            const imageInput = document.getElementById('image');
            const previewContainer = document.getElementById('imagePreview');
            const previewImg = document.getElementById('previewImg');
            const removeBtn = document.getElementById('removePreview');
            const imageInfo = document.getElementById('imageInfo');
            const form = document.getElementById('productCreateForm');
            const submitButton = document.getElementById('submitButton');

            // Log initial state
            console.log('🎯 Elements found:', {
                imageInput: !!imageInput,
                previewContainer: !!previewContainer,
                previewImg: !!previewImg,
                removeBtn: !!removeBtn,
                form: !!form,
                submitButton: !!submitButton
            });

            // Image input change handler
            imageInput.addEventListener('change', function(e) {
                console.log('📷 Image input changed');
                const file = e.target.files[0];

                console.log('📁 File details:', {
                    hasFile: !!file,
                    fileName: file ? file.name : null,
                    fileSize: file ? file.size : null,
                    fileType: file ? file.type : null,
                    lastModified: file ? new Date(file.lastModified) : null
                });

                if (file) {
                    // Enhanced file validation with detailed logging
                    console.log('🔍 Starting file validation...');

                    // Check file type
                    if (!file.type.startsWith('image/')) {
                        console.error('❌ Invalid file type:', file.type);
                        alert('Please select a valid image file.');
                        imageInput.value = '';
                        previewContainer.classList.add('hidden');
                        return;
                    }
                    console.log('✅ File type valid:', file.type);

                    // Check file size (5MB limit)
                    const maxSize = 5 * 1024 * 1024; // 5MB
                    if (file.size > maxSize) {
                        console.error('❌ File too large:', {
                            fileSize: file.size,
                            maxSize: maxSize,
                            fileSizeMB: (file.size / 1024 / 1024).toFixed(2)
                        });
                        alert(
                            `File size must be less than 5MB. Your file is ${(file.size / 1024 / 1024).toFixed(2)}MB.`);
                        imageInput.value = '';
                        previewContainer.classList.add('hidden');
                        return;
                    }
                    console.log('✅ File size valid:', (file.size / 1024 / 1024).toFixed(2) + 'MB');

                    // Create file reader
                    console.log('📖 Creating FileReader...');
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        console.log('✅ FileReader loaded successfully');
                        console.log('📊 Reader result length:', e.target.result.length);

                        previewImg.src = e.target.result;
                        previewContainer.classList.remove('hidden');

                        // Show file info
                        imageInfo.textContent =
                            `${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`;

                        console.log('🖼️ Image preview updated');
                    };

                    reader.onerror = function(e) {
                        console.error('❌ FileReader error:', e);
                        alert('Error reading file. Please try again.');
                    };

                    reader.readAsDataURL(file);
                    console.log('📖 FileReader.readAsDataURL() called');

                } else {
                    console.log('📭 No file selected, hiding preview');
                    previewContainer.classList.add('hidden');
                }
            });

            // Remove button handler
            removeBtn.addEventListener('click', function() {
                console.log('🗑️ Remove button clicked');
                imageInput.value = '';
                previewContainer.classList.add('hidden');
                console.log('✅ Image preview cleared');
            });

            // Form submission handler with detailed logging
            form.addEventListener('submit', function(e) {
                console.log('🚀 Form submission started');
                console.log('⏰ Timestamp:', new Date().toISOString());

                // Log form data
                const formData = new FormData(form);
                const formDataObj = {};

                for (let [key, value] of formData.entries()) {
                    if (key === 'image' && value instanceof File) {
                        formDataObj[key] = {
                            name: value.name,
                            size: value.size,
                            type: value.type,
                            lastModified: new Date(value.lastModified)
                        };
                    } else {
                        formDataObj[key] = value;
                    }
                }

                console.log('📋 Form data:', formDataObj);
                console.log('📊 Form validation state:', form.checkValidity());

                // Check required fields
                const requiredFields = ['name', 'campaign_id'];
                const missingFields = [];

                requiredFields.forEach(fieldName => {
                    const field = form.querySelector(`[name="${fieldName}"]`);
                    if (!field || !field.value.trim()) {
                        missingFields.push(fieldName);
                    }
                });

                if (missingFields.length > 0) {
                    console.error('❌ Missing required fields:', missingFields);
                } else {
                    console.log('✅ All required fields present');
                }

                // Disable submit button to prevent double submission
                submitButton.disabled = true;
                submitButton.textContent = 'Creating...';

                console.log('🔒 Submit button disabled to prevent double submission');

                // Log final submission details
                console.log('🎯 Final submission details:', {
                    action: form.action,
                    method: form.method,
                    enctype: form.enctype,
                    hasImage: !!formData.get('image') && formData.get('image').size > 0
                });
            });

            // Log any existing errors on page load
            const errorElements = document.querySelectorAll('.text-red-600, .text-red-400');
            if (errorElements.length > 0) {
                console.warn('⚠️ Validation errors found on page:', Array.from(errorElements).map(el => el
                    .textContent));
            }

            // Log success/error messages
            const alertElements = document.querySelectorAll('[role="alert"]');
            if (alertElements.length > 0) {
                console.log('📢 Alert messages found:', Array.from(alertElements).map(el => el.textContent.trim()));
            }

            console.log('✅ Product Create Form - JavaScript setup complete');
        });
    </script>
@endsection