{{--
    Kelengkapan data (terisi X dari total isian) + status Draf/Lengkap/Terverifikasi di kartu Profil Petani.
    Tombol "Tandai Lengkap" hanya untuk enumerator penginput, dan nonaktif selama isian wajib masih kosong.
--}}
@props(['petani'])

@use('App\Enums\StatusDataPetani')
@use('App\Services\Produktivitas\KelengkapanPetani')

@php
    $kelengkapan = KelengkapanPetani::untuk($petani);
    $hitung = $kelengkapan->hitungIsian();
    $wajibKosong = $kelengkapan->jumlahWajibKosong();
    $status = $petani->status ?? StatusDataPetani::DRAFT;
    $bisaTandai = $petani->bisaDitandaiOleh(auth()->user());
@endphp

@php
    // Rincian dipindah ke tooltip supaya kartu Profil tetap pendek (sejajar kartu ringkasan di kanan).
    $rincian = collect([
        "{$hitung['terisi']} dari {$hitung['total']} isian terisi",
        $hitung['tidak_berlaku'] ? "{$hitung['tidak_berlaku']} isian tidak berlaku untuk petani ini" : null,
        $wajibKosong ? "{$wajibKosong} isian wajib masih kosong" : 'Semua isian wajib sudah terisi',
        match (true) {
            $bisaTandai                         => null,
            $status === StatusDataPetani::DRAFT => 'Hanya enumerator penginput yang dapat menandai lengkap',
            $status === StatusDataPetani::LENGKAP => 'Menunggu verifikasi koordinator',
            default                             => null,
        },
        $bisaTandai && $status === StatusDataPetani::LENGKAP ? 'Mengubah data petani akan mengembalikan status ke Draf' : null,
    ])->filter()->implode(' · ');
@endphp

<hr class="my-2">
<div title="{{ $rincian }}" data-bs-toggle="tooltip" data-bs-placement="bottom">
    <div class="d-flex justify-content-between align-items-center" style="font-size: 0.75rem;">
        <span class="d-flex align-items-center gap-1">
            <span class="fw-medium text-heading">Kelengkapan</span>
            <span class="badge badge-sm bg-label-{{ $status->warna() }}">{{ $status->label() }}</span>
            @if ($wajibKosong)
                <span class="badge badge-sm bg-label-danger">{{ $wajibKosong }} wajib</span>
            @endif
        </span>
        <span><span class="text-muted">{{ $hitung['terisi'] }}/{{ $hitung['total'] }}</span> <span class="fw-medium">{{ $hitung['persen'] }}%</span></span>
    </div>
    <div class="progress mt-1" style="height: 4px;">
        <div class="progress-bar {{ $hitung['persen'] >= 100 ? 'bg-success' : '' }}" role="progressbar"
             style="width: {{ $hitung['persen'] }}%;" aria-valuenow="{{ $hitung['persen'] }}" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

@if ($bisaTandai && $status === StatusDataPetani::DRAFT)
    <form method="POST" action="{{ route('petani.status.update', $petani->id) }}" class="form-status-petani mt-2"
          data-judul="Pernyataan Kelengkapan Data"
          data-konfirmasi="Setelah ditandai lengkap, data akan diteruskan ke koordinator untuk diverifikasi."
          data-pernyataan="Saya menyatakan bahwa data petani {{ $petani->nama }} telah saya periksa, sudah lengkap, dan sesuai dengan hasil survei bersama pihak terkait di lapangan. Saya bertanggung jawab atas kebenaran data ini."
          data-tombol="Ya, Tandai Lengkap">
        @csrf
        @method('PUT')
        <input type="hidden" name="status" value="{{ StatusDataPetani::LENGKAP->value }}">
        <input type="hidden" name="pernyataan" value="0">
        <button type="submit" class="btn btn-xs btn-primary w-100" @disabled($wajibKosong > 0)
                @if ($wajibKosong) title="Lengkapi {{ $wajibKosong }} isian wajib terlebih dahulu" @endif>
            <i class="icon-base ti tabler-checks icon-sm me-1"></i>Tandai Sudah Lengkap
        </button>
    </form>
@elseif ($bisaTandai && $status === StatusDataPetani::LENGKAP)
    <form method="POST" action="{{ route('petani.status.update', $petani->id) }}" class="form-status-petani mt-2"
          data-konfirmasi="Batalkan tanda lengkap? Status kembali ke draf.">
        @csrf
        @method('PUT')
        <input type="hidden" name="status" value="{{ StatusDataPetani::DRAFT->value }}">
        <button type="submit" class="btn btn-xs btn-outline-secondary w-100">
            <i class="icon-base ti tabler-arrow-back-up icon-sm me-1"></i>Batalkan Tanda Lengkap
        </button>
    </form>
@endif

@once
    @push('scripts')
        <script>
            // Tombol popup mengikuti warna tombol aplikasi (bukan ungu bawaan SweetAlert).
            const gayaTombolSwal = () => ({
                buttonsStyling: false,
                customClass: { confirmButton: 'btn btn-primary me-2', cancelButton: 'btn btn-label-secondary' },
            });

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

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

                if (!window.Swal) {
                    if (confirm((pernyataan ? pernyataan + '\n\n' : '') + form.dataset.konfirmasi)) kirim();
                    return;
                }

                const opsi = {
                    icon: pernyataan ? 'warning' : 'question',
                    title: form.dataset.judul || undefined,
                    text: form.dataset.konfirmasi,
                    showCancelButton: true,
                    confirmButtonText: form.dataset.tombol || 'Ya',
                    cancelButtonText: 'Batal',
                    ...gayaTombolSwal(),
                };

                // Tandai Lengkap: wajib mencentang pernyataan sebelum bisa lanjut.
                if (pernyataan) {
                    opsi.input = 'checkbox';
                    opsi.inputValue = 0;
                    opsi.inputPlaceholder = pernyataan;
                    opsi.inputValidator = (dicentang) => !dicentang && 'Centang pernyataan terlebih dahulu.';
                    opsi.customClass.input = 'text-start small';
                }

                Swal.fire(opsi).then((r) => { if (r.isConfirmed) kirim(); });
            });

            @if (session('status_petani_info'))
                // Data diubah setelah ditandai lengkap → status kembali ke Draf (KembalikanStatusPetaniKeDraf).
                window.addEventListener('load', function () {
                    const pesan = @json(session('status_petani_info'));
                    window.Swal ? Swal.fire({ icon: 'info', title: 'Status kembali ke Draf', text: pesan, ...gayaTombolSwal() }) : alert(pesan);
                });
            @endif

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