{{--
    FA Seksi 1 — Konfirmasi Identitas & Permohonan
    Tab pane id: section1
    POST → fa.saveSection (section=1)
    Data: $fa->section1_data (array: subseksi_a, subseksi_b, subseksi_c)
--}}
@php
    $s1 = $fa->section1_data ?? [];

    // Sub-seksi A — Kesesuaian Identitas Pemohon
    $subseksiA = $s1['subseksi_a'] ?? [];

    $identitasItems = [
        'nama'    => ['label' => 'Nama Pemohon',       'sistem' => $application->debitur?->nama        ?? '—'],
        'nik'     => ['label' => 'NIK',                'sistem' => $application->debitur?->nik         ?? '—'],
        'no_kk'   => ['label' => 'No. KK',             'sistem' => $application->debitur?->no_kk       ?? '—'],
        'ttl'     => ['label' => 'Tempat, Tgl. Lahir', 'sistem' => $application->debitur?->ttl         ?? '—'],
        'alamat'  => ['label' => 'Alamat',             'sistem' => $application->debitur?->alamat      ?? '—'],
        'hadir'   => ['label' => 'Hadir Langsung',     'sistem' => '—'],
    ];

    // Sub-seksi B — Kesesuaian dalam Daftar Kelompok
    $subseksiB = $s1['subseksi_b'] ?? [];

    $kelompokItems = [
        'nama_kelompok' => [
            'label'  => 'Nama Kelompok',
            'sistem' => $application->pengajuanKelompok?->kelompok?->nama ?? '—',
        ],
        'jenis_usaha' => [
            'label'  => 'Jenis Usaha / Sektor Ekonomi',
            'sistem' => $application->sektor_ekonomi ?? '—',
        ],
    ];

    // Sub-seksi C — Kesesuaian Nilai Pengajuan
    $subseksiC = $s1['subseksi_c'] ?? [];

    $pengajuanItems = [
        'plafond' => [
            'label'  => 'Jumlah Permohonan',
            'sistem' => 'Rp ' . number_format($application->plafond_diajukan ?? 0, 0, ',', '.'),
        ],
        'tenor' => [
            'label'  => 'Jangka Waktu',
            'sistem' => ($application->tenor_bulan ?? '—') . ' bulan',
        ],
        'tujuan' => [
            'label'  => 'Peruntukan / Tujuan',
            'sistem' => $application->tujuan ?? '—',
        ],
    ];
@endphp

<div class="tab-pane fade" id="section1" role="tabpanel" aria-labelledby="tab-section1">

    <form method="POST"
          action="{{ route('fa.saveSection', $application->id) }}"
          id="formSection1"
          novalidate>
        @csrf
        <input type="hidden" name="section" value="1">

        {{-- ══════════════════════════════════════════════════════════════ --}}
        {{-- A. Kesesuaian Identitas Pemohon                               --}}
        {{-- ══════════════════════════════════════════════════════════════ --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light d-flex align-items-center gap-2 py-2">
                <span class="badge rounded-pill" style="background:var(--bpdlh-green);">A</span>
                <h6 class="mb-0 fw-semibold">Kesesuaian Identitas Pemohon</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width:160px;">Item</th>
                                <th style="min-width:180px;">Nilai di Sistem</th>
                                <th style="min-width:180px;">Hasil Verifikasi</th>
                                <th style="min-width:200px;">Nilai Aktual
                                    <small class="text-muted fw-normal">(jika tidak sesuai)</small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($identitasItems as $key => $item)
                            @php
                                $savedA   = $subseksiA[$key] ?? [];
                                $hasilVal = old("subseksi_a.{$key}.hasil", $savedA['hasil'] ?? '');
                                $aktualVal= old("subseksi_a.{$key}.nilai_aktual", $savedA['nilai_aktual'] ?? '');
                                $rowId    = 'fa_s1a_' . $key;
                            @endphp
                            <tr>
                                <td class="fw-semibold small">{{ $item['label'] }}</td>
                                <td class="small text-muted">{{ $item['sistem'] }}</td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_a[{{ $key }}][hasil]"
                                                   value="sesuai"
                                                   id="{{ $rowId }}_sesuai"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'sesuai')>
                                            <label class="form-check-label text-success fw-semibold small"
                                                   for="{{ $rowId }}_sesuai">
                                                <i class="bi bi-check-circle me-1"></i>Sesuai
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_a[{{ $key }}][hasil]"
                                                   value="tidak"
                                                   id="{{ $rowId }}_tidak"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'tidak')>
                                            <label class="form-check-label text-danger fw-semibold small"
                                                   for="{{ $rowId }}_tidak">
                                                <i class="bi bi-x-circle me-1"></i>Tidak Sesuai
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div id="{{ $rowId }}_aktual"
                                         style="{{ $hasilVal === 'tidak' ? '' : 'display:none;' }}">
                                        <input type="text"
                                               name="subseksi_a[{{ $key }}][nilai_aktual]"
                                               class="form-control form-control-sm"
                                               value="{{ $aktualVal }}"
                                               placeholder="Nilai aktual di lapangan...">
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════════════════ --}}
        {{-- B. Kesesuaian dalam Daftar Kelompok                           --}}
        {{-- ══════════════════════════════════════════════════════════════ --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light d-flex align-items-center gap-2 py-2">
                <span class="badge rounded-pill" style="background:var(--bpdlh-green);">B</span>
                <h6 class="mb-0 fw-semibold">Kesesuaian Pemohon dalam Daftar Kelompok</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width:160px;">Item</th>
                                <th style="min-width:200px;">Nilai di Sistem</th>
                                <th style="min-width:180px;">Hasil Verifikasi</th>
                                <th style="min-width:200px;">Nilai Aktual
                                    <small class="text-muted fw-normal">(jika tidak sesuai)</small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($kelompokItems as $key => $item)
                            @php
                                $savedB   = $subseksiB[$key] ?? [];
                                $hasilVal = old("subseksi_b.{$key}.hasil", $savedB['hasil'] ?? '');
                                $aktualVal= old("subseksi_b.{$key}.nilai_aktual", $savedB['nilai_aktual'] ?? '');
                                $rowId    = 'fa_s1b_' . $key;
                            @endphp
                            <tr>
                                <td class="fw-semibold small">{{ $item['label'] }}</td>
                                <td class="small text-muted">{{ $item['sistem'] }}</td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_b[{{ $key }}][hasil]"
                                                   value="sesuai"
                                                   id="{{ $rowId }}_sesuai"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'sesuai')>
                                            <label class="form-check-label text-success fw-semibold small"
                                                   for="{{ $rowId }}_sesuai">
                                                <i class="bi bi-check-circle me-1"></i>Sesuai
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_b[{{ $key }}][hasil]"
                                                   value="tidak"
                                                   id="{{ $rowId }}_tidak"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'tidak')>
                                            <label class="form-check-label text-danger fw-semibold small"
                                                   for="{{ $rowId }}_tidak">
                                                <i class="bi bi-x-circle me-1"></i>Tidak Sesuai
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div id="{{ $rowId }}_aktual"
                                         style="{{ $hasilVal === 'tidak' ? '' : 'display:none;' }}">
                                        <input type="text"
                                               name="subseksi_b[{{ $key }}][nilai_aktual]"
                                               class="form-control form-control-sm"
                                               value="{{ $aktualVal }}"
                                               placeholder="Nilai aktual di lapangan...">
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════════════════ --}}
        {{-- C. Kesesuaian Nilai Pengajuan                                  --}}
        {{-- ══════════════════════════════════════════════════════════════ --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light d-flex align-items-center gap-2 py-2">
                <span class="badge rounded-pill" style="background:var(--bpdlh-green);">C</span>
                <h6 class="mb-0 fw-semibold">Kesesuaian Nilai Pengajuan</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width:160px;">Item</th>
                                <th style="min-width:200px;">Nilai di Sistem</th>
                                <th style="min-width:180px;">Hasil Verifikasi</th>
                                <th style="min-width:200px;">Nilai Aktual
                                    <small class="text-muted fw-normal">(jika tidak sesuai)</small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($pengajuanItems as $key => $item)
                            @php
                                $savedC   = $subseksiC[$key] ?? [];
                                $hasilVal = old("subseksi_c.{$key}.hasil", $savedC['hasil'] ?? '');
                                $aktualVal= old("subseksi_c.{$key}.nilai_aktual", $savedC['nilai_aktual'] ?? '');
                                $rowId    = 'fa_s1c_' . $key;
                            @endphp
                            <tr>
                                <td class="fw-semibold small">{{ $item['label'] }}</td>
                                <td class="small text-muted">{{ $item['sistem'] }}</td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_c[{{ $key }}][hasil]"
                                                   value="sesuai"
                                                   id="{{ $rowId }}_sesuai"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'sesuai')>
                                            <label class="form-check-label text-success fw-semibold small"
                                                   for="{{ $rowId }}_sesuai">
                                                <i class="bi bi-check-circle me-1"></i>Sesuai
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input hasil-radio"
                                                   type="radio"
                                                   name="subseksi_c[{{ $key }}][hasil]"
                                                   value="tidak"
                                                   id="{{ $rowId }}_tidak"
                                                   data-target="{{ $rowId }}_aktual"
                                                   data-show-when="tidak"
                                                   @checked($hasilVal === 'tidak')>
                                            <label class="form-check-label text-danger fw-semibold small"
                                                   for="{{ $rowId }}_tidak">
                                                <i class="bi bi-x-circle me-1"></i>Tidak Sesuai
                                            </label>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div id="{{ $rowId }}_aktual"
                                         style="{{ $hasilVal === 'tidak' ? '' : 'display:none;' }}">
                                        <input type="text"
                                               name="subseksi_c[{{ $key }}][nilai_aktual]"
                                               class="form-control form-control-sm"
                                               value="{{ $aktualVal }}"
                                               placeholder="Nilai aktual di lapangan...">
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ── Footer Nav ───────────────────────────────────────────── --}}
        <div class="d-flex justify-content-between mt-4 mb-5">
            <button type="button"
                    class="btn btn-outline-secondary"
                    disabled>
                <i class="bi bi-arrow-left me-1"></i>Sebelumnya
            </button>
            <button type="submit"
                    class="btn btn-primary fw-semibold"
                    style="background:var(--bpdlh-green);border-color:var(--bpdlh-green);">
                Simpan &amp; Lanjut <i class="bi bi-arrow-right ms-1"></i>
            </button>
        </div>

    </form>
</div>{{-- end #section1 --}}

@push('scripts')
<script>
(function () {
    'use strict';

    // ── Toggle "nilai_aktual" visibility when radio changes ──────────
    document.querySelectorAll('.hasil-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
            const targetId  = this.dataset.target;
            const showWhen  = this.dataset.showWhen;  // 'tidak'
            const container = document.getElementById(targetId);
            if (!container) return;

            const shouldShow = (this.value === showWhen);
            container.style.display = shouldShow ? '' : 'none';

            // Clear nilai aktual when hiding
            if (!shouldShow) {
                container.querySelectorAll('input, textarea').forEach(function (inp) {
                    inp.value = '';
                });
            }
        });
    });

    // ── After save, advance to section 2 ────────────────────────────
    const form1 = document.getElementById('formSection1');
    if (form1) {
        form1.addEventListener('submit', function () {
            // Store next tab in localStorage so page reload opens section 2
            localStorage.setItem('fa_active_tab_{{ $application->id }}', 2);
        });
    }
})();
</script>
@endpush