{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- SEKSI 6 — Foto & Submit                                        --}}
{{-- Tab pane: #section6                                            --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
<div class="tab-pane fade" id="section6" role="tabpanel">

    <form method="POST" action="{{ route('fa.saveSection', $application->id) }}"
          enctype="multipart/form-data" id="section6Form">
        @csrf
        <input type="hidden" name="section" value="6">

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- Upload 4 Foto dengan GPS + Watermark                   --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $fotoConfig = [
                'foto_identitas'     => [
                    'label' => 'Pemohon memegang identitas asli',
                    'wajib' => true,
                    'hint'  => 'Foto pemohon sambil memegang KTP/identitas asli yang terlihat jelas.',
                ],
                'foto_dokumen_lahan' => [
                    'label' => 'Dokumen penguasaan lahan',
                    'wajib' => true,
                    'hint'  => 'Foto dokumen sertifikat / surat penguasaan lahan asli.',
                ],
                'foto_lokasi_usaha'  => [
                    'label' => 'Lokasi usaha',
                    'wajib' => true,
                    'hint'  => 'Foto lokasi kebun/usaha. GPS dan timestamp akan ditambahkan otomatis.',
                ],
                'foto_lokasi_rumah'  => [
                    'label' => 'Lokasi rumah',
                    'wajib' => false,
                    'hint'  => 'Foto tampak depan rumah pemohon (opsional).',
                ],
            ];
            $fotos = $fa->section6_data['fotos'] ?? [];
        @endphp

        @foreach($fotoConfig as $field => $cfg)
            @php $sudahAda = !empty($fotos[$field]); @endphp
            <div class="card border-0 shadow-sm mb-3" id="card_{{ $field }}">
                <div class="card-header bg-light d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <h6 class="mb-0 fw-semibold d-flex align-items-center gap-2">
                        @if($cfg['wajib'])
                            <span class="badge bg-danger">Wajib</span>
                        @else
                            <span class="badge bg-secondary">Opsional</span>
                        @endif
                        {{ $cfg['label'] }}
                    </h6>
                    @if($sudahAda)
                        <span class="badge bg-success">
                            <i class="bi bi-check-circle me-1"></i>Sudah diupload
                        </span>
                    @else
                        <span class="badge bg-warning text-dark">
                            <i class="bi bi-camera me-1"></i>Belum ada foto
                        </span>
                    @endif
                </div>
                <div class="card-body">
                    {{-- Preview foto yang sudah tersimpan --}}
                    @if(!empty($fotos[$field]['url']))
                        <div class="mb-3">
                            <img src="{{ $fotos[$field]['url'] }}"
                                 alt="{{ $cfg['label'] }}"
                                 class="img-thumbnail"
                                 style="max-height:160px;max-width:100%;object-fit:cover;">
                            <div class="small text-muted mt-1 d-flex flex-wrap gap-2">
                                @if(!empty($fotos[$field]['timestamp']))
                                    <span><i class="bi bi-clock me-1"></i>{{ $fotos[$field]['timestamp'] }}</span>
                                @endif
                                @if(!empty($fotos[$field]['gps_lat']))
                                    <span>
                                        <i class="bi bi-geo-alt me-1"></i>
                                        {{ $fotos[$field]['gps_lat'] }}, {{ $fotos[$field]['gps_lng'] }}
                                    </span>
                                @endif
                                @if(!empty($fotos[$field]['nama_lokasi']))
                                    <span><i class="bi bi-pin-map me-1"></i>{{ $fotos[$field]['nama_lokasi'] }}</span>
                                @endif
                            </div>
                        </div>
                    @endif

                    {{-- Hint --}}
                    <div class="form-text mb-2">
                        <i class="bi bi-info-circle me-1"></i>{{ $cfg['hint'] }}
                    </div>

                    {{-- GPS status per foto --}}
                    <div id="gps_status_{{ $field }}" class="small text-muted mb-2"></div>

                    {{-- File input --}}
                    <input type="file"
                           name="{{ $field }}"
                           id="input_{{ $field }}"
                           class="form-control foto-input"
                           accept="image/*"
                           capture="environment"
                           data-field="{{ $field }}">

                    {{-- Hidden: GPS + timestamp + nama_lokasi --}}
                    <input type="hidden" name="{{ $field }}_lat"          id="{{ $field }}_lat">
                    <input type="hidden" name="{{ $field }}_lng"          id="{{ $field }}_lng">
                    <input type="hidden" name="{{ $field }}_nama_lokasi"  id="{{ $field }}_nama_lokasi">
                    <input type="hidden" name="{{ $field }}_timestamp"    id="{{ $field }}_timestamp">

                    {{-- Canvas preview dengan watermark --}}
                    <canvas id="canvas_{{ $field }}"
                            style="display:none;max-width:100%;margin-top:.75rem;border-radius:.375rem;border:1px solid #dee2e6;"
                            class="img-fluid"></canvas>
                </div>
            </div>
        @endforeach

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- Catatan Lapangan Keseluruhan                            --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        <div class="card border-0 shadow-sm mb-3">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-journal-text me-2" style="color:var(--bpdlh-green);"></i>
                    Catatan Lapangan Keseluruhan
                </h6>
            </div>
            <div class="card-body">
                <textarea name="catatan_kunjungan"
                          class="form-control"
                          rows="4"
                          placeholder="Ringkasan temuan lapangan, hal-hal yang perlu diperhatikan...">{{ $fa->catatan_kunjungan ?? '' }}</textarea>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- Ringkasan Kunjungan                                     --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
            $statuses = method_exists($fa, 'sectionStatuses') ? $fa->sectionStatuses() : [];
        @endphp
        <div class="card border-0 shadow-sm mb-3" style="border-left:4px solid #1a6b3c !important;">
            <div class="card-header bg-light">
                <h6 class="mb-0 fw-semibold">
                    <i class="bi bi-clipboard2-check me-2" style="color:var(--bpdlh-green);"></i>
                    Ringkasan Kunjungan
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-2">

                    @php
                        $ringkasanSeksi = [
                            1 => [
                                'label'      => 'Identitas',
                                'done_label' => isset($fa->koreksi_identitas_count) && $fa->koreksi_identitas_count > 0
                                    ? $fa->koreksi_identitas_count . ' item berbeda'
                                    : 'Semua sesuai',
                                'icon'       => 'person-badge',
                            ],
                            2 => [
                                'label'      => 'Lahan & Dokumen',
                                'done_label' => 'Terverifikasi',
                                'icon'       => 'file-earmark-check',
                            ],
                            3 => [
                                'label'      => 'Polygon Lahan',
                                'done_label' => isset($fa->section3_data['luas_estimasi_ha'])
                                    ? number_format($fa->section3_data['luas_estimasi_ha'], 2) . ' Ha'
                                    : 'Dipetakan',
                                'icon'       => 'map',
                            ],
                            4 => [
                                'label'      => 'Biaya & Pendapatan',
                                'done_label' => isset($fa->koreksi_biaya_count)
                                    ? $fa->koreksi_biaya_count . ' item dikoreksi'
                                    : 'Terverifikasi',
                                'icon'       => 'cash-stack',
                            ],
                            5 => [
                                'label'      => 'Tallysheet',
                                'done_label' => 'Terverifikasi',
                                'icon'       => 'table',
                            ],
                        ];
                    @endphp

                    @foreach($ringkasanSeksi as $num => $item)
                        @php $isDone = ($statuses[$num] ?? null) === 'done'; @endphp
                        <div class="col-12">
                            <div class="d-flex align-items-center gap-2">
                                @if($isDone)
                                    <i class="bi bi-check-circle-fill text-success fs-5"></i>
                                @else
                                    <i class="bi bi-exclamation-circle-fill text-warning fs-5"></i>
                                @endif
                                <div>
                                    <strong>Seksi {{ $num }} — {{ $item['label'] }}:</strong>
                                    <span class="{{ $isDone ? 'text-success' : 'text-warning' }}">
                                        {{ $isDone ? $item['done_label'] : 'Belum selesai' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    @if($fa->rpc_aktual)
                        <div class="col-12 mt-2 pt-2 border-top">
                            <div class="d-flex flex-wrap gap-3">
                                <div>
                                    <span class="text-muted small">RPC (setelah koreksi):</span>
                                    <strong class="ms-1">Rp {{ number_format($fa->rpc_aktual, 0, ',', '.') }}/tahun</strong>
                                </div>
                                @if($fa->maks_plafond_aktual)
                                <div>
                                    <span class="text-muted small">Maks. Plafond:</span>
                                    <strong class="ms-1">Rp {{ number_format($fa->maks_plafond_aktual, 0, ',', '.') }}</strong>
                                </div>
                                @endif
                            </div>
                        </div>
                    @endif

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

        {{-- Footer Nav --}}
        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-outline-secondary"
                    onclick="document.querySelector('#faTabs button[data-bs-target=\'#section5\']').click()">
                <i class="bi bi-arrow-left me-1"></i>Sebelumnya
            </button>
            <button type="submit" class="btn btn-success" id="btnSimpanSection6">
                <i class="bi bi-save me-1"></i>Simpan Draft Seksi 6
            </button>
        </div>

    </form>
</div>

@push('scripts')
<script>
(function () {
    // ── Format tanggal watermark: "26/05/2026 14:32" ──
    function formatTimestamp(date) {
        const d  = String(date.getDate()).padStart(2, '0');
        const mo = String(date.getMonth() + 1).padStart(2, '0');
        const y  = date.getFullYear();
        const h  = String(date.getHours()).padStart(2, '0');
        const mi = String(date.getMinutes()).padStart(2, '0');
        return `${d}/${mo}/${y} ${h}:${mi}`;
    }

    // ── Reverse geocode via Nominatim (rate-limit: 1 req/s) ──
    function reverseGeocode(lat, lng, callback) {
        const url = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&zoom=16`;
        fetch(url, { headers: { 'Accept-Language': 'id' } })
            .then(r => r.json())
            .then(data => {
                const addr = data.address || {};
                const nama = [
                    addr.village || addr.suburb || addr.neighbourhood || '',
                    addr.city    || addr.town   || addr.county        || '',
                ].filter(Boolean).join(', ') || data.display_name?.split(',').slice(0, 2).join(',').trim() || '';
                callback(nama);
            })
            .catch(() => callback(''));
    }

    // ── Watermark canvas ──
    function applyWatermark(canvas, img, timestamp, lat, lng, namaLokasi) {
        canvas.width  = img.naturalWidth  || img.width;
        canvas.height = img.naturalHeight || img.height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

        // Watermark text
        const lines = [];
        if (timestamp) lines.push(timestamp);
        if (lat && lng) lines.push(`${parseFloat(lat).toFixed(6)}, ${parseFloat(lng).toFixed(6)}`);
        if (namaLokasi) lines.push(namaLokasi);

        if (lines.length === 0) return;

        const fontSize  = Math.max(14, Math.round(canvas.width * 0.025));
        const lineH     = Math.round(fontSize * 1.4);
        const padding   = Math.round(fontSize * 0.6);
        const boxH      = lines.length * lineH + padding * 2;
        const boxW      = canvas.width;
        const boxY      = canvas.height - boxH;

        // Semi-transparent background
        ctx.fillStyle = 'rgba(0, 0, 0, 0.55)';
        ctx.fillRect(0, boxY, boxW, boxH);

        // Text
        ctx.fillStyle   = '#ffffff';
        ctx.font        = `bold ${fontSize}px Arial, sans-serif`;
        ctx.textBaseline = 'top';

        lines.forEach(function (line, i) {
            ctx.fillText(line, padding, boxY + padding + i * lineH);
        });
    }

    // ── Replace file input value dengan canvas blob ──
    function replaceInputWithBlob(canvas, input) {
        canvas.toBlob(function (blob) {
            if (!blob) return;
            const field    = input.dataset.field || input.id.replace('input_', '');
            const fileName = (field || 'foto') + '_wm_' + Date.now() + '.jpg';
            const file     = new File([blob], fileName, { type: 'image/jpeg' });
            const dt       = new DataTransfer();
            dt.items.add(file);
            input.files = dt.files;
        }, 'image/jpeg', 0.90);
    }

    // ── Handler utama per foto input ──
    function handleFotoInput(input) {
        const field   = input.dataset.field;
        const canvas  = document.getElementById('canvas_' + field);
        const latEl   = document.getElementById(field + '_lat');
        const lngEl   = document.getElementById(field + '_lng');
        const namaEl  = document.getElementById(field + '_nama_lokasi');
        const tsEl    = document.getElementById(field + '_timestamp');
        const statusEl = document.getElementById('gps_status_' + field);

        if (!input.files || !input.files[0]) return;

        const file      = input.files[0];
        const timestamp = formatTimestamp(new Date());
        if (tsEl) tsEl.value = timestamp;
        if (statusEl) statusEl.innerHTML = '<span class="text-info"><i class="bi bi-hourglass-split me-1"></i>Mengambil GPS...</span>';

        // ── Baca gambar ──
        const reader = new FileReader();
        reader.onload = function (e) {
            const img    = new Image();
            img.onload   = function () {
                // Tampilkan canvas dulu tanpa watermark
                canvas.style.display = 'block';

                // Ambil GPS
                if (!navigator.geolocation) {
                    applyWatermark(canvas, img, timestamp, null, null, null);
                    replaceInputWithBlob(canvas, input);
                    if (statusEl) statusEl.innerHTML = '<span class="text-warning"><i class="bi bi-exclamation-triangle me-1"></i>Geolocation tidak didukung browser ini.</span>';
                    return;
                }

                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);

                        if (latEl) latEl.value = lat;
                        if (lngEl) lngEl.value = lng;
                        if (statusEl) statusEl.innerHTML =
                            `<span class="text-success"><i class="bi bi-geo-alt-fill me-1"></i>GPS: ${lat}, ${lng} (±${acc}m) — Reverse geocode...</span>`;

                        // Reverse geocode
                        reverseGeocode(lat, lng, function (namaLokasi) {
                            if (namaEl) namaEl.value = namaLokasi;
                            if (statusEl) statusEl.innerHTML =
                                `<span class="text-success"><i class="bi bi-geo-alt-fill me-1"></i>GPS: ${lat}, ${lng} (±${acc}m)` +
                                (namaLokasi ? ` | ${namaLokasi}` : '') + '</span>';

                            applyWatermark(canvas, img, timestamp, lat, lng, namaLokasi);
                            replaceInputWithBlob(canvas, input);
                        });
                    },
                    function (err) {
                        if (statusEl) statusEl.innerHTML =
                            `<span class="text-warning"><i class="bi bi-exclamation-triangle me-1"></i>GPS gagal: ${err.message} — foto disimpan tanpa koordinat.</span>`;
                        applyWatermark(canvas, img, timestamp, null, null, null);
                        replaceInputWithBlob(canvas, input);
                    },
                    { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
                );
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    // ── Init ──
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.foto-input').forEach(function (input) {
            input.addEventListener('change', function () {
                handleFotoInput(this);
            });
        });
    });
})();
</script>
@endpush