@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;
    }
    .btn-simpan-aktif {
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: white;
        border: none;
    }
    .btn-simpan-aktif:hover {
        background: linear-gradient(135deg, var(--primary-light), var(--primary));
        color: white;
    }
    .dokumen-card {
        transition: all 0.2s;
    }
    .dokumen-card.ada-perubahan {
        border-left: 4px solid #f59e0b !important;
        background: #fffbeb !important;
    }
    /* Status dokumen icons */
.dokumen-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 8px;
}

.dokumen-status-icon.lengkap {
    background: #c6f6d5;
    color: #22543d;
}

.dokumen-status-icon.tidak_lengkap {
    background: #fef3c7;
    color: #b45309;
}

.dokumen-status-icon.belum_diperiksa {
    background: #e2e8f0;
    color: #64748b;
}

/* Badge untuk status dokumen di card */
.dokumen-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.dokumen-badge.lengkap {
    background: #c6f6d5;
    color: #22543d;
}

.dokumen-badge.tidak_lengkap {
    background: #fef3c7;
    color: #b45309;
}

.dokumen-badge.belum_diperiksa {
    background: #e2e8f0;
    color: #64748b;
}
/* Status badge di samping tombol Lihat File */
.dokumen-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    gap: 4px;
}

.dokumen-status-badge.lengkap {
    background: #c6f6d5;
    color: #22543d;
}

.dokumen-status-badge.tidak_lengkap {
    background: #fef3c7;
    color: #b45309;
}

.dokumen-status-badge.belum_diperiksa {
    background: #e2e8f0;
    color: #64748b;
}

.dokumen-status-badge i {
    font-size: 10px;
}
/* Style untuk modal PDF */
#pdfContainer {
    max-height: 85vh;
    overflow: auto;
    background: #f0f2f5;
    padding: 20px;
}

#pdfContainer canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* Style untuk toolbar coretan */
.coretan-toolbar {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    z-index: 100;
}

.modal-fullscreen .modal-body {
    padding: 0;
}

/* Animasi untuk tombol */
.btn-open-pdf {
    transition: all 0.2s;
}

.btn-open-pdf:hover {
    transform: scale(1.05);
}
/* Style untuk toolbar coretan */
.coretan-toolbar-page {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
}

.coretan-toolbar-page button {
    cursor: pointer;
    transition: all 0.2s;
}

.coretan-toolbar-page button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.coretan-toolbar-page button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.coretan-toolbar-page input[type="color"] {
    cursor: pointer;
    border-radius: 4px;
}

.coretan-toolbar-page input[type="range"] {
    cursor: pointer;
}
/* Style untuk instruksi hapus coretan */
.coretan-toolbar-page .hapus-coretan-info {
    color: #6c757d;
    font-size: 10px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px dashed #dee2e6;
}

/* Efek hover untuk canvas saat mode hapus */
#pdfContainer canvas {
    transition: cursor 0.2s;
}

#pdfContainer canvas:active {
    cursor: crosshair;
}

/* Animasi untuk coretan yang akan dihapus */
.coretan-hover {
    animation: pulse-hapus 0.3s ease;
}

@keyframes pulse-hapus {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* ============================================ */
/* STYLE MODAL KONFIRMASI KEPUTUSAN AKHIR */
/* ============================================ */
#konfirmasiKeputusanModal .modal-content {
    animation: slideUp 0.3s ease;
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#konfirmasiContent .info-item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

#konfirmasiContent .info-item:last-child {
    border-bottom: none;
}

#konfirmasiContent .info-item:hover {
    background: #f8f9fa;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
}

#konfirmasiContent .info-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

#konfirmasiContent .info-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
}

#konfirmasiContent .info-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

#konfirmasiContent .info-badge.verifikasi {
    background: #c6f6d5;
    color: #22543d;
}

#konfirmasiContent .info-badge.revisi {
    background: #ffedd5;
    color: #9a3412;
}

#konfirmasiContent .info-badge.ditolak {
    background: #fed7d7;
    color: #9b2c2c;
}

#konfirmasiContent .alert-info-box {
    background: #f0f7ff;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #1a202c;
    border: 1px solid #b8d4f0;
}

#konfirmasiContent .dokumen-revisi-list {
    font-size: 12px;
    color: #9a3412;
    padding-left: 20px;
    margin-top: 4px;
}

#konfirmasiContent .dokumen-revisi-list li {
    padding: 2px 0;
}

/* Modal fullscreen untuk PDF */
.modal-fullscreen .modal-body {
    padding: 0;
}

</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" role="alert">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
@endif
@if($errors->any())
<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
@endif

<div class="row">
    <div class="col-lg-8">
        <!-- ==================== DATA PEMOHON ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-person-badge me-2"></i> Data Pemohon</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jenis Kepemilikan</small><br>
                        <strong>{{ $pengajuan->jenis_kepemilikan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Nama Lengkap</small><br>
                        <strong>{{ $pengajuan->nama_lengkap ?? $pengajuan->pemohon->name ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jenis Tanda Pengenal</small><br>
                        <strong>{{ $pengajuan->jenis_tanda_pengenal ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Nomor Tanda Pengenal</small><br>
                        <strong>{{ $pengajuan->nomor_tanda_pengenal ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Kecamatan</small><br>
                        <strong>{{ $pengajuan->kecamatan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Desa/Kelurahan</small><br>
                        <strong>{{ $pengajuan->kelurahan ?? '-' }}</strong>
                    </div>
                    <div class="col-12 mb-2">
                        <small class="text-muted">Alamat Lengkap</small><br>
                        <strong>{{ $pengajuan->alamat_lengkap ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Nomor Kontak</small><br>
                        <strong>{{ $pengajuan->nomor_kontak ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Email</small><br>
                        <strong>{{ $pengajuan->email ?? '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== A. DATA TANAH ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-file-earmark-text me-2"></i> A. Data Tanah</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Nomor Dokumen Tanah</small><br>
                        <strong>{{ $pengajuan->nomor_dokumen_tanah ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Tanggal Terbit Dokumen Tanah</small><br>
                        <strong>{{ $pengajuan->tanggal_terbit_dokumen_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_dokumen_tanah)->format('d M Y') : '-' }}</strong>
                    </div>
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Luas Tanah (m²)</small><br>
                        <strong>{{ $pengajuan->luas_tanah ? number_format($pengajuan->luas_tanah, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Hak Kepemilikan Tanah</small><br>
                        <strong>{{ $pengajuan->hak_kepemilikan_tanah ?? '-' }}</strong>
                    </div>
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Nama Pemilik Hak Tanah</small><br>
                        <strong>{{ $pengajuan->nama_pemilik_hak_tanah ?? '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== B. LOKASI TANAH ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-geo-alt me-2"></i> B. Lokasi Tanah</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Kecamatan</small><br>
                        <strong>{{ $pengajuan->kecamatan_tanah ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Desa/Kelurahan</small><br>
                        <strong>{{ $pengajuan->kelurahan_tanah ?? '-' }}</strong>
                    </div>
                    <div class="col-12 mb-2">
                        <small class="text-muted">Alamat Lengkap Lokasi Tanah</small><br>
                        <strong>{{ $pengajuan->alamat_bangunan ?? '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== C. PEMANFAATAN TANAH ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-shield-check me-2"></i> C. Pemanfaatan Tanah</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Pemilik Tanah Sama Dengan Pemilik Bangunan</small><br>
                        <strong>{{ $pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan == '1' ? 'Ya' : 'Tidak' }}</strong>
                    </div>
                    @if($pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan == '0')
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Nomor Surat Perjanjian Pemanfaatan Tanah</small><br>
                        <strong>{{ $pengajuan->nomor_surat_perjanjian_pemanfaatan_tanah ?? '-' }}</strong>
                    </div>
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Tanggal Terbit Surat Perjanjian</small><br>
                        <strong>{{ $pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah)->format('d M Y') : '-' }}</strong>
                    </div>
                    <div class="col-md-4 mb-2">
                        <small class="text-muted">Nama Penerima Surat Perjanjian</small><br>
                        <strong>{{ $pengajuan->nama_penerima_surat_perjanjian_pemanfaatan_tanah ?? '-' }}</strong>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- ==================== D. DATA BANGUNAN ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-building me-2"></i> D. Data Bangunan</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Fungsi Bangunan</small><br>
                        <strong>{{ $pengajuan->fungsi_bangunan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Sub Fungsi Bangunan</small><br>
                        <strong>{{ $pengajuan->sub_fungsi_bangunan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Nama Bangunan</small><br>
                        <strong>{{ $pengajuan->nama_bangunan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Luas Bangunan (m²)</small><br>
                        <strong>{{ $pengajuan->luas_bangunan ? number_format($pengajuan->luas_bangunan, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Ketinggian Bangunan (meter)</small><br>
                        <strong>{{ $pengajuan->ketinggian_bangunan ? number_format($pengajuan->ketinggian_bangunan, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jumlah Lantai</small><br>
                        <strong>{{ $pengajuan->jumlah_lantai ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jumlah Lapis Basemen</small><br>
                        <strong>{{ $pengajuan->jumlah_lapis_basemen ?? '0' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Luas Basemen (m²)</small><br>
                        <strong>{{ $pengajuan->luas_basemen ? number_format($pengajuan->luas_basemen, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Jumlah Unit Bangunan</small><br>
                        <strong>{{ $pengajuan->jumlah_unit_bangunan ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Estimasi Jumlah Penghuni</small><br>
                        <strong>{{ $pengajuan->estimasi_jumlah_penghuni ?? '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== E. INTENSITAS BANGUNAN ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-activity me-2"></i> E. Intensitas Bangunan</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-2">
                        <small class="text-muted">Nomor Dokumen KKPR/KRK</small><br>
                        <strong>{{ $pengajuan->nomor_dokumen_kkpr_krk ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Garis Sempadan Bangunan (meter)</small><br>
                        <strong>{{ $pengajuan->garis_sempadan_bangunan ? number_format($pengajuan->garis_sempadan_bangunan, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Koefisien Dasar Bangunan (%)</small><br>
                        <strong>{{ $pengajuan->koefisien_dasar_bangunan ? number_format($pengajuan->koefisien_dasar_bangunan, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Koefisien Lantai Bangunan</small><br>
                        <strong>{{ $pengajuan->koefisien_lantai_bangunan ? number_format($pengajuan->koefisien_lantai_bangunan, 2) : '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Koefisien Dasar Hijau (%)</small><br>
                        <strong>{{ $pengajuan->koefisien_dasar_hijau ? number_format($pengajuan->koefisien_dasar_hijau, 2) : '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== F. DATA PENDUKUNG ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-info-circle me-2"></i> F. Data Pendukung</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Tahun Rencana Pembangunan</small><br>
                        <strong>{{ $pengajuan->tahun_rencana_bangun ?? '-' }}</strong>
                    </div>
                    <div class="col-md-6 mb-2">
                        <small class="text-muted">Tanggal Pengajuan</small><br>
                        <strong>{{ $pengajuan->created_at ? $pengajuan->created_at->format('d M Y, H:i') : '-' }}</strong>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== VERIFIKASI DOKUMEN ==================== -->
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-file-earmark-check me-2"></i> Verifikasi Dokumen</div>
            <div class="card-body">
                @php
                // ========== SESUAI DENGAN CREATE ==========
                $fullChecklistUtama = [
                    '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)',
                ];

                // Filter berdasarkan jumlah lantai
                $lantai = $pengajuan->jumlah_lantai ?? 1;
                $lantai1Items = [1,2,3,4,5,6,7,12,13,14,15,17,18,19,20];
                if ($lantai == 1) {
                    $checklistUtama = [];
                    foreach ($fullChecklistUtama as $idx => $nama) {
                        if (in_array($idx+1, $lantai1Items)) {
                            $checklistUtama[] = $nama;
                        }
                    }
                } else {
                    $checklistUtama = $fullChecklistUtama;
                }

                // Checklist perumahan (SESUAI CREATE: fungsi_bangunan === '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)',
                    ];
                }

                // Checklist fasilitas umum (SESUAI CREATE: fungsi_bangunan !== '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)',
                    ];
                }

                // Gabungkan semua dokumen wajib
                $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
                            ];
                        })
                    );

                // Hitung jumlah dokumen yang belum diperiksa
                $unverifiedCount = 0;
                foreach($allDocs as $item){
                    if($item->uploaded){
                        if(!$item->dokumen->pemeriksaan || $item->dokumen->pemeriksaan->status === 'belum_diperiksa'){
                            $unverifiedCount++;
                        }
                    }
                }
                @endphp

                @foreach($allDocs as $i => $item)
                <div class="border rounded-3 p-3 mb-3 dokumen-card" 
                     data-dokumen-id="{{ $item->uploaded ? $item->dokumen->id : '' }}"
                     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
            <div class="mt-1"><span class="badge bg-danger" style="font-size:10px;">Belum Diupload / Kosong</span></div>
        @endif
    </div>
    @if($item->uploaded)
    <div class="d-flex align-items-center gap-2">
       <button
    type="button"
    class="btn btn-sm btn-outline-primary btn-open-pdf"
    data-file="{{ asset('storage/' . $item->dokumen->file_path) }}"
    data-type="{{ strtolower($item->dokumen->tipe_file) }}"
    data-id="{{ $item->dokumen->id }}"
>
    <i class="bi bi-pencil-square"></i>
    Periksa File
</button>
        <!-- Status Badge Permanen -->
        @php
            $status = $item->dokumen->pemeriksaan->status ?? 'belum_diperiksa';
            $badgeIcon = '';
            $badgeText = '';
            $badgeClass = '';
            
            if ($status === 'lengkap') {
                $badgeIcon = '<i class="bi bi-check-lg"></i>';
                $badgeText = 'Lengkap';
                $badgeClass = 'lengkap';
            } elseif ($status === 'tidak_lengkap') {
                $badgeIcon = '<i class="bi bi-exclamation-lg"></i>';
                $badgeText = 'Perlu Revisi';
                $badgeClass = 'tidak_lengkap';
            } else {
                $badgeIcon = '<i class="bi bi-hourglass"></i>';
                $badgeText = 'Belum Diperiksa';
                $badgeClass = 'belum_diperiksa';
            }
        @endphp
        <span class="dokumen-status-badge {{ $badgeClass }}" id="status-badge-{{ $item->dokumen->id }}">
            {!! $badgeIcon !!} {{ $badgeText }}
        </span>
    </div>
    @endif
</div>

                    @if($item->uploaded)
                        @if(in_array($pengajuan->status, ['ditugaskan', 'diperiksa']))
                        <form method="POST" action="{{ route('pemeriksa.verifikasi_single', [$pengajuan->id, $item->dokumen->id]) }}" class="dokumen-form" data-dokumen-id="{{ $item->dokumen->id }}">
                            @csrf
                            <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" required style="border-radius:8px;">
                                        <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-5 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" value="{{ $item->dokumen->pemeriksaan->keterangan ?? '' }}" placeholder="Tulis komentar jika ditolak..." style="border-radius:8px;">
                                </div>
                                <div class="col-md-3 mb-2">
                                    <button type="submit" class="btn btn-primary btn-sm w-100 btn-simpan-dokumen" style="border-radius:8px; height:38px; font-weight:600;">
                                        <i class="bi bi-save me-1"></i> Simpan
                                    </button>
                                </div>
                            </div>
                        </form>
                        @else
                           @if($item->dokumen->pemeriksaan)
<div class="mt-2 d-flex align-items-center flex-wrap gap-2">
    @php
        $status = $item->dokumen->pemeriksaan->status;
        $icon = '';
        $badgeClass = '';
        $statusText = '';
        
        if ($status === 'lengkap') {
            $icon = '<span class="dokumen-status-icon lengkap"><i class="bi bi-check-lg"></i></span>';
            $badgeClass = 'lengkap';
            $statusText = 'Lengkap';
        } elseif ($status === 'tidak_lengkap') {
            $icon = '<span class="dokumen-status-icon tidak_lengkap"><i class="bi bi-exclamation-lg"></i></span>';
            $badgeClass = 'tidak_lengkap';
            $statusText = 'Perlu Revisi';
        } else {
            $icon = '<span class="dokumen-status-icon belum_diperiksa"><i class="bi bi-hourglass"></i></span>';
            $badgeClass = 'belum_diperiksa';
            $statusText = 'Belum Diperiksa';
        }
    @endphp
    {!! $icon !!}
    <span class="dokumen-badge {{ $badgeClass }}">{{ $statusText }}</span>
    @if($item->dokumen->pemeriksaan->keterangan)
        <small class="text-muted"><i class="bi bi-chat-text me-1"></i>{{ $item->dokumen->pemeriksaan->keterangan }}</small>
    @endif
</div>
@endif
                        @endif
                    @endif
                </div>
                @endforeach
            </div>
        </div>

        <!-- ==================== KEPUTUSAN AKHIR ==================== -->
@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" data-unverified="{{ $unverifiedCount }}">
            @csrf
            
            @php
                // Cek apakah ada dokumen dengan status 'tidak_lengkap'
                $hasTidakLengkap = false;
                foreach($allDocs as $item){
                    if($item->uploaded && $item->dokumen->pemeriksaan){
                        if($item->dokumen->pemeriksaan->status === 'tidak_lengkap'){
                            $hasTidakLengkap = true;
                            break;
                        }
                    }
                }
            @endphp
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Keputusan</label>
                    <select name="keputusan" class="form-select" required style="border-radius:10px;" id="keputusanSelect">
                        <option value="">-- Pilih --</option>
                        <option value="diverifikasi" {{ $hasTidakLengkap ? 'disabled' : '' }}>✅ Verifikasi (Semua Lengkap) {{ $hasTidakLengkap ? '- Tidak bisa dipilih karena ada dokumen tidak lengkap' : '' }}</option>
                        <option value="revisi" {{ $hasTidakLengkap ? 'selected' : '' }}>❌ Kembalikan untuk Revisi</option>
                        <option value="ditolak">⛔ Tolak Pengajuan</option>
                    </select>
                    @if($hasTidakLengkap)
                        <div class="form-text text-warning small">
                            <i class="bi bi-exclamation-triangle-fill"></i> 
                            Ada dokumen berstatus <strong>TIDAK LENGKAP</strong>, opsi Verifikasi dinonaktifkan. 
                            Pilih <strong>Revisi</strong> atau <strong>Tolak</strong>.
                        </div>
                    @endif
                    <div class="form-text text-muted small">
                        Jika pilih Revisi, hanya file yang berstatus <strong>Tidak Lengkap</strong> yang perlu diperbaiki pemohon.
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label fw-bold">Catatan Akhir</label>
                    <textarea name="catatan" class="form-control" rows="2" placeholder="Catatan untuk pemohon..." style="border-radius:10px;"></textarea>
                </div>
            </div>
            
            <!-- Info tambahan: daftar dokumen tidak lengkap -->
            @if($hasTidakLengkap)
            <div class="alert alert-warning mb-3" style="border-radius:10px; font-size:13px;">
                <i class="bi bi-list-check me-2"></i> <strong>Dokumen yang perlu revisi:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($allDocs as $item)
                        @if($item->uploaded && $item->dokumen->pemeriksaan && $item->dokumen->pemeriksaan->status === 'tidak_lengkap')
                            <li>{{ $item->nama_dokumen }}</li>
                        @endif
                    @endforeach
                </ul>
            </div>
            @endif
            
            <button type="button" class="btn btn-primary" style="padding:10px 32px;" id="btnSubmitKeputusan">
                <i class="bi bi-send-check-fill me-1"></i> Kirim Keputusan
            </button>
        </form>
    </div>
</div>
@endif
    </div>

    <div class="col-lg-4">
        <!-- 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->nama_lengkap ?? $pengajuan->pemohon->name ?? '-' }}</div>
            </div>
        </div>
        <!-- Riwayat -->
        <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">
                    @foreach($pengajuan->riwayat as $r)
                    <div class="timeline-item">
                        <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>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Pemeriksaan PDF -->
<div class="modal fade" id="pdfModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pemeriksaan Dokumen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="pdfContainer" style="position:relative; overflow:auto;"></div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================ -->
<!-- MODAL KONFIRMASI KEPUTUSAN AKHIR -->
<!-- ============================================ -->
<div class="modal fade" id="konfirmasiKeputusanModal" tabindex="-1" aria-labelledby="konfirmasiKeputusanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 500px;">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none; padding-bottom: 0;">
                <h5 class="modal-title fw-bold" id="konfirmasiKeputusanModalLabel">
                    <i class="bi bi-shield-check me-2" style="color: var(--primary);"></i>
                    Konfirmasi Keputusan
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="padding: 20px 24px;">
                <!-- Konten akan diisi oleh JavaScript -->
                <div id="konfirmasiContent">
                    <!-- Dynamic content -->
                </div>
            </div>
            <div class="modal-footer" style="border-top: none; padding-top: 0; gap: 10px;">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:10px; padding:10px 24px;">
                    <i class="bi bi-x-circle me-1"></i> Batal
                </button>
                <button type="button" id="konfirmasiYaBtn" class="btn btn-primary" style="border-radius:10px; padding:10px 32px; font-weight:600;">
                    <i class="bi bi-check-circle me-1"></i> Ya, Konfirmasi
                </button>
            </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>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
// ============================================
// SCRIPT UNTUK FITUR CORETAN DOKUMEN
// ============================================

// Set PDF.js worker
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

// Store untuk drawing
const drawingData = {};
let currentDokumenId = null;
let pdfModalInstance = null;
let renderId = 0;

// Fungsi untuk menampilkan notifikasi
function showTempNotification(form, type, message) {
    const oldNotif = form.querySelector('.temp-notif');
    if (oldNotif) oldNotif.remove();
    
    const notif = document.createElement('div');
    notif.className = `temp-notif alert alert-${type} alert-dismissible fade show mt-2 mb-0`;
    notif.style.cssText = 'font-size: 12px; padding: 6px 12px; animation: fadeOut 2s ease-in-out forwards;';
    
    let icon = '';
    if (type === 'success') icon = '<i class="bi bi-check-circle-fill me-1"></i>';
    if (type === 'warning') icon = '<i class="bi bi-exclamation-triangle-fill me-1"></i>';
    if (type === 'info') icon = '<i class="bi bi-info-circle-fill me-1"></i>';
    
    notif.innerHTML = `${icon} ${message}`;
    
    if (!document.querySelector('#temp-notif-style')) {
        const style = document.createElement('style');
        style.id = 'temp-notif-style';
        style.textContent = `
            @keyframes fadeOut {
                0% { opacity: 1; transform: translateY(0); }
                70% { opacity: 1; transform: translateY(0); }
                100% { opacity: 0; transform: translateY(-10px); visibility: hidden; display: none; }
            }
        `;
        document.head.appendChild(style);
    }
    
    form.appendChild(notif);
    
    setTimeout(() => {
        if (notif && notif.remove) notif.remove();
    }, 2000);
}

// ============================================
// FUNCTION UNTUK VALIDASI FORM
// ============================================
document.addEventListener('DOMContentLoaded', function(){
    let perubahanData = {};
    
    function tandaiPerubahan(form, dokumenId) {
        const card = form.closest('.dokumen-card');
        const btnSimpan = form.querySelector('.btn-simpan-dokumen');
        
        if (card) card.classList.add('ada-perubahan');
        
        if (btnSimpan) {
            btnSimpan.classList.remove('btn-primary');
            btnSimpan.classList.add('btn-simpan-aktif');
            btnSimpan.innerHTML = '<i class="bi bi-pencil-square me-1"></i> Simpan Perubahan';
        }
        
        perubahanData[dokumenId] = true;
    }
    
    function resetSetelahSimpan(form, dokumenId) {
        const card = form.closest('.dokumen-card');
        const btnSimpan = form.querySelector('.btn-simpan-dokumen');
        
        if (card) card.classList.remove('ada-perubahan');
        
        if (btnSimpan) {
            btnSimpan.classList.remove('btn-simpan-aktif');
            btnSimpan.classList.add('btn-primary');
            btnSimpan.innerHTML = '<i class="bi bi-save me-1"></i> Simpan';
            btnSimpan.disabled = false;
            btnSimpan.style.backgroundColor = '';
            btnSimpan.style.borderColor = '';
        }
        
        delete perubahanData[dokumenId];
    }
    
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    const semuaForm = document.querySelectorAll('.dokumen-form');
    
    semuaForm.forEach(form => {
        const dokumenId = form.getAttribute('data-dokumen-id');
        const statusSelect = form.querySelector('.verifikasi-status');
        const keteranganInput = form.querySelector('.verifikasi-keterangan');
        
        let nilaiAwalStatus = statusSelect ? statusSelect.value : '';
        let nilaiAwalKeterangan = keteranganInput ? keteranganInput.value : '';
        
        function cekPerubahan() {
            const statusSekarang = statusSelect ? statusSelect.value : '';
            const keteranganSekarang = keteranganInput ? keteranganInput.value : '';
            
            if (statusSekarang !== nilaiAwalStatus || keteranganSekarang !== nilaiAwalKeterangan) {
                tandaiPerubahan(form, dokumenId);
            } else {
                if (perubahanData[dokumenId]) {
                    resetSetelahSimpan(form, dokumenId);
                }
            }
        }
        
        if (statusSelect) statusSelect.addEventListener('change', cekPerubahan);
        if (keteranganInput) keteranganInput.addEventListener('input', cekPerubahan);
        
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const btnSimpan = form.querySelector('.btn-simpan-dokumen');
            const originalHtml = btnSimpan ? btnSimpan.innerHTML : '';
            
            if (btnSimpan) {
                btnSimpan.disabled = true;
                btnSimpan.innerHTML = '<i class="bi bi-hourglass-split me-1"></i> Menyimpan...';
            }
            
            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                
                const result = await response.json();
                
                if (result.success) {
                    nilaiAwalStatus = statusSelect ? statusSelect.value : '';
                    nilaiAwalKeterangan = keteranganInput ? keteranganInput.value : '';
                    
                    resetSetelahSimpan(form, dokumenId);
                    
                    const statusValue = statusSelect ? statusSelect.value : '';
                    let notifMessage = '';
                    let notifType = 'success';
                    
                    if (statusValue === 'lengkap') {
                        notifMessage = '✓ Dokumen dinyatakan LENGKAP';
                        notifType = 'success';
                    } else if (statusValue === 'tidak_lengkap') {
                        notifMessage = '⚠️ Dokumen dinyatakan TIDAK LENGKAP - Perlu revisi';
                        notifType = 'warning';
                    } else {
                        notifMessage = '↺ Status dikembalikan ke Belum Diperiksa';
                        notifType = 'info';
                    }
                    
                    showTempNotification(form, notifType, notifMessage);
                    
                    if (btnSimpan) {
                        btnSimpan.style.transition = 'all 0.3s';
                        btnSimpan.style.backgroundColor = '#38a169';
                        btnSimpan.style.borderColor = '#38a169';
                        setTimeout(() => {
                            if (btnSimpan) {
                                btnSimpan.style.backgroundColor = '';
                                btnSimpan.style.borderColor = '';
                                btnSimpan.style.transition = '';
                            }
                        }, 500);
                    }
                    
                    const statusBadge = document.getElementById(`status-badge-${dokumenId}`);
                    if (statusBadge && statusSelect) {
                        const statusValue2 = statusSelect.value;
                        let iconHtml = '';
                        let badgeText = '';
                        let badgeClass = '';
                        
                        if (statusValue2 === 'lengkap') {
                            iconHtml = '<i class="bi bi-check-lg"></i>';
                            badgeText = 'Lengkap';
                            badgeClass = 'lengkap';
                        } else if (statusValue2 === 'tidak_lengkap') {
                            iconHtml = '<i class="bi bi-exclamation-lg"></i>';
                            badgeText = 'Perlu Revisi';
                            badgeClass = 'tidak_lengkap';
                        } else {
                            iconHtml = '<i class="bi bi-hourglass"></i>';
                            badgeText = 'Belum Diperiksa';
                            badgeClass = 'belum_diperiksa';
                        }
                        
                        statusBadge.innerHTML = `${iconHtml} ${badgeText}`;
                        statusBadge.className = `dokumen-status-badge ${badgeClass}`;
                    }
                    
                    const statusContainer = form.closest('.dokumen-card')?.querySelector('.mt-2:not(.temp-notif)');
                    if (statusContainer && statusSelect) {
                        const statusValue2 = statusSelect.value;
                        let iconHtml = '';
                        let badgeClass = '';
                        let statusText = '';
                        
                        if (statusValue2 === 'lengkap') {
                            iconHtml = '<span class="dokumen-status-icon lengkap"><i class="bi bi-check-lg"></i></span>';
                            badgeClass = 'lengkap';
                            statusText = 'Lengkap';
                        } else if (statusValue2 === 'tidak_lengkap') {
                            iconHtml = '<span class="dokumen-status-icon tidak_lengkap"><i class="bi bi-exclamation-lg"></i></span>';
                            badgeClass = 'tidak_lengkap';
                            statusText = 'Perlu Revisi';
                        } else {
                            iconHtml = '<span class="dokumen-status-icon belum_diperiksa"><i class="bi bi-hourglass"></i></span>';
                            badgeClass = 'belum_diperiksa';
                            statusText = 'Belum Diperiksa';
                        }
                        
                        const keterangan = form.querySelector('.verifikasi-keterangan')?.value || '';
                        const keteranganHtml = keterangan ? `<small class="text-muted"><i class="bi bi-chat-text me-1"></i>${escapeHtml(keterangan)}</small>` : '';
                        
                        statusContainer.innerHTML = `
                            <div class="d-flex align-items-center flex-wrap gap-2">
                                ${iconHtml}
                                <span class="dokumen-badge ${badgeClass}">${statusText}</span>
                                ${keteranganHtml}
                            </div>
                        `;
                    }
                    
                } else {
                    showTempNotification(form, 'danger', 'Gagal: ' + (result.message || 'Terjadi kesalahan'));
                    if (btnSimpan) {
                        btnSimpan.disabled = false;
                        btnSimpan.innerHTML = originalHtml;
                    }
                }
            } catch (error) {
                console.error('Error:', error);
                showTempNotification(form, 'danger', 'Terjadi kesalahan saat menyimpan');
                if (btnSimpan) {
                    btnSimpan.disabled = false;
                    btnSimpan.innerHTML = originalHtml;
                }
            }
        });
    });
    
    // ============================================
    // SCRIPT UNTUK KEPUTUSAN AKHIR - DENGAN MODAL
    // ============================================
    
    const formKeputusan = document.getElementById('formKeputusanAkhir');
    const keputusanSelect = document.getElementById('keputusanSelect');
    const btnSubmitKeputusan = document.getElementById('btnSubmitKeputusan');
    
    // Cek apakah ada dokumen tidak lengkap
    const hasTidakLengkap = {{ $hasTidakLengkap ? 'true' : 'false' }};
    const unverifiedCount = {{ $unverifiedCount ?? 0 }};
    
    // Inisialisasi modal konfirmasi
    const modalKonfirmasiEl = document.getElementById('konfirmasiKeputusanModal');
    const modalKonfirmasi = new bootstrap.Modal(modalKonfirmasiEl);
    
    if (formKeputusan && keputusanSelect && btnSubmitKeputusan) {
        
        // Event listener untuk tombol submit - tampilkan modal konfirmasi
        btnSubmitKeputusan.addEventListener('click', function(e) {
            e.preventDefault();
            
            const keputusan = keputusanSelect.value;
            
            // Validasi
            if (!keputusan) {
                alert('⚠️ Silahkan pilih keputusan terlebih dahulu.');
                return;
            }
            
            if (keputusan === 'diverifikasi' && hasTidakLengkap) {
                alert('⚠️ Tidak bisa memilih "Verifikasi" karena ada dokumen yang berstatus TIDAK LENGKAP.\n\nSilahkan pilih "Revisi" atau "Tolak".');
                return;
            }
            
            // Cek apakah masih ada dokumen belum diperiksa
            if (unverifiedCount > 0 && keputusan === 'diverifikasi') {
                alert('⚠️ Masih ada ' + unverifiedCount + ' dokumen yang belum diperiksa!\n\nSelesaikan semua pemeriksaan terlebih dahulu.');
                return;
            }
            
            // Siapkan konten modal
            let modalContent = document.getElementById('konfirmasiContent');
            let keputusanLabel = '';
            let keputusanBadge = '';
            let icon = '';
            let pesan = '';
            
            switch(keputusan) {
                case 'diverifikasi':
                    keputusanLabel = 'Verifikasi (Lengkap)';
                    keputusanBadge = '<span class="info-badge verifikasi">✅ Verifikasi</span>';
                    icon = 'bi bi-check-circle-fill text-success';
                    pesan = 'Pengajuan akan dinyatakan LENGKAP dan diverifikasi. Pemohon akan menerima notifikasi bahwa pengajuan telah selesai.';
                    break;
                case 'revisi':
                    keputusanLabel = 'Revisi';
                    keputusanBadge = '<span class="info-badge revisi">↺ Revisi</span>';
                    icon = 'bi bi-arrow-repeat text-warning';
                    pesan = 'Pengajuan akan dikembalikan ke pemohon untuk melakukan revisi pada dokumen yang tidak lengkap.';
                    break;
                case 'ditolak':
                    keputusanLabel = 'Tolak';
                    keputusanBadge = '<span class="info-badge ditolak">⛔ Ditolak</span>';
                    icon = 'bi bi-x-circle-fill text-danger';
                    pesan = 'Pengajuan akan DITOLAK. Keputusan ini bersifat final dan pemohon tidak dapat melanjutkan pengajuan ini.';
                    break;
                default:
                    return;
            }
            
            // Ambil catatan akhir
            const catatan = document.querySelector('[name="catatan"]')?.value || '(tidak ada catatan)';
            
            // Ambil daftar dokumen revisi jika ada
            let dokumenRevisiHtml = '';
            if (hasTidakLengkap && keputusan === 'revisi') {
                dokumenRevisiHtml = `
                    <div class="info-item" style="border-bottom: none;">
                        <span class="info-label">Dokumen yang perlu revisi</span>
                        <ul class="dokumen-revisi-list">
                            @foreach($allDocs as $item)
                                @if($item->uploaded && $item->dokumen->pemeriksaan && $item->dokumen->pemeriksaan->status === 'tidak_lengkap')
                                    <li><i class="bi bi-file-earmark-text me-1"></i> {{ $item->nama_dokumen }}</li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                `;
            }
            
            // Build konten modal
            modalContent.innerHTML = `
                <div class="mb-3 text-center">
                    <i class="${icon}" style="font-size: 56px;"></i>
                    <div class="mt-2">
                        ${keputusanBadge}
                    </div>
                </div>
                
                <div class="alert alert-info-box" style="border-radius:10px; padding:12px 16px; font-size:13px;">
                    <i class="bi bi-info-circle me-1"></i> 
                    ${pesan}
                </div>
                
                <div style="background:#f8f9fa; border-radius:10px; padding:12px 16px; margin-top:12px;">
                    <div class="info-item d-flex justify-content-between">
                        <span class="info-label">Keputusan</span>
                        <span class="info-value">${keputusanLabel}</span>
                    </div>
                    <div class="info-item d-flex justify-content-between">
                        <span class="info-label">Nomor Pengajuan</span>
                        <span class="info-value">{{ $pengajuan->nomor_pengajuan }}</span>
                    </div>
                    <div class="info-item d-flex justify-content-between">
                        <span class="info-label">Nama Bangunan</span>
                        <span class="info-value">{{ $pengajuan->nama_bangunan }}</span>
                    </div>
                    <div class="info-item d-flex justify-content-between">
                        <span class="info-label">Catatan Akhir</span>
                        <span class="info-value" style="font-weight:400; word-break:break-word;">${catatan || '(tidak ada)'}</span>
                    </div>
                    ${dokumenRevisiHtml}
                </div>
                
                ${keputusan === 'ditolak' ? `
                <div class="alert alert-danger mt-3" style="border-radius:10px; font-size:13px; border: 1px solid #f5c6cb;">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    <strong>Peringatan!</strong> Keputusan ini bersifat final dan tidak dapat dibatalkan.
                </div>
                ` : ''}
                
                ${keputusan === 'revisi' && hasTidakLengkap ? `
                <div class="alert alert-warning mt-2" style="border-radius:10px; font-size:12px; border: 1px solid #ffc107;">
                    <i class="bi bi-arrow-repeat me-1"></i>
                    <strong>Informasi:</strong> Hanya dokumen yang berstatus <strong>TIDAK LENGKAP</strong> yang akan dikembalikan untuk revisi.
                </div>
                ` : ''}
            `;
            
            // Set warna tombol konfirmasi
            const konfirmasiBtn = document.getElementById('konfirmasiYaBtn');
            if (keputusan === 'diverifikasi') {
                konfirmasiBtn.className = 'btn btn-success';
                konfirmasiBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i> Ya, Verifikasi';
            } else if (keputusan === 'revisi') {
                konfirmasiBtn.className = 'btn btn-warning';
                konfirmasiBtn.innerHTML = '<i class="bi bi-arrow-repeat me-1"></i> Ya, Kirim Revisi';
            } else {
                konfirmasiBtn.className = 'btn btn-danger';
                konfirmasiBtn.innerHTML = '<i class="bi bi-x-circle me-1"></i> Ya, Tolak';
            }
            
            // Tampilkan modal
            modalKonfirmasi.show();
        });
        
        // Event listener untuk tombol konfirmasi di modal
        document.getElementById('konfirmasiYaBtn').addEventListener('click', function() {
            // Submit form
            modalKonfirmasi.hide();
            
            // Submit form setelah modal tertutup
            setTimeout(() => {
                formKeputusan.submit();
            }, 300);
        });
        
        // Event listener untuk perubahan pilihan
        keputusanSelect.addEventListener('change', function() {
            const selectedValue = this.value;
            
            if (selectedValue === 'diverifikasi' && hasTidakLengkap) {
                this.value = 'revisi';
                alert('⚠️ Opsi "Verifikasi" tidak dapat dipilih karena ada dokumen yang TIDAK LENGKAP.\n\nOtomatis diubah ke "Revisi".');
            }
        });
    }
    
    // ============================================
    // SCRIPT UNTUK TOMBOL PERIKSA FILE
    // ============================================
    
    console.log('Initializing PDF buttons...');
    
    const modalEl = document.getElementById('pdfModal');
    if (!modalEl) {
        console.error('Modal element not found!');
        return;
    }
    
    pdfModalInstance = new bootstrap.Modal(modalEl);
    
    function handleOpenPdfClick(button) {
        console.log('Button clicked:', button);
        
        const fileUrl = button.getAttribute('data-file');
        const fileType = button.getAttribute('data-type');
        const dokumenId = button.getAttribute('data-id');
        
        console.log('File URL:', fileUrl);
        console.log('File Type:', fileType);
        console.log('Dokumen ID:', dokumenId);
        
        if (!fileUrl) {
            alert('File tidak ditemukan!');
            return;
        }
        
        currentDokumenId = dokumenId;
        modalEl.setAttribute('data-dokumen-id', dokumenId);
        
        // Reset data
        Object.keys(drawingData).forEach(key => delete drawingData[key]);
        
        const container = document.getElementById('pdfContainer');
        // Bersihkan container
        while (container.firstChild) {
            container.removeChild(container.firstChild);
        }
        
        // Reset style
        container.style.maxHeight = '80vh';
        container.style.overflow = 'auto';
        container.style.padding = '20px';
        container.style.background = '#f0f2f5';
        
        // Tampilkan loading
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'text-center p-5';
        loadingDiv.innerHTML = `
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-2">Memuat dokumen...</p>
        `;
        container.appendChild(loadingDiv);
        
        pdfModalInstance.show();
        
        setTimeout(async function() {
            try {
                const isPdf = fileType === 'pdf' || fileUrl.toLowerCase().endsWith('.pdf');
                if (isPdf) {
                    await renderPdf(fileUrl);
                } else {
                    renderImage(fileUrl);
                }
            } catch(error) {
                console.error('Error rendering:', error);
                const container = document.getElementById('pdfContainer');
                while (container.firstChild) {
                    container.removeChild(container.firstChild);
                }
                container.innerHTML = `<div class="alert alert-danger m-3">Gagal memuat file: ${error.message}</div>`;
            }
        }, 500);
    }
    
    // Pasang event listener ke semua tombol
    document.querySelectorAll('.btn-open-pdf').forEach(function(btn) {
        console.log('Found button:', btn);
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            handleOpenPdfClick(this);
        });
    });
    
    // Reset saat modal ditutup
    modalEl.addEventListener('hidden.bs.modal', function() {
        const container = document.getElementById('pdfContainer');
        if (container) {
            while (container.firstChild) {
                container.removeChild(container.firstChild);
            }
        }
        Object.keys(drawingData).forEach(key => delete drawingData[key]);
        currentDokumenId = null;
    });
    
    console.log('PDF buttons initialized successfully!');
    console.log('Total buttons found:', document.querySelectorAll('.btn-open-pdf').length);
});

// ============================================
// FUNGSI RENDER PDF - DIPERBAIKI (Tidak Blur)
// ============================================

async function renderPdf(pdfUrl) {
    console.log('RENDER PDF:', pdfUrl);
    
    const container = document.getElementById('pdfContainer');
    const modal = document.getElementById('pdfModal');
    const dokumenId = modal ? modal.getAttribute('data-dokumen-id') : null;
    
    if (!dokumenId) {
        console.error('Dokumen ID not found');
        container.innerHTML = '<div class="alert alert-danger">Dokumen ID tidak ditemukan</div>';
        return;
    }
    
    // Reset container
    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }
    
    container.style.maxHeight = '80vh';
    container.style.overflow = 'auto';
    container.style.padding = '20px';
    container.style.background = '#f0f2f5';
    
    Object.keys(drawingData).forEach(key => delete drawingData[key]);
    
    renderId++;
    const currentRenderId = renderId;
    console.log('Render ID:', currentRenderId);
    
    try {
        const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
        console.log('PDF LOADED, pages:', pdf.numPages);
        
        // Load coretan dari database
        let allCoretan = [];
        try {
            const response = await fetch('/pemeriksa/coretan/' + dokumenId);
            if (response.ok) {
                const data = await response.json();
                if (data.success && data.anotasi) {
                    allCoretan = data.anotasi;
                    console.log('Loaded all coretan:', allCoretan.length);
                }
            }
        } catch (e) {
            console.warn('Failed to load coretan:', e);
        }
        
        // Render halaman
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            if (currentRenderId !== renderId) {
                console.log('Render cancelled');
                return;
            }
            
            const page = await pdf.getPage(pageNum);
            
            // ===== HITUNG SKALA =====
            const containerWidth = container.clientWidth - 60 || window.innerWidth - 120;
            const viewport = page.getViewport({ scale: 1 });
            
            // Gunakan devicePixelRatio untuk tampilan lebih tajam
            const pixelRatio = window.devicePixelRatio || 1;
            
            // Skala untuk tampilan (ukuran di layar)
            let displayScale = containerWidth / viewport.width;
            displayScale = Math.min(1.5, Math.max(0.5, displayScale));
            
            // Skala untuk canvas (lebih besar agar tidak blur)
            const canvasScale = displayScale * pixelRatio;
            
            const displayViewport = page.getViewport({ scale: displayScale });
            const canvasViewport = page.getViewport({ scale: canvasScale });
            
            // Buat wrapper
            const wrapper = document.createElement('div');
            wrapper.setAttribute('data-page', pageNum);
            wrapper.style.position = 'relative';
            wrapper.style.marginBottom = '20px';
            wrapper.style.marginLeft = 'auto';
            wrapper.style.marginRight = 'auto';
            wrapper.style.border = '1px solid #e2e8f0';
            wrapper.style.borderRadius = '8px';
            wrapper.style.overflow = 'hidden';
            wrapper.style.background = '#ffffff';
            wrapper.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
            wrapper.style.maxWidth = '100%';
            wrapper.style.width = displayViewport.width + 'px';
            
            // Canvas PDF (ukuran canvas lebih besar agar tidak blur)
            const pdfCanvas = document.createElement('canvas');
            pdfCanvas.width = canvasViewport.width;
            pdfCanvas.height = canvasViewport.height;
            pdfCanvas.style.display = 'block';
            pdfCanvas.style.width = displayViewport.width + 'px';
            pdfCanvas.style.height = displayViewport.height + 'px';
            
            const pdfCtx = pdfCanvas.getContext('2d');
            
            // Canvas coretan (sama dengan canvas PDF)
            const drawCanvas = document.createElement('canvas');
            drawCanvas.width = canvasViewport.width;
            drawCanvas.height = canvasViewport.height;
            drawCanvas.style.position = 'absolute';
            drawCanvas.style.left = '0';
            drawCanvas.style.top = '0';
            drawCanvas.style.width = displayViewport.width + 'px';
            drawCanvas.style.height = displayViewport.height + 'px';
            drawCanvas.style.cursor = 'crosshair';
            drawCanvas.style.zIndex = '10';
            drawCanvas.style.display = 'block';
            
            wrapper.appendChild(pdfCanvas);
            wrapper.appendChild(drawCanvas);
            container.appendChild(wrapper);
            
            // Render PDF
            await page.render({
                canvasContext: pdfCtx,
                viewport: canvasViewport
            }).promise;
            
            console.log('PAGE RENDERED:', pageNum, 'DisplayScale:', displayScale, 'CanvasScale:', canvasScale);
            
            // ===== LOAD CORETAN DENGAN SKALA CANVAS =====
            const coretanHalaman = allCoretan.filter(function(a) {
                return a.halaman === pageNum;
            });
            
            const drawings = [];
            coretanHalaman.forEach(function(item) {
                if (item.coretan && item.coretan.points && item.coretan.points.length > 1) {
                    // Terapkan skala canvas ke titik coretan
                    const scaledPoints = item.coretan.points.map(function(p) {
                        return {
                            x: p.x * canvasScale,
                            y: p.y * canvasScale
                        };
                    });
                    
                    drawings.push({
                        path: scaledPoints,
                        color: item.coretan.color || '#ff0000',
                        width: (item.coretan.width || 3) * canvasScale,
                        catatan: item.catatan || '',
                        saved: true,
                        fromDatabase: true
                    });
                }
            });
            
            drawingData[pageNum] = drawings;
            
            // ===== ENABLE DRAWING DENGAN SKALA CANVAS =====
            enableDrawing(drawCanvas, pageNum, canvasScale);
        }
        
        console.log('PDF FINISHED');
        
    } catch (error) {
        console.error('Error rendering PDF:', error);
        container.innerHTML = `<div class="alert alert-danger m-3">Gagal memuat PDF: ${error.message}</div>`;
    }
}

function renderImage(imageUrl) {
    const container = document.getElementById('pdfContainer');
    while (container.firstChild) {
        container.removeChild(container.firstChild);
    }
    
    container.style.maxHeight = '85vh';
    container.style.overflow = 'auto';
    container.style.padding = '20px';
    container.style.background = '#f0f2f5';
    
    const wrapper = document.createElement('div');
    wrapper.style.position = 'relative';
    wrapper.style.marginBottom = '20px';
    wrapper.style.border = '1px solid #e2e8f0';
    wrapper.style.borderRadius = '8px';
    wrapper.style.overflow = 'hidden';
    wrapper.style.background = '#ffffff';
    wrapper.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
    wrapper.style.maxWidth = '100%';
    
    const img = document.createElement('img');
    img.src = imageUrl;
    img.style.width = '100%';
    img.style.height = 'auto';
    img.style.display = 'block';
    
    img.onload = function() {
        const drawCanvas = document.createElement('canvas');
        drawCanvas.width = img.naturalWidth || img.width;
        drawCanvas.height = img.naturalHeight || img.height;
        drawCanvas.style.position = 'absolute';
        drawCanvas.style.left = '0';
        drawCanvas.style.top = '0';
        drawCanvas.style.width = '100%';
        drawCanvas.style.height = '100%';
        drawCanvas.style.cursor = 'crosshair';
        drawCanvas.style.zIndex = '10';
        drawCanvas.style.display = 'block';
        
        wrapper.appendChild(drawCanvas);
        enableDrawing(drawCanvas, 1, 1);
    };
    
    img.onerror = function() {
        container.innerHTML = `<div class="alert alert-danger m-3">Gagal memuat gambar</div>`;
    };
    
    wrapper.appendChild(img);
    container.appendChild(wrapper);
}

// ============================================
// ENABLE DRAWING - TIDAK BLUR
// ============================================

function enableDrawing(canvas, pageNum, scale) {
    console.log('enableDrawing called for page:', pageNum, 'scale:', scale);
    
    const currentScale = scale || 1;
    
    if (!drawingData[pageNum]) {
        drawingData[pageNum] = [];
    }
    
    const wrapper = canvas.parentElement;
    const ctx = canvas.getContext('2d');
    let isDrawing = false;
    let currentPath = [];
    let drawColor = '#ff0000';
    let drawWidth = 3;
    let isHapusMode = false;
    let isCatatanMode = false;
    
    function redrawAll() {
        console.log('Redrawing page:', pageNum, 'total coretan:', drawingData[pageNum].length);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (drawingData[pageNum] && drawingData[pageNum].length > 0) {
            drawingData[pageNum].forEach(function(drawing) {
                if (drawing.path && drawing.path.length > 1) {
                    ctx.beginPath();
                    ctx.strokeStyle = drawing.color || '#ff0000';
                    ctx.lineWidth = drawing.width || 3;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    
                    ctx.moveTo(drawing.path[0].x, drawing.path[0].y);
                    for (let i = 1; i < drawing.path.length; i++) {
                        ctx.lineTo(drawing.path[i].x, drawing.path[i].y);
                    }
                    ctx.stroke();
                    
                    if (drawing.catatan && drawing.catatan.trim() !== '') {
                        // Tampilkan catatan
                        let midX = 0, midY = 0;
                        for (let i = 0; i < drawing.path.length; i++) {
                            midX += drawing.path[i].x;
                            midY += drawing.path[i].y;
                        }
                        midX = midX / drawing.path.length;
                        midY = midY / drawing.path.length;
                        
                        const fontSize = 14 * currentScale;
                        ctx.font = fontSize + 'px Arial';
                        const text = '📝 ' + drawing.catatan;
                        const metrics = ctx.measureText(text);
                        const padding = 10 * currentScale;
                        const rectWidth = metrics.width + padding * 2;
                        const rectHeight = (34 + padding * 2) * currentScale;
                        
                        let textX = midX - rectWidth / 2;
                        let textY = midY - (60 * currentScale);
                        
                        if (textX < 5) textX = 5;
                        if (textX + rectWidth > canvas.width - 5) textX = canvas.width - rectWidth - 5;
                        if (textY < 5) textY = 5;
                        
                        ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
                        ctx.shadowColor = 'rgba(0,0,0,0.2)';
                        ctx.shadowBlur = 10 * currentScale;
                        ctx.beginPath();
                        if (ctx.roundRect) {
                            ctx.roundRect(textX, textY, rectWidth, rectHeight, 8 * currentScale);
                        } else {
                            ctx.rect(textX, textY, rectWidth, rectHeight);
                        }
                        ctx.fill();
                        ctx.shadowBlur = 0;
                        
                        ctx.strokeStyle = '#dc3545';
                        ctx.lineWidth = 2 * currentScale;
                        ctx.beginPath();
                        if (ctx.roundRect) {
                            ctx.roundRect(textX, textY, rectWidth, rectHeight, 8 * currentScale);
                        } else {
                            ctx.rect(textX, textY, rectWidth, rectHeight);
                        }
                        ctx.stroke();
                        
                        ctx.fillStyle = '#333';
                        ctx.font = fontSize + 'px Arial';
                        ctx.textAlign = 'left';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(text, textX + padding, textY + rectHeight / 2);
                    }
                }
            });
        }
    }
    
    // Buat toolbar
    let oldToolbar = wrapper.querySelector('.coretan-toolbar-page');
    if (oldToolbar) oldToolbar.remove();
    
    const toolbar = document.createElement('div');
    toolbar.className = 'coretan-toolbar-page';
    toolbar.style.cssText = `
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 20;
        background: rgba(255,255,255,0.95);
        border-radius: 8px;
        padding: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        display: flex;
        gap: 6px;
        align-items: center;
        flex-wrap: wrap;
        font-size: 12px;
    `;
    
    toolbar.innerHTML = `
        <input type="color" value="#ff0000" class="coretan-color" style="width:30px;height:30px;padding:2px;border:1px solid #ddd;border-radius:4px;cursor:pointer;">
        <input type="range" min="1" max="10" value="3" class="coretan-size" style="width:60px;">
        <span style="color:#6c757d;font-size:10px;">|</span>
        <button class="coretan-hapus-mode" style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:#ffc107;color:black;cursor:pointer;">
            <i class="bi bi-hand-index"></i> Hapus
        </button>
        <button class="coretan-catatan-mode" style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:#17a2b8;color:white;cursor:pointer;">
            <i class="bi bi-chat"></i> Catatan
        </button>
        <button class="coretan-hapus-semua" style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:#dc3545;color:white;cursor:pointer;">
            <i class="bi bi-eraser"></i> Hapus Semua
        </button>
        <button class="coretan-simpan" style="padding:4px 10px;font-size:11px;border-radius:4px;border:none;background:#28a745;color:white;cursor:pointer;">
            <i class="bi bi-save"></i> Simpan
        </button>
        <span style="color:#6c757d;font-size:10px;">Halaman ${pageNum}</span>
        <span style="color:#6c757d;font-size:10px;border-left:1px solid #ddd;padding-left:8px;" id="status-${pageNum}">
            <i class="bi bi-info-circle"></i> Mode: Gambar
        </span>
    `;
    
    wrapper.appendChild(toolbar);
    
    // ===== EVENT TOOLBAR =====
    const colorInput = toolbar.querySelector('.coretan-color');
    const sizeInput = toolbar.querySelector('.coretan-size');
    const hapusModeBtn = toolbar.querySelector('.coretan-hapus-mode');
    const catatanModeBtn = toolbar.querySelector('.coretan-catatan-mode');
    const hapusSemuaBtn = toolbar.querySelector('.coretan-hapus-semua');
    const simpanBtn = toolbar.querySelector('.coretan-simpan');
    const statusEl = document.getElementById(`status-${pageNum}`);
    
    if (colorInput) {
        colorInput.addEventListener('change', function() {
            drawColor = this.value;
        });
    }
    
    if (sizeInput) {
        sizeInput.addEventListener('change', function() {
            drawWidth = parseInt(this.value);
        });
    }
    
    // Toggle Hapus
    if (hapusModeBtn) {
        hapusModeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (isCatatanMode) {
                isCatatanMode = false;
                catatanModeBtn.style.background = '#17a2b8';
                catatanModeBtn.innerHTML = '<i class="bi bi-chat"></i> Catatan';
            }
            
            isHapusMode = !isHapusMode;
            
            if (isHapusMode) {
                this.style.background = '#dc3545';
                this.style.color = 'white';
                this.innerHTML = '<i class="bi bi-hand-index-fill"></i> Hapus ON';
                canvas.style.cursor = 'pointer';
                if (statusEl) {
                    statusEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-danger"></i> Mode HAPUS - Klik coretan untuk hapus';
                    statusEl.style.color = '#dc3545';
                }
            } else {
                this.style.background = '#ffc107';
                this.style.color = 'black';
                this.innerHTML = '<i class="bi bi-hand-index"></i> Hapus';
                canvas.style.cursor = 'crosshair';
                if (statusEl) {
                    statusEl.innerHTML = '<i class="bi bi-info-circle"></i> Mode: Gambar';
                    statusEl.style.color = '#6c757d';
                }
            }
        });
    }
    
    // Toggle Catatan
    if (catatanModeBtn) {
        catatanModeBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (isHapusMode) {
                isHapusMode = false;
                hapusModeBtn.style.background = '#ffc107';
                hapusModeBtn.style.color = 'black';
                hapusModeBtn.innerHTML = '<i class="bi bi-hand-index"></i> Hapus';
                canvas.style.cursor = 'crosshair';
            }
            
            isCatatanMode = !isCatatanMode;
            
            if (isCatatanMode) {
                this.style.background = '#28a745';
                this.style.color = 'white';
                this.innerHTML = '<i class="bi bi-chat-fill"></i> Catatan ON';
                canvas.style.cursor = 'pointer';
                if (statusEl) {
                    statusEl.innerHTML = '<i class="bi bi-pencil-square text-success"></i> Mode CATATAN - Klik coretan untuk tambah catatan';
                    statusEl.style.color = '#28a745';
                }
            } else {
                this.style.background = '#17a2b8';
                this.style.color = 'white';
                this.innerHTML = '<i class="bi bi-chat"></i> Catatan';
                canvas.style.cursor = 'crosshair';
                if (statusEl) {
                    statusEl.innerHTML = '<i class="bi bi-info-circle"></i> Mode: Gambar';
                    statusEl.style.color = '#6c757d';
                }
            }
        });
    }
    
    // Hapus Semua
    if (hapusSemuaBtn) {
        hapusSemuaBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (drawingData[pageNum].length === 0) {
                alert('Tidak ada coretan untuk dihapus');
                return;
            }
            
            if (!confirm('Hapus SEMUA coretan di halaman ini?')) return;
            
            drawingData[pageNum] = [];
            redrawAll();
            alert('✅ Semua coretan di halaman ini telah dihapus');
        });
    }
    
    // Simpan
    if (simpanBtn) {
        simpanBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            if (drawingData[pageNum].length === 0) {
                alert('⚠️ Tidak ada coretan untuk disimpan');
                return;
            }
            
            const modal = document.getElementById('pdfModal');
            const dokumenId = modal ? modal.getAttribute('data-dokumen-id') : null;
            
            if (!dokumenId) {
                alert('❌ Dokumen tidak ditemukan');
                return;
            }
            
            let totalSaved = 0;
            let totalFailed = 0;
            const totalCoretan = drawingData[pageNum].length;
            
            simpanBtn.disabled = true;
            simpanBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyimpan... (0/' + totalCoretan + ')';
            
            drawingData[pageNum].forEach(function(drawing, index) {
                // Konversi ke koordinat asli (tanpa skala canvas)
                const originalPoints = drawing.path.map(function(p) {
                    return { x: p.x / currentScale, y: p.y / currentScale };
                });
                const originalWidth = drawing.width / currentScale;
                
                const coretanData = {
                    points: originalPoints,
                    color: drawing.color || '#ff0000',
                    width: originalWidth || 3,
                    catatan: drawing.catatan || ''
                };
                
                const url = '/pemeriksa/coretan/simpan';
                const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';
                
                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        dokumen_id: parseInt(dokumenId),
                        coretan: coretanData,
                        halaman: parseInt(pageNum),
                        catatan: drawing.catatan || ''
                    })
                })
                .then(function(response) {
                    if (!response.ok) {
                        return response.text().then(function(text) {
                            throw new Error('HTTP ' + response.status + ': ' + text.substring(0, 200));
                        });
                    }
                    return response.json();
                })
                .then(function(data) {
                    if (data.success) {
                        totalSaved++;
                        drawing.saved = true;
                    } else {
                        totalFailed++;
                    }
                    
                    const progress = totalSaved + totalFailed;
                    simpanBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyimpan... (' + progress + '/' + totalCoretan + ')';
                    
                    if (progress === totalCoretan) {
                        if (totalFailed === 0) {
                            alert('✅ Semua coretan berhasil disimpan! (' + totalSaved + ' coretan)');
                            redrawAll();
                        } else {
                            alert('⚠️ ' + totalSaved + ' coretan berhasil, ' + totalFailed + ' coretan gagal disimpan.');
                        }
                        simpanBtn.disabled = false;
                        simpanBtn.innerHTML = '<i class="bi bi-save"></i> Simpan';
                    }
                })
                .catch(function(error) {
                    totalFailed++;
                    console.error('Error:', error);
                    
                    const progress = totalSaved + totalFailed;
                    simpanBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyimpan... (' + progress + '/' + totalCoretan + ')';
                    
                    if (progress === totalCoretan) {
                        alert('⚠️ ' + totalSaved + ' coretan berhasil, ' + totalFailed + ' coretan gagal disimpan.');
                        simpanBtn.disabled = false;
                        simpanBtn.innerHTML = '<i class="bi bi-save"></i> Simpan';
                    }
                });
            });
        });
    }
    
    // ===== EVENT MOUSE DRAWING =====
    canvas.addEventListener('mousedown', function(e) {
        if (isHapusMode || isCatatanMode) return;
        
        isDrawing = true;
        const rect = canvas.getBoundingClientRect();
        // Hitung skala antara ukuran tampilan dan ukuran canvas asli
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        
        const x = (e.clientX - rect.left) * scaleX;
        const y = (e.clientY - rect.top) * scaleY;
        
        currentPath = [{x: x, y: y}];
        ctx.beginPath();
        ctx.moveTo(x, y);
    });
    
    canvas.addEventListener('mousemove', function(e) {
        if (!isDrawing || isHapusMode || isCatatanMode) return;
        
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        
        const x = (e.clientX - rect.left) * scaleX;
        const y = (e.clientY - rect.top) * scaleY;
        
        ctx.strokeStyle = drawColor;
        ctx.lineWidth = drawWidth * currentScale;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        
        ctx.lineTo(x, y);
        ctx.stroke();
        
        currentPath.push({x: x, y: y});
    });
    
    canvas.addEventListener('mouseup', function() {
        if (isDrawing && !isHapusMode && !isCatatanMode && currentPath.length > 1) {
            drawingData[pageNum].push({
                path: currentPath.slice(),
                color: drawColor,
                width: drawWidth * currentScale,
                catatan: ''
            });
            currentPath = [];
        }
        isDrawing = false;
    });
    
    canvas.addEventListener('mouseleave', function() {
        if (isDrawing) {
            isDrawing = false;
            currentPath = [];
        }
    });
    
    // ===== KLIK UNTUK HAPUS =====
    canvas.addEventListener('click', function(e) {
        if (isHapusMode) {
            const rect = canvas.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (e.clientX - rect.left) * scaleX;
            const y = (e.clientY - rect.top) * scaleY;
            
            if (drawingData[pageNum].length === 0) {
                alert('Tidak ada coretan untuk dihapus');
                return;
            }
            
            let foundIndex = -1;
            let minDistance = 30 * currentScale;
            
            for (let i = 0; i < drawingData[pageNum].length; i++) {
                const drawing = drawingData[pageNum][i];
                if (!drawing.path || drawing.path.length === 0) continue;
                
                for (let j = 0; j < drawing.path.length; j++) {
                    const point = drawing.path[j];
                    const distance = Math.sqrt(
                        Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2)
                    );
                    if (distance < minDistance) {
                        foundIndex = i;
                        minDistance = distance;
                    }
                }
            }
            
            if (foundIndex !== -1) {
                if (confirm('Hapus coretan ini?')) {
                    drawingData[pageNum].splice(foundIndex, 1);
                    redrawAll();
                    alert('✅ Coretan berhasil dihapus!');
                }
            } else {
                alert('⚠️ Tidak ada coretan yang diklik.');
            }
            return;
        }
        
        // ===== KLIK UNTUK CATATAN =====
        if (isCatatanMode) {
            const rect = canvas.getBoundingClientRect();
            const scaleX = canvas.width / rect.width;
            const scaleY = canvas.height / rect.height;
            const x = (e.clientX - rect.left) * scaleX;
            const y = (e.clientY - rect.top) * scaleY;
            
            if (drawingData[pageNum].length === 0) {
                alert('Tidak ada coretan untuk ditambahi catatan');
                return;
            }
            
            let foundIndex = -1;
            let minDistance = 30 * currentScale;
            
            for (let i = 0; i < drawingData[pageNum].length; i++) {
                const drawing = drawingData[pageNum][i];
                if (!drawing.path || drawing.path.length === 0) continue;
                
                for (let j = 0; j < drawing.path.length; j++) {
                    const point = drawing.path[j];
                    const distance = Math.sqrt(
                        Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2)
                    );
                    if (distance < minDistance) {
                        foundIndex = i;
                        minDistance = distance;
                    }
                }
            }
            
            if (foundIndex !== -1) {
                const drawing = drawingData[pageNum][foundIndex];
                const catatan = prompt('📝 Masukkan catatan untuk coretan ini:', drawing.catatan || '');
                if (catatan !== null) {
                    drawing.catatan = catatan.trim();
                    redrawAll();
                    alert('✅ Catatan berhasil ditambahkan!');
                }
            } else {
                alert('⚠️ Tidak ada coretan yang diklik.');
            }
            return;
        }
    });
    
    // ===== TOUCH EVENTS =====
    let touchTimeout = null;
    
    canvas.addEventListener('touchstart', function(e) {
        const touch = e.touches[0];
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        const x = (touch.clientX - rect.left) * scaleX;
        const y = (touch.clientY - rect.top) * scaleY;
        
        touchTimeout = setTimeout(function() {
            if (drawingData[pageNum].length === 0) return;
            
            let foundIndex = -1;
            let minDistance = 30 * currentScale;
            
            for (let i = 0; i < drawingData[pageNum].length; i++) {
                const drawing = drawingData[pageNum][i];
                if (!drawing.path || drawing.path.length === 0) continue;
                
                for (let j = 0; j < drawing.path.length; j++) {
                    const point = drawing.path[j];
                    const distance = Math.sqrt(
                        Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2)
                    );
                    if (distance < minDistance) {
                        foundIndex = i;
                        minDistance = distance;
                        break;
                    }
                }
            }
            
            if (foundIndex !== -1) {
                const catatan = prompt('📝 Masukkan catatan untuk coretan ini:', drawingData[pageNum][foundIndex].catatan || '');
                if (catatan !== null) {
                    drawingData[pageNum][foundIndex].catatan = catatan.trim();
                    redrawAll();
                    alert('✅ Catatan berhasil ditambahkan!');
                }
            }
            touchTimeout = null;
        }, 800);
        
        if (!isHapusMode && !isCatatanMode) {
            isDrawing = true;
            currentPath = [{x: x, y: y}];
            ctx.beginPath();
            ctx.moveTo(x, y);
        }
        
        e.preventDefault();
    }, { passive: false });
    
    canvas.addEventListener('touchmove', function(e) {
        e.preventDefault();
        if (touchTimeout) {
            clearTimeout(touchTimeout);
            touchTimeout = null;
        }
        if (isHapusMode || isCatatanMode) return;
        if (!isDrawing) return;
        
        const touch = e.touches[0];
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        const x = (touch.clientX - rect.left) * scaleX;
        const y = (touch.clientY - rect.top) * scaleY;
        
        ctx.strokeStyle = drawColor;
        ctx.lineWidth = drawWidth * currentScale;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        
        ctx.lineTo(x, y);
        ctx.stroke();
        currentPath.push({x: x, y: y});
    }, { passive: false });
    
    canvas.addEventListener('touchend', function(e) {
        if (touchTimeout) {
            clearTimeout(touchTimeout);
            touchTimeout = null;
        }
        if (!isHapusMode && !isCatatanMode && isDrawing && currentPath.length > 1) {
            drawingData[pageNum].push({
                path: currentPath.slice(),
                color: drawColor,
                width: drawWidth * currentScale,
                catatan: ''
            });
            currentPath = [];
        }
        isDrawing = false;
        e.preventDefault();
    }, { passive: false });
    
    // ===== REDRAW AWAL =====
    redrawAll();
    
    console.log('✅ Drawing enabled for page:', pageNum, 'Scale:', currentScale);
    console.log('Total coretan:', drawingData[pageNum].length);
}
</script>
@endsection