<x-app-layout>
    <div class="py-12 bg-gray-50 min-h-screen">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white p-6 rounded-2xl border border-gray-100 shadow-sm gap-4">
                <div>
                    <h2 class="text-2xl font-black text-gray-800 tracking-tight">Tambah Produk Baru</h2>
                    <p class="text-sm text-gray-400 font-medium mt-0.5">Daun dan rincikan varian komoditas produk baru untuk ekosistem Tempe Zhi.</p>
                </div>
                <div>
                    <a href="{{ route('admin.produk.index') }}"   class="inline-flex items-center gap-2 bg-white hover:bg-gray-50 text-gray-600 px-5 py-2.5 rounded-xl font-bold text-xs border border-gray-200 shadow-sm transition-all active:scale-95 whitespace-nowrap">
                        Kembali ke List
                    </a>
                </div>
            </div>

            <div class="bg-white shadow-sm rounded-2xl border border-gray-100 p-6 md:p-8">
                
                @if ($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-r-xl">
                        <ul class="list-disc list-inside text-sm font-medium">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('admin.produk.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    
                    <div class="space-y-2">
                        <label for="nama_produk" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Nama Produk</label>
                        <input type="text" 
                               name="nama_produk" 
                               id="nama_produk"
                               value="{{ old('nama_produk') }}"
                               class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                               placeholder="Contoh: Tempe Mendoan Mentah Pack" 
                               required>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label center for="kategori_id" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Kategori Produk</label>
                            <select name="kategori_id" 
                                    id="kategori_id"
                                    class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-700 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all bg-white"
                                    required>
                                <option value="">Pilih Kategori</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('kategori_id') == $cat->id ? 'selected' : '' }}>{{ $cat->nama_kategori }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label for="harga" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Harga Umum (Rp)</label>
                            <input type="number" 
                                   name="harga" 
                                   id="harga"
                                   value="{{ old('harga') }}"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                                   placeholder="Contoh: 15000" 
                                   required>
                        </div>
                        
                        <div class="space-y-2">
                            <label for="min_qty_mitra" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Minimal Batas Grosir / Qty Mitra</label>
                            <input type="number" 
                                   name="min_qty_mitra" 
                                   id="min_qty_mitra"
                                   value="{{ old('min_qty_mitra') }}"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                                   placeholder="Contoh: 10" 
                                   required>
                        </div>

                        <div class="space-y-2">
                            <label for="harga_mitra" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Harga Khusus Mitra (Rp)</label>
                            <input type="number" 
                                   name="harga_mitra" 
                                   id="harga_mitra"
                                   value="{{ old('harga_mitra') }}"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                                   placeholder="Contoh: 12000" 
                                   required>
                        </div>

                        <div class="space-y-2">
                            <label for="berat" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Nominal Berat Massa</label>
                            <input type="number" 
                                   step="0.01" 
                                   name="berat" 
                                   id="berat"
                                   value="{{ old('berat') }}"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                                   placeholder="Contoh: 500" 
                                   required>
                        </div>

                        <div class="space-y-2">
                            <label for="satuan" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Satuan Ukuran</label>
                            <select name="satuan" 
                                    id="satuan"
                                    class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-700 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all bg-white"
                                    required>
                                <option value="Gram" {{ old('satuan') == 'Gram' ? 'selected' : '' }}>Gram</option>
                                <option value="Kg" {{ old('satuan') == 'Kg' ? 'selected' : '' }}>Kg</option>
                                <option value="Pcs" {{ old('satuan') == 'Pcs' ? 'selected' : '' }}>Pcs</option>
                            </select>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="foto" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Berkas Foto Produk</label>
                        <input type="file" 
                               name="foto" 
                               id="foto"
                               class="w-full text-sm text-gray-500 font-bold file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-gray-100 file:text-gray-600 hover:file:bg-gray-200 border border-dashed border-gray-200 rounded-xl p-3 focus:outline-none">
                    </div>

                    <div class="space-y-2">
                        <label for="deskripsi" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Deskripsi Narasi Produk</label>
                        <textarea name="deskripsi" 
                                  id="deskripsi"
                                  rows="3" 
                                  class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700 transition-all" 
                                  placeholder="Tuliskan spesifikasi produk, keunggulan bahan baku, atau catatan simpan..."/>{{ old('deskripsi') }}</textarea>
                    </div>

                    <div class="flex justify-end items-center gap-3 pt-6 border-t border-gray-50">
                        <a href="{{ route('admin.produk.index') }}" class="px-5 py-2.5 rounded-xl font-bold text-xs text-gray-500 hover:text-gray-700 transition-colors">
                            Batalkan
                        </a>
                        <button type="submit" class="inline-flex items-center gap-2 bg-green-700 hover:bg-green-800 text-white px-6 py-2.5 rounded-xl font-bold text-xs shadow-md shadow-green-700/10 transition-all active:scale-95">
                            Simpan Produk
                        </button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</x-app-layout>