{{--
    FA Seksi 2 — Cek Lahan & Dokumen Penguasaan
    Tab pane id: section2
    POST → fa.saveSection (section=2)
    Data: $fa->section2_data (array: items, lat_aktual, lng_aktual, nama_lokasi)
--}}
@php
    $s2          = $fa->section2_data ?? [];
    $savedItems  = $s2['items'] ?? [];

    $lahanItems = [
        'dokumen_lahan' => [
            'label'   => 'Dokumen penguasaan lahan asli dapat ditunjukkan dan nomor serta nama sesuai',
            'options' => ['sesuai' => 'Sesuai', 'tidak' => 'Tidak Sesuai'],
            'catatan_label' => 'Catatan (jika tidak sesuai)',
        ],
        'perolehan_lahan' => [
            'label'   => 'Pemohon dapat menjelaskan dasar perolehan lahan (khusus jika nama di dokumen berbeda)',
            'options' => ['ya' => 'Ya / Dapat Dijelaskan', 'tidak' => 'Tidak / Tidak Dapat', 'na' => 'N/A'],
            'catatan_label' => 'Catatan',
        ],
    ];

    $latVal      = old('lat_aktual',   $s2['lat_aktual']   ?? '');
    $lngVal      = old('lng_aktual',   $s2['lng_aktual']   ?? '');
    $namaLokasi  = old('nama_lokasi',  $s2['nama_lokasi']  ?? '');
@endphp

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

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

        {{-- ══════════════════════════════════════════════════════════════ --}}
        {{-- A. Cek Lahan & Dokumen                                        --}}
        {{-- ══════════════════════════════════════════════════════════════ --}}
        <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">Cek Lahan &amp; Dokumen Penguasaan</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>Item Verifikasi</th>
                                <th style="min-width:220px;">Hasil</th>
                                <th style="min-width:220px;">Catatan
                                    <small class="text-muted fw-normal">(jika tidak sesuai)</small>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($lahanItems as $itemKey => $item)
                            @php
                                $savedItem  = $savedItems[$itemKey] ?? [];
                                $hasilVal   = old("items.{$itemKey}.hasil",  $savedItem['hasil']  ?? '');
                                $catatanVal = old("items.{$itemKey}.catatan", $savedItem['catatan'] ?? '');
                                $rowId      = 'fa_s2_' . $itemKey;
                            @endphp
                            <tr>
                                <td class="small fw-semibold" style="max-width:320px;">
                                    {{ $item['label'] }}
                                </td>
                                <td>
                                    <div class="d-flex flex-column gap-1">
                                        @foreach($item['options'] as $optVal => $optLabel)
                                            @php
                                                $optClass = match($optVal) {
                                                    'sesuai', 'ya' => 'text-success',
                                                    'tidak'        => 'text-danger',
                                                    default        => 'text-secondary',
                                                };
                                                $optIcon = match($optVal) {
                                                    'sesuai', 'ya' => 'bi-check-circle',
                                                    'tidak'        => 'bi-x-circle',
                                                    default        => 'bi-dash-circle',
                                                };
                                            @endphp
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="radio"
                                                       name="items[{{ $itemKey }}][hasil]"
                                                       value="{{ $optVal }}"
                                                       id="{{ $rowId }}_{{ $optVal }}"
                                                       @checked($hasilVal === $optVal)>
                                                <label class="form-check-label small fw-semibold {{ $optClass }}"
                                                       for="{{ $rowId }}_{{ $optVal }}">
                                                    <i class="bi {{ $optIcon }} me-1"></i>{{ $optLabel }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </td>
                                <td>
                                    <input type="text"
                                           name="items[{{ $itemKey }}][catatan]"
                                           class="form-control form-control-sm"
                                           value="{{ $catatanVal }}"
                                           placeholder="{{ $item['catatan_label'] }}...">
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ══════════════════════════════════════════════════════════════ --}}
        {{-- B. Koordinat GPS Aktual                                        --}}
        {{-- ══════════════════════════════════════════════════════════════ --}}
        <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">Koordinat Keberadaan Lahan</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">

                    <div class="col-12 col-md-4">
                        <label class="form-label fw-semibold" for="s2LatAktual">Latitude</label>
                        <input type="text"
                               name="lat_aktual"
                               id="s2LatAktual"
                               class="form-control @error('lat_aktual') is-invalid @enderror"
                               value="{{ $latVal }}"
                               placeholder="-3.1234567"
                               inputmode="decimal">
                        @error('lat_aktual')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label fw-semibold" for="s2LngAktual">Longitude</label>
                        <input type="text"
                               name="lng_aktual"
                               id="s2LngAktual"
                               class="form-control @error('lng_aktual') is-invalid @enderror"
                               value="{{ $lngVal }}"
                               placeholder="119.1234567"
                               inputmode="decimal">
                        @error('lng_aktual')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-4">
                        <label class="form-label fw-semibold" for="s2NamaLokasi">
                            Nama Lokasi
                            <small class="text-muted fw-normal">(untuk watermark foto)</small>
                        </label>
                        <input type="text"
                               name="nama_lokasi"
                               id="s2NamaLokasi"
                               class="form-control"
                               value="{{ $namaLokasi }}"
                               placeholder="Desa / Kecamatan / Kabupaten">
                    </div>

                    <div class="col-12">
                        <button type="button"
                                class="btn btn-outline-secondary btn-sm"
                                id="s2GetLocationBtn">
                            <i class="bi bi-geo-alt-fill me-1"></i>Ambil dari GPS
                        </button>
                        <span id="s2LocationStatus" class="ms-2 small text-muted"></span>
                    </div>

                </div>

                {{-- Koordinat existing reference (dari formulir PL) --}}
                @if($application->lat ?? null)
                    <div class="alert alert-light border mt-3 py-2 px-3 small mb-0">
                        <i class="bi bi-info-circle me-1 text-primary"></i>
                        <strong>Koordinat dari formulir PL:</strong>
                        {{ $application->lat }}, {{ $application->lng }}
                        — Gunakan tombol GPS untuk mengambil koordinat aktual saat kunjungan lapangan.
                    </div>
                @endif

            </div>
        </div>

        {{-- ── Footer Nav ───────────────────────────────────────────── --}}
        <div class="d-flex justify-content-between mt-4 mb-5">
            <button type="button"
                    class="btn btn-outline-secondary"
                    onclick="window.faGoToSection(1)">
                <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 #section2 --}}

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

    const latInput    = document.getElementById('s2LatAktual');
    const lngInput    = document.getElementById('s2LngAktual');
    const namaInput   = document.getElementById('s2NamaLokasi');
    const statusEl    = document.getElementById('s2LocationStatus');
    const getLocBtn   = document.getElementById('s2GetLocationBtn');

    if (!getLocBtn) return;

    getLocBtn.addEventListener('click', function () {
        if (!navigator.geolocation) {
            statusEl.textContent = 'Geolocation tidak didukung browser ini.';
            statusEl.className   = 'ms-2 small text-danger';
            return;
        }

        getLocBtn.disabled    = true;
        statusEl.textContent  = 'Mengambil koordinat GPS…';
        statusEl.className    = 'ms-2 small text-muted';

        navigator.geolocation.getCurrentPosition(
            function (pos) {
                const lat = pos.coords.latitude.toFixed(7);
                const lng = pos.coords.longitude.toFixed(7);
                const acc = Math.round(pos.coords.accuracy);

                latInput.value = lat;
                lngInput.value = lng;
                statusEl.textContent = '✅ Lokasi diambil (akurasi: ±' + acc + 'm)';
                statusEl.className   = 'ms-2 small text-success';
                getLocBtn.disabled   = false;

                // Reverse geocode via Nominatim (OpenStreetMap)
                namaInput.value = 'Memuat nama lokasi…';
                fetch(
                    'https://nominatim.openstreetmap.org/reverse?lat=' + lat +
                    '&lon=' + lng + '&format=json&accept-language=id',
                    { headers: { 'Accept-Language': 'id' } }
                )
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    // Build a concise name: village + district + city/regency
                    const addr = data.address || {};
                    const parts = [
                        addr.village || addr.hamlet || addr.suburb || '',
                        addr.city_district || addr.district || addr.county || '',
                        addr.city || addr.county || addr.state || '',
                    ].filter(Boolean);
                    namaInput.value = parts.length ? parts.join(', ') : (data.display_name || '');
                })
                .catch(function () {
                    namaInput.value = '';
                });
            },
            function (err) {
                statusEl.textContent = '❌ Gagal: ' + err.message;
                statusEl.className   = 'ms-2 small text-danger';
                getLocBtn.disabled   = false;
            },
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 0 }
        );
    });

    // ── After save, advance to section 3 ────────────────────────────
    const form2 = document.getElementById('formSection2');
    if (form2) {
        form2.addEventListener('submit', function () {
            localStorage.setItem('fa_active_tab_{{ $application->id }}', 3);
        });
    }

})();
</script>
@endpush