@extends('layouts.app')

@section('title', 'Folder Dokumen Juknis & Regulasi | PRADIPA')

@section('content')
<div class="flex flex-col gap-6 max-w-5xl mx-auto font-sans text-sm">
    <!-- Header Halaman -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col md:flex-row justify-between md:items-center gap-4">
        <div>
            <h2 class="text-2xl font-bold text-slate-800">Folder Dokumen Juknis & Regulasi</h2>
            <p class="text-xs text-slate-500 mt-1 font-medium font-sans">Pusat repositori petunjuk teknis kegiatan, peraturan perundang-undangan pokok, serta surat edaran resmi Dinas Pertanian Provinsi Jawa Tengah.</p>
        </div>
        <!-- Tombol Tambah Berkas (Hanya Tampil untuk Admin Provinsi) -->
        @if($role === 'provinsi_admin')
            <button onclick="toggleFormUnggah()" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-semibold shadow-sm transition-all flex items-center gap-2 shrink-0">
                <i data-lucide="plus" class="w-4 h-4"></i>
                Unggah Berkas Baru
            </button>
        @endif
    </div>

    <!-- Tampilan Error atau Validasi Server -->
    @if($errors->any())
        <div class="bg-rose-100 border-l-4 border-rose-600 text-rose-800 p-4 rounded-xl shadow-sm text-xs font-medium font-sans">
            {{ $errors->first() }}
        </div>
    @endif

    <!-- Tampilan Toast Flash Message Sukses -->
    @if(session('success'))
        <div class="bg-emerald-100 border-l-4 border-emerald-600 text-emerald-800 p-4 rounded-xl shadow-sm text-xs flex items-center gap-2">
            <i data-lucide="check-circle" class="text-emerald-600 w-4 h-4 shrink-0"></i>
            <span class="font-medium">{{ session('success') }}</span>
        </div>
    @endif

    <!-- ========================================================================= -->
    <!--             🆕 FORM UNGHAH BERKAS BARU (Hanya untuk Admin Provinsi)        -->
    <!-- ========================================================================= -->
    @if($role === 'provinsi_admin')
        <div id="panelUnggahRegulasi" class="hidden bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col gap-4 animate-fade-in">
            <h4 class="font-extrabold text-slate-800 border-b border-slate-100 pb-2.5 flex items-center gap-2">
                <i data-lucide="file-up" class="text-emerald-700 w-5 h-5"></i>
                Formulir Unggah Berkas Regulasi Baru
            </h4>

            <form action="{{ route('shared.referensi.store') }}" method="POST" enctype="multipart/form-data" class="flex flex-col gap-4">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Kategori -->
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Kategori Regulasi:</label>
                        <select name="kategori" required class="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 cursor-pointer">
                            <option value="juknis">Petunjuk Teknis (Juknis)</option>
                            <option value="uu">Undang-Undang / Aturan Hukum</option>
                            <option value="se">Surat Edaran (SE)</option>
                        </select>
                    </div>

                    <!-- Nomor Regulasi -->
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Nomor Regulasi / Surat:</label>
                        <input type="text" name="nomor" placeholder="Contoh: Distanbun/SE/521/2026" required class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-700">
                    </div>
                </div>

                <!-- Judul Dokumen -->
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Judul Dokumen:</label>
                    <input type="text" name="judul" placeholder="Contoh: Petunjuk Teknis Verifikasi Batas Lahan Sawah Padi Unggul" required class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-700">
                </div>

                <!-- Deskripsi Singkat -->
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Deskripsi Singkat / Isi Acuan:</label>
                    <textarea name="deskripsi" placeholder="Tuliskan intisari acuan juknis atau regulasi hukum..." rows="2.5" class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-700"></textarea>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <!-- Tanggal Terbit -->
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Tanggal Ditetapkan / Terbit:</label>
                        <input type="date" name="tanggal_terbit" required class="w-full px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-700">
                    </div>

                    <!-- Pilih File PDF -->
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Pilih Dokumen PDF (Maks 10MB):</label>
                        <input type="file" name="berkas_pdf" accept="application/pdf" required class="w-full p-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-600 cursor-pointer">
                    </div>
                </div>

                <!-- Tombol Submit -->
                <div class="border-t border-slate-100 pt-4 flex justify-end gap-2 text-xs font-bold font-sans">
                    <button type="button" onclick="toggleFormUnggah()" class="px-4 py-2 bg-slate-100 text-slate-600 rounded-lg">Batal</button>
                    <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-lg shadow-sm">Simpan & Terbitkan</button>
                </div>
            </form>
        </div>
    @endif

    <!-- TABS FILTER KATEGORI -->
    <div class="flex items-center gap-1.5 bg-white border border-slate-200 p-1.5 rounded-xl shadow-sm overflow-x-auto">
        <button onclick="filterKategoriRegulasi('semua')" id="tab-semua" class="tab-btn px-4 py-2 rounded-lg text-xs font-bold transition-all bg-emerald-600 text-white shadow-sm flex items-center gap-1.5 shrink-0">
            <i data-lucide="folder" class="w-3.5 h-3.5"></i>
            Semua Dokumen
        </button>
        <button onclick="filterKategoriRegulasi('juknis')" id="tab-juknis" class="tab-btn px-4 py-2 rounded-lg text-xs font-bold text-slate-500 hover:text-slate-800 hover:bg-slate-50 transition-all flex items-center gap-1.5 shrink-0">
            <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
            Petunjuk Teknis (Juknis)
        </button>
        <button onclick="filterKategoriRegulasi('uu')" id="tab-uu" class="tab-btn px-4 py-2 rounded-lg text-xs font-bold text-slate-500 hover:text-slate-800 hover:bg-slate-50 transition-all flex items-center gap-1.5 shrink-0">
            <i data-lucide="scale" class="w-3.5 h-3.5"></i>
            Undang-Undang (Hukum)
        </button>
        <button onclick="filterKategoriRegulasi('se')" id="tab-se" class="tab-btn px-4 py-2 rounded-lg text-xs font-bold text-slate-500 hover:text-slate-800 hover:bg-slate-50 transition-all flex items-center gap-1.5 shrink-0">
            <i data-lucide="landmark" class="w-3.5 h-3.5"></i>
            Surat Edaran (Kadin)
        </button>
    </div>

    <!-- DAFTAR DOKUMEN REPOSITORI -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="dokumenListGrid">
        @forelse($dokumens as $doc)
            @php
                $badgeText = 'Juknis';
                $badgeBg = 'bg-blue-100 text-blue-800';
                $categoryIcon = 'book-open';
                
                if($doc->kategori === 'uu') {
                    $badgeText = 'Dasar Hukum';
                    $badgeBg = 'bg-rose-100 text-rose-800';
                    $categoryIcon = 'scale';
                } elseif($doc->kategori === 'se') {
                    $badgeText = 'Surat Edaran';
                    $badgeBg = 'bg-purple-100 text-purple-800';
                    $categoryIcon = 'landmark';
                }
            @endphp
            <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm hover:shadow-md transition-all flex flex-col justify-between gap-4 regulasi-card" data-category="{{ $doc->kategori }}">
                <div class="flex flex-col gap-3">
                    <div class="flex justify-between items-start gap-4">
                        <span class="px-2.5 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider {{ $badgeBg }}">{{ $badgeText }}</span>
                        <span class="text-[10px] text-slate-400 font-mono font-bold">{{ \Carbon\Carbon::parse($doc->tanggal_terbit)->translatedFormat('d M Y') }}</span>
                    </div>

                    <div class="flex gap-3">
                        <div class="p-2.5 bg-slate-50 rounded-lg text-slate-400 shrink-0 self-start border border-slate-100">
                            <i data-lucide="{{ $categoryIcon }}" class="w-6 h-6"></i>
                        </div>
                        <div class="min-w-0">
                            <h4 class="font-extrabold text-slate-800 text-sm leading-snug line-clamp-2 hover:text-emerald-700 transition-all cursor-pointer">{{ $doc->judul }}</h4>
                            <span class="text-[10px] font-mono text-slate-400 font-bold block mt-1">No: {{ $doc->nomor }}</span>
                        </div>
                    </div>

                    <p class="text-xs text-slate-500 leading-relaxed font-medium font-sans line-clamp-3 mt-1.5">{{ $doc->deskripsi }}</p>
                </div>

                <div class="border-t border-slate-100 pt-3.5 flex justify-between items-center gap-2">
                    <div class="flex items-center gap-1.5 text-[10px] font-bold text-slate-400 font-sans">
                        <i data-lucide="file" class="w-3.5 h-3.5"></i>
                        <span>PDF &bull; {{ $doc->file_size }}</span>
                    </div>

                    <div class="flex items-center gap-2">
                        <!-- Tombol Hapus Berkas (Hanya Tampil untuk Admin Provinsi) -->
                        @if($role === 'provinsi_admin')
                            <form action="{{ route('shared.referensi.destroy', $doc->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus berkas regulasi ini secara permanen dari server?');" class="inline m-0">
                                @csrf
                                <button type="submit" class="p-1.5 text-rose-600 hover:bg-rose-50 border border-rose-100 hover:border-rose-200 rounded-lg transition-all" title="Hapus Regulasi">
                                    <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                </button>
                            </form>
                        @endif

                        <!-- Tombol Download Berkas Nyata -->
                        <a href="{{ asset($doc->file_path) }}" target="_blank" class="px-3.5 py-1.5 bg-white hover:bg-slate-100 text-slate-700 border border-slate-200 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 font-sans shadow-sm">
                            <i data-lucide="download" class="w-3.5 h-3.5 text-slate-500"></i>
                            Unduh Berkas
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <!-- Tampilan Kosong -->
            <div class="col-span-full bg-white p-12 text-center rounded-xl border border-slate-200 shadow-sm flex flex-col items-center justify-center gap-3">
                <div class="bg-slate-50 p-4 rounded-full text-slate-400">
                    <i data-lucide="folder-open" class="w-10 h-10"></i>
                </div>
                <h4 class="font-bold text-slate-800 text-base">Repositori Berkas Masih Kosong</h4>
                <p class="text-xs text-slate-400 max-w-sm font-sans">Dinas Provinsi belum mengunggah berkas petunjuk teknis atau file acuan hukum formal apa pun.</p>
            </div>
        @endforelse
    </div>

    <!-- FOOTER INFORMASI DUKUNGAN -->
    <div class="p-4 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-800 leading-relaxed font-semibold text-xs flex gap-3">
        <i data-lucide="help-circle" class="w-5 h-5 text-emerald-600 shrink-0 mt-0.5"></i>
        <div>
            <h5 class="font-bold mb-0.5 text-emerald-950 font-sans">Butuh Berkas Lain?</h5>
            Jika ada dokumen peraturan juknis komoditas sub-sektor holtikultura atau peternakan lainnya yang belum tersedia di folder ini, silakan hubungi bagian Perencanaan Sarana Produksi Dinas Pertanian Jawa Tengah.
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    /**
     * TOGGLE TAMPILAN PANEL UNGGHAH FORMULIR
     */
    function toggleFormUnggah() {
        const panel = document.getElementById('panelUnggahRegulasi');
        panel.classList.toggle('hidden');
    }

    /**
     * SINKRONISASI FILTER KATEGORI REAKTIF SISI FRONTEND (Bebas Lag & Cepat!)
     */
    function filterKategoriRegulasi(kategori) {
        const cards = document.querySelectorAll('.regulasi-card');
        const tabBtns = document.querySelectorAll('.tab-btn');

        tabBtns.forEach(btn => {
            btn.className = "tab-btn px-4 py-2 rounded-lg text-xs font-bold text-slate-500 hover:text-slate-800 hover:bg-slate-50 transition-all flex items-center gap-1.5 shrink-0";
        });

        const activeTab = document.getElementById('tab-' + kategori);
        if (activeTab) {
            activeTab.className = "tab-btn px-4 py-2 rounded-lg text-xs font-bold transition-all bg-emerald-600 text-white shadow-sm flex items-center gap-1.5 shrink-0";
        }

        cards.forEach(card => {
            const cardCat = card.getAttribute('data-category');
            if (kategori === 'semua' || cardCat === kategori) {
                card.classList.remove('hidden');
            } else {
                card.classList.add('hidden');
            }
        });
    }
</script>
@endsection