@extends('monitoring-verifikasi.index')

@php
    $idSubTab = 'verifikasi';
    $subTabs = [
        'lengkap'       => ['label' => 'Data Lengkap',  'ikon' => 'tabler-checklist',              'view' => 'monitoring-verifikasi.petani-lengkap',       'jumlah' => $petaniLengkap->total()],
        'terverifikasi' => ['label' => 'Terverifikasi', 'ikon' => 'tabler-rosette-discount-check', 'view' => 'monitoring-verifikasi.petani-terverifikasi', 'jumlah' => $petaniTerverifikasi->total()],
    ];
@endphp

@push('scripts')
<script>
    (function () {
        const gayaTombolSwal = () => ({
            buttonsStyling: false,
            customClass: { confirmButton: 'btn btn-primary me-2', cancelButton: 'btn btn-label-secondary' },
        });

        // Langkah verifikasi: 1 Input Skor → 2 Input Wajib → 3 Input Lainnya.
        function tampilkanLangkah(stepper, aktif) {
            stepper.querySelectorAll('.langkah-pane').forEach((pane) => {
                pane.classList.toggle('d-none', Number(pane.dataset.langkah) !== aktif);
            });

            stepper.querySelectorAll('.langkah-item').forEach((item) => {
                const n = Number(item.dataset.langkah);
                const nomor = item.querySelector('.langkah-nomor');
                const selesai = n < aktif;

                nomor.className = 'avatar-initial rounded-circle langkah-nomor '
                    + (n === aktif ? 'bg-primary text-white' : selesai ? 'bg-label-success' : 'bg-label-secondary');
                nomor.innerHTML = selesai ? '<i class="icon-base ti tabler-check icon-sm"></i>' : n;

                // Langkah yang sudah dilewati bisa diklik untuk kembali.
                if (selesai) item.dataset.keLangkah = n; else delete item.dataset.keLangkah;
                item.classList.toggle('cursor-pointer', selesai);
            });

            stepper.closest('.kartu-rincian-isi')?.scrollTo({ top: 0, behavior: 'smooth' });
        }

        document.addEventListener('click', function (e) {
            const tombol = e.target.closest('[data-ke-langkah]');
            if (!tombol) return;
            const stepper = tombol.closest('.stepper-verifikasi');
            if (stepper) tampilkanLangkah(stepper, Number(tombol.dataset.keLangkah));
        });

        // Konfirmasi sebelum menandai Terverifikasi.
        document.addEventListener('submit', function (e) {
            const form = e.target.closest('.form-verifikasi-petani');
            if (!form || form.dataset.terkonfirmasi) return;

            e.preventDefault();
            const kirim = () => { form.dataset.terkonfirmasi = '1'; form.submit(); };
            const pesan = `Data petani ${form.dataset.nama} sudah diperiksa dan akan ditandai Terverifikasi.`;

            if (!window.Swal) {
                if (confirm(pesan)) kirim();
                return;
            }

            Swal.fire({
                icon: 'question',
                title: 'Verifikasi Data Petani',
                text: pesan,
                showCancelButton: true,
                confirmButtonText: 'Ya, Verifikasi',
                cancelButtonText: 'Batal',
                ...gayaTombolSwal(),
            }).then((r) => { if (r.isConfirmed) kirim(); });
        });

        // Kembalikan ke Draf (Belum Lengkap / ada temuan setelah diverifikasi): wajib isi catatan untuk enumerator.
        const escapeHtml = (teks) => String(teks).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';');

        document.addEventListener('submit', function (e) {
            const form = e.target.closest('.form-kembalikan-draf');
            if (!form || form.dataset.terkonfirmasi) return;

            e.preventDefault();
            const kirim = (catatan) => {
                form.querySelector('input[name="catatan"]').value = catatan.trim();
                form.dataset.terkonfirmasi = '1';
                form.submit();
            };

            if (!window.Swal) {
                const catatan = prompt('Catatan untuk enumerator (wajib):');
                if (catatan && catatan.trim()) kirim(catatan);
                return;
            }

            Swal.fire({
                icon: 'warning',
                title: form.dataset.judul || 'Kembalikan ke Draf',
                html: `Data petani <strong>${escapeHtml(form.dataset.nama)}</strong> akan dikembalikan ke <strong>Draf</strong>.<br>${escapeHtml(form.dataset.pesan || '')}`,
                input: 'textarea',
                inputPlaceholder: 'Contoh: Foto KTP belum diunggah, luas lahan perlu dicek ulang...',
                inputAttributes: { maxlength: 2000, rows: 4 },
                showCancelButton: true,
                confirmButtonText: 'Kirim',
                cancelButtonText: 'Batal',
                inputValidator: (nilai) => !nilai?.trim() && 'Catatan wajib diisi.',
                ...gayaTombolSwal(),
            }).then((r) => { if (r.isConfirmed) kirim(r.value); });
        });

        @if (session('verifikasi_success') || session('verifikasi_error') || $errors->has('catatan'))
            window.addEventListener('load', function () {
                const pesan = @json(session('verifikasi_success') ?? session('verifikasi_error') ?? $errors->first('catatan'));
                const ikon = @json(session('verifikasi_success') ? 'success' : 'error');
                window.Swal ? Swal.fire({ icon: ikon, text: pesan, ...gayaTombolSwal() }) : alert(pesan);
            });
        @endif
    })();
</script>
@endpush