

<?php $__env->startSection('title', 'Impor Massal Usulan Bantuan | PRADIPA'); ?>

<?php $__env->startSection('content'); ?>
<div class="flex flex-col gap-6">
    <!-- PANEL SIMULASI GANTI AKUN (QUICK SWITCHER FOR TESTING) -->
    <div class="bg-amber-50 border border-amber-200 p-4 rounded-xl shadow-sm flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div class="flex items-start gap-3">
            <div class="bg-amber-100 text-amber-800 p-2 rounded-lg shrink-0 mt-0.5">
                <i data-lucide="shield-alert" class="w-5 h-5 text-amber-700"></i>
            </div>
            <div>
                <span class="text-xs font-bold text-amber-950 block">Mode Simulasi Pengujian Aktif</span>
                <p class="text-[11px] text-amber-800 leading-relaxed mt-0.5">Saat ini Anda sedang menguji halaman Impor Massal. Gunakan tombol di samping untuk mensimulasikan wilayah kabupaten pengirim usulan agar dropdown Excel ter-generate sesuai master data kabupaten terkait.</p>
            </div>
        </div>
        <!-- Tombol Pilihan Wilayah Simulasi -->
        <div class="flex flex-wrap gap-2 shrink-0">
            <div class="bg-white border border-slate-200 rounded-lg p-1 flex gap-1 shadow-inner">
                <button type="button" onclick="setSimulasiRole(3, 'Kab. Demak')" id="btnSimDemak" class="px-3 py-1.5 rounded-md text-xs font-bold transition-all bg-emerald-600 text-white shadow-sm">
                    Simulasi Kab. Demak (ID: 3)
                </button>
                <button type="button" onclick="setSimulasiRole(4, 'Kab. Temanggung')" id="btnSimTemanggung" class="px-3 py-1.5 rounded-md text-xs font-bold text-slate-600 hover:bg-slate-50 transition-all">
                    Simulasi Kab. Temanggung (ID: 4)
                </button>
            </div>
        </div>
    </div>

    <!-- 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">Impor Massal Usulan Bantuan</h2>
            <p class="text-sm text-slate-500 mt-1 font-medium">Unggah ratusan usulan pengajuan sarana produksi pertanian sekaligus secara massal menggunakan file Excel (.xlsx, .xls) atau CSV.</p>
        </div>
        <!-- Tombol Unduh Template -->
        <a href="<?php echo e(route('kabupaten.usulan.download_template')); ?>" class="px-4 py-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 rounded-lg text-sm font-semibold transition-all border border-emerald-200 flex items-center gap-1.5 self-start md:self-auto">
            <i data-lucide="download" class="w-4 h-4"></i>
            Unduh Template Excel (.xlsx)
        </a>
    </div>

    <!-- NOTIFIKASI ERROR LOG DETAILED (JIKA VALIDASI NIP GAGAL) -->
    <?php if($errors->any()): ?>
        <div class="bg-rose-50 border border-rose-200 text-rose-800 p-5 rounded-xl shadow-sm">
            <div class="flex items-center gap-2 text-rose-950 font-bold mb-2">
                <i data-lucide="alert-triangle" class="text-rose-600"></i>
                <span>Gagal Mengimpor Berkas - Temuan Masalah Validasi:</span>
            </div>
            <p class="text-xs text-rose-700 leading-relaxed mb-3">Untuk memastikan kebersihan data, sistem membatalkan seluruh transaksi impor jika ditemukan satu saja baris data yang tidak valid. Harap perbaiki temuan baris berikut di Excel Anda:</p>
            <div class="max-h-40 overflow-y-auto bg-white border border-rose-100 rounded-lg p-3 font-mono text-[11px] space-y-1.5 text-rose-600 custom-scrollbar">
                <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div>• <?php echo e($error); ?></div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- Tampilan Toast Flash Message Sukses -->
    <?php if(session('success')): ?>
        <div class="bg-emerald-100 border-l-4 border-emerald-600 text-emerald-800 p-4 rounded-xl shadow-sm text-sm flex items-center gap-2">
            <i data-lucide="check-circle" class="text-emerald-600"></i>
            <span class="font-medium"><?php echo e(session('success')); ?></span>
        </div>
    <?php endif; ?>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- PANEL UNGGAH BERKAS (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-6">
            <h4 class="font-bold text-slate-800 border-b border-slate-100 pb-2 flex items-center gap-2">
                <i data-lucide="file-up" class="text-emerald-700"></i>
                Upload Berkas Pengajuan
            </h4>

            <form action="<?php echo e(route('kabupaten.usulan.import_proses')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <!-- Input tersembunyi untuk simulasi pengujian ID user di controller -->
                <input type="hidden" name="simulasi_user_id" id="simulasiUserId" value="3">

                <div class="flex flex-col gap-5">
                    <!-- Dropzone Area -->
                    <div class="border-2 border-dashed border-slate-200 hover:border-emerald-500 bg-slate-50 hover:bg-emerald-50/20 p-8 rounded-xl text-center cursor-pointer transition-all flex flex-col items-center justify-center gap-3 group relative">
                        <input type="file" name="berkas_import" id="fileInput" accept=".xlsx, .xls, .csv" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full z-10">
                        <div class="bg-white p-3 rounded-full text-slate-400 group-hover:text-emerald-600 group-hover:scale-105 shadow-sm transition-all">
                            <i data-lucide="file-spreadsheet" class="w-8 h-8" style="width:2rem; height:2rem;"></i>
                        </div>
                        <div>
                            <span class="text-slate-700 font-bold block text-sm" id="fileNameDisplay">Pilih berkas file Excel atau CSV Anda</span>
                            <span class="text-slate-400 text-xs mt-1 block">Mendukung berkas berekstensi .xlsx, .xls, atau .csv (Maksimal 4MB)</span>
                        </div>
                    </div>

                    <!-- Tombol Mulai Impor -->
                    <div class="flex justify-end border-t border-slate-100 pt-4">
                        <button type="submit" class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold shadow-sm transition-all flex items-center gap-2">
                            <i data-lucide="upload-cloud" class="w-4.5 h-4.5"></i>
                            Mulai Proses Impor Massal
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- PANEL PETUNJUK FORMAT (KANAN - 1/3) -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 flex flex-col justify-between gap-6">
            <div class="flex flex-col gap-4">
                <h4 class="font-bold text-slate-800 border-b border-slate-100 pb-2 flex items-center gap-2 text-sm">
                    <i data-lucide="info" class="text-amber-600"></i>
                    Petunjuk Pengisian Data
                </h4>
                <div class="text-xs text-slate-600 space-y-3 leading-relaxed">
                    <p>Harap perhatikan kaidah pengisian kolom template berikut agar terhindar dari penolakan database dinas:</p>
                    <ul class="list-disc pl-5 space-y-2 text-slate-500">
                        <li><b>NAMA_KELOMPOK_TANI</b> diisi dengan nama kelompok tani resmi (Contoh: <code class="font-mono text-emerald-800 bg-emerald-50 px-1.5 rounded">Tani Mulyo I</code>).</li>
                        <li><b>KECAMATAN</b> diisi sesuai kecamatan tempat kelompok tani tersebut berada (Contoh: <code class="font-mono text-emerald-800 bg-emerald-50 px-1.5 rounded">Mranggen</code>).</li>
                        <li><b>DESA</b> diisi sesuai nama desa/kelurahan kelompok tani tersebut berada (Contoh: <code class="font-mono text-emerald-800 bg-emerald-50 px-1.5 rounded">Kembangarum</code>).</li>
                        <li><b>NAMA_PROGRAM_BANTUAN</b> diisi dengan memilih langsung program bantuan resmi dari dropdown yang telah disediakan di template Excel.</li>
                        <li><b>LUAS_LAHAN_HEKTAR</b> menggunakan angka desimal dengan format titik (Contoh: <code class="font-mono bg-slate-100 px-1.5 rounded">1.5</code> atau <code class="font-mono bg-slate-100 px-1.5 rounded">2.3</code>).</li>
                    </ul>
                </div>
            </div>
            
            <div class="p-3.5 bg-emerald-50 rounded-xl border border-emerald-200 text-[11px] text-emerald-800 leading-relaxed">
                <span class="font-bold block text-emerald-950 mb-0.5">Keuntungan Kolom Baru:</span>
                Dengan kolom Kecamatan dan Desa, operator tidak perlu lagi menghafal Nomor Induk (NIP). Sistem akan otomatis mencari berdasarkan lokasi geografis kelompok tani secara presisi!
            </div>
        </div>

    </div>

    <!-- RIWAYAT IMPOR & FITUR ROLLBACK SEKALI KLIK -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-100">
            <h4 class="font-bold text-slate-800 text-sm">Daftar Riwayat Batch Impor Massal Anda</h4>
            <p class="text-xs text-slate-400 mt-1">Gunakan tombol rollback jika Anda tidak sengaja mengimpor file draf yang salah atau rusak.</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs divide-y divide-slate-100">
                <thead class="bg-slate-50">
                    <tr class="text-slate-400 uppercase text-[10px] font-bold tracking-wider">
                        <th class="py-4 px-6">Batch ID Pelacak</th>
                        <th class="py-4 px-6">Tanggal Pengimporan</th>
                        <th class="py-4 px-6 text-center">Jumlah Baris Usulan</th>
                        <th class="py-4 px-6 text-center">Aksi Batalkan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-700">
                    <?php $__empty_1 = true; $__currentLoopData = $riwayatImport; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $r): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="py-4 px-6 font-bold font-mono text-slate-800"><?php echo e($r->batch_import_id); ?></td>
                            <td class="py-4 px-6 font-medium"><?php echo e(\Carbon\Carbon::parse($r->tanggal_usulan)->translatedFormat('d F Y H:i')); ?> WIB</td>
                            <td class="py-4 px-6 text-center font-extrabold text-emerald-800"><?php echo e($r->jumlah_usulan); ?> data</td>
                            <td class="py-4 px-6 text-center">
                                <form action="<?php echo e(route('kabupaten.usulan.rollback', $r->batch_import_id)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin membatalkan pengunggahan ini? Seluruh <?php echo e($r->jumlah_usulan); ?> data usulan pada batch ini akan dihapus bersih dari sistem!');">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="px-3 py-1.5 bg-rose-50 hover:bg-rose-100 text-rose-700 font-bold text-[10px] rounded-lg border border-rose-200 transition-colors flex items-center gap-1.5 mx-auto">
                                        <i data-lucide="rotate-ccw" class="w-3.5 h-3.5" style="width:0.875rem; height:0.875rem;"></i>
                                        Rollback Batch
                                    </button>
                                </form>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="4" class="py-8 text-center text-slate-400 font-medium">Belum ada riwayat pengimporan draf secara massal yang tercatat di database.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    // Membaca file input dan memperbarui nama file terpilih di UI dropzone
    const fileInput = document.getElementById('fileInput');
    const display = document.getElementById('fileNameDisplay');

    if (fileInput) {
        fileInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                display.innerText = `Terpilih: ${this.files[0].name}`;
            }
        });
    }

    // Fungsi penunjang simulasi pergantian role/kabupaten pengirim di frontend
    function setSimulasiRole(userId, namaKab) {
        document.getElementById('simulasiUserId').value = userId;

        const btnDemak = document.getElementById('btnSimDemak');
        const btnTemanggung = document.getElementById('btnSimTemanggung');

        if (userId === 3) {
            btnDemak.className = "px-3 py-1.5 rounded-md text-xs font-bold transition-all bg-emerald-600 text-white shadow-sm";
            btnTemanggung.className = "px-3 py-1.5 rounded-md text-xs font-bold text-slate-600 hover:bg-slate-50 transition-all";
        } else {
            btnDemak.className = "px-3 py-1.5 rounded-md text-xs font-bold text-slate-600 hover:bg-slate-50 transition-all";
            btnTemanggung.className = "px-3 py-1.5 rounded-md text-xs font-bold transition-all bg-emerald-600 text-white shadow-sm";
        }

        const divToast = document.createElement('div');
        divToast.className = "fixed bottom-5 right-5 bg-slate-900 text-white text-xs px-4 py-3 rounded-xl shadow-2xl z-50 flex items-center gap-2 transition-all opacity-0 translate-y-2";
        divToast.innerHTML = `<i data-lucide="info" class="w-4 h-4 text-emerald-400"></i> <span>Berhasil beralih ke simulasi pengirim <b>${namaKab}</b>!</span>`;
        document.body.appendChild(divToast);
        
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        setTimeout(() => {
            divToast.classList.remove('opacity-0', 'translate-y-2');
        }, 100);

        setTimeout(() => {
            divToast.classList.add('opacity-0', 'translate-y-2');
            setTimeout(() => divToast.remove(), 500);
        }, 3000);
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laragon\www\pradipa\resources\views/kabupaten/usulan/import.blade.php ENDPATH**/ ?>