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

@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); } }
    .review-table td { padding: 8px 12px; }
    .review-table td:first-child { font-weight: 600; width: 200px; }
    .status-uploaded { background: #c6f6d5; color: #22543d; padding: 4px 10px; border-radius: 20px; font-size: 12px; display: inline-block; margin-right: 8px; }
    .status-missing { background: #fed7d7; color: #9b2c2c; padding: 4px 10px; border-radius: 20px; font-size: 12px; display: inline-block; margin-right: 8px; }
    .file-actions { display: inline-flex; gap: 5px; align-items: center; margin-top: 5px; }
    .file-info { background: #edf2f7; padding: 4px 8px; border-radius: 6px; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
    .btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }
    
    /* === PERUBAHAN: HANYA KOLOM INPUTAN YANG DIUBAH === */
    .is-invalid { 
        border-color: #9CA3AF !important; 
        background-color: #F9FAFB !important; 
    }
    .invalid-feedback { 
        color: #6B7280; 
        font-size: 12px; 
        margin-top: 4px; 
        display: block; 
    }
    .doc-missing { 
        border: 2px solid #D1D5DB !important; 
        border-radius: 8px; 
        background-color: #F3F4F6 !important; 
    }
</style>
@endsection

@section('content')
<div class="page-header mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2>Buat Pengajuan PBG Baru</h2>
            <p>Isi formulir berikut secara bertahap untuk mengajukan permohonan PBG</p>
        </div>
        <button type="button" id="clearDraftBtn" class="btn btn-outline-danger btn-sm" style="display:none;">Hapus Draft</button>
    </div>
</div>

<!-- Stepper -->
<div class="stepper mb-5">
    <div class="stepper-item active" data-step="1"><div class="step-circle">1</div><div class="step-label">Data Pemohon</div></div>
    <div class="stepper-item" data-step="2"><div class="step-circle">2</div><div class="step-label">Data Bangunan&Tanah</div></div>
    <div class="stepper-item" data-step="3"><div class="step-circle">3</div><div class="step-label">Dokumen</div></div>
    <div class="stepper-item" data-step="4"><div class="step-circle">4</div><div class="step-label">Review & Kirim</div></div>
</div>

<form method="POST" action="{{ route('pengajuan.store') }}" enctype="multipart/form-data" id="formPengajuan">
    @csrf

    <!-- STEP 1: Data Pemilik -->
    <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" id="jenis_kepemilikan" class="form-select required-field" required>
                            <option value="">-- Pilih --</option>
                            <option value="Perorangan">Perorangan</option>
                            <option value="Badan Usaha">Badan Usaha</option>
                            <option value="Badan Hukum">Badan Hukum</option>
                            <option value="Pemerintah">Pemerintah</option>
                        </select>
                        <div class="invalid-feedback">Jenis kepemilikan wajib dipilih.</div>
                    </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" id="nama_lengkap" class="form-control required-field" value="{{ old('nama_lengkap') }}" required>
                        <div class="invalid-feedback">Nama lengkap wajib diisi.</div>
                    </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" id="jenis_tanda_pengenal" class="form-select required-field" required>
                            <option value="">-- Pilih --</option>
                            <option value="NIK">NIK (Nomor Induk Kependudukan)</option>
                            <option value="KITAS">KITAS</option>
                            <option value="Paspor">Paspor</option>
                        </select>
                        <div class="invalid-feedback">Jenis tanda pengenal wajib dipilih.</div>
                    </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" id="nomor_tanda_pengenal" class="form-control required-field" value="{{ old('nomor_tanda_pengenal') }}" required>
                        <div class="invalid-feedback">Nomor tanda pengenal wajib diisi.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Kecamatan <span class="text-danger">*</span></label>
                        <select name="kecamatan" id="kecamatan" class="form-select required-field" required>
                            <option value="">-- Pilih Kecamatan --</option>
                            <option value="Payakumbuh Barat">Payakumbuh Barat</option>
                            <option value="Payakumbuh Timur">Payakumbuh Timur</option>
                            <option value="Payakumbuh Utara">Payakumbuh Utara</option>
                            <option value="Payakumbuh Selatan">Payakumbuh Selatan</option>
                            <option value="Lamposi Tigo Nagori">Lamposi Tigo Nagori</option>
                        </select>
                        <div class="invalid-feedback">Kecamatan wajib dipilih.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Desa/Kelurahan <span class="text-danger">*</span></label>
                        <select name="kelurahan" id="kelurahan" class="form-select required-field" required>
                            <option value="">-- Pilih Kelurahan --</option>
                        </select>
                        <div class="invalid-feedback">Desa/Kelurahan wajib dipilih.</div>
                    </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" id="alamat_lengkap" class="form-control required-field" rows="3" required>{{ old('alamat_lengkap') }}</textarea>
                        <div class="invalid-feedback">Alamat lengkap wajib diisi.</div>
                    </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" id="nomor_kontak" class="form-control required-field" value="{{ old('nomor_kontak') }}" required>
                        <div class="invalid-feedback">Nomor kontak harus 11-13 digit angka.</div>
                    </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" id="email" class="form-control required-field" value="{{ old('email', auth()->user()->email) }}" required>
                        <div class="invalid-feedback">Email wajib diisi.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-primary" id="btnNextStep1">Selanjutnya <i class="bi bi-arrow-right ms-1"></i></button>
        </div>
    </div>

    <!-- STEP 2: Data Bangunan & Tanah -->
    <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 & Tanah</div>
            <div class="card-body">
                <!-- SECTION 1: DATA TANAH -->
                <h5 class="fw-bold mb-3 mt-2" style="color: var(--primary);"><i class="bi bi-file-earmark-text me-2"></i>A. DATA TANAH</h5>
                <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" id="nomor_dokumen_tanah" class="form-control required-field" value="{{ old('nomor_dokumen_tanah') }}" required>
                        <div class="invalid-feedback">Nomor dokumen tanah wajib diisi.</div>
                    </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" id="tanggal_terbit_dokumen_tanah" class="form-control required-field" value="{{ old('tanggal_terbit_dokumen_tanah') }}" required>
                        <div class="invalid-feedback">Tanggal terbit dokumen tanah wajib diisi.</div>
                    </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" id="luas_tanah" class="form-control required-field" value="{{ old('luas_tanah') }}" step="0.01" min="1" required>
                        <div class="invalid-feedback">Luas tanah wajib diisi minimal 1 m².</div>
                    </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" id="hak_kepemilikan_tanah" class="form-control required-field" value="{{ old('hak_kepemilikan_tanah') }}" required>
                        <div class="invalid-feedback">Hak kepemilikan tanah wajib diisi.</div>
                    </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" id="nama_pemilik_hak_tanah" class="form-control required-field" value="{{ old('nama_pemilik_hak_tanah') }}" required>
                        <div class="invalid-feedback">Nama pemilik hak tanah wajib diisi.</div>
                    </div>
                </div>
                <hr class="my-4">

                <!-- SECTION 2: LOKASI TANAH -->
                <h5 class="fw-bold mb-3" style="color: var(--primary);"><i class="bi bi-geo-alt me-2"></i>B. LOKASI TANAH</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Kecamatan <span class="text-danger">*</span></label>
                        <select name="kecamatan_tanah" id="kecamatan_tanah" class="form-select required-field" required>
                            <option value="">-- Pilih Kecamatan --</option>
                            <option value="Payakumbuh Barat">Payakumbuh Barat</option>
                            <option value="Payakumbuh Timur">Payakumbuh Timur</option>
                            <option value="Payakumbuh Utara">Payakumbuh Utara</option>
                            <option value="Payakumbuh Selatan">Payakumbuh Selatan</option>
                            <option value="Lamposi Tigo Nagori">Lamposi Tigo Nagori</option>
                        </select>
                        <div class="invalid-feedback">Kecamatan lokasi tanah wajib dipilih.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Desa/Kelurahan <span class="text-danger">*</span></label>
                        <select name="kelurahan_tanah" id="kelurahan_tanah" class="form-select required-field" required>
                            <option value="">-- Pilih Kelurahan --</option>
                        </select>
                        <div class="invalid-feedback">Desa/Kelurahan lokasi tanah wajib dipilih.</div>
                    </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" id="alamat_bangunan" class="form-control required-field" rows="3" required>{{ old('alamat_bangunan') }}</textarea>
                        <div class="invalid-feedback">Alamat lengkap lokasi tanah wajib diisi.</div>
                    </div>
                </div>
                <hr class="my-4">

                <!-- SECTION 3: PEMANFAATAN TANAH -->
                <h5 class="fw-bold mb-3" style="color: var(--primary);"><i class="bi bi-shield-check me-2"></i>C. PEMANFAATAN TANAH</h5>
                <div class="row">
                    <div class="col-md-6 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_tanah_sama_dengan_pemilik_bangunan" class="form-select required-field" required>
                            <option value="1" {{ old('pemilik_tanah_sama_dengan_pemilik_bangunan') == '1' ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ old('pemilik_tanah_sama_dengan_pemilik_bangunan') == '0' ? 'selected' : '' }}>Tidak</option>
                        </select>
                        <div class="invalid-feedback">Pilihan pemilik tanah wajib dipilih.</div>
                    </div>
                </div>
                <div class="row" id="pemanfaatanTanahFields" style="display: none;">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Nomor Surat Perjanjian Pemanfaatan Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="nomor_surat_perjanjian_pemanfaatan_tanah" id="nomor_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('nomor_surat_perjanjian_pemanfaatan_tanah') }}">
                        <div class="invalid-feedback">Nomor surat perjanjian pemanfaatan tanah wajib diisi.</div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Tanggal Terbit Surat Perjanjian Pemanfaatan Tanah <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_terbit_surat_perjanjian_pemanfaatan_tanah" id="tanggal_terbit_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('tanggal_terbit_surat_perjanjian_pemanfaatan_tanah') }}">
                        <div class="invalid-feedback">Tanggal terbit surat perjanjian pemanfaatan tanah wajib diisi.</div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Nama Penerima Surat Perjanjian Pemanfaatan Tanah <span class="text-danger">*</span></label>
                        <input type="text" name="nama_penerima_surat_perjanjian_pemanfaatan_tanah" id="nama_penerima_surat_perjanjian_pemanfaatan_tanah" class="form-control" value="{{ old('nama_penerima_surat_perjanjian_pemanfaatan_tanah') }}">
                        <div class="invalid-feedback">Nama penerima surat perjanjian pemanfaatan tanah wajib diisi.</div>
                    </div>
                </div>
                <hr class="my-4">

                <!-- SECTION 4: DATA BANGUNAN -->
                <h5 class="fw-bold mb-3" style="color: var(--primary);"><i class="bi bi-building me-2"></i>D. DATA BANGUNAN</h5>
                <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-select required-field" required>
                            <option value="">-- Pilih --</option>
                            <option value="Hunian" {{ old('fungsi_bangunan') == 'Hunian' ? 'selected' : '' }}>Hunian</option>
                            <option value="Keagamaan" {{ old('fungsi_bangunan') == 'Keagamaan' ? 'selected' : '' }}>Keagamaan</option>
                            <option value="Usaha" {{ old('fungsi_bangunan') == 'Usaha' ? 'selected' : '' }}>Usaha</option>
                            <option value="Sosial dan Budaya" {{ old('fungsi_bangunan') == 'Sosial dan Budaya' ? 'selected' : '' }}>Sosial dan Budaya</option>
                            <option value="Khusus" {{ old('fungsi_bangunan') == 'Khusus' ? 'selected' : '' }}>Khusus</option>
                            <option value="Campuran" {{ old('fungsi_bangunan') == 'Campuran' ? 'selected' : '' }}>Campuran</option>
                        </select>
                        <div class="invalid-feedback">Fungsi bangunan wajib dipilih.</div>
                    </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" id="sub_fungsi_bangunan" class="form-control required-field" value="{{ old('sub_fungsi_bangunan') }}" required>
                        <div class="invalid-feedback">Sub fungsi bangunan wajib diisi.</div>
                    </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" id="nama_bangunan" class="form-control required-field" value="{{ old('nama_bangunan') }}" required>
                        <div class="invalid-feedback">Nama bangunan wajib diisi.</div>
                    </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" id="luas_bangunan" class="form-control required-field" value="{{ old('luas_bangunan') }}" step="0.01" min="1" required>
                        <div class="invalid-feedback">Luas bangunan wajib diisi minimal 1 m².</div>
                    </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" id="ketinggian_bangunan" class="form-control required-field" value="{{ old('ketinggian_bangunan') }}" step="0.01" min="1" required>
                        <div class="invalid-feedback">Ketinggian bangunan wajib diisi minimal 1 meter.</div>
                    </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" id="jumlah_lantai" class="form-control required-field" value="{{ old('jumlah_lantai', 1) }}" min="1" required>
                        <div class="invalid-feedback">Jumlah lantai wajib diisi minimal 1.</div>
                    </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" id="jumlah_lapis_basemen" class="form-control" value="{{ old('jumlah_lapis_basemen', 0) }}" min="0">
                        <div class="invalid-feedback">Jumlah lapis basemen harus berupa angka positif.</div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Luas Basemen (m²)</label>
                        <input type="number" name="luas_basemen" id="luas_basemen" class="form-control" value="{{ old('luas_basemen') }}" step="0.01" min="0">
                        <div class="invalid-feedback">Luas basemen harus berupa angka positif.</div>
                    </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" id="jumlah_unit_bangunan" class="form-control required-field" value="{{ old('jumlah_unit_bangunan', 1) }}" min="1" required>
                        <div class="invalid-feedback">Jumlah unit bangunan wajib diisi minimal 1.</div>
                    </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" id="estimasi_jumlah_penghuni" class="form-control" value="{{ old('estimasi_jumlah_penghuni') }}" min="0">
                        <div class="invalid-feedback">Estimasi jumlah penghuni harus berupa angka positif.</div>
                    </div>
                </div>
                <hr class="my-4">

                <!-- SECTION 5: INTENSITAS BANGUNAN -->
                <h5 class="fw-bold mb-3" style="color: var(--primary);"><i class="bi bi-activity me-2"></i>E. INTENSITAS BANGUNAN</h5>
                <div class="row">
                    <div class="col-12 mb-3">
                        <label class="form-label fw-bold">Nomor Dokumen Kesesuaian Kegiatan Pemanfaatan Ruang atau Keterangan Rencana Kota</label>
                        <input type="text" name="nomor_dokumen_kkpr_krk" id="nomor_dokumen_kkpr_krk" class="form-control" value="{{ old('nomor_dokumen_kkpr_krk') }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Garis Sempadan Bangunan (meter)</label>
                        <input type="number" name="garis_sempadan_bangunan" id="garis_sempadan_bangunan" class="form-control" value="{{ old('garis_sempadan_bangunan') }}" step="0.01" min="0">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Koefisien Dasar Bangunan (%)</label>
                        <input type="number" name="koefisien_dasar_bangunan" id="koefisien_dasar_bangunan" class="form-control" value="{{ old('koefisien_dasar_bangunan') }}" step="0.01" min="0" max="100">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Koefisien Lantai Bangunan</label>
                        <input type="number" name="koefisien_lantai_bangunan" id="koefisien_lantai_bangunan" class="form-control" value="{{ old('koefisien_lantai_bangunan') }}" step="0.01" min="0">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Koefisien Dasar Hijau (%)</label>
                        <input type="number" name="koefisien_dasar_hijau" id="koefisien_dasar_hijau" class="form-control" value="{{ old('koefisien_dasar_hijau') }}" step="0.01" min="0" max="100">
                    </div>
                </div>
                <hr class="my-4">

                <!-- SECTION 6: DATA PENDUKUNG -->
                <h5 class="fw-bold mb-3" style="color: var(--primary);"><i class="bi bi-info-circle me-2"></i>F. DATA PENDUKUNG</h5>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Tahun Rencana Pembangunan</label>
                        <input type="text" name="tahun_rencana_bangun" id="tahun_rencana_bangun" class="form-control" value="{{ old('tahun_rencana_bangun', date('Y')) }}" maxlength="4">
                    </div>
                </div>
                
                {{-- Field Sertifikat Tanah lama tetap dipertahankan di DB tapi disembunyikan --}}
                <input type="hidden" name="nomor_sertifikat_tanah" value="{{ old('nomor_sertifikat_tanah') }}">
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-outline-secondary" onclick="goToStep(1)">Kembali</button>
            <button type="button" class="btn btn-primary" id="btnNextStep2">Selanjutnya</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> Daftar Checklist Dokumen Rencana Teknis</div>
            <div class="card-body">
                <div class="alert alert-info"><i class="bi bi-info-circle-fill me-2"></i> <strong>Upload file per dokumen</strong><br>Setelah upload, nama file akan muncul di kolom Upload File. Anda bisa mengganti atau menghapus file.<br><small>Format: PDF (max 50MB).</small></div>

                @php
                $checklistUtama = [
                    'Site Plan (Skala 1:200/1:500/1:1000)',
                    'Denah dan Perletakan Septictank (Skala 1:100/1:200)',
                    'Tampak Depan (Skala 1:100/1:200)',
                    'Tampak Samping (Skala 1:100/1:200)',
                    'Tampak Belakang (Skala 1:100/1:200)',
                    'Potongan Melintang (Skala 1:100/1:200)',
                    'Potongan Memanjang (Skala 1:100/1:200)',
                    'Portal Pembesian (Skala 1:50/1:100)',
                    'Detail Pembesian (Skala 1:20/1:25)',
                    'Potongan Tangga dan Detail (Skala 1:20/1:25)',
                    'Penulangan Lantai dan Detail (Skala 1:20/1:25)',
                    'Denah Pondasi (Skala 1:100/1:200)',
                    'Detail Pondasi (Skala 1:20/1:25)',
                    'Detail Septictank (Skala 1:20/1:25)',
                    'Detail Stop Kontak dan Detail Penerangan (Skala 1:100/1:200)',
                    'Denah APAR Untuk 3 Lantai Ke Atas (Skala 1:100/1:200)',
                    'Skei Lokasi',
                    'Surat Pertanggung Jawaban Konstruksi',
                    'KTP Kedua Belah Pihak (Pemilik dan Perencana)',
                    'Surat Kuasa (jika Pemohon berbeda dengan Pemilik)',
                ];
                $checklistPerumahan = [
                    'Denah/Skema Perletakan IPAL (Skala 1:200/1:500/1:1000)',
                    'Detail IPAL (Skala 1:20/1:25)',
                ];
                $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)',
                ];
                @endphp

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead style="background: var(--primary); color:#fff;">
                            <tr>
                                <th style="width:40px;">No</th>
                                <th>Uraian Dokumen <span class="text-white">*</span></th>
                                <th style="width:280px;">Upload File</th>
                                <th style="width:200px;">Status / Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="checklistUtamaBody">
                            @foreach($checklistUtama as $i => $doc)
                            <tr class="checklist-row required-doc" data-item-id="{{ $i+1 }}" data-nama="{{ $doc }}">
                                <td class="nomor-urut text-center">{{ $i+1 }}</td>
                                <td>{{ $doc }}<input type="hidden" name="dokumen[{{ $i }}][nama]" value="{{ $doc }}"></td>
                                <td class="upload-cell" data-nama="{{ $doc }}"><div class="upload-placeholder">Belum upload</div></td>
                                <td class="action-cell" data-nama="{{ $doc }}"><span class="status-missing">Belum upload</span></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-4" id="tambahanPerumahan" style="display:none;">
                    <h6 class="fw-bold"><i class="bi bi-house me-1"></i> Persyaratan Khusus Perumahan</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead style="background:#38a169; color:#fff;">
                                <tr><th>No</th><th>Uraian <span class="text-white">*</span></th><th>Upload</th><th>Status / Aksi</th></tr>
                            </thead>
                            <tbody id="perumahanBody">
                                @foreach($checklistPerumahan as $j => $doc)
                                <tr class="required-doc" data-nama="{{ $doc }}">
                                    <td class="text-center">{{ $j+1 }}</td>
                                    <td>{{ $doc }}<input type="hidden" name="dokumen[{{ 20+$j }}][nama]" value="{{ $doc }}"></td>
                                    <td class="upload-cell" data-nama="{{ $doc }}"><div class="upload-placeholder">Belum upload</div></td>
                                    <td class="action-cell" data-nama="{{ $doc }}"><span class="status-missing">Belum upload</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-4" id="tambahanFasilitasUmum" style="display:none;">
                    <h6 class="fw-bold"><i class="bi bi-buildings me-1"></i> Persyaratan Khusus Fasilitas Umum</h6>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead style="background:#3182ce; color:#fff;">
                                <tr><th>No</th><th>Uraian <span class="text-white">*</span></th><th>Upload</th><th>Status / Aksi</th></tr>
                            </thead>
                            <tbody id="fasumBody">
                                @foreach($checklistFasum as $k => $doc)
                                <tr class="required-doc" data-nama="{{ $doc }}">
                                    <td class="text-center">{{ $k+1 }}</td>
                                    <td>{{ $doc }}<input type="hidden" name="dokumen[{{ 22+$k }}][nama]" value="{{ $doc }}"></td>
                                    <td class="upload-cell" data-nama="{{ $doc }}"><div class="upload-placeholder">Belum upload</div></td>
                                    <td class="action-cell" data-nama="{{ $doc }}"><span class="status-missing">Belum upload</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

<!-- Dokumen Lainnya -->
<div class="mt-4">
    <div class="d-flex justify-content-between align-items-center">
        <h6 class="fw-bold">
            <i class="bi bi-plus-circle me-1"></i>
            Dokumen Lainnya (Opsional)
        </h6>

        <div class="d-flex gap-2">
            <input type="text"
                   id="namaDokumenLain"
                   class="form-control form-control-sm"
                   placeholder="Nama dokumen">

            <button type="button"
                    id="btnTambahDokumenLain"
                    class="btn btn-sm btn-accent">
                Tambah Dokumen
            </button>
        </div>
    </div>

    <input type="file"
           id="dokumenLainFile"
           accept=".jpg,.jpeg,.png,.pdf"
           style="display:none;">

    <div id="dokumenLainContainer" class="mt-2"></div>
</div>
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-outline-secondary" onclick="goToStep(2)">Kembali</button>
            <button type="button" id="btnNextStep3" class="btn btn-primary">Review Pengajuan</button>
        </div>
    </div>

    <!-- STEP 4: Review & Submit -->
    <div class="step-panel" id="step-4">
        <div class="content-card mb-4">
            <div class="card-header"><i class="bi bi-clipboard-check me-2"></i> Review Pengajuan</div>
            <div class="card-body" id="reviewContent"></div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-outline-secondary" onclick="goToStep(3)">Kembali</button>
            <button type="submit" id="btnSubmit" class="btn btn-primary">Kirim Pengajuan</button>
        </div>
    </div>
</form>
<!-- Modal Konfirmasi Submit -->
<div class="modal fade" id="confirmSubmitModal" tabindex="-1" aria-labelledby="confirmSubmitModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: var(--primary); color: #fff;">
                <h5 class="modal-title fw-bold" id="confirmSubmitModalLabel">
                    <i class="bi bi-check-circle-fill me-2"></i> Konfirmasi Pengajuan
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <strong>Periksa Kembali Data Anda!</strong>
                </div>
                
                <p>Pastikan semua data yang Anda isikan sudah <strong>lengkap dan benar</strong> sebelum mengirim pengajuan.</p>
                
                <div class="mt-3">
                    <div class="d-flex align-items-start mb-2">
                        <span class="text-success me-2">✓</span>
                        <span>Semua data pemohon sudah terisi dengan benar</span>
                    </div>
                    <div class="d-flex align-items-start mb-2">
                        <span class="text-success me-2">✓</span>
                        <span>Data bangunan dan tanah sudah lengkap</span>
                    </div>
                    <div class="d-flex align-items-start mb-2">
                        <span class="text-success me-2">✓</span>
                        <span>Semua dokumen wajib sudah diupload</span>
                    </div>
                    <div class="d-flex align-items-start">
                        <span class="text-warning me-2">⚠</span>
                        <span><strong>Data tidak dapat diubah setelah pengajuan dikirim!</strong></span>
                    </div>
                </div>
                
                <hr>
                
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmCheck">
                    <label class="form-check-label" for="confirmCheck">
                        Saya menyatakan bahwa semua data yang saya isikan adalah <strong>benar dan dapat dipertanggungjawabkan</strong> sesuai dengan ketentuan yang berlaku.
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="confirmSubmitBtn" disabled>
                    <i class="bi bi-send me-1"></i> Kirim Pengajuan
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // ====================== INISIALISASI ======================
    let currentStep = 1;
    let uploadedDocs = {};
    let dokumenLain = [];
    const STORAGE_KEY = 'pbg_draft_' + {{ auth()->id() }};
    
    // Data Kelurahan per Kecamatan di Payakumbuh
    const dataKelurahan = {
        "Payakumbuh Barat": ["Balai Panjang", "Bulakan Balai Kandi", "Koto Tangah", "Padang Data Tanah Mati", "Pakan Sinayan", "Parambahan", "Subarang Batuang", "Tanjung Pauh"],
        "Payakumbuh Timur": ["Balai Nan Duo", "Koto Baru", "Padang Alai Bodi", "Payobasuang", "Sicincin", "Tiakar"],
        "Payakumbuh Utara": ["Ikua Koto Dibalai", "Kapalo Koto Dibalai", "Koto Kociak Kubu Tapak Rajo", "Napar", "Ompang Tanah Sirah", "Taratak Padang Kampuang"],
        "Payakumbuh Selatan": ["Balai Gadang", "Bukik Sikumpa", "Ibuah", "Kapalo Koto Ampangan", "Limbukan", "Payolansek", "Sawah Padang Aua Kuniang"],
        "Lamposi Tigo Nagori": ["Koto Panjang Dalam", "Labuah Basilang", "Parik Muko Aia", "Sungai Durian", "Tiakar"]
    };
    
    // Item yang tampil hanya untuk lantai 1
    const lantai1Items = [1,2,3,4,5,6,7,12,13,14,15,17,18,19,20];
    
    function updateKelurahanDropdown() {
        let kecamatan = document.getElementById('kecamatan').value;
        let kelurahanSelect = document.getElementById('kelurahan');
        kelurahanSelect.innerHTML = '<option value="">-- Pilih Kelurahan --</option>';
        if (kecamatan && dataKelurahan[kecamatan]) {
            dataKelurahan[kecamatan].forEach(kelurahan => {
                let option = document.createElement('option');
                option.value = kelurahan;
                option.textContent = kelurahan;
                kelurahanSelect.appendChild(option);
            });
            kelurahanSelect.disabled = false;
        } else {
            kelurahanSelect.disabled = true;
        }
    }

    function updateKelurahanTanahDropdown() {
        let kecamatan = document.getElementById('kecamatan_tanah').value;
        let kelurahanSelect = document.getElementById('kelurahan_tanah');
        kelurahanSelect.innerHTML = '<option value="">-- Pilih Kelurahan --</option>';
        if (kecamatan && dataKelurahan[kecamatan]) {
            dataKelurahan[kecamatan].forEach(kelurahan => {
                let option = document.createElement('option');
                option.value = kelurahan;
                option.textContent = kelurahan;
                kelurahanSelect.appendChild(option);
            });
            kelurahanSelect.disabled = false;
        } else {
            kelurahanSelect.disabled = true;
        }
    }
    
    function filterChecklistByLantai() {
        let lantai = parseInt(document.getElementById('jumlah_lantai').value) || 1;
        let rows = document.querySelectorAll('#checklistUtamaBody .checklist-row');
        
        if (lantai >= 2) {
            rows.forEach(r => r.style.display = '');
        } else if (lantai == 1) {
            rows.forEach(r => {
                let itemId = parseInt(r.dataset.itemId);
                r.style.display = lantai1Items.includes(itemId) ? '' : 'none';
            });
        }
        
        let counter = 1;
        rows.forEach(r => { 
            if (r.style.display !== 'none') {
                r.querySelector('.nomor-urut').innerText = counter++;
            }
        });
        
        updateDocErrorStyles();
    }
    
    function updateTambahanSections() {
        let fungsi = document.getElementById('fungsi_bangunan').value;
        let perumahanDiv = document.getElementById('tambahanPerumahan');
        let fasumDiv = document.getElementById('tambahanFasilitasUmum');
        
        if (perumahanDiv) perumahanDiv.style.display = (fungsi === 'Hunian') ? 'block' : 'none';
        if (fasumDiv) fasumDiv.style.display = (fungsi && fungsi !== 'Hunian') ? 'block' : 'none';
        
        updateDocErrorStyles();
    }
    
    // ====================== FUNGSI VALIDASI ======================

    // Fungsi untuk menghilangkan error merah (teks di bawah field)
    function hilangkanError(field) {
        if (!field) return;
        field.classList.remove('is-invalid');
        let parent = field.closest('.mb-3');
        if (parent) {
            let feedback = parent.querySelector('.invalid-feedback');
            if (feedback) {
                feedback.style.display = 'none';
            }
        }
    }

    // Fungsi untuk menampilkan error merah (teks di bawah field)
    function tampilkanError(field) {
        if (!field) return;
        field.classList.add('is-invalid');
        let parent = field.closest('.mb-3');
        if (parent) {
            let feedback = parent.querySelector('.invalid-feedback');
            if (feedback) {
                feedback.style.display = 'block';
            }
        }
    }

    // Validasi NIK
    function validateNIK() {
        let input = document.getElementById('nomor_tanda_pengenal');
        let jenis = document.getElementById('jenis_tanda_pengenal').value;
        if (jenis === 'NIK') {
            if (/^\d{16}$/.test(input.value)) {
                hilangkanError(input);
                return true;
            } else {
                tampilkanError(input);
                return false;
            }
        }
        hilangkanError(input);
        return true;
    }

    // Validasi KITAS
    function validateKITAS() {
        let input = document.getElementById('nomor_tanda_pengenal');
        let jenis = document.getElementById('jenis_tanda_pengenal').value;
        if (jenis === 'KITAS') {
            let val = input.value.trim();
            if (val.length >= 8 && val.length <= 20) {
                hilangkanError(input);
                return true;
            } else {
                tampilkanError(input);
                return false;
            }
        }
        hilangkanError(input);
        return true;
    }

    // Validasi Paspor
    function validatePaspor() {
        let input = document.getElementById('nomor_tanda_pengenal');
        let jenis = document.getElementById('jenis_tanda_pengenal').value;
        if (jenis === 'Paspor') {
            let val = input.value.trim();
            if (val.length >= 6 && val.length <= 12) {
                hilangkanError(input);
                return true;
            } else {
                tampilkanError(input);
                return false;
            }
        }
        hilangkanError(input);
        return true;
    }

    // Validasi Nomor Kontak
    function validateKontak() {
        let input = document.getElementById('nomor_kontak');
        let val = input.value.trim();
        if (val.length >= 11 && val.length <= 13 && /^\d+$/.test(val)) {
            hilangkanError(input);
            return true;
        } else {
            tampilkanError(input);
            return false;
        }
    }

    // Validasi Email
    function validateEmail() {
        let input = document.getElementById('email');
        let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (emailRegex.test(input.value.trim())) {
            hilangkanError(input);
            return true;
        } else {
            tampilkanError(input);
            return false;
        }
    }

    // Validasi Field Required Step 1
    function validateRequiredField(field) {
        if (!field) return true;
        if (['nomor_tanda_pengenal', 'nomor_kontak', 'email'].includes(field.id)) return true;
        
        let isValid = false;
        if (field.tagName === 'SELECT') {
            isValid = field.value && field.value !== '';
        } else {
            isValid = field.value && field.value.trim() !== '';
        }
        
        if (isValid) {
            hilangkanError(field);
        } else {
            tampilkanError(field);
        }
        return isValid;
    }

    // Validasi Field Required Step 2
    function validateStep2Field(field) {
        if (!field) return true;
        
        // Field pemanfaatan tanah
        if (['nomor_surat_perjanjian_pemanfaatan_tanah', 'tanggal_terbit_surat_perjanjian_pemanfaatan_tanah', 'nama_penerima_surat_perjanjian_pemanfaatan_tanah'].includes(field.id)) {
            let pemilikSama = document.getElementById('pemilik_tanah_sama_dengan_pemilik_bangunan');
            if (pemilikSama && pemilikSama.value === '1') {
                hilangkanError(field);
                return true;
            }
            if (field.value && field.value.trim() !== '') {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Luas Tanah
        if (field.id === 'luas_tanah') {
            if (field.value && parseFloat(field.value) >= 1) {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Luas Bangunan
        if (field.id === 'luas_bangunan') {
            if (field.value && parseFloat(field.value) >= 1) {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Ketinggian
        if (field.id === 'ketinggian_bangunan') {
            if (field.value && parseFloat(field.value) >= 1) {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Jumlah Lantai
        if (field.id === 'jumlah_lantai') {
            if (field.value && parseInt(field.value) >= 1) {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Jumlah Unit
        if (field.id === 'jumlah_unit_bangunan') {
            if (field.value && parseInt(field.value) >= 1) {
                hilangkanError(field);
                return true;
            } else {
                tampilkanError(field);
                return false;
            }
        }
        
        // Field required biasa (select, text, dll)
        let isValid = false;
        if (field.tagName === 'SELECT') {
            isValid = field.value && field.value !== '';
        } else {
            isValid = field.value && field.value.trim() !== '';
        }
        
        if (isValid) {
            hilangkanError(field);
        } else {
            tampilkanError(field);
        }
        return isValid;
    }

    // ====================== VALIDASI FIELD OPSIONAL ======================

    function validateOptionalNumber(field) {
        if (!field) return true;
        if (!field.value || field.value.trim() === '') {
            hilangkanError(field);
            return true;
        }
        let val = parseFloat(field.value);
        if (!isNaN(val) && val >= 0) {
            hilangkanError(field);
            return true;
        } else {
            tampilkanError(field);
            return false;
        }
    }

    // ====================== NAVIGASI ======================
    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, idx) => {
            let s = idx+1;
            item.classList.remove('active','completed');
            if (s === step) item.classList.add('active');
            else if (s < step) item.classList.add('completed');
        });
        currentStep = step;
        if (step === 4) renderReview();
        simpanDraft();
        window.scrollTo(0,0);
    }
    
    function nextStep1() { if (validateStep1()) goToStep(2); }
    function nextStep2() { if (validateStep2()) { goToStep(3); setTimeout(updateDocErrorStyles, 100); } }
    function nextStep3() { if (validateStep3()) goToStep(4); }
    
    function simpanDraft() {
        let form = document.getElementById('formPengajuan');
        let data = {};
        new FormData(form).forEach((val, key) => { if (key !== '_token') data[key] = val; });
        let draft = { step: currentStep, fields: data, uploadedDocs: uploadedDocs, dokumenLain: dokumenLain };
        localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
    }
    
    function muatDraft() {
        let raw = localStorage.getItem(STORAGE_KEY);
        if (!raw) return false;
        try {
            let draft = JSON.parse(raw);
            let kelurahanValue = draft.fields.kelurahan || '';
            let kecamatanValue = draft.fields.kecamatan || '';
            let kelurahanTanahValue = draft.fields.kelurahan_tanah || '';
            let kecamatanTanahValue = draft.fields.kecamatan_tanah || '';
            
            for (let [k, v] of Object.entries(draft.fields)) {
                if (k === 'kelurahan' || k === 'kelurahan_tanah') continue;
                let el = document.querySelector(`[name="${k}"]`);
                if (el) el.value = v;
            }
            
            let kecamatanEl = document.getElementById('kecamatan');
            if (kecamatanEl && kecamatanValue) {
                kecamatanEl.value = kecamatanValue;
                updateKelurahanDropdown();
                let kelSelect = document.getElementById('kelurahan');
                if (kelurahanValue && kelSelect.querySelector(`option[value="${kelurahanValue}"]`)) kelSelect.value = kelurahanValue;
            }
            
            let kecamatanTanahEl = document.getElementById('kecamatan_tanah');
            if (kecamatanTanahEl && kecamatanTanahValue) {
                kecamatanTanahEl.value = kecamatanTanahValue;
                updateKelurahanTanahDropdown();
                let kelTanahSelect = document.getElementById('kelurahan_tanah');
                if (kelurahanTanahValue && kelTanahSelect.querySelector(`option[value="${kelurahanTanahValue}"]`)) kelTanahSelect.value = kelurahanTanahValue;
            }
            
            uploadedDocs = draft.uploadedDocs || {};
            dokumenLain = draft.dokumenLain || [];
            
            filterChecklistByLantai();
            updateTambahanSections();
            
            
            
            for (let nama in uploadedDocs) {
                renderUploadCell(nama, uploadedDocs[nama]);
                updateActionCell(nama, uploadedDocs[nama]);
            }
            
            document.querySelectorAll('.upload-cell').forEach(cell => {
                let nama = cell.dataset.nama;
                if (!uploadedDocs[nama]) renderUploadCell(nama, null);
            });
            
            renderDokumenLain();
            if (draft.step) goToStep(draft.step);
            document.getElementById('clearDraftBtn').style.display = 'inline-block';
            updateDocErrorStyles();
            
            let pemilikSama = document.getElementById('pemilik_tanah_sama_dengan_pemilik_bangunan');
            let pemanfaatanFields = document.getElementById('pemanfaatanTanahFields');
            if (pemanfaatanFields && pemilikSama) {
                pemanfaatanFields.style.display = pemilikSama.value === '0' ? 'flex' : 'none';
            }
            
            validateAllFields();
            
            return true;
        } catch(e) { console.error('Error loading draft:', e); return false; }
    }
    
    // ====================== VALIDASI SEMUA FIELD ======================
    function validateAllFields() {
        // Step 1 fields
        validateNIK();
        validateKITAS();
        validatePaspor();
        validateKontak();
        validateEmail();
        
        document.querySelectorAll('#step-1 .required-field').forEach(field => {
            validateRequiredField(field);
        });
        
        document.querySelectorAll('#step-2 .required-field').forEach(field => {
            validateStep2Field(field);
        });
        
        // ====== VALIDASI FIELD OPSIONAL ======
        ['jumlah_lapis_basemen', 'luas_basemen', 'estimasi_jumlah_penghuni', 'garis_sempadan_bangunan', 'koefisien_dasar_bangunan', 'koefisien_lantai_bangunan', 'koefisien_dasar_hijau', 'tahun_rencana_bangun'].forEach(id => {
            let el = document.getElementById(id);
            if (el) {
                validateOptionalNumber(el);
            }
        });
        
        // Nomor Dokumen KKPR (text biasa)
        let kkpr = document.getElementById('nomor_dokumen_kkpr_krk');
        if (kkpr) hilangkanError(kkpr);
    }
    
    function validateStep1() {
        let isValid = true;
        let errorMessages = [];
        
        let jenisTandaPengenal = document.getElementById('jenis_tanda_pengenal').value;
        let nomorTandaPengenal = document.getElementById('nomor_tanda_pengenal');
        let nomor = nomorTandaPengenal.value.trim();
        
        if (jenisTandaPengenal === 'NIK') {
            if (!/^\d{16}$/.test(nomor)) {
                tampilkanError(nomorTandaPengenal);
                isValid = false;
                errorMessages.push('NIK harus 16 digit angka');
            } else {
                hilangkanError(nomorTandaPengenal);
            }
        } else if (jenisTandaPengenal === 'KITAS') {
            if (nomor.length < 8 || nomor.length > 20) {
                tampilkanError(nomorTandaPengenal);
                isValid = false;
                errorMessages.push('Nomor KITAS harus 8-20 karakter');
            } else {
                hilangkanError(nomorTandaPengenal);
            }
        } else if (jenisTandaPengenal === 'Paspor') {
            if (nomor.length < 6 || nomor.length > 12) {
                tampilkanError(nomorTandaPengenal);
                isValid = false;
                errorMessages.push('Nomor Paspor harus 6-12 karakter');
            } else {
                hilangkanError(nomorTandaPengenal);
            }
        }
        
        let kontak = document.getElementById('nomor_kontak');
        let kontakValue = kontak.value.trim();
        if (!kontakValue || kontakValue.length < 11 || kontakValue.length > 13 || !/^\d+$/.test(kontakValue)) {
            tampilkanError(kontak);
            isValid = false;
            errorMessages.push('Nomor Kontak harus 11-13 digit angka');
        } else {
            hilangkanError(kontak);
        }
        
        let email = document.getElementById('email');
        let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!email.value.trim() || !emailRegex.test(email.value)) {
            tampilkanError(email);
            isValid = false;
            errorMessages.push('Format Email tidak valid');
        } else {
            hilangkanError(email);
        }
        
        let requiredFields = document.querySelectorAll('#step-1 .required-field');
        requiredFields.forEach(field => {
            if (field.id !== 'nomor_tanda_pengenal' && field.id !== 'nomor_kontak' && field.id !== 'email') {
                if (!field.value.trim()) {
                    tampilkanError(field);
                    isValid = false;
                    let label = field.closest('.mb-3')?.querySelector('label')?.innerText || field.name;
                    errorMessages.push(`${label.replace('*', '').trim()} wajib diisi`);
                } else {
                    hilangkanError(field);
                }
            }
        });
        
        if (!isValid) alert('❌ Harap lengkapi semua field wajib di STEP 1:\n' + errorMessages.join('\n'));
        return isValid;
    }
    
    function validateStep2() {
        let isValid = true;
        let requiredFields = document.querySelectorAll('#step-2 .required-field');
        let errorMessages = [];
        
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                tampilkanError(field);
                isValid = false;
                let label = field.closest('.mb-3')?.querySelector('label')?.innerText || field.name;
                errorMessages.push(`${label.replace('*', '').trim()} wajib diisi`);
            } else {
                hilangkanError(field);
            }
        });
        
        let luasTanah = document.getElementById('luas_tanah');
        if (luasTanah && luasTanah.value && parseFloat(luasTanah.value) < 1) {
            tampilkanError(luasTanah);
            isValid = false;
            errorMessages.push('Luas Tanah minimal 1 m²');
        } else if (luasTanah) {
            hilangkanError(luasTanah);
        }

        let luasBangunan = document.getElementById('luas_bangunan');
        if (luasBangunan && luasBangunan.value && parseFloat(luasBangunan.value) < 1) {
            tampilkanError(luasBangunan);
            isValid = false;
            errorMessages.push('Luas Bangunan minimal 1 m²');
        } else if (luasBangunan) {
            hilangkanError(luasBangunan);
        }
        
        let ketinggianBangunan = document.getElementById('ketinggian_bangunan');
        if (ketinggianBangunan && ketinggianBangunan.value && parseFloat(ketinggianBangunan.value) < 1) {
            tampilkanError(ketinggianBangunan);
            isValid = false;
            errorMessages.push('Ketinggian Bangunan minimal 1 meter');
        } else if (ketinggianBangunan) {
            hilangkanError(ketinggianBangunan);
        }
        
        let jumlahLantai = document.getElementById('jumlah_lantai');
        if (jumlahLantai && jumlahLantai.value && parseInt(jumlahLantai.value) < 1) {
            tampilkanError(jumlahLantai);
            isValid = false;
            errorMessages.push('Jumlah Lantai minimal 1');
        } else if (jumlahLantai) {
            hilangkanError(jumlahLantai);
        }

        let jumlahUnit = document.getElementById('jumlah_unit_bangunan');
        if (jumlahUnit && jumlahUnit.value && parseInt(jumlahUnit.value) < 1) {
            tampilkanError(jumlahUnit);
            isValid = false;
            errorMessages.push('Jumlah Unit Bangunan minimal 1');
        } else if (jumlahUnit) {
            hilangkanError(jumlahUnit);
        }

        let pemilikSama = document.getElementById('pemilik_tanah_sama_dengan_pemilik_bangunan');
        if (pemilikSama && pemilikSama.value === '0') {
            let fields = ['nomor_surat_perjanjian_pemanfaatan_tanah', 'tanggal_terbit_surat_perjanjian_pemanfaatan_tanah', 'nama_penerima_surat_perjanjian_pemanfaatan_tanah'];
            fields.forEach(fId => {
                let el = document.getElementById(fId);
                if (el && !el.value.trim()) {
                    tampilkanError(el);
                    isValid = false;
                    let label = el.closest('.mb-3')?.querySelector('label')?.innerText || fId;
                    errorMessages.push(`${label.replace('*', '').trim()} wajib diisi`);
                } else if (el) {
                    hilangkanError(el);
                }
            });
        }
        
        // Validasi field opsional di Step 2 (angka positif)
        ['jumlah_lapis_basemen', 'luas_basemen', 'estimasi_jumlah_penghuni', 'garis_sempadan_bangunan', 'koefisien_dasar_bangunan', 'koefisien_lantai_bangunan', 'koefisien_dasar_hijau', 'tahun_rencana_bangun'].forEach(id => {
            let el = document.getElementById(id);
            if (el && el.value && el.value.trim() !== '') {
                let val = parseFloat(el.value);
                if (isNaN(val) || val < 0) {
                    tampilkanError(el);
                    isValid = false;
                    let label = el.closest('.mb-3')?.querySelector('label')?.innerText || id;
                    errorMessages.push(`${label.replace('*', '').trim()} harus berupa angka positif`);
                } else {
                    hilangkanError(el);
                }
            } else if (el) {
                hilangkanError(el);
            }
        });
        
        if (!isValid) alert('❌ Harap lengkapi semua field wajib di STEP 2:\n' + errorMessages.join('\n'));
        return isValid;
    }
    
    function getVisibleRequiredDocuments() {
        let docs = [];
        document.querySelectorAll('#checklistUtamaBody .checklist-row').forEach(row => {
            if (row.style.display !== 'none') {
                let nama = row.dataset.nama;
                if (nama) docs.push(nama);
            }
        });
        let perumahanDiv = document.getElementById('tambahanPerumahan');
        if (perumahanDiv && perumahanDiv.style.display === 'block') {
            document.querySelectorAll('#perumahanBody .required-doc').forEach(row => {
                let nama = row.dataset.nama;
                if (nama) docs.push(nama);
            });
        }
        let fasumDiv = document.getElementById('tambahanFasilitasUmum');
        if (fasumDiv && fasumDiv.style.display === 'block') {
            document.querySelectorAll('#fasumBody .required-doc').forEach(row => {
                let nama = row.dataset.nama;
                if (nama) docs.push(nama);
            });
        }
        return docs;
    }
    
    function updateDocErrorStyles() {
        let visibleRequiredDocs = getVisibleRequiredDocuments();
        document.querySelectorAll('.upload-cell').forEach(cell => cell.classList.remove('doc-missing'));
        for (let doc of visibleRequiredDocs) {
            if (!uploadedDocs[doc]) {
                let cell = document.querySelector(`.upload-cell[data-nama="${doc}"]`);
                if (cell) cell.classList.add('doc-missing');
            }
        }
    }
    
    function validateStep3() {
        let visibleRequiredDocs = getVisibleRequiredDocuments();
        let missingDocs = [];
        for (let doc of visibleRequiredDocs) {
            if (!uploadedDocs[doc]) missingDocs.push(doc);
        }
        if (missingDocs.length > 0) {
            alert(`❌ Harap upload SEMUA dokumen wajib berikut di STEP 3:\n\n${missingDocs.map((d, i) => `${i+1}. ${d}`).join('\n')}`);
            return false;
        }
        return true;
    }
    
    async function uploadFile(file, namaDokumen) {
        let fd = new FormData();
        fd.append('file', file);
        fd.append('nama_dokumen', namaDokumen);
        let res = await fetch('{{ route("pengajuan.upload_temp") }}', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: fd
        });
        let result = await res.json();
        if (!result.success) throw new Error(result.message);
        return result;
    }
    
    async function deleteFile(tempPath) {
        await fetch('{{ route("pengajuan.delete_temp") }}', {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ temp_path: tempPath })
        });
    }
    
    function renderUploadCell(nama, docData) {
        let cell = document.querySelector(`.upload-cell[data-nama="${nama}"]`);
        if (!cell) return;
        cell.classList.remove('doc-missing');
        if (docData) {
            cell.innerHTML = `<div class="file-info">📄 ${escapeHtml(docData.file_name)}<button type="button" class="btn btn-xs btn-outline-secondary btn-ganti-file" data-nama="${nama}">Ganti</button></div>`;
            cell.querySelector('.btn-ganti-file').addEventListener('click', () => {
                let input = document.createElement('input');
                input.type = 'file';
                input.accept = '.jpg,.jpeg,.png,.pdf';
                input.onchange = async (e) => {
                    let file = e.target.files[0];
                    if (!file) return;
                    if (confirm(`Ganti file untuk "${nama}"?`)) {
                        let result = await uploadFile(file, nama);
                        if (uploadedDocs[nama]) await deleteFile(uploadedDocs[nama].temp_path);
                        uploadedDocs[nama] = { temp_path: result.temp_path, url: result.url, file_name: result.file_name };
                        renderUploadCell(nama, uploadedDocs[nama]);
                        updateActionCell(nama, uploadedDocs[nama]);
                        simpanDraft();
                        updateDocErrorStyles();
                    }
                };
                input.click();
            });
        } else {
            cell.innerHTML = `<input type="file" class="upload-doc" data-nama="${nama}" accept=".jpg,.jpeg,.png,.pdf">`;
            let newInput = cell.querySelector('.upload-doc');
            newInput.addEventListener('change', async (e) => {
                let file = e.target.files[0];
                if (!file) return;
                let result = await uploadFile(file, nama);
                if (result) {
                    uploadedDocs[nama] = { temp_path: result.temp_path, url: result.url, file_name: result.file_name };
                    renderUploadCell(nama, uploadedDocs[nama]);
                    updateActionCell(nama, uploadedDocs[nama]);
                    simpanDraft();
                    updateDocErrorStyles();
                }
                e.target.value = '';
            });
        }
    }
    
    function updateActionCell(nama, docData) {
        let cell = document.querySelector(`.action-cell[data-nama="${nama}"]`);
        if (!cell) return;
        if (docData) {
            cell.innerHTML = `<span class="status-uploaded">✅ Sudah diupload</span><div class="file-actions"><a href="${docData.url}" target="_blank" class="btn btn-xs btn-outline-primary">Lihat</a><button type="button" class="btn btn-xs btn-outline-danger btn-hapus-doc" data-nama="${nama}">Hapus</button></div>`;
            cell.querySelector('.btn-hapus-doc').addEventListener('click', async () => {
                if (confirm(`Hapus dokumen "${nama}"?`)) {
                    await deleteFile(docData.temp_path);
                    delete uploadedDocs[nama];
                    renderUploadCell(nama, null);
                    updateActionCell(nama, null);
                    simpanDraft();
                    updateDocErrorStyles();
                }
            });
        } else {
            cell.innerHTML = `<span class="status-missing">❌ Belum upload</span>`;
        }
    }
    
    // ====================== DOKUMEN LAIN ======================
    function tambahDokumenLain() {
        let nama = document.getElementById('namaDokumenLain').value.trim();
        if (!nama) {
            alert('Masukkan nama dokumen terlebih dahulu!');
            return;
        }
        window.namaDokumenTambahan = nama;
        document.getElementById('dokumenLainFile').click();
    }
    
    function renderDokumenLain() {
        let container = document.getElementById('dokumenLainContainer');
        if (!container) return;
        if (dokumenLain.length === 0) { 
            container.innerHTML = '<div class="alert alert-secondary">📄 Belum ada dokumen tambahan. Klik "Tambah Dokumen" untuk menambahkan.</div>'; 
            return; 
        }
        let html = '';
        dokumenLain.forEach((doc, idx) => {
            html += `<div class="d-flex justify-content-between align-items-center border rounded p-2 mb-2 bg-light">
                        <div><strong>📄 ${escapeHtml(doc.nama)}</strong><br><small>📎 ${escapeHtml(doc.file_name)}</small></div>
                        <div>
                            <a href="${doc.url}" target="_blank" class="btn btn-sm btn-outline-primary">Lihat</a>
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-lain" data-index="${idx}">Hapus</button>
                        </div>
                    </div>`;
        });
        container.innerHTML = html;
        document.querySelectorAll('.btn-hapus-lain').forEach(btn => {
            btn.addEventListener('click', async function() {
                let idx = parseInt(this.dataset.index);
                let doc = dokumenLain[idx];
                if (confirm(`Hapus dokumen "${doc.nama}"?`)) {
                    try {
                        await deleteFile(doc.temp_path);
                        dokumenLain.splice(idx, 1);
                        renderDokumenLain();
                        simpanDraft();
                    } catch (error) {
                        alert('Gagal menghapus dokumen');
                    }
                }
            });
        });
    }
    
    // ====================== REVIEW ======================
    function renderReview() {
        let form = document.getElementById('formPengajuan');
        let data = new FormData(form);
        let visibleRequiredDocs = getVisibleRequiredDocuments();
        
        let html = '<h6>📋 Data Pemohon</h6><table class="table review-table">';
        html += makeRow('Nama Lengkap', data.get('nama_lengkap'));
        html += makeRow('Jenis Kepemilikan', data.get('jenis_kepemilikan'));
        html += makeRow('Jenis Tanda Pengenal', data.get('jenis_tanda_pengenal'));
        html += makeRow('Nomor Tanda Pengenal', data.get('nomor_tanda_pengenal'));
        html += makeRow('Nomor Kontak', data.get('nomor_kontak'));
        html += makeRow('Email', data.get('email'));
        html += makeRow('Kecamatan', data.get('kecamatan'));
        html += makeRow('Kelurahan', data.get('kelurahan'));
        html += makeRow('Alamat Lengkap', data.get('alamat_lengkap'));
        html += '</table><h6>📋 Data Tanah & Bangunan</h6><table class="table review-table">';
        html += makeRow('Nomor Dokumen Tanah', data.get('nomor_dokumen_tanah'));
        html += makeRow('Tanggal Terbit Dokumen Tanah', data.get('tanggal_terbit_dokumen_tanah'));
        html += makeRow('Luas Tanah', data.get('luas_tanah') + ' m²');
        html += makeRow('Hak Kepemilikan Tanah', data.get('hak_kepemilikan_tanah'));
        html += makeRow('Nama Pemilik Hak Tanah', data.get('nama_pemilik_hak_tanah'));
        html += makeRow('Kecamatan Tanah', data.get('kecamatan_tanah'));
        html += makeRow('Kelurahan Tanah', data.get('kelurahan_tanah'));
        html += makeRow('Alamat Lokasi Tanah', data.get('alamat_bangunan'));
        html += makeRow('Pemilik Tanah Sama Dengan Pemilik Bangunan', data.get('pemilik_tanah_sama_dengan_pemilik_bangunan') === '1' ? 'Ya' : 'Tidak');
        
        if (data.get('pemilik_tanah_sama_dengan_pemilik_bangunan') === '0') {
            html += makeRow('Nomor Surat Perjanjian', data.get('nomor_surat_perjanjian_pemanfaatan_tanah'));
            html += makeRow('Tanggal Terbit Surat Perjanjian', data.get('tanggal_terbit_surat_perjanjian_pemanfaatan_tanah'));
            html += makeRow('Nama Penerima Surat Perjanjian', data.get('nama_penerima_surat_perjanjian_pemanfaatan_tanah'));
        }
        
        html += makeRow('Fungsi Bangunan', data.get('fungsi_bangunan'));
        html += makeRow('Sub Fungsi Bangunan', data.get('sub_fungsi_bangunan'));
        html += makeRow('Nama Bangunan', data.get('nama_bangunan'));
        html += makeRow('Luas Bangunan', data.get('luas_bangunan') + ' m²');
        html += makeRow('Ketinggian Bangunan', data.get('ketinggian_bangunan') + ' meter');
        html += makeRow('Jumlah Lantai', data.get('jumlah_lantai'));
        html += makeRow('Jumlah Lapis Basemen', data.get('jumlah_lapis_basemen') || '0');
        html += makeRow('Luas Basemen', data.get('luas_basemen') ? data.get('luas_basemen') + ' m²' : '-');
        html += makeRow('Jumlah Unit Bangunan', data.get('jumlah_unit_bangunan'));
        html += makeRow('Estimasi Jumlah Penghuni', data.get('estimasi_jumlah_penghuni') || '-');
        html += makeRow('Tahun Rencana Pembangunan', data.get('tahun_rencana_bangun') || '-');
        html += '</table><h6>📎 Dokumen Wajib (' + visibleRequiredDocs.length + ' dokumen)</h6><ul>';
        
        for (let doc of visibleRequiredDocs) {
            if (uploadedDocs[doc]) {
                html += `<li style="color: green;">✅ <strong>${escapeHtml(doc)}</strong> - ${escapeHtml(uploadedDocs[doc].file_name)} <a href="${uploadedDocs[doc].url}" target="_blank">(Lihat)</a></li>`;
            } else {
                html += `<li style="color: red;">❌ <strong>${escapeHtml(doc)}</strong> - <span class="text-danger">Belum diupload</span></li>`;
            }
        }
        
        if (dokumenLain.length > 0) {
            html += '<h6 class="mt-3">📎 Dokumen Tambahan</h6><ul>';
            dokumenLain.forEach(d => html += `<li><strong>${escapeHtml(d.nama)}</strong> - ${escapeHtml(d.file_name)} <a href="${d.url}" target="_blank">(Lihat)</a></li>`);
            html += '</ul>';
        }
        
        document.getElementById('reviewContent').innerHTML = html;
    }
    
    function makeRow(label, val) { return `<tr><th width="250">${label}</th><td>${val || '-'}</td>`; }
    function escapeHtml(str) { if(!str) return ''; return str.replace(/[&<>]/g, m => m==='&'?'&amp;':m==='<'?'&lt;':'&gt;'); }
    
// ====================== SUBMIT ======================
// Hapus event listener submit yang lama, ganti dengan yang baru

document.getElementById('formPengajuan').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent default submit
    
    // Validasi lengkap
    if (!validateStep1() || !validateStep2() || !validateStep3()) {
        alert('❌ Formulir belum lengkap. Harap lengkapi semua data dan upload SEMUA dokumen wajib.');
        return;
    }
    
    // Tampilkan modal konfirmasi
    const modal = new bootstrap.Modal(document.getElementById('confirmSubmitModal'));
    modal.show();
    
    // Reset checkbox dan tombol
    document.getElementById('confirmCheck').checked = false;
    document.getElementById('confirmSubmitBtn').disabled = true;
});

// Event untuk checkbox konfirmasi
document.getElementById('confirmCheck').addEventListener('change', function() {
    document.getElementById('confirmSubmitBtn').disabled = !this.checked;
});

// Event untuk tombol konfirmasi submit
document.getElementById('confirmSubmitBtn').addEventListener('click', function() {
    const form = document.getElementById('formPengajuan');
    
    // Tambahkan hidden fields untuk dokumen
    for (let nama in uploadedDocs) {
        let inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'dokumen_temp[]';
        inp.value = JSON.stringify({ 
            nama: nama, 
            temp_path: uploadedDocs[nama].temp_path, 
            file_name: uploadedDocs[nama].file_name 
        });
        form.appendChild(inp);
    }
    
    dokumenLain.forEach(doc => {
        let inp = document.createElement('input');
        inp.type = 'hidden';
        inp.name = 'dokumen_temp[]';
        inp.value = JSON.stringify({ 
            nama: doc.nama, 
            temp_path: doc.temp_path, 
            file_name: doc.file_name 
        });
        form.appendChild(inp);
    });
    
    // Hapus draft dari localStorage
    localStorage.removeItem(STORAGE_KEY);
    
    // Disable tombol dan submit form
    const submitBtn = document.getElementById('confirmSubmitBtn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Mengirim...';
    
    // Submit form
    form.submit();
});
    // ====================== EVENT LISTENER ======================
    document.getElementById('clearDraftBtn').addEventListener('click', hapusDraft);
    document.getElementById('btnTambahDokumenLain')?.addEventListener('click', tambahDokumenLain);
    document.getElementById('btnNextStep1').addEventListener('click', nextStep1);
    document.getElementById('btnNextStep2').addEventListener('click', nextStep2);
    document.getElementById('btnNextStep3').addEventListener('click', nextStep3);
    
    document.getElementById('jumlah_lantai').addEventListener('change', () => { filterChecklistByLantai(); simpanDraft(); updateDocErrorStyles(); });
    document.getElementById('fungsi_bangunan').addEventListener('change', () => { updateTambahanSections(); simpanDraft(); updateDocErrorStyles(); });
    document.getElementById('kecamatan').addEventListener('change', function() { updateKelurahanDropdown(); simpanDraft(); });
    document.getElementById('kecamatan_tanah').addEventListener('change', function() { updateKelurahanTanahDropdown(); simpanDraft(); });
    document.getElementById('kelurahan').addEventListener('change', function() { simpanDraft(); });
    document.getElementById('kelurahan_tanah').addEventListener('change', function() { simpanDraft(); });
    
    document.getElementById('pemilik_tanah_sama_dengan_pemilik_bangunan').addEventListener('change', function() {
        let pemanfaatanFields = document.getElementById('pemanfaatanTanahFields');
        if (pemanfaatanFields) pemanfaatanFields.style.display = this.value === '0' ? 'flex' : 'none';
        simpanDraft();
        ['nomor_surat_perjanjian_pemanfaatan_tanah', 'tanggal_terbit_surat_perjanjian_pemanfaatan_tanah', 'nama_penerima_surat_perjanjian_pemanfaatan_tanah'].forEach(id => {
            let el = document.getElementById(id);
            if (el) validateStep2Field(el);
        });
    });
    
    // ====================== EVENT LISTENER UNTUK VALIDASI REAL-TIME ======================
    
    // NIK
    document.getElementById('nomor_tanda_pengenal').addEventListener('input', function() {
        let jenis = document.getElementById('jenis_tanda_pengenal').value;
        if (jenis === 'NIK') {
            this.value = this.value.replace(/[^0-9]/g,'').slice(0,16);
            validateNIK();
        } else if (jenis === 'KITAS') {
            this.value = this.value.replace(/[^A-Za-z0-9]/g,'').slice(0,20);
            validateKITAS();
        } else if (jenis === 'Paspor') {
            this.value = this.value.replace(/[^A-Za-z0-9]/g,'').slice(0,12);
            validatePaspor();
        }
        simpanDraft();
    });
    
    document.getElementById('jenis_tanda_pengenal').addEventListener('change', function() {
        let input = document.getElementById('nomor_tanda_pengenal');
        input.value = '';
        validateNIK();
        validateKITAS();
        validatePaspor();
        simpanDraft();
    });
    
    // Nomor Kontak
    document.getElementById('nomor_kontak').addEventListener('input', function() { 
        this.value = this.value.replace(/[^0-9]/g,'').slice(0,13);
        validateKontak();
        simpanDraft();
    });
    
    // Email
    document.getElementById('email').addEventListener('input', function() { 
        validateEmail();
        simpanDraft();
    });
    
    // Validasi real-time Step 1
    document.querySelectorAll('#step-1 .required-field').forEach(el => {
        el.addEventListener('input', function() { 
            validateRequiredField(this);
            simpanDraft();
        });
        el.addEventListener('change', function() { 
            validateRequiredField(this);
            simpanDraft();
        });
    });
    
    // Validasi real-time Step 2 (wajib)
    document.querySelectorAll('#step-2 .required-field').forEach(el => {
        el.addEventListener('input', function() { 
            validateStep2Field(this);
            simpanDraft();
        });
        el.addEventListener('change', function() { 
            validateStep2Field(this);
            simpanDraft();
        });
    });
    
    // Validasi khusus untuk field angka wajib
    ['luas_tanah', 'luas_bangunan', 'ketinggian_bangunan', 'jumlah_lantai', 'jumlah_unit_bangunan'].forEach(id => {
        let el = document.getElementById(id);
        if (el) {
            el.addEventListener('input', function() { 
                validateStep2Field(this);
                simpanDraft();
            });
            el.addEventListener('change', function() { 
                validateStep2Field(this);
                simpanDraft();
            });
        }
    });
    
    // ====== VALIDASI REAL-TIME UNTUK FIELD OPSIONAL ======
    ['jumlah_lapis_basemen', 'luas_basemen', 'estimasi_jumlah_penghuni', 'garis_sempadan_bangunan', 'koefisien_dasar_bangunan', 'koefisien_lantai_bangunan', 'koefisien_dasar_hijau', 'tahun_rencana_bangun'].forEach(id => {
        let el = document.getElementById(id);
        if (el) {
            el.addEventListener('input', function() { 
                validateOptionalNumber(this);
                simpanDraft();
            });
            el.addEventListener('change', function() { 
                validateOptionalNumber(this);
                simpanDraft();
            });
            el.addEventListener('blur', function() {
                validateOptionalNumber(this);
                simpanDraft();
            });
        }
    });
    
    // Nomor Dokumen KKPR (text biasa)
    document.getElementById('nomor_dokumen_kkpr_krk')?.addEventListener('input', function() {
        hilangkanError(this);
        simpanDraft();
    });
    document.getElementById('nomor_dokumen_kkpr_krk')?.addEventListener('change', function() {
        hilangkanError(this);
        simpanDraft();
    });
    
    // ====================== HAPUS DRAFT ======================
    async function hapusDraft() {
        if (confirm('Hapus semua data draft? File sementara juga akan dihapus.')) {
            for (let nama in uploadedDocs) await deleteFile(uploadedDocs[nama].temp_path);
            for (let doc of dokumenLain) await deleteFile(doc.temp_path);
            localStorage.removeItem(STORAGE_KEY);
            location.reload();
        }
    }
    
    // ====================== INIT ======================
    updateKelurahanDropdown();
    updateKelurahanTanahDropdown();
    filterChecklistByLantai();
    updateTambahanSections();
    
    let pemilikSama = document.getElementById('pemilik_tanah_sama_dengan_pemilik_bangunan');
    if (pemilikSama) {
        let pemanfaatanFields = document.getElementById('pemanfaatanTanahFields');
        if (pemanfaatanFields) pemanfaatanFields.style.display = pemilikSama.value === '0' ? 'flex' : 'none';
    }
    
    const urlParams = new URLSearchParams(window.location.search);
    const isNew = urlParams.has('new') && urlParams.get('new') === '1';
    
    if (!isNew) {
        muatDraft();
    } else {
        document.querySelectorAll('.upload-cell').forEach(cell => {
            const nama = cell.dataset.nama;
            renderUploadCell(nama, null);
        });
    }
    
    document.getElementById('dokumenLainFile').addEventListener('change', async function(e) {
        let file = e.target.files[0];
        if (!file) return;
        let nama = window.namaDokumenTambahan;
        let fd = new FormData();
        fd.append('file', file);
        fd.append('nama_dokumen', nama);
        try {
            let res = await fetch('{{ route("pengajuan.upload_temp") }}', {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: fd
            });
            let result = await res.json();
            if (result.success) {
                dokumenLain.push({
                    nama: nama,
                    temp_path: result.temp_path,
                    url: result.url,
                    file_name: result.file_name
                });
                renderDokumenLain();
                simpanDraft();
                document.getElementById('namaDokumenLain').value = '';
                this.value = '';
            } else {
                alert(result.message || 'Upload gagal');
            }
        } catch (err) {
            console.error(err);
            alert('Upload gagal');
        }
    });
    
    updateDocErrorStyles();
    validateAllFields();
</script>
@endsection