<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Add Product') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{ route('products.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" class="border rounded w-full py-2 px-3 text-gray-700" value="{{ old('name') }}" required>
                            @error('name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Category <span class="text-red-500">*</span></label>
                            <select name="category_id" id="category_id" class="border rounded w-full py-2 px-3 text-gray-700" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                            @error('category_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Type <span class="text-red-500">*</span></label>
                            <select name="type_id" id="type_id" class="border rounded w-full py-2 px-3 text-gray-700" required disabled>
                                <option value="">Select Type</option>
                            </select>
                            @error('type_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Description (Optional)</label>
                            <textarea name="description" rows="3" class="border rounded w-full py-2 px-3 text-gray-700">{{ old('description') }}</textarea>
                        </div>

                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Image <span class="text-red-500">*</span></label>
                            <input type="file" name="image" class="border rounded w-full py-2 px-3 text-gray-700" required accept="image/*">
                            @error('image') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-4">
                            <label class="block text-gray-700 font-bold mb-2">Link (Optional)</label>
                            <input type="text" name="link" class="border rounded w-full py-2 px-3 text-gray-700" value="{{ old('link') }}">
                        </div>

                        <div class="mb-4 flex items-center gap-6">
                            <label class="flex items-center">
                                <input type="checkbox" name="is_active" class="form-checkbox" value="1" checked>
                                <span class="ml-2 text-gray-700 font-bold">Active</span>
                            </label>
                            
                            <label class="flex items-center">
                                <input type="checkbox" name="is_main" class="form-checkbox" value="1">
                                <span class="ml-2 text-gray-700 font-bold">Main Product</span>
                            </label>
                        </div>

                        <div class="flex items-center gap-4">
                            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Save</button>
                            <a href="{{ route('products.index') }}" class="text-gray-600 hover:underline">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const categorySelect = document.getElementById('category_id');
        const typeSelect = document.getElementById('type_id');
        const oldTypeId = "{{ old('type_id') }}";

        function loadTypes(categoryId, selectedTypeId = null) {
            typeSelect.innerHTML = '<option value="">Select Type</option>';
            typeSelect.disabled = true;

            if (categoryId) {
                fetch(`/dayana/admin/public/api/categories/${categoryId}/types`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(type => {
                            const option = document.createElement('option');
                            option.value = type.id;
                            option.textContent = type.name;
                            if (selectedTypeId && selectedTypeId == type.id) {
                                option.selected = true;
                            }
                            typeSelect.appendChild(option);
                        });
                        typeSelect.disabled = false;
                    })
                    .catch(error => console.error('Error fetching types:', error));
            }
        }

        categorySelect.addEventListener('change', function() {
            loadTypes(this.value);
        });

        // Load types on page load if category is already selected (e.g., after validation error)
        if (categorySelect.value) {
            loadTypes(categorySelect.value, oldTypeId);
        }
    });
</script>
