<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-stone-800 leading-tight">
            <i class="fas fa-plus-circle mr-2 text-amber-600"></i>
            Tambah Produk
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="space-y-6">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-stone-200">
                <div class="p-6 bg-white border-b border-stone-200">
                    @if ($errors->any())
                    <div class="mb-6">
                        <div class="bg-rose-50 border border-rose-200 text-rose-700 px-4 py-3 rounded-xl relative" role="alert">
                            <div class="flex items-center">
                                <i class="fas fa-exclamation-triangle mr-2 text-rose-600"></i>
                                <strong class="font-bold">Perhatian!</strong>
                            </div>
                            <ul class="mt-2 list-disc list-inside text-sm">
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif

                    <form action="{{ route('admin.product.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                        @csrf

                        <div>
                            <label for="category_id" class="block font-medium text-sm text-stone-800 mb-1">
                                Kategori
                            </label>
                            <select id="category_id" name="category_id"
                                class="mt-1 block w-full bg-white border border-stone-300 text-stone-900 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500">
                                <option value="">-- Pilih Kategori --</option>
                                @foreach ($categories as $cat)
                                <option value="{{ $cat->category_id }}" {{ old('category_id') == $cat->category_id ? 'selected' : '' }}>
                                    {{ $cat->category_name }}
                                </option>
                                @endforeach
                            </select>
                            @error('category_id')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="product_name" class="block font-medium text-sm text-stone-800 mb-1">
                                Nama Produk
                            </label>
                            <input id="product_name" name="product_name" type="text"
                                class="mt-1 block w-full bg-white border border-stone-300 text-stone-900 placeholder-stone-400 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                value="{{ old('product_name') }}" placeholder="Masukkan nama produk" required autofocus />
                            @error('product_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="description" class="block font-medium text-sm text-stone-800 mb-1">
                                Deskripsi
                            </label>
                            <textarea id="description" name="description" rows="4"
                                class="mt-1 block w-full bg-white border border-stone-300 text-stone-900 placeholder-stone-400 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                placeholder="Masukkan deskripsi produk">{{ old('description') }}</textarea>
                            @error('description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Harga + Stok + Berat --}}
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label for="price" class="block font-medium text-sm text-stone-800 mb-1">
                                    Harga
                                </label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                        <span class="text-stone-600 sm:text-sm">Rp</span>
                                    </div>
                                    <input id="price" name="price" type="number"
                                        class="block w-full pl-10 bg-white border border-stone-300 text-stone-900 placeholder-stone-400 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                        value="{{ old('price') }}" placeholder="0" required />
                                </div>
                                @error('price')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="stock" class="block font-medium text-sm text-stone-800 mb-1">
                                    Stok
                                </label>
                                <input id="stock" name="stock" type="number"
                                    class="mt-1 block w-full bg-white border border-stone-300 text-stone-900 placeholder-stone-400 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                    value="{{ old('stock') }}" placeholder="0" required />
                                @error('stock')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="weight" class="block font-medium text-sm text-stone-800 mb-1">
                                    Berat <span class="text-stone-500 font-normal text-xs">(gram, hanya admin)</span>
                                </label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <input id="weight" name="weight" type="number"
                                        class="block w-full pr-14 bg-white border border-stone-300 text-stone-900 placeholder-stone-400 rounded-xl shadow-sm focus:border-amber-500 focus:ring-amber-500"
                                        value="{{ old('weight', 0) }}" placeholder="0" min="0" />
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <span class="text-stone-500 sm:text-sm">gram</span>
                                    </div>
                                </div>
                                @error('weight')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <label for="image" class="block font-medium text-sm text-stone-800 mb-1">
                                Gambar Produk (multiple)
                            </label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-stone-300 border-dashed rounded-xl bg-stone-50 hover:border-amber-400 transition">
                                <div class="space-y-1 text-center">
                                    <i class="fas fa-cloud-upload-alt text-3xl text-stone-400 mb-2"></i>
                                    <div class="flex text-sm text-stone-600">
                                        <label for="image" class="relative cursor-pointer bg-stone-50 rounded-md font-medium text-amber-600 hover:text-amber-700 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-amber-500">
                                            <span>Upload files</span>
                                            <input id="image" name="image[]" type="file" multiple class="sr-only">
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-stone-500">PNG, JPG, GIF up to 10MB (multiple files allowed)</p>
                                </div>
                            </div>
                            @error('image')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                            @error('image.*')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex items-center justify-end space-x-4 pt-6 border-t border-stone-200">
                            <a href="{{ route('admin.product.index') }}"
                                class="inline-flex items-center px-6 py-3 bg-stone-100 hover:bg-stone-200 border border-stone-300 rounded-xl font-medium text-sm text-stone-700 transition-all duration-200">
                                <i class="fas fa-times mr-2"></i> Batal
                            </a>
                            <button type="submit"
                                class="inline-flex items-center px-6 py-3 btn-primary text-white text-sm font-medium rounded-xl shadow-md hover:shadow-lg transition-all duration-200">
                                <i class="fas fa-save mr-2"></i> Simpan Produk
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('image').addEventListener('change', function(e) {
            const fileList = e.target.files;
            const existingInfo = document.querySelector('.file-info');
            if (existingInfo) existingInfo.remove();
            if (fileList.length > 0) {
                const fileInfo = document.createElement('div');
                fileInfo.className = 'mt-2 text-sm text-stone-600 file-info';
                fileInfo.textContent = `${fileList.length} file(s) dipilih: ${Array.from(fileList).map(f => f.name).join(', ')}`;
                e.target.parentNode.parentNode.appendChild(fileInfo);
            }
        });
    </script>
</x-app-layout>