@extends('layouts.app')
@section('title', 'Revisi Pengajuan')

@section('styles')
<style>
    .stepper { display: flex; justify-content: center; margin-bottom: 32px; gap: 0; }
    .stepper-item { display: flex; align-items: center; position: relative; }
    .stepper-item:not(:last-child)::after { content: ''; width: 60px; height: 3px; background: #e2e8f0; margin: 0 8px; transition: background 0.3s; }
    .stepper-item:not(:last-child).completed::after { background: var(--primary); }
    .step-circle { width: 44px; height: 44px; border-radius: 50%; background: #e2e8f0; color: #718096; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; transition: all 0.3s; cursor: pointer; border: 3px solid transparent; }
    .stepper-item.active .step-circle { background: var(--primary); color: #fff; border-color: rgba(30,58,95,0.2); box-shadow: 0 4px 12px rgba(30,58,95,0.3); }
    .stepper-item.completed .step-circle { background: #38a169; color: #fff; }
    .step-label { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #718096; white-space: nowrap; }
    .stepper-item.active .step-label { color: var(--primary-dark); }
    .stepper-item.completed .step-label { color: #38a169; }
    .step-panel { display: none; animation: fadeIn 0.3s ease; }
    .step-panel.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .status-badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; }
    .status-lengkap { background: #c6f6d5; color: #22543d; }
    .status-tidak_lengkap { background: #fed7d7; color: #9b2c2c; }
    .status-belum_diperiksa { background: #e2e8f0; color: #4a5568; }
    .preview-file { margin-top: 8px; }
    
    .chat-fab {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-light));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 15px rgba(30, 58, 95, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1000;
        text-decoration: none;
        border: none;
    }
    .chat-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
        color: white;
    }
    .chat-fab i {
        font-size: 28px;
    }
    .chat-fab .badge-notif {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #e53e3e;
        color: white;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    .btn-lihat-coretan {
        transition: all 0.2s;
    }
    .btn-lihat-coretan:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    }

    #pdfContainerCoretan {
        max-height: 85vh;
        overflow: auto;
        background: #f0f2f5;
        padding: 20px;
    }
    #pdfContainerCoretan canvas {
        display: block;
        width: 100%;
        height: auto;
    }
    #pdfContainerCoretan > div {
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        max-width: 100%;
    }

    .success-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    }
    .success-modal {
        background: white;
        border-radius: 20px;
        padding: 40px;
        max-width: 500px;
        width: 90%;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        animation: slideUp 0.4s ease;
    }
    .success-modal .icon-success {
        font-size: 72px;
        color: #38a169;
        margin-bottom: 16px;
    }
    .success-modal h3 {
        color: #2d3748;
        margin-bottom: 8px;
    }
    .success-modal p {
        color: #718096;
        margin-bottom: 20px;
    }
    .success-modal .btn-success {
        background: #38a169;
        border: none;
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        transition: all 0.2s;
    }
    .success-modal .btn-success:hover {
        transform: scale(1.02);
        background: #2f855a;
    }
    @keyframes slideUp {
        from { transform: translateY(50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .form-disabled-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.7);
        z-index: 99998;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .form-disabled-overlay.active {
        display: flex;
    }
    .form-disabled-overlay .spinner-large {
        width: 50px;
        height: 50px;
        border: 4px solid #e2e8f0;
        border-top: 4px solid var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    .form-disabled-overlay p {
        margin-top: 16px;
        color: #4a5568;
        font-weight: 600;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .modal-konfirmasi .modal-header {
        border-bottom: none;
        padding-bottom: 0;
    }
    .modal-konfirmasi .modal-footer {
        border-top: none;
        padding-top: 0;
    }
    .icon-warning {
        font-size: 48px;
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }

    .preview-file-baru {
        background: #f0fff4;
        border: 1px solid #38a169;
        border-radius: 8px;
        padding: 8px 12px;
        margin-top: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }
    .preview-file-baru .file-info {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: #22543d;
        flex-wrap: wrap;
    }
    .preview-file-baru .file-info i {
        font-size: 18px;
    }
    .preview-file-baru .btn-group {
        display: flex;
        gap: 4px;
    }
    .preview-file-baru .btn-sm {
        padding: 2px 8px;
        font-size: 11px;
        border-radius: 6px;
    }

    .saving-indicator {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #4299e1;
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        display: none;
    }
    .saving-indicator .spin {
        animation: spin 0.8s linear infinite;
        display: inline-block;
    }
    .auto-save-toast {
        position: fixed;
        bottom: 80px;
        right: 20px;
        background: #38a169;
        color: white;
        padding: 10px 16px;
        border-radius: 8px;
        z-index: 9999;
        font-size: 13px;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h2 class="mb-1">Revisi Pengajuan</h2>
            <p class="text-muted mb-0">{{ $pengajuan->nomor_pengajuan }} — Perbaiki data dan kirim ulang</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url('/chat/' . $pengajuan->id) }}" class="btn btn-outline-primary rounded-pill px-4">
                <i class="bi bi-chat-dots-fill me-2"></i> Chat Pemeriksa
            </a>
        </div>
    </div>
</div>

<div class="alert mb-4 d-flex justify-content-between align-items-center flex-wrap gap-3" style="border-radius:14px; border:none; background: #ffedd5; color: #9a3412; padding: 16px 24px;">
    <div>
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <strong>Perlu Revisi:</strong> Perbaiki data yang diminta oleh pemeriksa dan kirim ulang pengajuan Anda.
        @if(!empty($pengajuan->catatan_revisi))
            <div class="mt-2 small" style="background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 8px;">
                📝 <strong>Catatan Pemeriksa:</strong> {{ $pengajuan->catatan_revisi }}
            </div>
        @endif
    </div>
    <a href="{{ url('/chat/' . $pengajuan->id) }}" class="btn btn-sm btn-warning rounded-pill">
        <i class="bi bi-chat-dots me-1"></i> Tanya Pemeriksa
    </a>
</div>

<div class="stepper mb-5">
    <div class="stepper-item active" data-step="1"><div class="step-circle">1</div><div class="step-label">Data Pemilik & Tanah</div></div>
    <div class="stepper-item" data-step="2"><div class="step-circle">2</div><div class="step-label">Data Bangunan</div></div>
    <div class="stepper-item" data-step="3"><div class="step-circle">3</div><div class="step-label">Dokumen</div></div>
</div>

<form method="POST" action="{{ route('pengajuan.update', $pengajuan->id) }}" enctype="multipart/form-data" id="formRevisi">
    @csrf
    @method('PUT')
    
    @if($errors->any())
    <div class="alert alert-danger mb-4" style="border-radius:12px;">
        <i class="bi bi-exclamation-circle-fill me-2"></i>
        <strong>Terjadi kesalahan:</strong>
        <ul class="mb-0 mt-2">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- STEP 1 -->
    <div class="step-panel active" id="step-1">
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-person-fill me-2"></i> Data Pemilik</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Jenis Kepemilikan <span class="text-danger">*</span></label>
                        <select name="jenis_kepemilikan" class="form-control" required style="border-radius:10px; padding: 10px 14px;">
                            <option value="Perorangan" {{ old('jenis_kepemilikan', $pengajuan->jenis_kepemilikan) == 'Perorangan' ? 'selected' : '' }}>Perorangan</option>
                            <option value="Badan Usaha" {{ old('jenis_kepemilikan', $pengajuan->jenis_kepemilikan) == 'Badan Usaha' ? 'selected' : '' }}>Badan Usaha</option>
                            <option value="Badan Hukum" {{ old('jenis_kepemilikan', $pengajuan->jenis_kepemilikan) == 'Badan Hukum' ? 'selected' : '' }}>Badan Hukum</option>
                            <option value="Pemerintah" {{ old('jenis_kepemilikan', $pengajuan->jenis_kepemilikan) == 'Pemerintah' ? 'selected' : '' }}>Pemerintah</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Nama Lengkap <span class="text-danger">*</span></label>
                        <input type="text" name="nama_lengkap" class="form-control" value="{{ old('nama_lengkap', $pengajuan->nama_lengkap) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Jenis Tanda Pengenal <span class="text-danger">*</span></label>
                        <select name="jenis_tanda_pengenal" class="form-control" required style="border-radius:10px; padding: 10px 14px;">
                            <option value="NIK" {{ old('jenis_tanda_pengenal', $pengajuan->jenis_tanda_pengenal) == 'NIK' ? 'selected' : '' }}>NIK</option>
                            <option value="KITAS" {{ old('jenis_tanda_pengenal', $pengajuan->jenis_tanda_pengenal) == 'KITAS' ? 'selected' : '' }}>KITAS</option>
                            <option value="Paspor" {{ old('jenis_tanda_pengenal', $pengajuan->jenis_tanda_pengenal) == 'Paspor' ? 'selected' : '' }}>Paspor</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Nomor Tanda Pengenal <span class="text-danger">*</span></label>
                        <input type="text" name="nomor_tanda_pengenal" class="form-control" value="{{ old('nomor_tanda_pengenal', $pengajuan->nomor_tanda_pengenal) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Nomor Kontak <span class="text-danger">*</span></label>
                        <input type="text" name="nomor_kontak" class="form-control" value="{{ old('nomor_kontak', $pengajuan->nomor_kontak) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Email <span class="text-danger">*</span></label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $pengajuan->email) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-12 mb-3">
                        <label class="form-label fw-bold">Alamat Lengkap <span class="text-danger">*</span></label>
                        <textarea name="alamat_lengkap" class="form-control" rows="3" required style="border-radius:10px; padding: 10px 14px;">{{ old('alamat_lengkap', $pengajuan->alamat_lengkap) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-file-earmark-text me-2"></i> Data Tanah</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Nomor Dokumen Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="nomor_dokumen_tanah" class="form-control" value="{{ old('nomor_dokumen_tanah', $pengajuan->nomor_dokumen_tanah) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Tanggal Terbit Dokumen Tanah <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_terbit_dokumen_tanah" class="form-control" value="{{ old('tanggal_terbit_dokumen_tanah', $pengajuan->tanggal_terbit_dokumen_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_dokumen_tanah)->format('Y-m-d') : '') }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Luas Tanah (m²) <span class="text-danger">*</span></label>
                        <input type="number" name="luas_tanah" class="form-control" value="{{ old('luas_tanah', $pengajuan->luas_tanah) }}" step="0.01" min="1" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Hak Kepemilikan Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="hak_kepemilikan_tanah" class="form-control" value="{{ old('hak_kepemilikan_tanah', $pengajuan->hak_kepemilikan_tanah) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Nama Pemilik Hak Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="nama_pemilik_hak_tanah" class="form-control" value="{{ old('nama_pemilik_hak_tanah', $pengajuan->nama_pemilik_hak_tanah) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Kecamatan Lokasi Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="kecamatan_tanah" class="form-control" value="{{ old('kecamatan_tanah', $pengajuan->kecamatan_tanah) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Kelurahan Lokasi Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="kelurahan_tanah" class="form-control" value="{{ old('kelurahan_tanah', $pengajuan->kelurahan_tanah) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-12 mb-3">
                        <label class="form-label fw-bold">Alamat Lengkap Lokasi Tanah <span class="text-danger">*</span></label>
                        <textarea name="alamat_bangunan" class="form-control" rows="3" required style="border-radius:10px; padding: 10px 14px;">{{ old('alamat_bangunan', $pengajuan->alamat_bangunan) }}</textarea>
                    </div>
                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-bold">Pemilik Tanah Sama Dengan Pemilik Bangunan <span class="text-danger">*</span></label>
                        <select name="pemilik_tanah_sama_dengan_pemilik_bangunan" id="pemilik_sama" class="form-control" required style="border-radius:10px; padding: 10px 14px;">
                            <option value="1" {{ old('pemilik_tanah_sama_dengan_pemilik_bangunan', $pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan) == '1' ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ old('pemilik_tanah_sama_dengan_pemilik_bangunan', $pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan) == '0' ? 'selected' : '' }}>Tidak</option>
                        </select>
                    </div>
                </div>
                <div id="pemanfaatanFields" style="display: {{ old('pemilik_tanah_sama_dengan_pemilik_bangunan', $pengajuan->pemilik_tanah_sama_dengan_pemilik_bangunan) == '0' ? 'block' : 'none' }};">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Nomor Surat Perjanjian <span class="text-danger">*</span></label>
                            <input type="text" name="nomor_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('nomor_surat_perjanjian_pemanfaatan_tanah', $pengajuan->nomor_surat_perjanjian_pemanfaatan_tanah) }}" style="border-radius:10px; padding: 10px 14px;">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Tanggal Surat Perjanjian <span class="text-danger">*</span></label>
                            <input type="date" name="tanggal_terbit_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('tanggal_terbit_surat_perjanjian_pemanfaatan_tanah', $pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah ? \Carbon\Carbon::parse($pengajuan->tanggal_terbit_surat_perjanjian_pemanfaatan_tanah)->format('Y-m-d') : '') }}" style="border-radius:10px; padding: 10px 14px;">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Nama Penerima Surat <span class="text-danger">*</span></label>
                            <input type="text" name="nama_penerima_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('nama_penerima_surat_perjanjian_pemanfaatan_tanah', $pengajuan->nama_penerima_surat_perjanjian_pemanfaatan_tanah) }}" style="border-radius:10px; padding: 10px 14px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end"><button type="button" class="btn btn-primary" onclick="goToStep(2)">Selanjutnya <i class="bi bi-arrow-right ms-1"></i></button></div>
    </div>

    <!-- STEP 2 -->
    <div class="step-panel" id="step-2">
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-building me-2"></i> Data Bangunan</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Fungsi Bangunan <span class="text-danger">*</span></label>
                        <select name="fungsi_bangunan" id="fungsi_bangunan" class="form-control" required style="border-radius:10px; padding: 10px 14px;">
                            <option value="Hunian" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Hunian' ? 'selected' : '' }}>Hunian</option>
                            <option value="Keagamaan" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Keagamaan' ? 'selected' : '' }}>Keagamaan</option>
                            <option value="Usaha" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Usaha' ? 'selected' : '' }}>Usaha</option>
                            <option value="Sosial dan Budaya" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Sosial dan Budaya' ? 'selected' : '' }}>Sosial dan Budaya</option>
                            <option value="Khusus" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Khusus' ? 'selected' : '' }}>Khusus</option>
                            <option value="Campuran" {{ old('fungsi_bangunan', $pengajuan->fungsi_bangunan) == 'Campuran' ? 'selected' : '' }}>Campuran</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Sub Fungsi Bangunan <span class="text-danger">*</span></label>
                        <input type="text" name="sub_fungsi_bangunan" class="form-control" value="{{ old('sub_fungsi_bangunan', $pengajuan->sub_fungsi_bangunan) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Nama Bangunan <span class="text-danger">*</span></label>
                        <input type="text" name="nama_bangunan" class="form-control" value="{{ old('nama_bangunan', $pengajuan->nama_bangunan) }}" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Luas Bangunan (m²) <span class="text-danger">*</span></label>
                        <input type="number" name="luas_bangunan" class="form-control" value="{{ old('luas_bangunan', $pengajuan->luas_bangunan) }}" step="0.01" min="1" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Ketinggian Bangunan (meter) <span class="text-danger">*</span></label>
                        <input type="number" name="ketinggian_bangunan" class="form-control" value="{{ old('ketinggian_bangunan', $pengajuan->ketinggian_bangunan) }}" step="0.01" min="1" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Jumlah Lantai <span class="text-danger">*</span></label>
                        <input type="number" name="jumlah_lantai" class="form-control" value="{{ old('jumlah_lantai', $pengajuan->jumlah_lantai) }}" min="1" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Jumlah Lapis Basemen</label>
                        <input type="number" name="jumlah_lapis_basemen" class="form-control" value="{{ old('jumlah_lapis_basemen', $pengajuan->jumlah_lapis_basemen ?? 0) }}" min="0" style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Luas Basemen (m²)</label>
                        <input type="number" name="luas_basemen" class="form-control" value="{{ old('luas_basemen', $pengajuan->luas_basemen) }}" step="0.01" min="0" style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Jumlah Unit Bangunan <span class="text-danger">*</span></label>
                        <input type="number" name="jumlah_unit_bangunan" class="form-control" value="{{ old('jumlah_unit_bangunan', $pengajuan->jumlah_unit_bangunan) }}" min="1" required style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Estimasi Jumlah Penghuni</label>
                        <input type="number" name="estimasi_jumlah_penghuni" class="form-control" value="{{ old('estimasi_jumlah_penghuni', $pengajuan->estimasi_jumlah_penghuni) }}" min="0" style="border-radius:10px; padding: 10px 14px;">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Tahun Rencana Pembangunan</label>
                        <input type="text" name="tahun_rencana_bangun" class="form-control" value="{{ old('tahun_rencana_bangun', $pengajuan->tahun_rencana_bangun) }}" style="border-radius:10px; padding: 10px 14px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-outline-secondary" onclick="goToStep(1)"><i class="bi bi-arrow-left me-1"></i> Kembali</button>
            <button type="button" class="btn btn-primary" onclick="goToStep(3)">Selanjutnya <i class="bi bi-arrow-right ms-1"></i></button>
        </div>
    </div>

    <!-- STEP 3: DOKUMEN -->
    <div class="step-panel" id="step-3">
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-file-earmark-arrow-up me-2"></i> Dokumen Pengajuan</div>
            <div class="card-body">
                <div class="alert alert-warning mb-4" style="border-radius:12px;">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    <strong>Dokumen yang perlu direvisi</strong><br>
                    Hanya dokumen dengan status <strong class="text-danger">"Tidak Lengkap"</strong> yang wajib diupload ulang.<br>
                    Dokumen dengan status <strong class="text-success">"Lengkap"</strong> tidak perlu diubah (kosongkan saja field upload).
                </div>

                @php
                $dokumenList = $pengajuan->dokumen;
                @endphp

                @if($dokumenList->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead style="background: var(--primary); color:#fff;">
                                <tr>
                                    <th style="width:40px;">No</th>
                                    <th>Nama Dokumen</th>
                                    <th>Status Verifikasi</th>
                                    <th style="width:30%;">Catatan Pemeriksa</th>
                                    <th style="width:280px;">Upload File Baru</th>
                                    <th style="width:120px;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($dokumenList as $idx => $dok)
                                @php
                                    $keterangan = '';
                                    $status = 'belum_diperiksa';
                                    $statusLabel = 'Belum Diperiksa';
                                    
                                    if ($dok->pemeriksaan) {
                                        $status = $dok->pemeriksaan->status;
                                        $statusLabel = $dok->pemeriksaan->status_label;
                                        $keterangan = $dok->pemeriksaan->keterangan;
                                    }
                                    
                                    if (empty($keterangan) && property_exists($dok, 'catatan_revisi')) {
                                        $keterangan = $dok->catatan_revisi;
                                    }
                                    
                                    if (empty($keterangan) && session('catatan_dokumen_' . $dok->id)) {
                                        $keterangan = session('catatan_dokumen_' . $dok->id);
                                    }
                                    
                                    $statusClass = $status === 'lengkap' ? 'status-lengkap' : ($status === 'tidak_lengkap' ? 'status-tidak_lengkap' : 'status-belum_diperiksa');
                                @endphp
                                <tr id="dokumen-row-{{ $dok->id }}" data-status="{{ $status }}">
                                    <td class="text-center">{{ $idx + 1 }}</td>
                                    <td>
                                        <strong>{{ $dok->nama_dokumen }}</strong><br>
                                        <small class="text-muted">📎 {{ $dok->file_name ?? basename($dok->file_path) }}</small>
                                        <input type="hidden" name="dokumen_existing[{{ $dok->id }}][id]" value="{{ $dok->id }}">
                                        <input type="hidden" name="dokumen_existing[{{ $dok->id }}][nama]" value="{{ $dok->nama_dokumen }}">
                                        <input type="hidden" name="dokumen_existing[{{ $dok->id }}][status]" value="{{ $status }}">
                                    </td>
                                    <td class="text-center">
                                        <span class="badge status-badge {{ $statusClass }}">
                                            @if($status === 'lengkap')
                                                ✅ Lengkap
                                            @elseif($status === 'tidak_lengkap')
                                                ❌ Tidak Lengkap
                                            @else
                                                ⏳ Belum Diperiksa
                                            @endif
                                        </span>
                                    </td>
                                    <td style="background-color: #fff8f0;">
                                        @if(!empty($keterangan))
                                            <div class="text-danger">
                                                <i class="bi bi-chat-left-quote-fill me-1"></i>
                                                <strong>{{ $keterangan }}</strong>
                                            </div>
                                        @else
                                            <span class="text-muted"><i class="bi bi-dash-circle"></i> Tidak ada catatan</span>
                                        @endif
                                    </td>
                                    <td>
                                        <input type="file" class="form-control form-control-sm upload-revisi-temp" 
                                               data-dokumen-id="{{ $dok->id }}" 
                                               data-nama-dokumen="{{ $dok->nama_dokumen }}"
                                               data-status="{{ $status }}"
                                               accept=".jpg,.jpeg,.png,.pdf" style="border-radius:8px;">
                                        <div class="preview-revisi-{{ $dok->id }} mt-1"></div>
                                        <input type="hidden" name="dokumen_temp_baru[]" id="temp-input-{{ $dok->id }}" value="">
                                        @if($status === 'tidak_lengkap')
                                            <div class="text-danger mt-1" style="font-size: 11px;">
                                                <i class="bi bi-exclamation-triangle-fill"></i> Wajib upload ulang
                                            </div>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-warning mb-1 btn-lihat-coretan" 
                                                data-file="{{ asset('storage/' . $dok->file_path) }}"
                                                data-id="{{ $dok->id }}"
                                                data-nama="{{ $dok->nama_dokumen }}"
                                                title="Lihat Coretan Pemeriksa"
                                                style="border-radius:8px; width:100%;">
                                            <i class="bi bi-pencil-square"></i> Lihat Coretan
                                        </button>
                                        <div class="d-flex gap-1 mt-1">
                                            <a href="{{ asset('storage/' . $dok->file_path) }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Lihat File" style="border-radius:8px; flex:1;">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-dokumen" data-id="{{ $dok->id }}" data-nama="{{ $dok->nama_dokumen }}" title="Hapus File" style="border-radius:8px; flex:1;">
                                                <i class="bi bi-trash3"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="alert alert-info">Belum ada dokumen yang diupload.</div>
                @endif

                <div class="mt-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold mb-0" style="color: var(--primary);"><i class="bi bi-plus-circle me-1"></i> Tambah Dokumen Baru (Opsional)</h6>
                        <button type="button" class="btn btn-sm btn-accent" onclick="addDokumenBaru()"><i class="bi bi-plus-lg me-1"></i> Tambah</button>
                    </div>
                    <div id="dokumenBaruContainer"></div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-outline-secondary" onclick="goToStep(2)"><i class="bi bi-arrow-left me-1"></i> Kembali</button>
            <button type="button" class="btn btn-primary" id="submitRevisiBtn">
                <i class="bi bi-send-fill me-1"></i> Kirim Revisi
            </button>
        </div>
    </div>
</form>

{{-- MODAL LIHAT CORETAN --}}
<div class="modal fade" id="modalLihatCoretan" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil-square text-warning me-2"></i> Coretan Pemeriksa: <span id="coretan-nama-dokumen"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div id="pdfContainerCoretan" style="position:relative; overflow:auto; height:85vh; background:#f0f2f5; padding:20px;"></div>
            </div>
            <div class="modal-footer">
                <div class="d-flex align-items-center gap-3 me-auto">
                    <span class="badge bg-warning text-dark"><i class="bi bi-info-circle me-1"></i> Garis merah = coretan pemeriksa</span>
                    <span class="badge bg-light text-dark border"><i class="bi bi-chat-fill text-warning me-1"></i> Kotak kuning = catatan pemeriksa</span>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL KONFIRMASI UPLOAD ULANG --}}
<div class="modal fade modal-konfirmasi" id="confirmUploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-header" style="border-bottom: none; padding-bottom: 0;">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="icon-warning">⚠️</div>
                <h4 class="text-center" style="font-weight:700;">Konfirmasi Upload Ulang</h4>
                <p class="text-center text-muted" id="uploadConfirmText">Anda akan mengganti file dokumen ini.</p>
                <div class="alert alert-warning mt-3" style="border-radius:12px;">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    <strong>Perhatikan:</strong>
                    <ul class="mb-0 mt-1">
                        <li>File lama akan <strong>diganti</strong> dengan file baru</li>
                        <li>Coretan pemeriksa pada file lama akan <strong>dihapus</strong></li>
                        <li>Status pemeriksaan akan direset ke <strong>"Belum Diperiksa"</strong></li>
                    </ul>
                </div>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmUploadCheck">
                    <label class="form-check-label" for="confirmUploadCheck">Saya yakin ingin mengganti file ini dengan file baru.</label>
                </div>
            </div>
            <div class="modal-footer" style="border-top: none; padding-top: 0;">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:10px;">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmUploadBtn" disabled style="border-radius:10px; padding: 8px 24px;">
                    <i class="bi bi-upload me-1"></i> Ya, Upload Ulang
                </button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL PREVIEW FILE BARU --}}
<div class="modal fade" id="modalPreviewFileBaru" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-header" style="background: var(--primary); color: #fff; border-radius:20px 20px 0 0;">
                <h5 class="modal-title fw-bold"><i class="bi bi-file-earmark-text me-2"></i> <span id="previewFileNama">Preview File</span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="max-height: 85vh; overflow: auto;">
                <div id="previewFileContainer" style="padding: 20px; text-align: center; min-height: 200px;">
                    <div class="text-center p-5">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2">Memuat file...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <span class="text-muted small me-auto" id="previewFileInfo">-</span>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:10px;">Tutup</button>
                <a href="#" id="previewFileDownload" target="_blank" class="btn btn-primary" style="border-radius:10px;">
                    <i class="bi bi-download me-1"></i> Download
                </a>
            </div>
        </div>
    </div>
</div>

{{-- MODAL KONFIRMASI KIRIM REVISI --}}
<div class="modal fade modal-konfirmasi" id="confirmSubmitRevisiModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:20px;">
            <div class="modal-header" style="background: var(--primary); color: #fff; border-radius:20px 20px 0 0;">
                <h5 class="modal-title fw-bold"><i class="bi bi-send-check me-2"></i> Konfirmasi Kirim Revisi</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="icon-warning">📋</div>
                <h5 class="text-center" style="font-weight:700;">Periksa Kembali Data Anda!</h5>
                <p class="text-center text-muted">Pastikan semua data yang diubah sudah benar sebelum mengirim revisi.</p>
                <div class="alert alert-info" style="border-radius:12px;">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    <strong>Yang akan terjadi:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Revisi akan dikirim ke pemeriksa</li>
                        <li>Status pengajuan berubah menjadi <strong>"Diperiksa"</strong></li>
                        <li>Coretan pada dokumen yang diubah akan <strong>dihapus</strong></li>
                        <li>Dokumen yang dihapus akan <strong>hilang permanen</strong></li>
                    </ul>
                </div>
                <div id="submitSummary" class="mt-3"></div>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmSubmitRevisiCheck">
                    <label class="form-check-label" for="confirmSubmitRevisiCheck">Saya menyatakan bahwa semua data yang saya isikan adalah <strong>benar dan lengkap</strong>.</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" style="border-radius:10px;">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmSubmitRevisiBtn" disabled style="border-radius:10px; padding: 8px 24px;">
                    <i class="bi bi-send-fill me-1"></i> Ya, Kirim Revisi
                </button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL SUKSES --}}
<div class="success-overlay" id="successOverlay" style="display:none;">
    <div class="success-modal">
        <div class="icon-success"><i class="bi bi-check-circle-fill"></i></div>
        <h3>✅ Revisi Terkirim!</h3>
        <p>Revisi pengajuan Anda berhasil dikirim dan akan segera diperiksa oleh tim kami.</p>
        <button class="btn btn-success" onclick="closeSuccessAndStay()"><i class="bi bi-house me-2"></i> Kembali ke Beranda</button>
    </div>
</div>

<div class="form-disabled-overlay" id="submitLoading">
    <div class="spinner-large"></div>
    <p>Mengirim revisi...</p>
</div>

<a href="{{ url('/chat/' . $pengajuan->id) }}" class="chat-fab" title="Chat dengan Pemeriksa">
    <i class="bi bi-chat-dots-fill"></i>
    @php
        $unreadCount = \App\Models\ChatMessage::where('pengajuan_id', $pengajuan->id)
            ->where('user_id', '!=', auth()->id())
            ->where('is_read', false)
            ->count();
    @endphp
    @if($unreadCount > 0)
        <span class="badge-notif">{{ $unreadCount > 9 ? '9+' : $unreadCount }}</span>
    @endif
</a>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>
// ============================================
// VARIABLES
// ============================================
let currentStep = 1;
let dokumenBaruIndex = 100;
let autoSaveTimer;
let isSaving = false;
let lastSavedData = '';

// ============================================
// STEPPER
// ============================================
function goToStep(step) {
    document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));
    document.getElementById('step-' + step).classList.add('active');
    document.querySelectorAll('.stepper-item').forEach(item => {
        const s = parseInt(item.dataset.step);
        item.classList.remove('active', 'completed');
        if (s === step) item.classList.add('active');
        else if (s < step) item.classList.add('completed');
    });
    currentStep = step;
    window.scrollTo({ top: 0, behavior: 'smooth' });
    autoSaveToServer();
}

// ============================================
// AUTO-SAVE
// ============================================
function getFormDataString() {
    const form = document.getElementById('formRevisi');
    if (!form) return '';
    const formData = new FormData(form);
    const data = {};
    for (let [key, value] of formData.entries()) {
        if (!key.includes('file') && !key.includes('temp') && !key.includes('_token') && !key.includes('_method')) {
            data[key] = value;
        }
    }
    return JSON.stringify(data);
}

function autoSaveToServer() {
    if (isSaving) return;
    const currentData = getFormDataString();
    if (currentData === lastSavedData) return;
    
    const form = document.getElementById('formRevisi');
    if (!form) return;
    
    const formData = new FormData(form);
    formData.append('_token', '{{ csrf_token() }}');
    
    isSaving = true;
    showSavingIndicator();
    
    fetch('{{ route("pengajuan.auto-save-revisi", $pengajuan->id) }}', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            lastSavedData = currentData;
            showAutoSaveNotification('✓ Tersimpan otomatis ' + data.timestamp);
        }
    })
    .catch(() => showAutoSaveNotification('❌ Gagal menyimpan', 'error'))
    .finally(() => { isSaving = false; hideSavingIndicator(); });
}

function showSavingIndicator() {
    let indicator = document.querySelector('.saving-indicator');
    if (!indicator) {
        indicator = document.createElement('div');
        indicator.className = 'saving-indicator';
        indicator.innerHTML = '<i class="bi bi-arrow-repeat spin"></i> Menyimpan...';
        document.body.appendChild(indicator);
    }
    indicator.style.display = 'flex';
}

function hideSavingIndicator() {
    const indicator = document.querySelector('.saving-indicator');
    if (indicator) indicator.style.display = 'none';
}

function showAutoSaveNotification(message, type = 'success') {
    let toast = document.querySelector('.auto-save-toast');
    if (!toast) {
        toast = document.createElement('div');
        toast.className = 'auto-save-toast';
        document.body.appendChild(toast);
    }
    toast.style.background = type === 'error' ? '#e53e3e' : '#38a169';
    toast.textContent = message;
    toast.style.opacity = '1';
    setTimeout(() => toast.style.opacity = '0', 2000);
}

// ============================================
// UPLOAD REVISI DENGAN KONFIRMASI
// ============================================
let uploadConfirmCallback = null;

function showUploadConfirm(fileInput, dokumenId, namaDokumen, status) {
    const modal = new bootstrap.Modal(document.getElementById('confirmUploadModal'));
    const confirmText = document.getElementById('uploadConfirmText');
    const confirmCheck = document.getElementById('confirmUploadCheck');
    const confirmBtn = document.getElementById('confirmUploadBtn');
    
    let statusText = status === 'tidak_lengkap' ? '<span class="text-danger">(Wajib Upload Ulang)</span>' : '(Opsional)';
    confirmText.innerHTML = `Anda akan mengganti file <strong>"${namaDokumen}"</strong> ${statusText}.<br><small class="text-muted">File: ${fileInput.files[0]?.name || '...'}</small>`;
    
    confirmCheck.checked = false;
    confirmBtn.disabled = true;
    
    uploadConfirmCallback = function() {
        processUpload(fileInput, dokumenId, namaDokumen);
        modal.hide();
    };
    
    confirmCheck.onchange = function() {
        confirmBtn.disabled = !this.checked;
        if (this.checked) confirmBtn.onclick = uploadConfirmCallback;
    };
    
    modal._element.addEventListener('hidden.bs.modal', function() {
        if (!confirmCheck.checked) {
            fileInput.value = '';
            const previewDiv = document.querySelector(`.preview-revisi-${dokumenId}`);
            if (previewDiv) previewDiv.innerHTML = '';
        }
    }, { once: true });
    
    modal.show();
}

// ============================================
// PROCESS UPLOAD
// ============================================
async function processUpload(fileInput, dokumenId, namaDokumen) {
    const file = fileInput.files[0];
    const previewDiv = document.querySelector(`.preview-revisi-${dokumenId}`);
    const hiddenInput = document.getElementById(`temp-input-${dokumenId}`);
    
    if (!file) return;
    
    // CEK UKURAN FILE
    if (file.size === 0) {
        previewDiv.innerHTML = `<div class="small text-danger">❌ File kosong (0 bytes). Pilih file yang valid.</div>`;
        fileInput.value = '';
        return;
    }
    
    // CEK TIPE FILE
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'application/pdf'];
    if (!allowedTypes.includes(file.type)) {
        previewDiv.innerHTML = `<div class="small text-danger">❌ Tipe file tidak didukung. Gunakan PDF, JPG, atau PNG.</div>`;
        fileInput.value = '';
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('nama_dokumen', namaDokumen);
    formData.append('dokumen_id', dokumenId);
    
    previewDiv.innerHTML = `<div class="small text-info mt-1"><i class="bi bi-hourglass-split"></i> Mengupload...</div>`;
    
    try {
        const response = await fetch('{{ route("pengajuan.upload_temp") }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: formData
        });
        const result = await response.json();
        
        if (result.success) {
            if (hiddenInput) hiddenInput.value = JSON.stringify({
                dokumen_id: dokumenId,
                temp_path: result.temp_path,
                nama: namaDokumen,
                url: result.url,
                file_name: result.file_name
            });
            
            const markForReplace = document.createElement('input');
            markForReplace.type = 'hidden';
            markForReplace.name = 'replace_dokumen_ids[]';
            markForReplace.value = dokumenId;
            document.getElementById('formRevisi').appendChild(markForReplace);
            
            previewDiv.innerHTML = `
                <div class="preview-file-baru">
                    <div class="file-info">
                        <i class="bi bi-file-earmark-check text-success"></i>
                        <span><strong>${file.name}</strong></span>
                        <span class="badge bg-success" style="font-size:10px;">${(file.size / 1024).toFixed(1)} KB</span>
                        <span class="badge bg-secondary" style="font-size:10px;">${file.type.split('/')[1].toUpperCase()}</span>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-primary btn-preview-upload" 
                                data-url="${result.url}" data-nama="${namaDokumen}" data-file="${file.name}" title="Lihat File">
                            <i class="bi bi-eye"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger btn-batal-upload-temp" 
                                data-temp="${result.temp_path}" data-id="${dokumenId}" title="Batal Upload">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                </div>
            `;
            
            previewDiv.querySelector('.btn-preview-upload')?.addEventListener('click', function() {
                showPreviewFileBaru(this.dataset.url, this.dataset.nama, this.dataset.file);
            });
            
            previewDiv.querySelector('.btn-batal-upload-temp')?.addEventListener('click', async function() {
                if (confirm('Batalkan upload file ini?')) {
                    await fetch('{{ route("pengajuan.delete_temp") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ temp_path: this.dataset.temp })
                    });
                    fileInput.value = '';
                    previewDiv.innerHTML = '';
                    if (hiddenInput) hiddenInput.value = '';
                    const replaceInput = document.querySelector(`input[name="replace_dokumen_ids[]"][value="${this.dataset.id}"]`);
                    if (replaceInput) replaceInput.remove();
                }
            });
        } else {
            throw new Error(result.message || 'Gagal upload');
        }
    } catch (error) {
        console.error('Upload error:', error);
        previewDiv.innerHTML = `<div class="small text-danger">❌ Gagal upload: ${error.message}</div>`;
        fileInput.value = '';
    }
}

// ============================================
// PREVIEW FILE BARU - DENGAN ERROR HANDLING
// ============================================
function showPreviewFileBaru(url, nama, file) {
    const modal = new bootstrap.Modal(document.getElementById('modalPreviewFileBaru'));
    const container = document.getElementById('previewFileContainer');
    const title = document.getElementById('previewFileNama');
    const info = document.getElementById('previewFileInfo');
    const downloadBtn = document.getElementById('previewFileDownload');
    
    title.textContent = nama || 'Preview File';
    info.textContent = file || '';
    downloadBtn.href = url;
    downloadBtn.download = file || 'file';
    
    container.innerHTML = `<div class="text-center p-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Memuat file...</p></div>`;
    modal.show();
    
    const extension = (file || '').split('.').pop().toLowerCase();
    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(extension);
    const isPdf = extension === 'pdf';
    
    // Cek apakah file bisa diakses
    fetch(url, { method: 'HEAD' })
        .then(response => {
            if (!response.ok) {
                throw new Error('File tidak dapat diakses (Status: ' + response.status + ')');
            }
            return response;
        })
        .then(() => {
            if (isImage) {
                const img = new Image();
                img.onload = function() {
                    container.innerHTML = `
                        <div style="max-width:100%; padding:20px; text-align:center;">
                            <img src="${url}" alt="${file}" style="max-width:100%; max-height:70vh; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1);">
                        </div>
                    `;
                };
                img.onerror = function() {
                    container.innerHTML = `
                        <div class="alert alert-warning m-3" style="border-radius:12px;">
                            <i class="bi bi-exclamation-triangle-fill me-2" style="font-size:20px;"></i>
                            <strong>Gagal menampilkan gambar</strong>
                            <p class="mt-2 mb-0">File mungkin rusak atau format tidak didukung.</p>
                            <div class="mt-3">
                                <a href="${url}" target="_blank" class="btn btn-primary">
                                    <i class="bi bi-eye me-1"></i> Buka di Tab Baru
                                </a>
                                <a href="${url}" download="${file}" class="btn btn-outline-primary ms-2">
                                    <i class="bi bi-download me-1"></i> Download
                                </a>
                            </div>
                        </div>
                    `;
                };
                img.src = url;
            } else if (isPdf) {
                container.innerHTML = `
                    <div style="padding:10px; height:70vh;">
                        <iframe src="${url}#toolbar=1" style="width:100%; height:100%; border:none; border-radius:8px;"></iframe>
                    </div>
                `;
            } else {
                container.innerHTML = `
                    <div class="alert alert-info m-3" style="border-radius:12px;">
                        <i class="bi bi-info-circle-fill me-2" style="font-size:20px;"></i>
                        <strong>${file || 'File'}</strong>
                        <span class="badge bg-secondary ms-2">${extension.toUpperCase() || 'Unknown'}</span>
                        <p class="mt-2 mb-0">File ini tidak dapat ditampilkan langsung di browser.</p>
                        <div class="mt-3">
                            <a href="${url}" target="_blank" class="btn btn-primary">
                                <i class="bi bi-eye me-1"></i> Buka di Tab Baru
                            </a>
                            <a href="${url}" download="${file}" class="btn btn-outline-primary ms-2">
                                <i class="bi bi-download me-1"></i> Download
                            </a>
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Preview error:', error);
            container.innerHTML = `
                <div class="alert alert-danger m-3" style="border-radius:12px;">
                    <i class="bi bi-x-circle-fill me-2" style="font-size:20px;"></i>
                    <strong>Gagal memuat file</strong>
                    <p class="mt-2 mb-0">${error.message || 'File tidak dapat diakses. Periksa kembali file Anda.'}</p>
                    <div class="mt-3">
                        <a href="${url}" target="_blank" class="btn btn-primary">
                            <i class="bi bi-eye me-1"></i> Buka di Tab Baru
                        </a>
                        <a href="${url}" download="${file}" class="btn btn-outline-primary ms-2">
                            <i class="bi bi-download me-1"></i> Download
                        </a>
                    </div>
                </div>
            `;
        });
}

// ============================================
// EVENT LISTENERS
// ============================================
document.addEventListener('change', function(e) {
    if (e.target.classList && e.target.classList.contains('upload-revisi-temp')) {
        const fileInput = e.target;
        const file = fileInput.files[0];
        const dokumenId = fileInput.dataset.dokumenId;
        const namaDokumen = fileInput.dataset.namaDokumen;
        const status = fileInput.dataset.status;
        
        if (!file) {
            const previewDiv = document.querySelector(`.preview-revisi-${dokumenId}`);
            if (previewDiv) previewDiv.innerHTML = '';
            return;
        }
        showUploadConfirm(fileInput, dokumenId, namaDokumen, status);
    }
});

document.addEventListener('click', function(e) {
    if (e.target.classList && e.target.classList.contains('btn-hapus-dokumen')) {
        if (confirm('Hapus dokumen ini? File akan dihapus permanen saat revisi dikirim.')) {
            const btn = e.target;
            const dokumenId = btn.dataset.id;
            const row = document.getElementById(`dokumen-row-${dokumenId}`);
            if (row) {
                row.style.opacity = '0.5';
                row.style.backgroundColor = '#f8d7da';
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'hapus_dokumen_ids[]';
                hiddenInput.value = dokumenId;
                document.getElementById('formRevisi').appendChild(hiddenInput);
                const fileInput = row.querySelector('.upload-revisi-temp');
                if (fileInput) fileInput.disabled = true;
                btn.disabled = true;
                btn.innerHTML = '<i class="bi bi-trash3"></i>';
                btn.title = 'Akan dihapus';
            }
        }
    }
});

// ============================================
// TAMBAH DOKUMEN BARU
// ============================================
function addDokumenBaru() {
    const container = document.getElementById('dokumenBaruContainer');
    const html = `
        <div class="dokumen-baru-item border rounded-3 p-3 mb-3" style="background: #f7fafc;">
            <div class="row align-items-end">
                <div class="col-md-5 mb-2">
                    <label class="form-label fw-bold" style="font-size:13px;">Nama Dokumen <span class="text-danger">*</span></label>
                    <input type="text" name="dokumen_baru[${dokumenBaruIndex}][nama]" class="form-control" placeholder="Contoh: Surat Pernyataan" required style="border-radius:10px; padding: 8px 12px;">
                </div>
                <div class="col-md-5 mb-2">
                    <label class="form-label fw-bold" style="font-size:13px;">File <span class="text-danger">*</span></label>
                    <input type="file" name="dokumen_baru[${dokumenBaruIndex}][file]" class="form-control upload-dokumen-baru" required accept=".jpg,.jpeg,.png,.pdf" style="border-radius:10px; padding: 8px 12px;">
                    <div class="preview-baru mt-1"></div>
                </div>
                <div class="col-md-2 mb-2">
                    <button type="button" class="btn btn-outline-danger btn-sm w-100" onclick="removeDokumenBaru(this)" style="border-radius:10px; padding: 8px;"><i class="bi bi-trash3"></i> Hapus</button>
                </div>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', html);
    dokumenBaruIndex++;
}

function removeDokumenBaru(btn) {
    btn.closest('.dokumen-baru-item').remove();
}

// ============================================
// PEMILIK TANAH TOGGLE
// ============================================
const pemilikSama = document.getElementById('pemilik_sama');
if (pemilikSama) {
    pemilikSama.addEventListener('change', function() {
        const fields = document.getElementById('pemanfaatanFields');
        fields.style.display = this.value === '0' ? 'block' : 'none';
        autoSaveToServer();
    });
}

// ============================================
// SUBMIT REVISI DENGAN KONFIRMASI
// ============================================
document.getElementById('submitRevisiBtn')?.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Validasi NIK
    const nikInput = document.querySelector('input[name="nomor_tanda_pengenal"]');
    const kontakInput = document.querySelector('input[name="nomor_kontak"]');
    const jenis = document.querySelector('select[name="jenis_tanda_pengenal"]')?.value;
    
    if (jenis === 'NIK' && nikInput) {
        const nikValue = nikInput.value.replace(/\D/g, '');
        if (nikValue.length !== 16) {
            alert('NIK harus 16 digit angka!');
            nikInput.focus();
            goToStep(1);
            return;
        }
    }
    
    if (kontakInput) {
        const kontakValue = kontakInput.value.replace(/\D/g, '');
        if (kontakValue.length < 11 || kontakValue.length > 13) {
            alert('Nomor kontak harus 11-13 digit angka!');
            kontakInput.focus();
            goToStep(1);
            return;
        }
    }
    
    // Cek dokumen wajib upload ulang
    const rows = document.querySelectorAll('tr[id^="dokumen-row-"]');
    let missingRequired = false;
    let missingList = [];
    
    rows.forEach(row => {
        const status = row.dataset.status;
        if (status === 'tidak_lengkap') {
            const fileInput = row.querySelector('.upload-revisi-temp');
            const hiddenInput = row.querySelector('input[name^="dokumen_temp_baru"]');
            let hasFile = false;
            if (fileInput && fileInput.files && fileInput.files.length > 0) hasFile = true;
            if (hiddenInput && hiddenInput.value) {
                try { const data = JSON.parse(hiddenInput.value); if (data.temp_path) hasFile = true; } catch(e) {}
            }
            if (!hasFile) {
                missingRequired = true;
                const namaDokumen = row.querySelector('td:nth-child(2) strong')?.textContent || 'Dokumen';
                missingList.push(namaDokumen);
                row.style.borderLeft = '4px solid #e53e3e';
                row.style.backgroundColor = '#fff5f5';
            } else {
                row.style.borderLeft = '';
                row.style.backgroundColor = '';
            }
        }
    });
    
    if (missingRequired) {
        alert(`⚠️ Dokumen berikut wajib diupload ulang:\n\n${missingList.map((d, i) => `${i+1}. ${d}`).join('\n')}\n\nSilakan upload file baru.`);
        goToStep(3);
        return;
    }
    
    showSubmitRevisiConfirm();
});

function showSubmitRevisiConfirm() {
    const modal = new bootstrap.Modal(document.getElementById('confirmSubmitRevisiModal'));
    const summaryDiv = document.getElementById('submitSummary');
    const confirmCheck = document.getElementById('confirmSubmitRevisiCheck');
    const confirmBtn = document.getElementById('confirmSubmitRevisiBtn');
    
    let dokumenDiubah = 0, dokumenDihapus = 0, dokumenBaru = 0;
    
    document.querySelectorAll('.upload-revisi-temp').forEach(input => {
        if (input.files.length > 0 || input.closest('tr')?.querySelector('input[name^="dokumen_temp_baru"]')?.value) {
            dokumenDiubah++;
        }
    });
    document.querySelectorAll('input[name="hapus_dokumen_ids[]"]').forEach(() => dokumenDihapus++);
    document.querySelectorAll('.dokumen-baru-item').forEach(item => {
        if (item.querySelector('input[type="file"]')?.files.length > 0) dokumenBaru++;
    });
    
    let summaryHtml = `<div class="small"><strong>Ringkasan Perubahan:</strong><ul class="mb-0 mt-1">`;
    if (dokumenDiubah > 0) summaryHtml += `<li>📄 ${dokumenDiubah} dokumen diupload ulang</li>`;
    if (dokumenDihapus > 0) summaryHtml += `<li>🗑️ ${dokumenDihapus} dokumen dihapus</li>`;
    if (dokumenBaru > 0) summaryHtml += `<li>📎 ${dokumenBaru} dokumen baru ditambahkan</li>`;
    if (dokumenDiubah === 0 && dokumenDihapus === 0 && dokumenBaru === 0) {
        summaryHtml += `<li>ℹ️ Tidak ada perubahan pada dokumen</li>`;
    }
    summaryHtml += `</ul></div>`;
    summaryDiv.innerHTML = summaryHtml;
    
    confirmCheck.checked = false;
    confirmBtn.disabled = true;
    confirmCheck.onchange = function() { confirmBtn.disabled = !this.checked; };
    confirmBtn.onclick = function() { modal.hide(); submitRevisi(); };
    modal.show();
}

function submitRevisi() {
    document.getElementById('submitLoading').classList.add('active');
    const form = document.getElementById('formRevisi');
    const formData = new FormData(form);
    
    fetch('{{ route("pengajuan.update", $pengajuan->id) }}', {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => {
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            return response.text().then(text => { throw new Error('Server error: ' + response.status); });
        }
        return response.json();
    })
    .then(data => {
        document.getElementById('submitLoading').classList.remove('active');
        if (data.success) {
            document.getElementById('successOverlay').style.display = 'flex';
        } else {
            let errorMsg = data.message || 'Terjadi kesalahan. Silakan coba lagi.';
            if (data.errors) {
                errorMsg = '❌ ' + Object.values(data.errors).flat().join('\n- ');
            }
            alert(errorMsg);
        }
    })
    .catch(error => {
        document.getElementById('submitLoading').classList.remove('active');
        alert('❌ Gagal mengirim revisi.\n\nError: ' + error.message);
    });
}

function closeSuccessAndStay() {
    document.getElementById('successOverlay').style.display = 'none';
    window.location.href = '{{ route("pengajuan.index") }}';
}

// ============================================
// LIHAT CORETAN PEMERIKSA
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    new bootstrap.Modal(document.getElementById('modalLihatCoretan'));
    
    document.querySelectorAll('.btn-lihat-coretan').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const fileUrl = this.dataset.file;
            const dokumenId = this.dataset.id;
            const namaDokumen = this.dataset.nama;
            
            document.getElementById('coretan-nama-dokumen').textContent = namaDokumen;
            const container = document.getElementById('pdfContainerCoretan');
            container.innerHTML = '<div class="text-center p-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Memuat dokumen...</p></div>';
            
            new bootstrap.Modal(document.getElementById('modalLihatCoretan')).show();
            
            setTimeout(async function() {
                try {
                    await renderPdfWithCoretan(fileUrl, dokumenId);
                } catch(error) {
                    container.innerHTML = `<div class="alert alert-danger m-3">Gagal memuat dokumen: ${error.message}</div>`;
                }
            }, 300);
        });
    });
    
    document.getElementById('modalLihatCoretan')?.addEventListener('hidden.bs.modal', function() {
        document.getElementById('pdfContainerCoretan').innerHTML = '';
    });
});

async function renderPdfWithCoretan(pdfUrl, dokumenId) {
    const container = document.getElementById('pdfContainerCoretan');
    container.innerHTML = '';
    container.style.cssText = 'max-height:85vh; overflow:auto; padding:20px; background:#f0f2f5;';
    
    try {
        let allCoretan = [];
        try {
            const response = await fetch('/pemohon/coretan/' + dokumenId);
            if (response.ok) {
                const data = await response.json();
                if (data.success && data.anotasi) allCoretan = data.anotasi;
            }
        } catch(e) {}
        
        const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
        
        for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            const containerWidth = container.clientWidth - 60 || window.innerWidth - 120;
            const viewport = page.getViewport({ scale: 1 });
            const pixelRatio = window.devicePixelRatio || 1;
            let displayScale = containerWidth / viewport.width;
            displayScale = Math.min(1.5, Math.max(0.5, displayScale));
            const canvasScale = displayScale * pixelRatio;
            const displayViewport = page.getViewport({ scale: displayScale });
            const canvasViewport = page.getViewport({ scale: canvasScale });
            
            const wrapper = document.createElement('div');
            wrapper.style.cssText = `position:relative; margin:0 auto 20px; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.1); max-width:100%; width:${displayViewport.width}px;`;
            
            const pdfCanvas = document.createElement('canvas');
            pdfCanvas.width = canvasViewport.width;
            pdfCanvas.height = canvasViewport.height;
            pdfCanvas.style.cssText = `display:block; width:${displayViewport.width}px; height:${displayViewport.height}px;`;
            
            const drawCanvas = document.createElement('canvas');
            drawCanvas.width = canvasViewport.width;
            drawCanvas.height = canvasViewport.height;
            drawCanvas.style.cssText = `position:absolute; left:0; top:0; width:${displayViewport.width}px; height:${displayViewport.height}px; z-index:10; display:block; pointer-events:none;`;
            
            wrapper.appendChild(pdfCanvas);
            wrapper.appendChild(drawCanvas);
            container.appendChild(wrapper);
            
            await page.render({ canvasContext: pdfCanvas.getContext('2d'), viewport: canvasViewport }).promise;
            
            const coretanHalaman = allCoretan.filter(a => a.halaman === pageNum);
            const ctx = drawCanvas.getContext('2d');
            
            coretanHalaman.forEach(function(item) {
                if (item.coretan && item.coretan.points && item.coretan.points.length > 1) {
                    ctx.beginPath();
                    ctx.strokeStyle = item.coretan.color || '#ff0000';
                    ctx.lineWidth = (item.coretan.width || 3) * canvasScale;
                    ctx.lineCap = 'round';
                    ctx.lineJoin = 'round';
                    const points = item.coretan.points;
                    ctx.moveTo(points[0].x * canvasScale, points[0].y * canvasScale);
                    for (let i = 1; i < points.length; i++) {
                        ctx.lineTo(points[i].x * canvasScale, points[i].y * canvasScale);
                    }
                    ctx.stroke();
                    
                    if (item.catatan && item.catatan.trim() !== '') {
                        let midX = 0, midY = 0;
                        for (let i = 0; i < item.coretan.points.length; i++) {
                            midX += item.coretan.points[i].x * canvasScale;
                            midY += item.coretan.points[i].y * canvasScale;
                        }
                        midX = midX / item.coretan.points.length;
                        midY = midY / item.coretan.points.length;
                        
                        const fontSize = 14 * canvasScale;
                        ctx.font = fontSize + 'px Arial';
                        const text = '📝 ' + item.catatan;
                        const metrics = ctx.measureText(text);
                        const padding = 10 * canvasScale;
                        const rectWidth = metrics.width + padding * 2;
                        const rectHeight = (34 + padding * 2) * canvasScale;
                        
                        let textX = midX - rectWidth / 2;
                        let textY = midY - (60 * canvasScale);
                        if (textX < 5) textX = 5;
                        if (textX + rectWidth > drawCanvas.width - 5) textX = drawCanvas.width - rectWidth - 5;
                        if (textY < 5) textY = 5;
                        
                        ctx.fillStyle = 'rgba(255, 243, 205, 0.95)';
                        ctx.shadowColor = 'rgba(0,0,0,0.2)';
                        ctx.shadowBlur = 10 * canvasScale;
                        ctx.beginPath();
                        if (ctx.roundRect) {
                            ctx.roundRect(textX, textY, rectWidth, rectHeight, 8 * canvasScale);
                        } else {
                            ctx.rect(textX, textY, rectWidth, rectHeight);
                        }
                        ctx.fill();
                        ctx.shadowBlur = 0;
                        ctx.strokeStyle = '#ffc107';
                        ctx.lineWidth = 2 * canvasScale;
                        ctx.beginPath();
                        if (ctx.roundRect) {
                            ctx.roundRect(textX, textY, rectWidth, rectHeight, 8 * canvasScale);
                        } 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);
                    }
                }
            });
            
            if (coretanHalaman.length > 0) {
                const info = document.createElement('div');
                info.style.cssText = `text-align:center; padding:5px 10px; font-size:12px; color:#856404; background:#fff3cd; border-top:1px solid #ffc107;`;
                info.innerHTML = `<i class="bi bi-pencil-square me-1"></i> Halaman ${pageNum}: ${coretanHalaman.length} coretan ${coretanHalaman.filter(c => c.catatan).length > 0 ? '📝 dengan catatan' : ''}`;
                wrapper.appendChild(info);
            }
        }
        
        if (allCoretan.length === 0) {
            const noCoretanInfo = document.createElement('div');
            noCoretanInfo.style.cssText = `text-align:center; padding:30px; color:#6c757d; font-size:16px;`;
            noCoretanInfo.innerHTML = `<i class="bi bi-info-circle" style="font-size:40px; display:block; margin-bottom:15px; color:#ffc107;"></i><strong>Tidak ada coretan pada dokumen ini</strong><p class="mt-2">Pemeriksa belum memberikan coretan pada dokumen ini.</p>`;
            container.prepend(noCoretanInfo);
        }
    } catch (error) {
        container.innerHTML = `<div class="alert alert-danger m-3">Gagal memuat PDF: ${error.message}</div>`;
    }
}

// ============================================
// INIT
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    // Auto-save untuk semua input
    const form = document.getElementById('formRevisi');
    if (form) {
        const inputs = form.querySelectorAll('input:not([type="file"]), select, textarea');
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                clearTimeout(autoSaveTimer);
                autoSaveTimer = setTimeout(autoSaveToServer, 2000);
            });
            input.addEventListener('change', () => {
                clearTimeout(autoSaveTimer);
                autoSaveTimer = setTimeout(autoSaveToServer, 1000);
            });
        });
    }
    
    setInterval(autoSaveToServer, 15000);
    lastSavedData = getFormDataString();
    
    // Validasi NIK
    const nikInput = document.querySelector('input[name="nomor_tanda_pengenal"]');
    const kontakInput = document.querySelector('input[name="nomor_kontak"]');
    const jenisTandaPengenal = document.querySelector('select[name="jenis_tanda_pengenal"]');
    
    if (nikInput && jenisTandaPengenal) {
        nikInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '').slice(0, 16);
            this.value = value;
            const jenis = jenisTandaPengenal.value;
            let errorDiv = this.parentElement.querySelector('.invalid-feedback') || (() => {
                const div = document.createElement('div');
                div.className = 'invalid-feedback';
                this.parentElement.appendChild(div);
                return div;
            })();
            if (jenis === 'NIK' && value.length !== 16 && value.length > 0) {
                this.classList.add('is-invalid');
                errorDiv.textContent = `NIK harus 16 digit (${value.length} digit)`;
            } else {
                this.classList.remove('is-invalid');
                errorDiv.textContent = '';
            }
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(autoSaveToServer, 1000);
        });
    }
    
    if (kontakInput) {
        kontakInput.addEventListener('input', function() {
            let value = this.value.replace(/\D/g, '').slice(0, 13);
            this.value = value;
            let errorDiv = this.parentElement.querySelector('.invalid-feedback') || (() => {
                const div = document.createElement('div');
                div.className = 'invalid-feedback';
                this.parentElement.appendChild(div);
                return div;
            })();
            if (value.length < 11 || value.length > 13) {
                this.classList.add('is-invalid');
                errorDiv.textContent = `Nomor kontak harus 11-13 digit (${value.length} digit)`;
            } else {
                this.classList.remove('is-invalid');
                errorDiv.textContent = '';
            }
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(autoSaveToServer, 1000);
        });
    }
    
    @if(Session::has('revisi_temp_' . $pengajuan->id))
        const restoreNotif = document.createElement('div');
        restoreNotif.style.cssText = 'position:fixed; top:20px; right:20px; background:#3182ce; color:white; padding:12px 20px; border-radius:12px; z-index:10000; box-shadow:0 4px 12px rgba(0,0,0,0.2); animation:slideIn 0.3s ease;';
        restoreNotif.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i> <strong>Data dipulihkan</strong><br><small>Data revisi sebelumnya telah dimuat</small>';
        document.body.appendChild(restoreNotif);
        setTimeout(() => restoreNotif.remove(), 4000);
    @endif
});
</script>
@endsection