@extends('layouts.app')

@section('title', 'Revisi Usulan Bantuan | PRADIPA')

@section('content')
<div class="flex flex-col gap-6">
    <!-- Header Alur Kembali -->
    <div class="flex items-center gap-2 text-sm text-slate-400 font-medium">
        <a href="{{ route('shared.usulan.index') }}" class="hover:text-emerald-700 transition-colors">Monitoring Usulan</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-slate-600 font-semibold">Revisi Berkas Usulan</span>
    </div>

    <!-- Header Judul & Catatan Evaluasi -->
    <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col gap-2">
        <div class="flex items-center gap-3">
            <div class="bg-amber-100 p-2.5 rounded-xl text-amber-800">
                <i data-lucide="file-warning" class="w-6 h-6"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold text-slate-800 font-sans">Revisi & Perbaikan Usulan Bantuan</h2>
                <p class="text-sm text-slate-500 font-medium mt-0.5 font-sans">Lakukan koreksi batas koordinat lahan spasial atau perbarui dokumen pendukung untuk menindaklanjuti berkas usulan.</p>
            </div>
        </div>
        
        <!-- Memo Evaluasi Penolakan dari Admin Provinsi -->
        @if($usulan->status === 'perbaikan' && $usulan->catatan_terakhir)
            <div class="mt-4 p-4 bg-amber-50/70 border border-amber-200 text-amber-900 rounded-xl text-xs flex gap-3 leading-relaxed">
                <i data-lucide="message-square" class="w-5 h-5 text-amber-700 shrink-0 mt-0.5"></i>
                <div>
                    <span class="font-extrabold text-amber-950 block uppercase tracking-wider text-[10px] mb-1">Catatan Evaluasi / Alasan Penolakan Provinsi:</span>
                    <p class="italic text-slate-700 font-medium font-sans">"{{ $usulan->catatan_terakhir }}"</p>
                </div>
            </div>
        @elseif($usulan->status === 'draft')
            <div class="mt-4 p-4 bg-blue-50/70 border border-blue-200 text-blue-900 rounded-xl text-xs flex gap-3 leading-relaxed">
                <i data-lucide="info" class="w-5 h-5 text-blue-700 shrink-0 mt-0.5"></i>
                <div>
                    <span class="font-extrabold text-blue-950 block uppercase tracking-wider text-[10px] mb-1">Status Usulan: Konsep Draft</span>
                    <p class="text-slate-700 font-medium font-sans">Usulan ini masih disimpan sebagai draf lokal kabupaten Anda dan belum pernah dikirimkan ke Provinsi.</p>
                </div>
            </div>
        @endif
    </div>

    <!-- Tampilan Notifikasi Error Validasi -->
    @if($errors->any())
        <div class="bg-rose-50 border border-rose-200 text-rose-800 p-4 rounded-xl shadow-sm text-xs flex gap-3 items-start">
            <i data-lucide="alert-circle" class="w-5 h-5 text-rose-600 shrink-0"></i>
            <div>
                <span class="font-bold block mb-1">Terjadi kesalahan validasi berkas:</span>
                <ul class="list-disc pl-5 space-y-0.5 font-medium">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <!-- FORM UTAMA EDIT/REVISI -->
    <form action="{{ route('kabupaten.usulan.update', $usulan->id) }}" method="POST" enctype="multipart/form-data" id="formUsulan" class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        @csrf
        
        <!-- Input Tersembunyi untuk Membedakan Tombol Aksi (Draft vs Submit) -->
        <input type="hidden" name="action_type" id="actionType" value="submit">
        
        <!-- SEKTOR FORM INPUT KIRI (2/3) -->
        <div class="lg:col-span-2 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 text-sm flex items-center gap-2">
                <i data-lucide="clipboard-edit" class="text-emerald-600 w-4 h-4"></i>
                Formulir Perbaikan Data Usulan
            </h4>

            <!-- 1. Kelompok Tani (Terkunci demi integritas data) -->
            <div>
                <label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Kelompok Tani Pengusul (Locked):</label>
                <div class="p-4 bg-slate-50 border border-slate-200 rounded-xl flex justify-between items-center">
                    <div class="flex items-center gap-3">
                        <div class="bg-slate-800 text-white p-2 rounded-xl">
                            <i data-lucide="users" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <p class="font-extrabold text-slate-800 text-sm">{{ $usulan->nama_kelompok }}</p>
                            <p class="text-[10px] text-slate-400 mt-0.5">Nomor Induk Poktan: <b class="font-mono text-emerald-800">{{ $usulan->nomor_induk }}</b></p>
                        </div>
                    </div>
                    <span class="px-2.5 py-1 rounded-full bg-slate-200 text-slate-500 font-black uppercase text-[9px] tracking-widest shadow-sm">Locked</span>
                </div>
                <input type="hidden" name="kelompok_tani_id" value="{{ $usulan->kelompok_tani_id }}">
            </div>

            <!-- 2. Pilih Program Kegiatan Bantuan -->
            <div class="flex flex-col gap-1.5">
                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider">Program Kegiatan Bantuan:</label>
                <select name="kegiatan_id" id="kegiatanSelect" class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 font-medium cursor-pointer text-slate-700">
                    @foreach($kegiatan as $k)
                        <option value="{{ $k->id }}" {{ $usulan->kegiatan_id == $k->id ? 'selected' : '' }}>
                            {{ $k->nama_kegiatan }} (Tahun Anggaran {{ $k->tahun_anggaran }})
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- 3. Input Luas Lahan Usulan -->
            <div class="flex flex-col gap-1.5">
                <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider">Luas Lahan yang Diusulkan (Hektar / Ha):</label>
                <div class="relative">
                    <input type="number" name="luas_lahan" id="luasLahanInput" value="{{ old('luas_lahan', $barangUsulan->luas_pemanfaatan ?? '') }}" placeholder="Contoh: 1.5" step="0.01" min="0.1" required class="w-full pl-3.5 pr-12 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-500 text-slate-800">
                    <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-xs font-bold text-slate-400">Ha</span>
                </div>
                <p class="text-[10px] text-slate-400 font-medium mt-0.5">Sistem akan secara otomatis menghitung ulang volume barang bantuan yang dialokasikan berbasis luas lahan dikalikan volume per hektar kegiatan.</p>
            </div>

            <!-- 4. UNGGAH BERKAS REVISI SECARA DINAMIS BERDASARKAN PARAMETER KEGIATAN -->
            <div class="border-t border-slate-100 pt-4 flex flex-col gap-3 font-sans">
                <h5 class="font-bold text-slate-800 text-xs uppercase tracking-wider">Lampiran Dokumen Persyaratan Berkas</h5>
                
                <div class="flex flex-col gap-3.5">
                    @forelse($syaratLama as $sl)
                        @if($sl->tipe_file !== 'polygon')
                            @php
                                $labelBg = $sl->tipe_file === 'pdf' ? 'bg-rose-100 text-rose-800' : 'bg-blue-100 text-blue-800';
                                $acceptType = $sl->tipe_file === 'pdf' ? 'application/pdf' : 'image/*';
                            @endphp
                            <div class="p-4 bg-slate-50 border border-slate-200 rounded-xl flex flex-col gap-3 syarat-revisi-row" data-id="{{ $sl->syarat_kegiatan_id }}" data-required="{{ $sl->is_required ? '1' : '0' }}" data-hasfile="{{ $sl->file_path ? '1' : '0' }}" data-nama="{{ $sl->nama_syarat }}">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-2">
                                            <span class="px-2 py-0.5 {{ $labelBg }} text-[9px] font-bold rounded uppercase">{{ $sl->tipe_file }}</span>
                                            <span class="text-xs font-bold text-slate-700">{{ $sl->nama_syarat }}</span>
                                            @if($sl->is_required)
                                                <span class="text-rose-600 font-bold">*</span>
                                            @endif
                                        </div>
                                        
                                        <!-- Penaut Download Berkas Lama -->
                                        @if($sl->file_path)
                                            <div class="mt-2 flex items-center gap-1.5 text-[11px] text-emerald-700 font-bold">
                                                <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0"></i>
                                                <a href="{{ asset($sl->file_path) }}" target="_blank" class="hover:underline">Unduh Berkas Terupload</a>
                                            </div>
                                        @else
                                            <p class="text-[10px] text-amber-600 font-medium mt-1 font-sans">Belum ada file yang terunggah sebelumnya.</p>
                                        @endif
                                        <p class="text-[10px] text-slate-400 font-medium mt-1 leading-normal font-sans">Maksimal ukuran file 2 MB. Pilih file baru jika ingin mengganti berkas.</p>
                                    </div>
                                    <div class="shrink-0">
                                        <input type="file" name="syarat_files[{{ $sl->syarat_kegiatan_id }}]" id="file_revisi_input_{{ $sl->syarat_kegiatan_id }}" accept="{{ $acceptType }}" class="text-xs bg-white p-2 border border-slate-200 rounded-lg focus:outline-none font-semibold cursor-pointer">
                                    </div>
                                </div>
                                
                                <!-- Catatan perbaikan dari Provinsi -->
                                @if($sl->status_verifikasi === 'ditolak' && $sl->catatan_perbaikan)
                                    <div class="p-2.5 bg-rose-50 border border-rose-200 text-rose-800 text-[10px] rounded-lg leading-relaxed font-sans">
                                        <span class="font-extrabold block">Alasan Penolakan Berkas Ini:</span>
                                        <p class="mt-0.5">{{ $sl->catatan_perbaikan }}</p>
                                    </div>
                                @endif
                            </div>
                        @endif
                    @empty
                        <p class="text-xs text-slate-400 italic font-sans p-3 bg-slate-50 rounded-xl border border-slate-200">Tidak ada berkas fisik tambahan yang perlu diunggah.</p>
                    @endforelse
                </div>
            </div>

            <!-- Panel Tombol Simpan Form Ganda (Draf vs Kirim Resmi) -->
            <div class="border-t border-slate-100 pt-4 flex justify-between gap-3 items-center mt-2 font-sans">
                <a href="{{ route('shared.usulan.index') }}" class="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg text-xs font-bold transition-colors">Batal</a>
                
                <div class="flex gap-2">
                    <!-- TOMBOL SIMPAN SEBAGAI DRAF -->
                    <button type="button" onclick="submitForm('draft')" class="px-5 py-2.5 bg-amber-500 hover:bg-amber-600 text-white rounded-lg text-xs font-bold shadow-md transition-all flex items-center gap-1.5">
                        <i data-lucide="file-edit" class="w-4 h-4"></i>
                        Simpan sebagai Draf
                    </button>

                    <!-- TOMBOL KIRIM RESMI -->
                    <button type="button" onclick="submitForm('submit')" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-xs font-bold shadow-md transition-all flex items-center gap-1.5">
                        <i data-lucide="send" class="w-4 h-4"></i>
                        Kirim Usulan Resmi
                    </button>
                </div>
            </div>
        </div>

        <!-- SEKTOR PETA KANVAS RE-PLOTTING KANAN (1/3) -->
        <div class="flex flex-col gap-6">
            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 flex flex-col gap-4">
                <h4 class="font-bold text-slate-800 flex items-center gap-2 text-sm border-b border-slate-100 pb-2">
                    <i data-lucide="map" class="text-emerald-700 w-4.5 h-4.5"></i>
                    Batas Lahan Kelompok Tani
                </h4>
                
                <!-- SINKRONISASI DIPERBAIKI: Pemanggilan Blade Component yang benar dan aman -->
                @include('components.map-geospatial', [
                    'mode' => 'edit',
                    'inputId' => 'wktCoordinates',
                    'wktData' => $koordinatWktLama,
                    'mapHeight' => 'h-52'
                ])
                
                <!-- Input Tersembunyi untuk Form Submission -->
                <input type="hidden" name="polygon_coordinates" id="wktCoordinates" value="{{ $koordinatWktLama }}">
            </div>

            <!-- Petunjuk Juknis Syarat Penilaian Cepat -->
            <div class="bg-amber-50/70 border border-amber-200 rounded-xl p-5 text-xs text-amber-800 leading-relaxed font-medium flex gap-3">
                <i data-lucide="info" class="w-5 h-5 text-amber-700 shrink-0 mt-0.5"></i>
                <div>
                    <h5 class="font-bold mb-1 text-amber-950 font-sans">Aturan Pengiriman Resmi:</h5>
                    Tombol "Kirim Usulan Resmi" hanya dapat dieksekusi apabila semua syarat wajib (*) dan peta polygon lahan telah terunggah secara lengkap. Gunakan "Simpan sebagai Draf" jika Anda masih melengkapi data lapangan.
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    function submitForm(action) {
        document.getElementById('actionType').value = action;

        // PROTEKSI EDIT MODE: Validasi Kelengkapan Dokumen saat klik Kirim Resmi
        if (action === 'submit') {
            let incompleteSyarat = [];

            // 1. Cek polygon geospasial
            const wktCoords = document.getElementById('wktCoordinates').value.trim();
            if (!wktCoords) {
                incompleteSyarat.push("Plot area batas spasial lahan tani (Peta Polygon)");
            }

            // 2. Cek semua baris syarat fisik wajib (*) di DOM
            const rows = document.querySelectorAll('.syarat-revisi-row');
            rows.forEach(row => {
                const isRequired = row.getAttribute('data-required') === '1';
                const hasExisting = row.getAttribute('data-hasfile') === '1';
                const syaratId = row.getAttribute('data-id');
                const name = row.getAttribute('data-nama');
                
                // Cari input file baru
                const fileInput = document.getElementById(`file_revisi_input_${syaratId}`);
                const hasNewUpload = fileInput && fileInput.files && fileInput.files.length > 0;

                // Jika berkas wajib, dan tidak ada file lama DAN tidak ada upload baru, maka dianggap tidak lengkap
                if (isRequired && !hasExisting && !hasNewUpload) {
                    incompleteSyarat.push(name);
                }
            });

            // 3. Blokir kirim resmi jika ditemukan berkas cacat
            if (incompleteSyarat.length > 0) {
                const formatMessage = incompleteSyarat.map((item, idx) => `${idx + 1}. ${item}`).join('\n');
                alert(`Gagal mengirimkan revisi usulan resmi!\n\nPersyaratan berikut belum lengkap:\n${formatMessage}\n\nSilakan unggah berkas yang diminta, atau tekan tombol "Simpan sebagai Draf" jika Anda ingin mencicil data terlebih dahulu.`);
                return; // INTERUPSI SUBMIT
            }
        }

        document.getElementById('formUsulan').submit();
    }

    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>
@endsection