@extends('layouts.app')

@section('title', 'Rekapitulasi Laporan | PRADIPA')

@section('content')
<div class="flex flex-col gap-6 max-w-4xl mx-auto font-sans text-sm">
    <!-- Header Halaman -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
        <h2 class="text-2xl font-bold text-slate-800">Ekspor Rekapitulasi Laporan</h2>
        <p class="text-xs text-slate-500 mt-1 font-medium font-sans">Unduh berkas rekapitulasi usulan kelayakan penerima manfaat bantuan dalam format Excel (.xlsx) untuk komite rapat komite dinas.</p>
    </div>

    <!-- Tampilan Error dari 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 mb-2">
            {{ $errors->first() }}
        </div>
    @endif

    <!-- PANEL STATISTIK DATA SIAP SALUR -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Total Usulan Siap Salur -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div class="flex flex-col gap-1">
                <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px] block">Usulan Lolos Verifikasi</span>
                <div class="flex items-baseline gap-1.5 mt-1">
                    <span class="text-xl font-black text-slate-800">{{ $totalUsulanFinal }}</span>
                    <span class="text-xs text-slate-400 font-medium">berkas poktan</span>
                </div>
                <span class="text-[10px] text-emerald-600 font-bold mt-1 font-sans">Siap Sidang SK Penetapan</span>
            </div>
            <div class="bg-emerald-50 p-3 rounded-xl text-emerald-600 shrink-0">
                <i data-lucide="check-circle-2" class="w-6 h-6"></i>
            </div>
        </div>

        <!-- Total Luas Lahan Terpeta -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div class="flex flex-col gap-1">
                <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px] block">Akumulasi Luas Lahan</span>
                <div class="flex items-baseline gap-1.5 mt-1">
                    <span class="text-xl font-black text-slate-800">{{ number_format($totalLuasFinal, 1, ',', '.') }}</span>
                    <span class="text-xs text-slate-400 font-medium">Hektar (Ha)</span>
                </div>
                <span class="text-[10px] text-blue-600 font-bold mt-1 font-sans">Telah Tergambar Spasial</span>
            </div>
            <div class="bg-blue-50 p-3 rounded-xl text-blue-600 shrink-0">
                <i data-lucide="map" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <!-- PANEL FORM FILTER & UNDUH EXCEL -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col gap-5">
        <h4 class="font-extrabold text-slate-800 border-b border-slate-100 pb-3 flex items-center gap-2 text-sm">
            <i data-lucide="file-spreadsheet" class="text-emerald-700 w-5 h-5"></i>
            Saring Data Ekspor Excel (.xlsx)
        </h4>

        <form action="{{ route('shared.laporan.ekspor_proses') }}" method="POST" class="flex flex-col gap-5">
            @csrf

            <!-- PILIHAN FORMAT TABEL EXCEL -->
            <div class="flex flex-col gap-2 bg-slate-50 p-4 rounded-xl border border-slate-200/60">
                <span class="text-xs font-bold text-slate-700 uppercase tracking-wider block mb-1">Pilih Format Output Tabel Excel:</span>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 font-sans text-xs">
                    <!-- Opsi 1: Format SK Kepala Dinas -->
                    <label class="bg-white p-3 rounded-lg border border-slate-200 hover:border-emerald-500 cursor-pointer transition-all flex gap-3 items-start">
                        <input type="radio" name="format_tipe" value="sk_grup" checked class="mt-0.5 text-emerald-600 focus:ring-emerald-500">
                        <div>
                            <span class="font-bold text-slate-800 block">Format SK Lampiran Dinas</span>
                            <span class="text-[10px] text-slate-400 leading-normal block mt-1">Mengelompokkan data per program kegiatan dengan header grup yang rapi, dan memecah barang bantuan secara vertikal (cocok untuk cetak fisik).</span>
                        </div>
                    </label>

                    <!-- Opsi 2: Format Matriks Pengadaan Logistik -->
                    <label class="bg-white p-3 rounded-lg border border-slate-200 hover:border-emerald-500 cursor-pointer transition-all flex gap-3 items-start">
                        <input type="radio" name="format_tipe" value="pengadaan_flat" class="mt-0.5 text-emerald-600 focus:ring-emerald-500">
                        <div>
                            <span class="font-bold text-slate-800 block">Format Matriks Pengadaan Logistik</span>
                            <span class="text-[10px] text-slate-400 leading-normal block mt-1">Menjajarkan seluruh komoditas ke kanan secara mendatar (flat row per kelompok tani) lengkap dengan ringkasan penjumlahan logistik di baris bawah.</span>
                        </div>
                    </label>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <!-- 1. Pilihan Program Kegiatan -->
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Saring Program Kegiatan:</label>
                    <select name="kegiatan_id" class="w-full px-3.5 py-2.5 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 text-slate-600">
                        <option value="">-- Semua Program Kegiatan --</option>
                        @foreach($kegiatans as $k)
                            <option value="{{ $k->id }}">{{ $k->nama_kegiatan }} (TA {{ $k->tahun_anggaran }})</option>
                        @endforeach
                    </select>
                </div>

                <!-- 2. Pilihan Kabupaten -->
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Saring Wilayah Kabupaten:</label>
                    <select name="regency_id" class="w-full px-3.5 py-2.5 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 text-slate-600">
                        <option value="">-- Semua Wilayah Kerja Kabupaten --</option>
                        @foreach($kabupatens as $kab)
                            <option value="{{ $kab->id }}">{{ $kab->nama_kabupaten }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- 3. Pilihan Status Kelayakan Berkas -->
            <div class="flex flex-col gap-1.5">
                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Status Transisi Berkas:</label>
                <select name="status" class="w-full px-3.5 py-2.5 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 text-slate-600">
                    <option value="">Tervalidasi (Diverifikasi & Final)</option>
                    <option value="diajukan">Hanya Berkas Diajukan (Belum Sidang)</option>
                    <option value="diverifikasi">Hanya Berkas Terverifikasi (Siap SK)</option>
                    <option value="final">Hanya Berkas Final (SK Terbit)</option>
                </select>
            </div>

            <!-- Tombol Submit Ekspor -->
            <div class="border-t border-slate-100 pt-4 flex justify-end">
                <button type="submit" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-extrabold shadow-md transition-all flex items-center gap-1.5 font-sans">
                    <i data-lucide="download-cloud" class="w-4 h-4"></i>
                    Unduh Berkas Spreadsheet (.xlsx)
                </button>
            </div>
        </form>
    </div>

    <!-- Informasi Juknis Cetak Komite -->
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 text-xs text-blue-800 leading-relaxed font-medium flex gap-3">
        <i data-lucide="info" class="w-5 h-5 text-blue-700 shrink-0 mt-0.5"></i>
        <div>
            <h5 class="font-bold mb-1 text-blue-950 font-sans">Petunjuk Ekspor:</h5>
            Daftar baris data di dalam berkas Excel yang diunduh akan otomatis terurut berdasarkan **Skor Prioritas Kelayakan Tertinggi** (Hasil akumulasi verifikasi berkas spasial) untuk mempermudah pimpinan mengambil keputusan penyaluran bantuan secara objektif.
        </div>
    </div>
</div>
@endsection