@extends('layouts.app')
@section('title', 'Periksa Dokumen')

@section('styles')
<style>
    .timeline {
        position: relative;
        padding-left: 20px;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 16px;
        border-left: 2px solid #e2e8f0;
        padding-left: 20px;
        margin-left: 10px;
    }
    .timeline-item .timeline-date {
        font-size: 11px;
        color: #718096;
        margin-bottom: 4px;
    }
    .timeline-item .timeline-title {
        font-weight: 600;
        font-size: 13px;
        color: var(--primary-dark);
    }
    .timeline-item .timeline-desc {
        font-size: 12px;
        color: #4a5568;
    }
    .timeline-icon {
        position: absolute;
        left: -9px;
        top: 0;
        background: white;
        padding: 2px;
    }
    .badge-status {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 40px;
        font-size: 12px;
        font-weight: 600;
    }
    .badge-status.ditugaskan, .badge-status.diperiksa {
        background: #dbeafe;
        color: #1e40af;
    }
    .badge-status.diverifikasi {
        background: #c6f6d5;
        color: #22543d;
    }
    .badge-status.revisi {
        background: #ffedd5;
        color: #9a3412;
    }
    .badge-status.disetujui {
        background: #c6f6d5;
        color: #22543d;
    }
    .save-indicator {
        font-size: 11px;
    }
    .dokumen-card {
        transition: all 0.2s;
    }
    .dokumen-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .modal-keputusan .modal-header {
        border-bottom: none;
        padding-bottom: 0;
    }
    .modal-keputusan .modal-footer {
        border-top: none;
        padding-top: 0;
    }
    .keputusan-icon {
        font-size: 48px;
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
    .keputusan-detail {
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
    }
    .dokumen-status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        margin-left: 6px;
    }
    .dokumen-status-badge.lengkap {
        background: #c6f6d5;
        color: #22543d;
    }
    .dokumen-status-badge.tidak_lengkap {
        background: #fed7d7;
        color: #9b2c2c;
    }
    .dokumen-status-badge.belum_diperiksa {
        background: #e2e8f0;
        color: #4a5568;
    }
    select option:disabled {
        color: #999;
        background: #f5f5f5;
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Pemeriksaan Dokumen</h2>
            <p>{{ $pengajuan->nomor_pengajuan }} — {{ $pengajuan->nama_bangunan }}</p>
        </div>
        <div class="d-flex align-items-center gap-3">
            <span class="badge-status {{ $pengajuan->status }}" style="font-size:14px; padding: 8px 20px;">{{ $pengajuan->status_label }}</span>
            <a href="{{ route('pengajuan.cetak', $pengajuan->id) }}" class="btn btn-accent" style="border-radius:10px; padding: 8px 16px;">
                <i class="bi bi-printer me-1"></i> Cetak Checklist
            </a>
        </div>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" style="border-radius:12px;">
    <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('revisi_success'))
<div class="alert alert-info alert-dismissible fade show" style="border-radius:12px; background: #e0e7ff; border-color: #c7d2fe; color: #1e40af;">
    <i class="bi bi-arrow-repeat me-2"></i> 
    <strong>Revisi Diterima!</strong> Dokumen yang direvisi oleh pemohon telah direset ke status "Belum Diperiksa". Silakan periksa ulang dokumen tersebut.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    <div class="col-lg-8">
        <!-- Informasi -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-info-circle me-2"></i>Informasi Pengajuan</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Pemohon</small><br>
                        <strong>{{ $pengajuan->pemohon->name }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jenis Bangunan</small><br>
                        <strong>{{ $pengajuan->jenis_bangunan }}</strong>
                    </div>
                    <div class="col-12 mb-2">
                        <small class="text-muted">Alamat</small><br>
                        <strong>{{ $pengajuan->alamat_bangunan }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dokumen - Verification -->
        <div class="content-card mb-4">
            <div class="card-header">
                <i class="bi bi-file-earmark-check me-2"></i>Verifikasi Dokumen
                <small class="text-muted ms-2">(setiap perubahan langsung tersimpan)</small>
            </div>
            <div class="card-body">
                @php
                $checklistUtama = [
                    'Site Plan (Skala 1:200/1:500/1:1000)',
                    'Denah dan Perletakan Septictank (Skala 1:100/1:200)',
                    'Tampak Depan (Skala 1:100/1:200)',
                    'Tampak Samping (Skala 1:100/1:200)',
                    'Tampak Belakang (Skala 1:100/1:200)',
                    'Potongan Melintang (Skala 1:100/1:200)',
                    'Potongan Memanjang (Skala 1:100/1:200)',
                    'Portal Pembesian (Skala 1:50/1:100)',
                    'Detail Pembesian (Skala 1:20/1:25)',
                    'Potongan Tangga dan Detail (Skala 1:20/1:25)',
                    'Penulangan Lantai dan Detail (Skala 1:20/1:25)',
                    'Denah Pondasi (Skala 1:100/1:200)',
                    'Detail Pondasi (Skala 1:20/1:25)',
                    'Detail Septictank (Skala 1:20/1:25)',
                    'Detail Stop Kontak dan Detail Penerangan (Skala 1:100/1:200)',
                    'Denah APAR Untuk 3 Lantai Ke Atas (Skala 1:100/1:200)',
                    'Skei Lokasi',
                    'Surat Pertanggung Jawaban Konstruksi',
                    'KTP Kedua Belah Pihak (Pemilik dan Perencana)',
                    'Surat Kuasa (jika Pemohon berbeda dengan Pemilik)',
                ];

                $checklistPerumahan = [];
                if ($pengajuan->jenis_bangunan === 'Rumah Tinggal') {
                    $checklistPerumahan = [
                        'Denah/Skema Perletakan IPAL (Skala 1:200/1:500/1:1000)',
                        'Detail IPAL (Skala 1:20/1:25)',
                    ];
                }

                $checklistFasum = [];
                if ($pengajuan->jenis_bangunan === 'Fasilitas Umum') {
                    $checklistFasum = [
                        'Rencana Jaringan Air Bersih (Skala 1:100/1:200)',
                        'Rencana Jaringan Air Kotor (Skala 1:100/1:200)',
                        'Rencana Jaringan Listrik (Skala 1:100/1:200)',
                        'Rencana Drainase (Skala 1:100/1:200)',
                        'Rencana Persampahan (Skala 1:100/1:200)',
                        'Rencana Fasilitas Parkir (Skala 1:100/1:200)',
                        'Rencana Ruang Terbuka Hijau/RTH (Skala 1:100/1:200)',
                    ];
                }

                $requiredDocs = array_merge($checklistUtama, $checklistPerumahan, $checklistFasum);
                $uploadedDocs = $pengajuan->dokumen->keyBy('nama_dokumen');

                $extraDocs = $pengajuan->dokumen->filter(function($d) use ($requiredDocs) {
                    return !in_array($d->nama_dokumen, $requiredDocs);
                });

                $allDocs = collect($requiredDocs)->map(function($nama) use ($uploadedDocs) {
                    return (object)[
                        'nama_dokumen' => $nama,
                        'uploaded' => $uploadedDocs->has($nama),
                        'dokumen' => $uploadedDocs->get($nama)
                    ];
                })->concat($extraDocs->map(function($d) {
                    return (object)[
                        'nama_dokumen' => $d->nama_dokumen,
                        'uploaded' => true,
                        'dokumen' => $d
                    ];
                }));
                @endphp

                @if(in_array($pengajuan->status, ['ditugaskan', 'diperiksa']))
                    @foreach($allDocs as $i => $item)
                    <div class="border rounded-3 p-3 mb-3 dokumen-card" data-dokumen-id="{{ $item->uploaded ? $item->dokumen->id : '' }}" data-uploaded="{{ $item->uploaded ? 'true' : 'false' }}" style="background: #f7fafc; border-left: 4px solid {{ $item->uploaded ? 'var(--primary)' : '#cbd5e0' }} !important;">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <strong>{{ $i + 1 }}. {{ $item->nama_dokumen }}</strong>
                                @if($item->uploaded)
                                    <span class="badge bg-secondary ms-2" style="font-size:10px;">{{ strtoupper($item->dokumen->tipe_file) }}</span>
                                    @if($item->dokumen->pemeriksaan)
                                        <span class="dokumen-status-badge {{ $item->dokumen->pemeriksaan->status }}">
                                            {{ $item->dokumen->pemeriksaan->status_label }}
                                        </span>
                                    @endif
                                @else
                                    <span class="badge bg-danger ms-2" style="font-size:10px;">Belum Diupload</span>
                                @endif
                            </div>
                            @if($item->uploaded)
                                <a href="{{ asset('storage/' . $item->dokumen->file_path) }}" target="_blank" class="btn btn-sm btn-outline-primary" style="border-radius:8px;">
                                    <i class="bi bi-eye me-1"></i> Lihat File
                                </a>
                            @endif
                        </div>

                        @if($item->uploaded)
                            <div class="row align-items-end mt-3">
                                <div class="col-md-4 mb-2">
                                    <label class="form-label fw-bold" style="font-size:12px;">Status Pemeriksaan</label>
                                    <select name="status" class="form-select form-select-sm verifikasi-status" data-doc-id="{{ $item->dokumen->id }}" style="border-radius:8px;" required>
                                        <option value="belum_diperiksa" {{ (!$item->dokumen->pemeriksaan || $item->dokumen->pemeriksaan->status === 'belum_diperiksa') ? 'selected' : '' }}>-- Belum Diperiksa --</option>
                                        <option value="lengkap" {{ ($item->dokumen->pemeriksaan && $item->dokumen->pemeriksaan->status === 'lengkap') ? 'selected' : '' }}>✅ Lengkap</option>
                                        <option value="tidak_lengkap" {{ ($item->dokumen->pemeriksaan && $item->dokumen->pemeriksaan->status === 'tidak_lengkap') ? 'selected' : '' }}>❌ Tidak Lengkap</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label class="form-label fw-bold" style="font-size:12px;">Keterangan</label>
                                    <input type="text" name="keterangan" class="form-control form-control-sm verifikasi-keterangan" data-doc-id="{{ $item->dokumen->id }}" value="{{ $item->dokumen->pemeriksaan->keterangan ?? '' }}" placeholder="Tulis komentar jika ditolak..." style="border-radius:8px;">
                                </div>
                                <div class="col-md-2 mb-2">
                                    <span class="save-indicator text-success small" style="display:none;" data-doc-id="{{ $item->dokumen->id }}"><i class="bi bi-check-circle-fill"></i> Tersimpan</span>
                                </div>
                            </div>
                        @else
                            <div class="mt-2 text-muted small">
                                <i class="bi bi-info-circle"></i> Pemohon belum mengunggah dokumen ini.
                            </div>
                        @endif
                    </div>
                    @endforeach

                    <!-- Tombol Simpan Semua (tetap ada, tapi tidak wajib) -->
                    <div class="mt-4">
                        <button type="button" id="btnSimpanSemua" class="btn btn-outline-primary w-100 py-2" style="border-radius:10px;">
                            <i class="bi bi-cloud-arrow-up me-2"></i> Simpan Semua Pemeriksaan (Opsional)
                        </button>
                    </div>
                @else
                    {{-- Hanya tampilkan status jika sudah tidak dalam mode edit --}}
                    @foreach($allDocs as $i => $item)
                    <div class="border rounded-3 p-3 mb-3" style="background: #f7fafc;">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ $i+1 }}. {{ $item->nama_dokumen }}</strong>
                                @if($item->uploaded)
                                    <span class="badge bg-secondary ms-2">{{ strtoupper($item->dokumen->tipe_file) }}</span>
                                @else
                                    <span class="badge bg-danger ms-2">Belum Diupload</span>
                                @endif
                            </div>
                            @if($item->uploaded)
                                <a href="{{ asset('storage/' . $item->dokumen->file_path) }}" target="_blank" class="btn btn-sm btn-outline-primary">Lihat</a>
                            @endif
                        </div>
                        @if($item->uploaded && $item->dokumen->pemeriksaan)
                        <div class="mt-2">
                            <span class="badge-status {{ $item->dokumen->pemeriksaan->status === 'lengkap' ? 'diverifikasi' : ($item->dokumen->pemeriksaan->status === 'tidak_lengkap' ? 'ditolak' : 'pending') }}">
                                {{ $item->dokumen->pemeriksaan->status_label }}
                            </span>
                            @if($item->dokumen->pemeriksaan->keterangan)
                                <small class="ms-2 text-muted">{{ $item->dokumen->pemeriksaan->keterangan }}</small>
                            @endif
                        </div>
                        @endif
                    </div>
                    @endforeach
                @endif
            </div>
        </div>

        <!-- Final Decision -->
        @if(in_array($pengajuan->status, ['ditugaskan', 'diperiksa']))
        <div class="content-card mb-4" style="border: 2px solid var(--primary);">
            <div class="card-header" style="background: linear-gradient(135deg, #e0e7ff, #c7d2fe);">
                <i class="bi bi-clipboard-check me-2"></i>Keputusan Akhir
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('pemeriksa.selesaikan', $pengajuan->id) }}" id="formKeputusanAkhir">
                    @csrf
                    
                    <!-- Status Ringkasan -->
                    <div class="alert alert-info mb-3" style="border-radius:10px;" id="statusRingkasan">
                        <div class="d-flex justify-content-between align-items-center flex-wrap">
                            <div>
                                <i class="bi bi-info-circle-fill me-2"></i>
                                <span id="statusRingkasanText">Memuat status dokumen...</span>
                            </div>
                            <div class="mt-1 mt-sm-0">
                                <span class="badge bg-success me-1" id="badgeLengkap">0 ✅</span>
                                <span class="badge bg-danger me-1" id="badgeTidakLengkap">0 ❌</span>
                                <span class="badge bg-secondary" id="badgeBelum">0 ⏳</span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Keputusan</label>
                            <select name="keputusan" id="keputusan" class="form-select" required style="border-radius:10px;">
                                <option value="">-- Pilih --</option>
                                <option value="diverifikasi">✅ Verifikasi (Semua Lengkap)</option>
                                <option value="revisi">❌ Kembalikan untuk Revisi</option>
                                <option value="ditolak">⛔ Tolak Pengajuan</option>
                            </select>
                            <div class="form-text text-muted small" id="keputusanHint"></div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Catatan Akhir</label>
                            <textarea name="catatan" id="catatan_akhir" class="form-control" rows="2" placeholder="Catatan untuk pemohon..." style="border-radius:10px;"></textarea>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="btnKeputusanAkhir" style="padding: 10px 32px;">
                        <i class="bi bi-send-check-fill me-1"></i> Kirim Keputusan
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>

    <div class="col-lg-4">
        <!-- Chat Button -->
        <div class="content-card mb-4">
            <div class="card-body text-center" style="padding:20px;">
                <a href="{{ route('chat.index', $pengajuan->id) }}" class="btn btn-primary w-100" style="border-radius:12px; padding:12px 24px; font-size:15px;">
                    <i class="bi bi-chat-dots-fill me-2"></i>Chat dengan Pemohon
                </a>
                <div class="mt-2" style="font-size:12px; color:#718096;">
                    {{ $pengajuan->pemohon->name }}
                </div>
            </div>
        </div>

        <!-- Timeline -->
        <div class="content-card">
            <div class="card-header"><i class="bi bi-clock-history me-2"></i>Riwayat</div>
            <div class="card-body">
                <div class="timeline">
                    @forelse($pengajuan->riwayat as $r)
                    <div class="timeline-item">
                        <div class="timeline-icon">
                            <i class="bi bi-circle-fill" style="font-size: 8px; color: var(--primary);"></i>
                        </div>
                        <div class="timeline-date">{{ $r->created_at->format('d M Y, H:i') }}</div>
                        <div class="timeline-title">{{ $r->aksi }}</div>
                        <div class="timeline-desc">{{ $r->keterangan }}</div>
                    </div>
                    @empty
                    <p class="text-muted mb-0">Belum ada riwayat aktivitas.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<a href="{{ route('pemeriksa.index') }}" class="btn btn-outline-secondary mt-3" style="border-radius:10px;">
    <i class="bi bi-arrow-left me-1"></i> Kembali
</a>

<!-- ==================== MODAL KONFIRMASI KEPUTUSAN AKHIR ==================== -->
<div class="modal fade modal-keputusan" id="confirmKeputusanModal" tabindex="-1" aria-labelledby="confirmKeputusanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-header" style="background: var(--primary); color: #fff; border-radius:20px 20px 0 0;">
                <h5 class="modal-title fw-bold" id="confirmKeputusanModalLabel">
                    <i class="bi bi-clipboard-check me-2"></i> Konfirmasi Keputusan Akhir
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <div class="keputusan-icon" id="keputusanIcon">📋</div>
                    <h5 id="keputusanTitle" style="font-weight:700;">Apakah Anda yakin?</h5>
                    <p class="text-muted" id="keputusanDesc">Periksa kembali keputusan yang akan Anda ambil.</p>
                </div>

                <div class="keputusan-detail mb-3">
                    <div class="row">
                        <div class="col-6">
                            <small class="text-muted">Pengajuan</small><br>
                            <strong>#{{ $pengajuan->nomor_pengajuan }}</strong>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Pemohon</small><br>
                            <strong>{{ $pengajuan->pemohon->name }}</strong>
                        </div>
                    </div>
                </div>

                <div class="alert" id="keputusanAlert" style="border-radius:12px;">
                    <div id="keputusanAlertContent"></div>
                </div>

                @if($pengajuan->dokumen->count() > 0)
                <div class="mt-3">
                    <small class="text-muted">Ringkasan Pemeriksaan Dokumen:</small>
                    <div class="row mt-2">
                        <div class="col-4 text-center">
                            <span class="badge bg-success" style="font-size:14px; padding:6px 12px;" id="jmlLengkap">0</span>
                            <br><small>Lengkap</small>
                        </div>
                        <div class="col-4 text-center">
                            <span class="badge bg-danger" style="font-size:14px; padding:6px 12px;" id="jmlTidakLengkap">0</span>
                            <br><small>Tidak Lengkap</small>
                        </div>
                        <div class="col-4 text-center">
                            <span class="badge bg-secondary" style="font-size:14px; padding:6px 12px;" id="jmlBelum">0</span>
                            <br><small>Belum Diperiksa</small>
                        </div>
                    </div>
                </div>
                @endif

                <hr>

                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmKeputusanCheck">
                    <label class="form-check-label" for="confirmKeputusanCheck">
                        Saya menyatakan bahwa keputusan ini sudah <strong>benar dan final</strong> berdasarkan hasil pemeriksaan dokumen.
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:10px;">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmKeputusanBtn" disabled style="border-radius:10px; padding: 8px 24px;">
                    <i class="bi bi-send-check-fill me-1"></i> <span id="confirmKeputusanText">Ya, Kirim Keputusan</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ========== RESET DOKUMEN REVISI (via SESSION) ==========
    @if(session('revisi_success'))
        console.log('Revisi detected! Resetting dokumen...');
        
        let resetCount = 0;
        let resetIds = [];
        
        // Reset semua status yang statusnya 'tidak_lengkap' menjadi 'belum_diperiksa'
        const statusSelects = document.querySelectorAll('.verifikasi-status');
        
        statusSelects.forEach(select => {
            if (select.value === 'tidak_lengkap') {
                const docId = select.getAttribute('data-doc-id');
                select.value = 'belum_diperiksa';
                resetIds.push(docId);
                resetCount++;
                
                // Trigger change event untuk auto-save
                select.dispatchEvent(new Event('change'));
            }
        });
        
        // Reset semua keterangan
        const keteranganInputs = document.querySelectorAll('.verifikasi-keterangan');
        keteranganInputs.forEach(input => {
            const docId = input.getAttribute('data-doc-id');
            if (resetIds.includes(docId) && input.value.trim() !== '') {
                input.value = '';
                input.dispatchEvent(new Event('input'));
            }
        });
        
        if (resetCount > 0) {
            console.log(`${resetCount} dokumen direset ke status "Belum Diperiksa"`);
            
            // Tampilkan notifikasi tambahan
            const notifDiv = document.createElement('div');
            notifDiv.className = 'alert alert-info alert-dismissible fade show';
            notifDiv.style.position = 'fixed';
            notifDiv.style.bottom = '20px';
            notifDiv.style.right = '20px';
            notifDiv.style.zIndex = '9999';
            notifDiv.style.maxWidth = '350px';
            notifDiv.style.borderRadius = '12px';
            notifDiv.innerHTML = `
                <i class="bi bi-arrow-repeat me-2"></i>
                <strong>${resetCount} dokumen direset!</strong><br>
                Dokumen yang direvisi sudah direset ke status "Belum Diperiksa".
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(notifDiv);
            
            setTimeout(() => notifDiv.remove(), 5000);
        }
    @endif
    
    // ========== AUTO-SAVE PER FILE (AJAX) ==========
    const pengajuanId = {{ $pengajuan->id }};
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

    // Fungsi menyimpan satu dokumen
    async function saveVerifikasi(dokumenId, status, keterangan) {
        const indicator = document.querySelector(`.save-indicator[data-doc-id="${dokumenId}"]`);
        if (indicator) {
            indicator.style.display = 'inline';
            indicator.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyimpan...';
        }

        try {
            const response = await fetch('{{ route("pemeriksa.verifikasi.single") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    pengajuan_id: pengajuanId,
                    dokumen_id: dokumenId,
                    status: status,
                    keterangan: keterangan
                })
            });

            const result = await response.json();
            if (result.success) {
                if (indicator) {
                    indicator.innerHTML = '<i class="bi bi-check-circle-fill"></i> Tersimpan';
                    setTimeout(() => {
                        indicator.style.display = 'none';
                    }, 2000);
                }
                // Update status badge
                updateStatusBadge(dokumenId, status);
                // Update ringkasan
                updateRingkasan();
                // Update keputusan options
                updateKeputusanOptions();
            } else {
                throw new Error(result.message || 'Gagal menyimpan');
            }
        } catch (error) {
            console.error('Save error:', error);
            if (indicator) {
                indicator.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-danger"></i> Gagal';
                setTimeout(() => {
                    indicator.style.display = 'none';
                }, 3000);
            }
        }
    }

    // Fungsi update status badge
    function updateStatusBadge(dokumenId, status) {
        const card = document.querySelector(`.dokumen-card[data-dokumen-id="${dokumenId}"]`);
        if (!card) return;
        
        const existingBadge = card.querySelector('.dokumen-status-badge');
        if (existingBadge) {
            const statusMap = {
                'lengkap': { class: 'lengkap', label: 'Lengkap' },
                'tidak_lengkap': { class: 'tidak_lengkap', label: 'Tidak Lengkap' },
                'belum_diperiksa': { class: 'belum_diperiksa', label: 'Belum Diperiksa' }
            };
            const info = statusMap[status] || statusMap['belum_diperiksa'];
            existingBadge.className = `dokumen-status-badge ${info.class}`;
            existingBadge.textContent = info.label;
        }
    }

    // Fungsi update ringkasan
    function updateRingkasan() {
        let jmlLengkap = 0;
        let jmlTidakLengkap = 0;
        let jmlBelum = 0;

        document.querySelectorAll('.verifikasi-status').forEach(select => {
            const val = select.value;
            if (val === 'lengkap') jmlLengkap++;
            else if (val === 'tidak_lengkap') jmlTidakLengkap++;
            else if (val === 'belum_diperiksa') jmlBelum++;
        });

        document.getElementById('badgeLengkap').textContent = `${jmlLengkap} ✅`;
        document.getElementById('badgeTidakLengkap').textContent = `${jmlTidakLengkap} ❌`;
        document.getElementById('badgeBelum').textContent = `${jmlBelum} ⏳`;

        const total = jmlLengkap + jmlTidakLengkap + jmlBelum;
        let statusText = '';
        if (jmlTidakLengkap > 0) {
            statusText = `⚠️ Terdapat ${jmlTidakLengkap} dokumen yang TIDAK LENGKAP`;
        } else if (jmlBelum > 0) {
            statusText = `⏳ ${jmlBelum} dokumen masih BELUM DIPERIKSA`;
        } else if (jmlLengkap === total && total > 0) {
            statusText = `✅ Semua dokumen LENGKAP`;
        } else {
            statusText = '📋 Silakan periksa semua dokumen';
        }
        document.getElementById('statusRingkasanText').textContent = statusText;

        // Update alert color
        const alert = document.getElementById('statusRingkasan');
        if (jmlTidakLengkap > 0) {
            alert.className = 'alert alert-danger mb-3';
        } else if (jmlBelum > 0) {
            alert.className = 'alert alert-warning mb-3';
        } else if (jmlLengkap === total && total > 0) {
            alert.className = 'alert alert-success mb-3';
        } else {
            alert.className = 'alert alert-info mb-3';
        }
    }

  // ==================== LOGIKA UTAMA ====================
// Jika ada minimal 1 dokumen Tidak Lengkap:
//   - Keputusan otomatis = Revisi
//   - Verifikasi → disabled
//   - Revisi → aktif
//   - Tolak → aktif
// Jika semua dokumen Lengkap:
//   - Verifikasi → aktif
//   - Revisi → aktif
//   - Tolak → aktif
//   - Tidak ada yang otomatis dipilih

function updateKeputusanOptions() {
    const select = document.getElementById('keputusan');
    const hint = document.getElementById('keputusanHint');
    
    // Hitung jumlah dokumen
    const jmlTidakLengkap = document.querySelectorAll('.verifikasi-status[value="tidak_lengkap"]').length;
    const jmlBelum = document.querySelectorAll('.verifikasi-status[value="belum_diperiksa"]').length;
    const jmlLengkap = document.querySelectorAll('.verifikasi-status[value="lengkap"]').length;
    const total = document.querySelectorAll('.verifikasi-status').length;

    // Ambil option elements
    const optionVerifikasi = select.querySelector('option[value="diverifikasi"]');
    const optionRevisi = select.querySelector('option[value="revisi"]');
    const optionTolak = select.querySelector('option[value="ditolak"]');

    // RESET semua option ke enabled terlebih dahulu
    optionVerifikasi.disabled = false;
    optionRevisi.disabled = false;
    optionTolak.disabled = false;

    // Jika ada dokumen Tidak Lengkap
    if (jmlTidakLengkap > 0) {
        // Disable Verifikasi
        optionVerifikasi.disabled = true;
        
        // Otomatis pilih Revisi
        if (select.value === 'diverifikasi' || select.value === '') {
            select.value = 'revisi';
        }
        
        // Tampilkan hint
        hint.innerHTML = `
            <span class="text-danger">
                ⚠️ Ada <strong>${jmlTidakLengkap}</strong> dokumen <strong>Tidak Lengkap</strong>. 
                Wajib pilih <strong>"Kembalikan untuk Revisi"</strong>.
            </span>
        `;
    } 
    // Jika semua dokumen Lengkap (dan total > 0)
    else if (jmlLengkap === total && total > 0) {
        // Semua option sudah enabled (dari reset di atas)
        // Tidak otomatis pilih, biarkan user memilih
        // Jika sebelumnya kosong atau tidak valid, biarkan saja
        
        // Tampilkan hint
        hint.innerHTML = `
            <span class="text-success">
                ✅ Semua dokumen <strong>Lengkap</strong>. Anda dapat memilih:
                <strong>Verifikasi</strong>, <strong>Revisi</strong>, atau <strong>Tolak</strong>.
            </span>
        `;
    }
    // Jika ada yang Belum Diperiksa (tapi tidak ada yang Tidak Lengkap)
    else if (jmlBelum > 0) {
        // Disable Verifikasi (karena belum semua diperiksa)
        optionVerifikasi.disabled = true;
        
        // Jika sebelumnya pilih Verifikasi, pindahkan ke Revisi
        if (select.value === 'diverifikasi') {
            select.value = 'revisi';
        }
        
        // Tampilkan hint
        hint.innerHTML = `
            <span class="text-warning">
                ⏳ Ada <strong>${jmlBelum}</strong> dokumen <strong>Belum Diperiksa</strong>. 
                Periksa semua dokumen sebelum memilih <strong>Verifikasi</strong>.
            </span>
        `;
    }
    // Jika belum ada dokumen yang diperiksa sama sekali
    else if (total === 0) {
        optionVerifikasi.disabled = true;
        hint.innerHTML = `
            <span class="text-muted">📋 Belum ada dokumen yang diperiksa.</span>
        `;
    }
}

    // Event listener untuk perubahan status
    const statusSelects = document.querySelectorAll('.verifikasi-status');
    statusSelects.forEach(select => {
        select.addEventListener('change', function(e) {
            const dokumenId = this.getAttribute('data-doc-id');
            const status = this.value;
            const keteranganInput = document.querySelector(`.verifikasi-keterangan[data-doc-id="${dokumenId}"]`);
            const keterangan = keteranganInput ? keteranganInput.value : '';
            saveVerifikasi(dokumenId, status, keterangan);
        });
    });

    // Event listener untuk keterangan (dengan debounce)
    const keteranganInputs = document.querySelectorAll('.verifikasi-keterangan');
    let debounceTimer;
    keteranganInputs.forEach(input => {
        input.addEventListener('input', function(e) {
            clearTimeout(debounceTimer);
            const dokumenId = this.getAttribute('data-doc-id');
            const keterangan = this.value;
            const statusSelect = document.querySelector(`.verifikasi-status[data-doc-id="${dokumenId}"]`);
            const status = statusSelect ? statusSelect.value : 'belum_diperiksa';
            debounceTimer = setTimeout(() => {
                saveVerifikasi(dokumenId, status, keterangan);
            }, 800);
        });
    });

    // ========== TOMBOL SIMPAN SEMUA (OPSIONAL) ==========
    const btnSimpanSemua = document.getElementById('btnSimpanSemua');
    if (btnSimpanSemua) {
        btnSimpanSemua.addEventListener('click', async function() {
            const allStatuses = document.querySelectorAll('.verifikasi-status');
            const allKeterangan = document.querySelectorAll('.verifikasi-keterangan');
            const data = {};
            allStatuses.forEach(select => {
                const docId = select.getAttribute('data-doc-id');
                data[docId] = {
                    status: select.value,
                    keterangan: ''
                };
            });
            allKeterangan.forEach(input => {
                const docId = input.getAttribute('data-doc-id');
                if (data[docId]) {
                    data[docId].keterangan = input.value;
                }
            });

            // Kirim massal
            const formData = new FormData();
            formData.append('_token', csrfToken);
            for (const [docId, val] of Object.entries(data)) {
                formData.append(`verifikasi[${docId}][status]`, val.status);
                formData.append(`verifikasi[${docId}][keterangan]`, val.keterangan);
            }

            try {
                const response = await fetch('{{ route("pemeriksa.verifikasi_massal", $pengajuan->id) }}', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                if (result.success) {
                    alert('Semua pemeriksaan berhasil disimpan!');
                    location.reload();
                } else {
                    alert('Gagal menyimpan: ' + (result.message || 'Terjadi kesalahan'));
                }
            } catch (error) {
                alert('Error: ' + error.message);
            }
        });
    }

    // ========== KEPUTUSAN AKHIR DENGAN MODAL KONFIRMASI ==========
    const btnKeputusan = document.getElementById('btnKeputusanAkhir');
    const formKeputusan = document.getElementById('formKeputusanAkhir');
    const selectKeputusan = document.getElementById('keputusan');
    const catatanAkhir = document.getElementById('catatan_akhir');

    // Inisialisasi ringkasan dan keputusan options
    updateRingkasan();
    updateKeputusanOptions();

    if (btnKeputusan && formKeputusan) {
        btnKeputusan.addEventListener('click', function() {
            const keputusan = selectKeputusan.value;
            const catatan = catatanAkhir.value.trim();

            // Validasi
            if (!keputusan) {
                alert('❌ Silakan pilih keputusan terlebih dahulu!');
                return;
            }

            // Validasi tambahan: jika ada dokumen tidak lengkap dan pilih verifikasi
            const jmlTidakLengkap = document.querySelectorAll('.verifikasi-status[value="tidak_lengkap"]').length;
            const jmlBelum = document.querySelectorAll('.verifikasi-status[value="belum_diperiksa"]').length;

            if (keputusan === 'diverifikasi') {
                if (jmlTidakLengkap > 0) {
                    alert('❌ Tidak bisa memilih "Verifikasi" karena ada dokumen yang Tidak Lengkap!');
                    return;
                }
                if (jmlBelum > 0) {
                    alert('❌ Tidak bisa memilih "Verifikasi" karena ada dokumen yang Belum Diperiksa!');
                    return;
                }
            }

            // Hitung statistik dokumen
            let jmlLengkap = 0;
            let jmlTidakLengkapStat = 0;
            let jmlBelumStat = 0;

            document.querySelectorAll('.verifikasi-status').forEach(select => {
                const val = select.value;
                if (val === 'lengkap') jmlLengkap++;
                else if (val === 'tidak_lengkap') jmlTidakLengkapStat++;
                else if (val === 'belum_diperiksa') jmlBelumStat++;
            });

            // Set data ke modal
            const icon = document.getElementById('keputusanIcon');
            const title = document.getElementById('keputusanTitle');
            const desc = document.getElementById('keputusanDesc');
            const alertDiv = document.getElementById('keputusanAlert');
            const alertContent = document.getElementById('keputusanAlertContent');
            const confirmBtnText = document.getElementById('confirmKeputusanText');

            // Update statistik di modal
            document.getElementById('jmlLengkap').textContent = jmlLengkap;
            document.getElementById('jmlTidakLengkap').textContent = jmlTidakLengkapStat;
            document.getElementById('jmlBelum').textContent = jmlBelumStat;

            // Warna dan konten berdasarkan keputusan
            if (keputusan === 'diverifikasi') {
                icon.textContent = '✅';
                title.textContent = 'Verifikasi Pengajuan';
                desc.textContent = 'Anda akan menyetujui pengajuan ini karena semua dokumen lengkap.';
                alertDiv.className = 'alert alert-success';
                alertContent.innerHTML = `
                    <strong>📋 Verifikasi</strong><br>
                    Pengajuan akan berstatus <strong>DIVERIFIKASI</strong> dan diteruskan ke Admin untuk diterbitkan PBG-nya.
                    ${catatan ? `<br><br><small><strong>Catatan:</strong> ${catatan}</small>` : ''}
                `;
                confirmBtnText.textContent = 'Ya, Verifikasi Sekarang';
            } else if (keputusan === 'revisi') {
                icon.textContent = '🔄';
                title.textContent = 'Kembalikan untuk Revisi';
                desc.textContent = 'Anda akan mengembalikan pengajuan ini untuk diperbaiki pemohon.';
                alertDiv.className = 'alert alert-warning';
                alertContent.innerHTML = `
                    <strong>📝 Revisi</strong><br>
                    <strong>${jmlTidakLengkapStat}</strong> dokumen yang berstatus <strong>Tidak Lengkap</strong> akan dikembalikan ke pemohon untuk diperbaiki.
                    Dokumen yang sudah <strong>Lengkap</strong> akan tetap dipertahankan.
                    ${catatan ? `<br><br><small><strong>Catatan:</strong> ${catatan}</small>` : ''}
                `;
                confirmBtnText.textContent = 'Ya, Kirim Revisi';
            } else if (keputusan === 'ditolak') {
                icon.textContent = '⛔';
                title.textContent = 'Tolak Pengajuan';
                desc.textContent = 'Anda akan menolak pengajuan ini. Tindakan ini tidak dapat dibatalkan.';
                alertDiv.className = 'alert alert-danger';
                alertContent.innerHTML = `
                    <strong>⛔ Penolakan</strong><br>
                    Pengajuan akan berstatus <strong>DITOLAK</strong> dan tidak dapat diproses lebih lanjut.
                    ${catatan ? `<br><br><small><strong>Catatan:</strong> ${catatan}</small>` : ''}
                `;
                confirmBtnText.textContent = 'Ya, Tolak Pengajuan';
            }

            // Reset checkbox
            document.getElementById('confirmKeputusanCheck').checked = false;
            document.getElementById('confirmKeputusanBtn').disabled = true;

            // Tampilkan modal
            const modal = new bootstrap.Modal(document.getElementById('confirmKeputusanModal'));
            modal.show();
        });
    }

    // Event checkbox konfirmasi keputusan
    const confirmCheck = document.getElementById('confirmKeputusanCheck');
    if (confirmCheck) {
        confirmCheck.addEventListener('change', function() {
            document.getElementById('confirmKeputusanBtn').disabled = !this.checked;
        });
    }

    // Event tombol konfirmasi keputusan
    const confirmBtn = document.getElementById('confirmKeputusanBtn');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', function() {
            this.disabled = true;
            this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Memproses...';
            document.getElementById('formKeputusanAkhir').submit();
        });
    }
});
</script>
@endsection