@extends('layouts.application-wizard')

@section('step-content')
@php
    $d   = $application->debitur ?? null;
    $ap  = $application;

    // Paket fasilitas
    $paketOptions = [
        'paket1'  => 'Paket 1 — Rp 5.000.000',
        'paket2'  => 'Paket 2 — Rp 7.000.000',
        'paket3'  => 'Paket 3 — Rp 10.000.000',
        'lainnya' => 'Lainnya (input manual)',
    ];
    $paketNominal = ['paket1' => 5000000, 'paket2' => 7000000, 'paket3' => 10000000];

    // Sektor ekonomi per jenis layanan
    $sektorMUK    = ['Wana Wisata', 'Wana Wani', 'Wana Wina', 'Wana Gembala'];
    $sektorTunda  = ['Pertanian', 'Peternakan', 'Perikanan', 'Perdagangan', 'Jasa'];

    // Nilai pengajuan_kelompok_id yang sedang aktif
    $currentPkId = old('pengajuan_kelompok_id', $ap->pengajuan_kelompok_id ?? $preselectedPkId);
    $currentPk   = $pengajuanKelompokList->firstWhere('id', $currentPkId);

    // Data tanaman dari kolom baru (unified list v4.6)
    $pohonDibudidayakanData = old('pohon_dibudidayakan', $ap->pohon_dibudidayakan ?? []);
    $pohonNaunganData       = old('pohon_naungan',       $ap->pohon_naungan       ?? []);
    $tundaTebangData        = old('tanaman_tunda_tebang',  $ap->tanaman_tunda_tebang  ?? []);
    $lainnyaTundaData       = old('tanaman_lainnya_tunda', $ap->tanaman_lainnya_tunda ?? []);

    $jenisLayanan = old('jenis_layanan', $ap->jenis_layanan ?? '');
@endphp

<form method="POST" id="form-step2a"
      action="{{ route('applications.step.save', ['id' => $application->id ?? 'new', 'step' => '2a']) }}"
      novalidate>
    @csrf
    @if($readOnly ?? false)<fieldset disabled>@endif

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 1: PENGAJUAN KELOMPOK (RONDE)                                  --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-people-fill me-2"></i>Kelompok Tani Hutan — Ronde Pengajuan
            </h6>
            <div class="row g-3">
                <div class="col-12 col-md-8">
                    <label class="form-label fw-medium">
                        Pilih Ronde Pengajuan Kelompok <span class="text-danger">*</span>
                    </label>
                    <select name="pengajuan_kelompok_id" id="pengajuan_kelompok_id"
                        class="form-select @error('pengajuan_kelompok_id') is-invalid @enderror" required>
                        <option value="">-- Pilih ronde kelompok --</option>
                        @foreach($pengajuanKelompokList as $pk)
                            <option value="{{ $pk->id }}"
                                data-kelompok="{{ $pk->kelompok->nama }}"
                                data-pendamping="{{ $pk->nama_pendamping }} ({{ $pk->afiliasi_pendamping }})"
                                data-kecamatan="{{ $pk->kelompok->kecamatan }}"
                                data-kabupaten="{{ $pk->kelompok->kabupaten }}"
                                {{ $currentPkId === $pk->id ? 'selected' : '' }}>
                                {{ $pk->kelompok->nama }} — {{ $pk->created_at->format('M Y') }}
                                (Pendamping: {{ $pk->nama_pendamping }})
                            </option>
                        @endforeach
                    </select>
                    @error('pengajuan_kelompok_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">
                        Belum ada ronde kelompok?
                        <a href="{{ route('pengajuan-kelompok.create') }}" target="_blank" class="fw-semibold">
                            Buat Pengajuan Kelompok Baru <i class="bi bi-box-arrow-up-right"></i>
                        </a>
                    </div>
                </div>
                {{-- Info kelompok dari ronde yang dipilih --}}
                <div class="col-12 col-md-4" id="kelompok-info-box" style="{{ $currentPk ? '' : 'display:none;' }}">
                    <div class="bg-white border rounded p-3" style="font-size:.85rem;">
                        <p class="fw-semibold mb-1" id="info-nama-kelompok">
                            {{ $currentPk?->kelompok->nama ?? '' }}
                        </p>
                        <small class="text-muted d-block" id="info-lokasi">
                            {{ $currentPk ? $currentPk->kelompok->kecamatan . ', ' . $currentPk->kelompok->kabupaten : '' }}
                        </small>
                        <small class="text-muted d-block" id="info-pendamping">
                            Pendamping: {{ $currentPk?->nama_pendamping ?? '' }}
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 2: HEADER PERMOHONAN                                           --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-file-earmark-text-fill me-2"></i>Header Permohonan
            </h6>
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">Jenis Layanan <span class="text-danger">*</span></label>
                    <select name="jenis_layanan" id="jenis_layanan"
                            class="form-select @error('jenis_layanan') is-invalid @enderror" required>
                        <option value="">-- Pilih --</option>
                        <option value="multi_usaha_kehutanan" {{ $jenisLayanan === 'multi_usaha_kehutanan' ? 'selected' : '' }}>Multi Usaha Kehutanan</option>
                        <option value="tunda_tebang"          {{ $jenisLayanan === 'tunda_tebang'          ? 'selected' : '' }}>Tunda Tebang</option>
                    </select>
                    @error('jenis_layanan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">Status Pinjaman <span class="text-danger">*</span></label>
                    <select name="status_pinjaman" class="form-select @error('status_pinjaman') is-invalid @enderror" required>
                        <option value="">-- Pilih --</option>
                        <option value="baru"      {{ old('status_pinjaman', $ap->status_pinjaman) === 'baru'      ? 'selected' : '' }}>Baru</option>
                        <option value="revolving" {{ old('status_pinjaman', $ap->status_pinjaman) === 'revolving' ? 'selected' : '' }}>Revolving</option>
                    </select>
                    @error('status_pinjaman')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Paket Fasilitas --}}
                <div class="col-12">
                    <label class="form-label fw-medium">Paket Fasilitas <span class="text-danger">*</span></label>
                    <div class="d-flex flex-wrap gap-2 mb-2">
                        @foreach($paketOptions as $val => $lbl)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="paket_fasilitas" id="paket_{{ $val }}"
                                   value="{{ $val }}"
                                   {{ old('paket_fasilitas', $ap->paket_fasilitas) === $val ? 'checked' : '' }}
                                   required>
                            <label class="form-check-label" for="paket_{{ $val }}">{{ $lbl }}</label>
                        </div>
                        @endforeach
                    </div>
                    @error('paket_fasilitas')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>

                <div class="col-12 col-md-5">
                    <label class="form-label fw-medium">Jumlah Kredit Diajukan (Rp) <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">Rp</span>
                        <input type="number" name="plafond_diajukan" id="plafond_diajukan"
                               min="1000000" max="50000000" step="500000"
                               class="form-control @error('plafond_diajukan') is-invalid @enderror"
                               value="{{ old('plafond_diajukan', $ap->plafond_diajukan) }}"
                               placeholder="10000000" required>
                    </div>
                    <div class="form-text">Maks. Rp 50.000.000. Pilih Paket untuk auto-fill.</div>
                    @error('plafond_diajukan')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Jangka Waktu / Tenor (bulan) <span class="text-danger">*</span></label>
                    <input type="number" name="tenor_bulan" min="1" max="96" id="tenor_bulan"
                           class="form-control @error('tenor_bulan') is-invalid @enderror"
                           value="{{ old('tenor_bulan', $ap->tenor_bulan) }}" placeholder="24" required>
                    @error('tenor_bulan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 3: DATA PEMOHON                                                --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-person-vcard-fill me-2"></i>Data Pemohon
            </h6>
            <div class="row g-3">
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">Nama Lengkap (sesuai KTP) <span class="text-danger">*</span></label>
                    <input type="text" name="nama" class="form-control @error('nama') is-invalid @enderror"
                           value="{{ old('nama', $d?->nama) }}" required>
                    @error('nama')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">Nama Kelompok</label>
                    <input type="text" class="form-control bg-light" readonly
                           id="nama-kelompok-display"
                           value="{{ $currentPk?->kelompok->nama ?? $ap->kelompok?->nama ?? '' }}"
                           placeholder="Otomatis dari pilihan ronde kelompok">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label fw-medium">Jenis Kelamin <span class="text-danger">*</span></label>
                    <div class="d-flex gap-3 mt-1">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="jenis_kelamin" value="L" id="jk_l"
                                   {{ old('jenis_kelamin', $d?->jenis_kelamin) === 'L' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="jk_l">Laki-laki</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="jenis_kelamin" value="P" id="jk_p"
                                   {{ old('jenis_kelamin', $d?->jenis_kelamin) === 'P' ? 'checked' : '' }}>
                            <label class="form-check-label" for="jk_p">Perempuan</label>
                        </div>
                    </div>
                    @error('jenis_kelamin')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">NIK <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" name="nik" id="nik" maxlength="16" inputmode="numeric"
                               class="form-control @error('nik') is-invalid @enderror"
                               value="{{ old('nik', $d?->nik) }}" required>
                        <span class="input-group-text">
                            <i class="bi bi-dash-circle text-muted" id="nik-icon"></i>
                        </span>
                    </div>
                    <div id="nik-feedback" class="form-text"></div>
                    @error('nik')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label fw-medium">Tanggal Lahir <span class="text-danger">*</span></label>
                    <input type="date" name="ttl" class="form-control @error('ttl') is-invalid @enderror"
                           value="{{ old('ttl', $d?->ttl?->format('Y-m-d')) }}" required>
                    @error('ttl')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Tempat Lahir</label>
                    <input type="text" name="tempat_lahir" class="form-control"
                           value="{{ old('tempat_lahir', $d?->tempat_lahir) }}" placeholder="Nama kota/kabupaten">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">No. Kartu Keluarga</label>
                    <input type="text" name="no_kk" maxlength="16" inputmode="numeric"
                           class="form-control @error('no_kk') is-invalid @enderror"
                           value="{{ old('no_kk', $d?->no_kk) }}">
                    @error('no_kk')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Pendidikan Terakhir</label>
                    <select name="pendidikan" class="form-select">
                        <option value="">-- Pilih --</option>
                        @foreach(['SD','SMP','SMA','S1','S2','S3','Tidak Sekolah'] as $edu)
                            <option value="{{ $edu }}" {{ old('pendidikan', $d?->pendidikan) === $edu ? 'selected' : '' }}>{{ $edu }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Status Perkawinan → trigger show/hide --}}
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Status Perkawinan <span class="text-danger">*</span></label>
                    <select name="status_kawin" id="status_kawin"
                            class="form-select @error('status_kawin') is-invalid @enderror" required>
                        <option value="">-- Pilih --</option>
                        <option value="belum_menikah" {{ old('status_kawin', $d?->status_kawin) === 'belum_menikah' ? 'selected' : '' }}>Belum Kawin</option>
                        <option value="menikah"       {{ old('status_kawin', $d?->status_kawin) === 'menikah'       ? 'selected' : '' }}>Kawin</option>
                        <option value="cerai"         {{ old('status_kawin', $d?->status_kawin) === 'cerai'         ? 'selected' : '' }}>Duda / Cerai</option>
                        <option value="cerai_mati"    {{ old('status_kawin', $d?->status_kawin) === 'cerai_mati'    ? 'selected' : '' }}>Janda / Cerai Mati</option>
                    </select>
                    @error('status_kawin')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Nama Ibu Kandung</label>
                    <input type="text" name="nama_ibu" class="form-control"
                           value="{{ old('nama_ibu', $d?->nama_ibu) }}">
                </div>

                {{-- Jumlah Tanggungan — tampil jika menikah/cerai --}}
                <div id="section-tanggungan" class="col-6 col-md-2 d-none">
                    <label class="form-label fw-medium">Jml. Tanggungan <span class="text-danger">*</span></label>
                    <input type="number" name="tanggungan" id="tanggungan" min="0" max="20"
                           class="form-control @error('tanggungan') is-invalid @enderror"
                           value="{{ old('tanggungan', $d?->tanggungan ?? 0) }}">
                    @error('tanggungan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <input type="hidden" id="tanggungan-hidden" name="tanggungan" value="0">

                {{-- Data Pasangan — tampil hanya saat menikah --}}
                <div id="section-pasangan" class="col-12 d-none">
                    <div class="p-3 rounded-2 border bg-white">
                        <div class="small fw-semibold text-muted mb-2">Data Pasangan</div>
                        <div class="row g-3">
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-medium">Nama Pasangan <span class="text-danger">*</span></label>
                                <input type="text" name="nama_pasangan" id="nama_pasangan"
                                       class="form-control" value="{{ old('nama_pasangan', $d?->nama_pasangan) }}">
                            </div>
                            <div class="col-12 col-md-3">
                                <label class="form-label fw-medium">NIK Pasangan</label>
                                <input type="text" name="nik_pasangan" maxlength="16" inputmode="numeric"
                                       class="form-control" value="{{ old('nik_pasangan', $d?->nik_pasangan) }}">
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label fw-medium">Tanggal Lahir Pasangan</label>
                                <input type="date" name="ttl_pasangan" class="form-control"
                                       value="{{ old('ttl_pasangan', $d?->ttl_pasangan?->format('Y-m-d')) }}">
                            </div>
                            <div class="col-6 col-md-2">
                                <label class="form-label fw-medium">Tempat Lahir Pasangan</label>
                                <input type="text" name="tempat_lahir_pasangan" class="form-control"
                                       value="{{ old('tempat_lahir_pasangan', $d?->tempat_lahir_pasangan) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 4: TEMPAT TINGGAL                                              --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-house-fill me-2"></i>Keterangan Tempat Tinggal
            </h6>
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label fw-medium">Alamat Lengkap Saat Ini <span class="text-danger">*</span></label>
                    <textarea name="alamat" rows="2" class="form-control @error('alamat') is-invalid @enderror"
                              required placeholder="Nama jalan / dusun / nama tempat">{{ old('alamat', $d?->alamat) }}</textarea>
                    @error('alamat')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-4 col-md-2">
                    <label class="form-label fw-medium">RT/RW</label>
                    <input type="text" name="rt_rw" class="form-control" placeholder="000/000"
                           value="{{ old('rt_rw', $d?->rt_rw) }}">
                </div>

                {{-- Cascade Wilayah: Provinsi → Kabupaten → Kecamatan → Kelurahan --}}
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Provinsi <span class="text-danger">*</span></label>
                    <select name="provinsi" id="sel-provinsi"
                            class="form-select @error('provinsi') is-invalid @enderror" required>
                        <option value="">-- Pilih Provinsi --</option>
                    </select>
                    @error('provinsi')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Kabupaten/Kota <span class="text-danger">*</span></label>
                    <select name="kabupaten" id="sel-kabupaten"
                            class="form-select @error('kabupaten') is-invalid @enderror" required disabled>
                        <option value="">-- Pilih Provinsi dulu --</option>
                    </select>
                    @error('kabupaten')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Kecamatan <span class="text-danger">*</span></label>
                    <select name="kecamatan" id="sel-kecamatan"
                            class="form-select @error('kecamatan') is-invalid @enderror" required disabled>
                        <option value="">-- Pilih Kabupaten dulu --</option>
                    </select>
                    @error('kecamatan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-8 col-md-4">
                    <label class="form-label fw-medium">Kelurahan/Desa</label>
                    <select name="kelurahan" id="sel-kelurahan" class="form-select" disabled>
                        <option value="">-- Pilih Kecamatan dulu --</option>
                    </select>
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">No. HP</label>
                    <input type="tel" name="no_hp" class="form-control" value="{{ old('no_hp', $d?->no_hp) }}">
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Status Tempat Tinggal <span class="text-danger">*</span></label>
                    <select name="status_tempat_tinggal" class="form-select @error('status_tempat_tinggal') is-invalid @enderror" required>
                        <option value="">-- Pilih --</option>
                        @foreach(['milik_sendiri'=>'Milik Sendiri','orang_tua'=>'Milik Orang Tua/Mertua','saudara'=>'Milik Saudara','sewa'=>'Sewa','kontrak'=>'Kontrak','lainnya'=>'Lainnya'] as $val=>$lbl)
                            <option value="{{ $val }}" {{ old('status_tempat_tinggal', $d?->status_tempat_tinggal) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                    @error('status_tempat_tinggal')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label fw-medium">Lama Menempati (thn) <span class="text-danger">*</span></label>
                    <input type="number" name="lama_menempati_tahun" min="0" max="100"
                           class="form-control @error('lama_menempati_tahun') is-invalid @enderror"
                           value="{{ old('lama_menempati_tahun', $d?->lama_menempati_tahun ?? 0) }}" required>
                    @error('lama_menempati_tahun')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Toggle Alamat KTP Berbeda --}}
                <div class="col-12 mt-2">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="alamat_ktp_berbeda" id="alamat_ktp_berbeda"
                               value="1" {{ old('alamat_ktp_berbeda', $d?->alamat_ktp_berbeda) ? 'checked' : '' }}>
                        <label class="form-check-label fw-medium" for="alamat_ktp_berbeda">
                            Alamat KTP berbeda dari alamat saat ini?
                        </label>
                    </div>
                </div>

                {{-- Seksi Alamat KTP --}}
                <div id="section-alamat-ktp" class="{{ old('alamat_ktp_berbeda', $d?->alamat_ktp_berbeda) ? '' : 'd-none' }} col-12">
                    <div class="p-3 rounded-2 border bg-white">
                        <div class="small fw-semibold text-muted mb-2">Alamat KTP</div>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-medium">Alamat KTP <span class="text-danger">*</span></label>
                                <textarea name="alamat_ktp" rows="2" class="form-control @error('alamat_ktp') is-invalid @enderror"
                                          placeholder="Nama jalan / dusun">{{ old('alamat_ktp', $d?->alamat_ktp) }}</textarea>
                                @error('alamat_ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-4 col-md-2">
                                <label class="form-label fw-medium">RT/RW</label>
                                <input type="text" name="rt_rw_ktp" class="form-control" placeholder="000/000"
                                       value="{{ old('rt_rw_ktp', $d?->rt_rw_ktp) }}">
                            </div>

                            {{-- Cascade Wilayah KTP --}}
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-medium">Provinsi <span class="text-danger">*</span></label>
                                <select name="provinsi_ktp" id="sel-provinsi-ktp"
                                        class="form-select @error('provinsi_ktp') is-invalid @enderror">
                                    <option value="">-- Pilih Provinsi --</option>
                                </select>
                                @error('provinsi_ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-medium">Kabupaten/Kota <span class="text-danger">*</span></label>
                                <select name="kabupaten_ktp" id="sel-kabupaten-ktp"
                                        class="form-select @error('kabupaten_ktp') is-invalid @enderror" disabled>
                                    <option value="">-- Pilih Provinsi dulu --</option>
                                </select>
                                @error('kabupaten_ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-medium">Kecamatan <span class="text-danger">*</span></label>
                                <select name="kecamatan_ktp" id="sel-kecamatan-ktp"
                                        class="form-select @error('kecamatan_ktp') is-invalid @enderror" disabled>
                                    <option value="">-- Pilih Kabupaten dulu --</option>
                                </select>
                                @error('kecamatan_ktp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-8 col-md-4">
                                <label class="form-label fw-medium">Kelurahan/Desa</label>
                                <select name="kelurahan_ktp" id="sel-kelurahan-ktp" class="form-select" disabled>
                                    <option value="">-- Pilih Kecamatan dulu --</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-3">
                                <label class="form-label fw-medium">No. Telepon</label>
                                <input type="tel" name="no_telp_ktp" class="form-control"
                                       value="{{ old('no_telp_ktp', $d?->no_telp_ktp) }}">
                            </div>
                            <div class="col-12 col-md-4">
                                <label class="form-label fw-medium">Status Tempat Tinggal KTP</label>
                                <select name="status_tt_ktp" class="form-select">
                                    <option value="">-- Pilih --</option>
                                    @foreach(['milik_sendiri'=>'Milik Sendiri','orang_tua'=>'Milik Orang Tua/Mertua','saudara'=>'Milik Saudara','sewa'=>'Sewa','kontrak'=>'Kontrak','lainnya'=>'Lainnya'] as $val=>$lbl)
                                        <option value="{{ $val }}" {{ old('status_tt_ktp', $d?->status_tt_ktp) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 5: INFORMASI PEKERJAAN                                         --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-briefcase-fill me-2"></i>Informasi Pekerjaan
            </h6>
            <div class="row g-3">
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Tipe Pendapatan / Siklus</label>
                    <select name="tipe_pendapatan" class="form-select">
                        <option value="">-- Pilih --</option>
                        @foreach(['Bulanan','Triwulan','Caturwulan','Semesteran','Tahunan'] as $tp)
                            <option value="{{ $tp }}" {{ old('tipe_pendapatan', $d?->tipe_pendapatan) === $tp ? 'selected' : '' }}>{{ $tp }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-4">
                    {{-- Sektor Ekonomi — opsi dinamis berdasarkan Jenis Layanan --}}
                    <label class="form-label fw-medium">Sektor Ekonomi</label>
                    <select name="sektor_ekonomi" id="sektor_ekonomi" class="form-select">
                        <option value="">-- Pilih Jenis Layanan terlebih dahulu --</option>
                        {{-- Opsi diisi via JS berdasarkan pilihan jenis_layanan --}}
                        @php $currentSektor = old('sektor_ekonomi', $d?->sektor_ekonomi ?? ''); @endphp
                    </select>
                    <div class="form-text" id="sektor-hint">Pilih Jenis Layanan di Header terlebih dahulu.</div>
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Lama Bekerja / Usaha (tahun) <span class="text-danger">*</span></label>
                    <input type="number" name="lama_usaha_tahun" min="0" max="50"
                           class="form-control @error('lama_usaha_tahun') is-invalid @enderror"
                           value="{{ old('lama_usaha_tahun', $ap->lama_usaha_tahun ?? 0) }}" required>
                    @error('lama_usaha_tahun')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">Usaha yang Dibiayai</label>
                    <input type="text" name="usaha_dibiayai" class="form-control"
                           value="{{ old('usaha_dibiayai', $d?->usaha_dibiayai) }}"
                           placeholder="Deskripsi singkat usaha yang akan didanai">
                </div>
                <div class="col-12 col-md-6">
                    <label class="form-label fw-medium">Alamat Usaha / Lahan</label>
                    <input type="text" name="alamat_usaha" class="form-control"
                           value="{{ old('alamat_usaha', $d?->alamat_usaha) }}"
                           placeholder="Lokasi usaha atau lahan">
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">Telepon Usaha</label>
                    <input type="tel" name="telp_usaha" class="form-control"
                           value="{{ old('telp_usaha', $d?->telp_usaha) }}">
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">NPWP</label>
                    <input type="text" name="npwp" class="form-control"
                           value="{{ old('npwp', $d?->npwp) }}" placeholder="Jika ada">
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">Status Kepemilikan Usaha</label>
                    <select name="status_kepemilikan_usaha" class="form-select">
                        <option value="">-- Pilih --</option>
                        <option value="milik_sendiri"   {{ old('status_kepemilikan_usaha', $d?->status_kepemilikan_usaha) === 'milik_sendiri'   ? 'selected' : '' }}>Milik Sendiri</option>
                        <option value="milik_keluarga"  {{ old('status_kepemilikan_usaha', $d?->status_kepemilikan_usaha) === 'milik_keluarga'  ? 'selected' : '' }}>Milik Keluarga</option>
                        <option value="partner"         {{ old('status_kepemilikan_usaha', $d?->status_kepemilikan_usaha) === 'partner'         ? 'selected' : '' }}>Partner</option>
                    </select>
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-medium">Status Tempat Usaha</label>
                    <select name="status_tempat_usaha" class="form-select">
                        <option value="">-- Pilih --</option>
                        <option value="milik_sendiri"  {{ old('status_tempat_usaha', $d?->status_tempat_usaha) === 'milik_sendiri'  ? 'selected' : '' }}>Milik Sendiri</option>
                        <option value="milik_keluarga" {{ old('status_tempat_usaha', $d?->status_tempat_usaha) === 'milik_keluarga' ? 'selected' : '' }}>Milik Keluarga</option>
                        <option value="sewa"           {{ old('status_tempat_usaha', $d?->status_tempat_usaha) === 'sewa'           ? 'selected' : '' }}>Sewa</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 6: KONDISI KEBUN                                               --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-3" style="color:var(--bpdlh-green);">
                <i class="bi bi-tree-fill me-2"></i>Kondisi Kebun
            </h6>
            <input type="hidden" name="tipe_usaha" value="{{ old('tipe_usaha', $ap->tipe_usaha ?? 'onfarm') }}">
            <div class="row g-3">
                <div class="col-6 col-md-3">
                    <label class="form-label fw-medium">Luas Lahan (Ha) <span class="text-danger">*</span></label>
                    <input type="number" name="luas_lahan_ha" min="0.01" step="0.01"
                           class="form-control @error('luas_lahan_ha') is-invalid @enderror"
                           value="{{ old('luas_lahan_ha', $ap->luas_lahan_ha) }}" required>
                    @error('luas_lahan_ha')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-6 col-md-2">
                    <label class="form-label fw-medium">Tahun Tanam <span class="text-danger">*</span></label>
                    <input type="number" name="tahun_tanam" min="1950" max="{{ date('Y') }}"
                           class="form-control @error('tahun_tanam') is-invalid @enderror"
                           value="{{ old('tahun_tanam', $ap->tahun_tanam) }}" required>
                    @error('tahun_tanam')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 col-md-4">
                    <label class="form-label fw-medium">Status Lahan <span class="text-danger">*</span></label>
                    <select name="status_lahan" class="form-select @error('status_lahan') is-invalid @enderror" required>
                        <option value="">-- Pilih --</option>
                        @foreach([
                            'IPHPS'          => 'Izin Pemanfaatan (IPHPS/HPL)',
                            'SHM'            => 'Hak Milik (SHM)',
                            'HGU'            => 'Hak Guna Usaha (HGU)',
                            'Letter_C'       => 'Letter C / Girik',
                            'Girik'          => 'Girik',
                            'Sewa'           => 'Sewa',
                            'Lainnya'        => 'Lainnya',
                        ] as $val => $lbl)
                            <option value="{{ $val }}" {{ old('status_lahan', $ap->status_lahan) === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                    @error('status_lahan')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 7: JENIS TANAMAN MULTI USAHA KEHUTANAN                        --}}
    {{-- Hanya tampil jika jenis_layanan = Multi Usaha Kehutanan              --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4" id="card-muk"
         style="{{ $jenisLayanan === 'multi_usaha_kehutanan' ? '' : 'display:none;' }}">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-1" style="color:var(--bpdlh-green);">
                <i class="bi bi-flower2 me-2"></i>Jenis Tanaman Multi Usaha Kehutanan
            </h6>
            <p class="text-muted small mb-3">
                Daftarkan semua tanaman yang diusahakan di kebun (komoditas utama maupun lainnya).
                Input detail kelas keliling pohon &amp; produksi bulanan di Langkah 2 (Tallysheet).
            </p>

            {{-- Sub-bagian: Jumlah Pohon yang Dibudidayakan --}}
            <div class="mb-4">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="small fw-semibold text-muted">
                        Jumlah Pohon yang Dibudidayakan
                        <span class="badge bg-light text-dark border ms-1">Komoditas utama &amp; lainnya</span>
                    </div>
                    <button type="button" class="btn btn-xs btn-outline-success btn-tambah-baris py-0 px-2"
                        data-target="list-pohon-dibudidayakan" data-prefix="pohon_dibudidayakan"
                        data-placeholder="Nama pohon (mis: Kakao, Durian, Alpukat)">
                        <i class="bi bi-plus-circle me-1"></i>Tambah
                    </button>
                </div>
                <div id="list-pohon-dibudidayakan">
                    @forelse($pohonDibudidayakanData as $idx => $item)
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="pohon_dibudidayakan[{{ $idx }}][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon (mis: Kakao, Durian)"
                                   value="{{ $item['jenis'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="pohon_dibudidayakan[{{ $idx }}][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1"
                                       value="{{ $item['jumlah_pohon'] ?? '' }}">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="pohon_dibudidayakan[0][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon (mis: Kakao, Durian)">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="pohon_dibudidayakan[0][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            {{-- Sub-bagian: Jumlah Pohon Naungan --}}
            <div>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="small fw-semibold text-muted">
                        Jumlah Pohon Naungan
                        <span class="badge bg-light text-dark border ms-1">Penaung di bawah tegakan utama</span>
                    </div>
                    <button type="button" class="btn btn-xs btn-outline-success btn-tambah-baris py-0 px-2"
                        data-target="list-pohon-naungan" data-prefix="pohon_naungan"
                        data-placeholder="Nama pohon naungan (mis: Lamtoro, Gamal)">
                        <i class="bi bi-plus-circle me-1"></i>Tambah
                    </button>
                </div>
                <div id="list-pohon-naungan">
                    @forelse($pohonNaunganData as $idx => $item)
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="pohon_naungan[{{ $idx }}][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon naungan (mis: Lamtoro)"
                                   value="{{ $item['jenis'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="pohon_naungan[{{ $idx }}][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1"
                                       value="{{ $item['jumlah_pohon'] ?? '' }}">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    <p class="text-muted small fst-italic mb-0" id="pohon-naungan-placeholder">
                        Klik "Tambah" di atas jika ada pohon naungan.
                    </p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    {{-- BAGIAN 8: TANAMAN TUNDA TEBANG                                        --}}
    {{-- Hanya tampil jika jenis_layanan = Tunda Tebang                       --}}
    {{-- ══════════════════════════════════════════════════════════════════════ --}}
    <div class="card border-0 bg-light rounded-3 mb-4" id="card-tunda"
         style="{{ $jenisLayanan === 'tunda_tebang' ? '' : 'display:none;' }}">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold mb-1" style="color:var(--bpdlh-green);">
                <i class="bi bi-signpost-split-fill me-2"></i>Jenis Tanaman Tunda Tebang
            </h6>
            <p class="text-muted small mb-3">
                Pohon kayu yang sengaja tidak ditebang — menjadi komponen nilai jaminan.
                Nilai dihitung berdasarkan kelas keliling batang × harga tabel di Tallysheet (Langkah 2).
            </p>

            {{-- Pohon Tunda Tebang --}}
            <div class="mb-4">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="small fw-semibold text-muted">Pohon Tunda Tebang</div>
                    <button type="button" class="btn btn-xs btn-outline-success btn-tambah-baris py-0 px-2"
                        data-target="list-tunda-tebang" data-prefix="tanaman_tunda_tebang"
                        data-placeholder="Nama pohon (mis: Mahoni, Sengon)">
                        <i class="bi bi-plus-circle me-1"></i>Tambah
                    </button>
                </div>
                <div id="list-tunda-tebang">
                    @forelse($tundaTebangData as $idx => $item)
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="tanaman_tunda_tebang[{{ $idx }}][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon (mis: Mahoni, Sengon)"
                                   value="{{ $item['jenis'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="tanaman_tunda_tebang[{{ $idx }}][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1"
                                       value="{{ $item['jumlah_pohon'] ?? '' }}">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @empty
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="tanaman_tunda_tebang[0][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon (mis: Mahoni, Sengon)">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="tanaman_tunda_tebang[0][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>

            {{-- Pohon Lainnya (opsional) --}}
            <div>
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="small fw-semibold text-muted">Pohon Lainnya <span class="fw-normal">(di luar tunda tebang utama, opsional)</span></div>
                    <button type="button" class="btn btn-xs btn-outline-success btn-tambah-baris py-0 px-2"
                        data-target="list-lainnya-tunda" data-prefix="tanaman_lainnya_tunda"
                        data-placeholder="Nama pohon">
                        <i class="bi bi-plus-circle me-1"></i>Tambah
                    </button>
                </div>
                <div id="list-lainnya-tunda">
                    @foreach($lainnyaTundaData as $idx => $item)
                    <div class="row g-2 mb-2 align-items-center tanaman-row">
                        <div class="col-6 col-md-5">
                            <input type="text" name="tanaman_lainnya_tunda[{{ $idx }}][jenis]"
                                   class="form-control form-control-sm" placeholder="Nama pohon"
                                   value="{{ $item['jenis'] ?? '' }}">
                        </div>
                        <div class="col-4 col-md-3">
                            <div class="input-group input-group-sm">
                                <input type="number" name="tanaman_lainnya_tunda[{{ $idx }}][jumlah_pohon]"
                                       class="form-control" placeholder="Jumlah" min="1"
                                       value="{{ $item['jumlah_pohon'] ?? '' }}">
                                <span class="input-group-text bg-white">pohon</span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1">
                            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                    @endforeach
                    @if(empty($lainnyaTundaData))
                    <p class="text-muted small fst-italic mb-0">
                        Klik "Tambah" di atas jika ada pohon lain yang perlu dicatat.
                    </p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($readOnly ?? false)</fieldset>@endif

    @include('applications.partials.wizard-nav-buttons', [
        'backUrl'   => null,
        'nextLabel' => 'Simpan & Lanjut ke Data Lahan',
        'readOnly'  => $readOnly ?? false,
    ])
</form>

@push('scripts')
<script>
// ── Konfigurasi opsi dinamis ─────────────────────────────────────────
const paketNominal = @json($paketNominal);

const sektorOptions = {
    'multi_usaha_kehutanan': @json($sektorMUK),
    'tunda_tebang':          @json($sektorTunda),
};

const currentSektor = @json($currentSektor);  // dari server (edit mode)

// ── Paket Fasilitas → auto-fill plafond ──────────────────────────────
document.querySelectorAll('[name="paket_fasilitas"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const nominal = paketNominal[radio.value];
        const plafondInput = document.getElementById('plafond_diajukan');
        if (nominal) {
            plafondInput.value = nominal;
            plafondInput.readOnly = true;
        } else {
            plafondInput.value = '';
            plafondInput.readOnly = false;
            plafondInput.focus();
        }
    });
});
// Init: jika paket sudah dipilih, set readonly
const checkedPaket = document.querySelector('[name="paket_fasilitas"]:checked');
if (checkedPaket && paketNominal[checkedPaket.value]) {
    document.getElementById('plafond_diajukan').readOnly = true;
}

// ── Jenis Layanan → toggle card MUK/Tunda + update sektor ekonomi ────
const jenisLayananEl = document.getElementById('jenis_layanan');
const cardMuk        = document.getElementById('card-muk');
const cardTunda      = document.getElementById('card-tunda');
const sektorEl       = document.getElementById('sektor_ekonomi');
const sektorHintEl   = document.getElementById('sektor-hint');

function updateJenisLayanan(val, preserveSektor = false) {
    // Visibilitas card tanaman
    cardMuk.style.display   = (val === 'multi_usaha_kehutanan') ? '' : 'none';
    cardTunda.style.display  = (val === 'tunda_tebang')          ? '' : 'none';

    // Isi opsi sektor ekonomi
    const opts = sektorOptions[val] ?? [];
    const prevVal = preserveSektor ? sektorEl.value : currentSektor;

    // Reset
    sektorEl.innerHTML = '<option value="">-- Pilih --</option>';

    if (opts.length === 0) {
        sektorEl.innerHTML = '<option value="">-- Pilih Jenis Layanan terlebih dahulu --</option>';
        sektorHintEl.textContent = 'Pilih Jenis Layanan di Header terlebih dahulu.';
    } else {
        opts.forEach(opt => {
            const option = document.createElement('option');
            option.value = opt;
            option.textContent = opt;
            if (opt === prevVal) option.selected = true;
            sektorEl.appendChild(option);
        });
        sektorHintEl.textContent = '';
    }
}

jenisLayananEl.addEventListener('change', () => updateJenisLayanan(jenisLayananEl.value, false));

// Init — populate sektor sesuai nilai awal dari server
updateJenisLayanan(jenisLayananEl.value, true);

// ── Status Perkawinan → show/hide ─────────────────────────────────────
const statusKawinEl       = document.getElementById('status_kawin');
const sectionPasangan     = document.getElementById('section-pasangan');
const sectionTanggungan   = document.getElementById('section-tanggungan');
const tanggunanHidden     = document.getElementById('tanggungan-hidden');
const tanggunanInput      = document.getElementById('tanggungan');
const namaPasanganInput   = document.getElementById('nama_pasangan');

function updateStatusKawin() {
    const val = statusKawinEl.value;
    const isNikah       = val === 'menikah';
    const hasTanggungan = ['menikah','cerai','cerai_mati'].includes(val);

    sectionPasangan.classList.toggle('d-none', !isNikah);
    namaPasanganInput.required = isNikah;

    sectionTanggungan.classList.toggle('d-none', !hasTanggungan);
    tanggunanInput.disabled = !hasTanggungan;
    tanggunanInput.required  = hasTanggungan;
    tanggunanHidden.disabled = hasTanggungan;
}
statusKawinEl.addEventListener('change', updateStatusKawin);
updateStatusKawin();

// ── Alamat KTP toggle ─────────────────────────────────────────────────
document.getElementById('alamat_ktp_berbeda').addEventListener('change', function() {
    document.getElementById('section-alamat-ktp').classList.toggle('d-none', !this.checked);
});

// ── NIK live validation ───────────────────────────────────────────────
const nikInput    = document.getElementById('nik');
const nikIcon     = document.getElementById('nik-icon');
const nikFeedback = document.getElementById('nik-feedback');
const appId       = '{{ $application->id ?? "new" }}';
let nikTimer      = null;

nikInput.addEventListener('input', () => {
    clearTimeout(nikTimer);
    const nik = nikInput.value.replace(/\D/g, '');
    nikInput.value = nik;
    if (nik.length < 16) { nikIcon.className = 'bi bi-dash-circle text-muted'; nikFeedback.textContent = ''; return; }
    nikIcon.className = 'bi bi-arrow-repeat text-muted spin';
    nikTimer = setTimeout(async () => {
        try {
            const res  = await fetch(`/api/applications/${appId}/validate-nik?nik=${nik}`);
            const data = await res.json();
            nikIcon.className  = data.valid ? 'bi bi-check-circle-fill text-success' : 'bi bi-x-circle-fill text-danger';
            nikFeedback.innerHTML = `<span class="text-${data.valid ? 'success' : 'danger'}">${data.message}</span>`;
        } catch { nikIcon.className = 'bi bi-dash-circle text-muted'; }
    }, 600);
});

// ══════════════════════════════════════════════════════════════════════
// SECTION TANAMAN — HELPERS
// ══════════════════════════════════════════════════════════════════════

/**
 * Hitung index baris berikutnya di dalam sebuah container.
 */
function nextIdx(containerId, prefix) {
    const container = document.getElementById(containerId);
    let max = -1;
    container.querySelectorAll(`input[name^="${prefix}["]`).forEach(inp => {
        const m = inp.name.match(/\[(\d+)\]/);
        if (m) max = Math.max(max, parseInt(m[1]));
    });
    return max + 1;
}

/**
 * Buat HTML satu baris tanaman.
 */
function buatBarisTanaman(prefix, idx, placeholder = 'Nama pohon') {
    return `<div class="row g-2 mb-2 align-items-center tanaman-row">
        <div class="col-6 col-md-5">
            <input type="text" name="${prefix}[${idx}][jenis]"
                class="form-control form-control-sm" placeholder="${placeholder}">
        </div>
        <div class="col-4 col-md-3">
            <div class="input-group input-group-sm">
                <input type="number" name="${prefix}[${idx}][jumlah_pohon]"
                    class="form-control" placeholder="Jumlah" min="1">
                <span class="input-group-text bg-white">pohon</span>
            </div>
        </div>
        <div class="col-2 col-md-1">
            <button type="button" class="btn btn-sm btn-outline-danger btn-hapus-baris w-100">
                <i class="bi bi-trash3"></i>
            </button>
        </div>
    </div>`;
}

// Delegasi hapus baris
['list-pohon-dibudidayakan','list-pohon-naungan','list-tunda-tebang','list-lainnya-tunda']
    .forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('click', e => {
            const btn = e.target.closest('.btn-hapus-baris');
            if (!btn) return;
            const row = btn.closest('.tanaman-row');
            if (row) row.remove();
        });
    });

// Tombol "Tambah" per section
document.querySelectorAll('.btn-tambah-baris').forEach(btn => {
    btn.addEventListener('click', () => {
        const targetId   = btn.dataset.target;
        const prefix     = btn.dataset.prefix;
        const phText     = btn.dataset.placeholder || 'Nama pohon';
        const container  = document.getElementById(targetId);
        if (!container) return;

        // Hapus placeholder italic jika ada
        container.querySelector('p.fst-italic')?.remove();

        const idx = nextIdx(targetId, prefix);
        container.insertAdjacentHTML('beforeend', buatBarisTanaman(prefix, idx, phText));
        container.querySelector('.tanaman-row:last-child input[type="text"]')?.focus();
    });
});

// ══════════════════════════════════════════════════════════════════════
// CASCADE WILAYAH
// ══════════════════════════════════════════════════════════════════════

const WILAYAH_API = {
    provinsi:  '/api/wilayah/provinsi',
    kabupaten: '/api/wilayah/kabupaten',
    kecamatan: '/api/wilayah/kecamatan',
    kelurahan: '/api/wilayah/kelurahan',
    resolve:   '/api/wilayah/resolve',
};

// Nilai tersimpan dari server (edit mode)
const savedWilayah = {
    provinsi:  @json(old('provinsi',  $d?->provinsi  ?? '')),
    kabupaten: @json(old('kabupaten', $d?->kabupaten ?? '')),
    kecamatan: @json(old('kecamatan', $d?->kecamatan ?? '')),
    kelurahan: @json(old('kelurahan', $d?->kelurahan ?? '')),
};
const savedWilayahKtp = {
    provinsi:  @json(old('provinsi_ktp',  $d?->provinsi_ktp  ?? '')),
    kabupaten: @json(old('kabupaten_ktp', $d?->kabupaten_ktp ?? '')),
    kecamatan: @json(old('kecamatan_ktp', $d?->kecamatan_ktp ?? '')),
    kelurahan: @json(old('kelurahan_ktp', $d?->kelurahan_ktp ?? '')),
};

/**
 * Isi sebuah select dari array [{kode, nama}].
 * Jika selectVal cocok dengan salah satu nama, item tersebut di-select.
 */
function fillSelect(el, items, selectVal = '', placeholder = '-- Pilih --') {
    el.innerHTML = `<option value="">${placeholder}</option>`;
    items.forEach(item => {
        const opt = document.createElement('option');
        opt.value = item.nama;
        opt.dataset.kode = item.kode;
        opt.textContent = item.nama;
        if (item.nama === selectVal) opt.selected = true;
        el.appendChild(opt);
    });
    el.disabled = items.length === 0;
}

/**
 * Buat satu set cascade wilayah.
 * @param {object} els   - { provinsi, kabupaten, kecamatan, kelurahan } elemen select
 * @param {object} saved - { provinsi, kabupaten, kecamatan, kelurahan } nama tersimpan
 */
async function initCascadeWilayah(els, saved) {
    // Muat provinsi
    const provRes = await fetch(WILAYAH_API.provinsi);
    const provData = await provRes.json();
    fillSelect(els.provinsi, provData, saved.provinsi, '-- Pilih Provinsi --');

    // Jika ada saved → chain-load kabupaten, kecamatan, kelurahan
    if (saved.provinsi) {
        const selectedOpt = [...els.provinsi.options].find(o => o.value === saved.provinsi);
        if (selectedOpt) await loadKabupaten(els, selectedOpt.dataset.kode, saved);
    }

    // Event listener cascade
    els.provinsi.addEventListener('change', async function () {
        const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
        resetBelow(els, 'provinsi');
        if (kode) await loadKabupaten(els, kode, {});
    });
    els.kabupaten.addEventListener('change', async function () {
        const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
        resetBelow(els, 'kabupaten');
        if (kode) await loadKecamatan(els, kode, {});
    });
    els.kecamatan.addEventListener('change', async function () {
        const kode = this.options[this.selectedIndex]?.dataset?.kode ?? '';
        resetBelow(els, 'kecamatan');
        if (kode) await loadKelurahan(els, kode, {});
    });
}

async function loadKabupaten(els, provinsiKode, saved) {
    const res  = await fetch(`${WILAYAH_API.kabupaten}?provinsi_kode=${provinsiKode}`);
    const data = await res.json();
    fillSelect(els.kabupaten, data, saved.kabupaten, '-- Pilih Kabupaten/Kota --');

    if (saved.kabupaten) {
        const opt = [...els.kabupaten.options].find(o => o.value === saved.kabupaten);
        if (opt) await loadKecamatan(els, opt.dataset.kode, saved);
    }
}

async function loadKecamatan(els, kabupatenKode, saved) {
    const res  = await fetch(`${WILAYAH_API.kecamatan}?kabupaten_kode=${kabupatenKode}`);
    const data = await res.json();
    fillSelect(els.kecamatan, data, saved.kecamatan, '-- Pilih Kecamatan --');

    if (saved.kecamatan) {
        const opt = [...els.kecamatan.options].find(o => o.value === saved.kecamatan);
        if (opt) await loadKelurahan(els, opt.dataset.kode, saved);
    }
}

async function loadKelurahan(els, kecamatanKode, saved) {
    const res  = await fetch(`${WILAYAH_API.kelurahan}?kecamatan_kode=${kecamatanKode}`);
    const data = await res.json();
    fillSelect(els.kelurahan, data, saved.kelurahan, '-- Pilih Kelurahan/Desa --');
}

function resetBelow(els, level) {
    const order = ['provinsi', 'kabupaten', 'kecamatan', 'kelurahan'];
    const idx   = order.indexOf(level);
    order.slice(idx + 1).forEach(key => {
        if (!els[key]) return;
        els[key].innerHTML = '<option value="">-- Pilih --</option>';
        els[key].disabled  = true;
    });
}

// Init cascade alamat saat ini
initCascadeWilayah({
    provinsi:  document.getElementById('sel-provinsi'),
    kabupaten: document.getElementById('sel-kabupaten'),
    kecamatan: document.getElementById('sel-kecamatan'),
    kelurahan: document.getElementById('sel-kelurahan'),
}, savedWilayah);

// Init cascade alamat KTP — hanya jika section KTP terlihat, tapi provinsi-nya tetap di-init
initCascadeWilayah({
    provinsi:  document.getElementById('sel-provinsi-ktp'),
    kabupaten: document.getElementById('sel-kabupaten-ktp'),
    kecamatan: document.getElementById('sel-kecamatan-ktp'),
    kelurahan: document.getElementById('sel-kelurahan-ktp'),
}, savedWilayahKtp);

// ── Update info kelompok saat pilih ronde pengajuan kelompok ──────────
document.getElementById('pengajuan_kelompok_id').addEventListener('change', function () {
    const opt = this.options[this.selectedIndex];
    const box = document.getElementById('kelompok-info-box');

    if (this.value) {
        document.getElementById('info-nama-kelompok').textContent = opt.dataset.kelompok || '';
        document.getElementById('info-lokasi').textContent = (opt.dataset.kecamatan || '') + ', ' + (opt.dataset.kabupaten || '');
        document.getElementById('info-pendamping').textContent = 'Pendamping: ' + (opt.dataset.pendamping || '');
        document.getElementById('nama-kelompok-display').value = opt.dataset.kelompok || '';
        box.style.display = '';
    } else {
        box.style.display = 'none';
        document.getElementById('nama-kelompok-display').value = '';
    }
});
</script>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .8s linear infinite; }
</style>
@endpush
@endsection