@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);
    }
    .dokumen-revisi {
        border-left: 4px solid #f59e0b !important;
        background: #fffbeb !important;
    }
    
    /* Sidebar right - sticky */
    .sidebar-right {
        position: sticky;
        top: 20px;
    }
    
    /* Info grid lebih rapi */
    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 24px;
    }
    .info-grid .info-item {
        padding: 4px 0;
    }
    .info-grid .info-item .label {
        font-size: 11px;
        color: #718096;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }
    .info-grid .info-item .value {
        font-weight: 600;
        font-size: 14px;
        color: #2d3748;
    }
    .info-grid .info-item.full-width {
        grid-column: 1 / -1;
    }
    
    @media (max-width: 768px) {
        .info-grid {
            grid-template-columns: 1fr;
        }
        .info-grid .info-item.full-width {
            grid-column: 1;
        }
        .sidebar-right {
            position: relative;
            top: 0;
        }
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h2>Pemeriksaan Dokumen</h2>
            <p class="text-muted mb-0">{{ $pengajuan->nomor_pengajuan }} — {{ $pengajuan->nama_bangunan }}</p>
        </div>
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <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> 
    <span id="revisiCountInfo">Mendeteksi dokumen yang direvisi...</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="row">
    {{-- MAIN CONTENT - KIRI (8 kolom) --}}
    <div class="col-lg-8">
        <!-- Informasi Pengajuan -->
        <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="info-grid">
                    <div class="info-item">
                        <div class="label">Nomor Pengajuan</div>
                        <div class="value">{{ $pengajuan->nomor_pengajuan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Status</div>
                        <div class="value">
                            <span class="badge-status {{ $pengajuan->status }}" style="font-size:12px; padding: 4px 12px;">
                                {{ $pengajuan->status_label ?? $pengajuan->status }}
                            </span>
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="label">Nama Pemohon</div>
                        <div class="value">{{ $pengajuan->nama_lengkap ?? $pengajuan->pemohon->name ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Jenis Kepemilikan</div>
                        <div class="value">{{ $pengajuan->jenis_kepemilikan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Jenis Tanda Pengenal</div>
                        <div class="value">{{ $pengajuan->jenis_tanda_pengenal ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Nomor Tanda Pengenal</div>
                        <div class="value">{{ $pengajuan->nomor_tanda_pengenal ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Nomor Kontak</div>
                        <div class="value">{{ $pengajuan->nomor_kontak ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Email</div>
                        <div class="value">{{ $pengajuan->email ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Nama Bangunan</div>
                        <div class="value">{{ $pengajuan->nama_bangunan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Fungsi Bangunan</div>
                        <div class="value">{{ $pengajuan->fungsi_bangunan ?? $pengajuan->jenis_bangunan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Sub Fungsi Bangunan</div>
                        <div class="value">{{ $pengajuan->sub_fungsi_bangunan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Luas Bangunan</div>
                        <div class="value">{{ $pengajuan->luas_bangunan ?? '-' }} m²</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Ketinggian Bangunan</div>
                        <div class="value">{{ $pengajuan->ketinggian_bangunan ?? '-' }} meter</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Jumlah Lantai</div>
                        <div class="value">{{ $pengajuan->jumlah_lantai ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Jumlah Unit Bangunan</div>
                        <div class="value">{{ $pengajuan->jumlah_unit_bangunan ?? '-' }}</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Tanggal Pengajuan</div>
                        <div class="value">
    {{ $pengajuan->created_at ? date('d/m/Y H:i', strtotime($pengajuan->created_at)) : '-' }}
</div>
                    </div>
                    <div class="info-item">
                        <div class="label">Tahun Rencana Pembangunan</div>
                        <div class="value">{{ $pengajuan->tahun_rencana_bangun ?? '-' }}</div>
                    </div>
                    <div class="info-item full-width">
                        <div class="label">Alamat Bangunan</div>
                        <div class="value">{{ $pengajuan->alamat_bangunan ?? '-' }}</div>
                    </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
                // ==============================================
                // FILTER DOKUMEN BERDASARKAN JUMLAH LANTAI & FUNGSI
                // ==============================================

                // 1. DOKUMEN UTAMA (semua wajib)
                $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)',
                ];

                // Item yang tampil hanya untuk lantai 1
                $lantai1Items = [1,2,3,4,5,6,7,12,13,14,15,17,18,19,20];

                // 2. FILTER BERDASARKAN JUMLAH LANTAI
                $jumlahLantai = $pengajuan->jumlah_lantai ?? 1;
                $checklistUtamaFiltered = [];

                foreach ($checklistUtama as $index => $doc) {
                    $itemId = $index + 1;
                    if ($jumlahLantai >= 2) {
                        // Tampilkan semua
                        $checklistUtamaFiltered[] = $doc;
                    } else {
                        // Lantai 1: hanya tampilkan item yang ada di $lantai1Items
                        if (in_array($itemId, $lantai1Items)) {
                            $checklistUtamaFiltered[] = $doc;
                        }
                    }
                }

                // 3. DOKUMEN PERUMAHAN (jika fungsi = Hunian)
                $checklistPerumahan = [];
                if ($pengajuan->fungsi_bangunan === 'Hunian') {
                    $checklistPerumahan = [
                        'Denah/Skema Perletakan IPAL (Skala 1:200/1:500/1:1000)',
                        'Detail IPAL (Skala 1:20/1:25)',
                    ];
                }

                // 4. DOKUMEN FASUM (jika fungsi bukan Hunian)
                $checklistFasum = [];
                if ($pengajuan->fungsi_bangunan && $pengajuan->fungsi_bangunan !== 'Hunian') {
                    $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)',
                    ];
                }

                // 5. GABUNGKAN SEMUA DOKUMEN YANG SUDAH DIFILTER
                $requiredDocs = array_merge($checklistUtamaFiltered, $checklistPerumahan, $checklistFasum);

                // 6. AMBIL DOKUMEN YANG SUDAH DIUPLOAD
                $uploadedDocs = $pengajuan->dokumen->keyBy('nama_dokumen');

                // 7. DOKUMEN TAMBAHAN (opsional)
                $extraDocs = $pengajuan->dokumen->filter(function($d) use ($requiredDocs) {
                    return !in_array($d->nama_dokumen, $requiredDocs);
                });

                // 8. GABUNGKAN SEMUA UNTUK DITAMPILKAN
                $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-dokumen-nama="{{ $item->nama_dokumen }}"
                         data-uploaded="{{ $item->uploaded ? 'true' : 'false' }}" 
                         data-last-updated="{{ $item->uploaded && $item->dokumen->updated_at ? $item->dokumen->updated_at->timestamp : 0 }}"
                         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>
                                @else
                                    <span class="badge bg-danger ms-2" style="font-size:10px;">Belum Diupload</span>
                                @endif
                                @if($item->uploaded && session('revisi_dokumen_ids') && in_array($item->dokumen->id, session('revisi_dokumen_ids')))
                                    <span class="badge bg-warning ms-2" style="font-size:10px;">
                                        <i class="bi bi-arrow-repeat me-1"></i> Direvisi
                                    </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

                    <div class="mt-4">
                        <!-- Tombol aksi bisa ditambahkan di sini -->
                    </div>
                @else
                    @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>
    </div>

    {{-- SIDEBAR - KANAN (4 kolom) --}}
    <div class="col-lg-4">
        <div class="sidebar-right">
            <!-- Chat -->
            <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 ?? 'Pemohon' }}
                    </div>
                </div>
            </div>

            <!-- Riwayat -->
            <div class="content-card">
                <div class="card-header"><i class="bi bi-clock-history me-2"></i>Riwayat Aktivitas</div>
                <div class="card-body" style="max-height: 500px; overflow-y: auto;">
                    <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 text-center py-3">Belum ada riwayat aktivitas.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- Tombol Kembali -->
            <div class="mt-4">
                <a href="{{ route('pemeriksa.index') }}" class="btn btn-outline-secondary w-100" style="border-radius:10px; padding: 10px;">
                    <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // ========== DETEKSI DOKUMEN YANG DIREVISI ==========
    @if(session('revisi_success'))
        console.log('Revisi detected! Mencari dokumen yang direvisi...');
        
        // Ambil data revisi dokumen dari session
        const revisiDokumenIds = @json(session('revisi_dokumen_ids', []));
        
        if (revisiDokumenIds.length > 0) {
            console.log('Dokumen yang direvisi:', revisiDokumenIds);
            
            let resetCount = 0;
            
            // Reset hanya dokumen yang ID-nya ada dalam revisiDokumenIds
            revisiDokumenIds.forEach(dokumenId => {
                const statusSelect = document.querySelector(`.verifikasi-status[data-doc-id="${dokumenId}"]`);
                const keteranganInput = document.querySelector(`.verifikasi-keterangan[data-doc-id="${dokumenId}"]`);
                const dokumenCard = document.querySelector(`.dokumen-card[data-dokumen-id="${dokumenId}"]`);
                
                if (statusSelect) {
                    // Hanya reset jika status sebelumnya 'tidak_lengkap'
                    if (statusSelect.value === 'tidak_lengkap') {
                        statusSelect.value = 'belum_diperiksa';
                        statusSelect.dispatchEvent(new Event('change'));
                        resetCount++;
                    }
                }
                
                if (keteranganInput && keteranganInput.value.trim() !== '') {
                    keteranganInput.value = '';
                    keteranganInput.dispatchEvent(new Event('input'));
                }
                
                if (dokumenCard) {
                    // Tambah highlight untuk dokumen yang direvisi
                    dokumenCard.classList.add('dokumen-revisi');
                    
                    // Tambah tooltip
                    const titleDiv = dokumenCard.querySelector('.d-flex.justify-content-between');
                    if (titleDiv && !titleDiv.querySelector('.revisi-badge')) {
                        const badge = document.createElement('span');
                        badge.className = 'badge bg-warning ms-2';
                        badge.style.fontSize = '10px';
                        badge.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i> Direvisi';
                        titleDiv.querySelector('div').appendChild(badge);
                    }
                }
            });
            
            // Update info di alert
            const revisiCountInfo = document.getElementById('revisiCountInfo');
            if (revisiCountInfo) {
                if (resetCount > 0) {
                    revisiCountInfo.innerHTML = `${resetCount} dokumen yang direvisi telah direset ke status "Belum Diperiksa".`;
                } else {
                    revisiCountInfo.innerHTML = `${revisiDokumenIds.length} dokumen direvisi, namun statusnya sudah sesuai.`;
                }
            }
            
            if (resetCount > 0) {
                // Tampilkan notifikasi tambahan
                const notifDiv = document.createElement('div');
                notifDiv.className = 'alert alert-warning alert-dismissible fade show';
                notifDiv.style.position = 'fixed';
                notifDiv.style.bottom = '20px';
                notifDiv.style.right = '20px';
                notifDiv.style.zIndex = '9999';
                notifDiv.style.maxWidth = '400px';
                notifDiv.style.borderRadius = '12px';
                notifDiv.innerHTML = `
                    <i class="bi bi-arrow-repeat me-2"></i>
                    <strong>${resetCount} dokumen direvisi!</strong><br>
                    Dokumen yang diganti pemohon sudah direset ke status "Belum Diperiksa".<br>
                    <small class="text-muted">Dokumen lain mempertahankan status sebelumnya.</small>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.body.appendChild(notifDiv);
                setTimeout(() => notifDiv.remove(), 8000);
            }
        } else {
            const revisiCountInfo = document.getElementById('revisiCountInfo');
            if (revisiCountInfo) {
                revisiCountInfo.innerHTML = `Tidak ada dokumen yang direvisi.`;
            }
        }
    @endif
    @if($pengajuan->status == 'ditolak')
<div class="alert alert-danger">
    <h5>Pengajuan Ditolak</h5>

    <p>
        Pengajuan ini telah ditolak oleh pemeriksa dan tidak dapat diproses kembali.
    </p>
</div>
@endif
    
    // ========== AUTO-SAVE PER FILE (AJAX) ==========
    const pengajuanId = {{ $pengajuan->id }};
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

    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);
                }
            } 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);
            }
        }
    }

    // Event listener untuk perubahan status
    document.querySelectorAll('.verifikasi-status').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 (jika ada)
    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;
            });

            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);
            }
        });
    }

    // Final Decision
    const formKeputusan = document.getElementById('formKeputusanAkhir');
    if (formKeputusan) {
        formKeputusan.addEventListener('submit', function(e) {
            const confirmMsg = 'Pastikan semua file yang diperlukan sudah Anda periksa.\n\nFile dengan status "Lengkap" akan dipertahankan, file "Tidak Lengkap" akan direvisi.\n\nLanjutkan?';
            if (!confirm(confirmMsg)) e.preventDefault();
        });
    }
});
</script>
@endsection