<x-app-layout>
    <div class="py-12 bg-gray-50 min-h-screen" x-data="{ fileName: '', photoPreview: null }">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <!-- Header -->
            <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 Sertifikat Baru</h2>
                    <p class="text-sm text-gray-400 font-medium mt-0.5">Unggah dokumen legalitas untuk memperkuat kepercayaan ekosistem Tempe Zhi.</p>
                </div>
                <div>
                    <a href="{{ route('admin.sertifikat.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>

            <!-- Form Card -->
            <div class="bg-white shadow-sm rounded-2xl border border-gray-100 p-6 md:p-8">
                <form action="{{ route('admin.sertifikat.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-6">
                            <div class="space-y-2">
                                <label for="nama_sertifikat" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Nama Sertifikat</label>
                                <input type="text" name="nama_sertifikat" id="nama_sertifikat" value="{{ old('nama_sertifikat') }}"
                                    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: Sertifikat Halal" required>
                            </div>

                            <div class="space-y-2">
                                <label for="nomor_sertifikat" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Nomor Registrasi</label>
                                <input type="text" name="nomor_sertifikat" id="nomor_sertifikat" value="{{ old('nomor_sertifikat') }}"
                                    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: ID6311000..." required>
                            </div>
                        </div>

                        <!-- Preview Area -->
                        <div class="space-y-2">
                            <label class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Preview Gambar</label>
                            <div class="w-full h-40 bg-gray-50 rounded-xl border border-dashed border-gray-200 p-2 flex items-center justify-center overflow-hidden">
                                <template x-if="photoPreview">
                                    <img :src="photoPreview" class="max-h-full object-contain rounded-lg">
                                </template>
                                <template x-if="!photoPreview">
                                    <svg class="h-10 w-10 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- Upload Field -->
                    <div class="space-y-2">
                        <label for="gambar" class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Berkas Foto Sertifikat</label>
                        <input type="file" name="gambar" id="gambar"
                            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"
                            required
                            @change="
                                fileName = $event.target.files[0].name;
                                const reader = new FileReader();
                                reader.onload = (e) => { photoPreview = e.target.result; };
                                reader.readAsDataURL($event.target.files[0]);
                            ">
                    </div>

                    <!-- Footer Actions -->
                    <div class="flex justify-end items-center gap-3 pt-6 border-t border-gray-50">
                        <a href="{{ route('admin.sertifikat.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 Sertifikat
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>