{{-- ═══════════════════════════════════════════════════════════════ --}}
{{-- SEKSI 3 — Mapping Polygon Lahan                               --}}
{{-- Tab pane: #section3                                            --}}
{{-- ═══════════════════════════════════════════════════════════════ --}}
<div class="tab-pane fade" id="section3" role="tabpanel">

    <form method="POST" action="{{ route('fa.saveSection', $application->id) }}" id="section3Form">
        @csrf
        <input type="hidden" name="section" value="3">
        <input type="hidden" name="polygon_geojson" id="polygonGeoJSON"
               value="{{ !empty($fa->section3_data['polygon_geojson']) ? json_encode($fa->section3_data['polygon_geojson']) : '' }}">
        <input type="hidden" name="luas_estimasi_ha" id="luasEstimasi"
               value="{{ $fa->section3_data['luas_estimasi_ha'] ?? '' }}">

        {{-- Map Card --}}
        <div class="card border-0 bg-light rounded-3 mb-4">
            <div class="card-body p-3 p-md-4">
                <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
                    <h6 class="fw-bold mb-0" style="color:var(--bpdlh-green);">
                        <i class="bi bi-geo-alt-fill me-2"></i>Mapping Polygon Lahan
                    </h6>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" id="btn-locate-me"
                            class="btn btn-sm btn-outline-primary"
                            title="Tandai posisi GPS Anda saat ini sebagai titik di peta. Pindah ke sudut lahan berikutnya, lalu klik lagi.">
                            <i class="bi bi-crosshair me-1"></i>
                            <span id="locate-label">Tandai Lokasi Saya</span>
                        </button>
                        <span class="badge bg-secondary fw-normal" id="luasLabel" style="font-size:.85rem;">
                            Luas: {{ isset($fa->section3_data['luas_estimasi_ha']) ? number_format($fa->section3_data['luas_estimasi_ha'], 2) . ' Ha' : '—' }}
                        </span>
                        @if(!empty($fa->section3_data['luas_estimasi_ha']))
                        <button type="button" class="btn btn-sm btn-outline-danger" id="btnGambarUlang" title="Hapus polygon saat ini dan gambar ulang">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Gambar Ulang
                        </button>
                        @endif
                    </div>
                </div>

                {{-- Instructional Text --}}
                <p class="text-muted small mb-3">
                    <strong>Cara menandai batas lahan dengan GPS:</strong>
                    berdiri di sudut pertama &rarr; klik <em>Tandai Lokasi Saya</em> &rarr; pindah ke sudut berikutnya &rarr; klik lagi.
                    Setelah &ge; 3 titik, klik <strong>Buat Polygon</strong> untuk menghubungkan titik-titik menjadi batas lahan.
                    Atau gambar polygon/marker langsung di peta.
                </p>

                {{-- Status GPS --}}
                <div id="gps-status" class="d-none alert alert-info py-2 mb-2 small">
                    <i class="bi bi-broadcast me-1"></i>
                    <span id="gps-status-text">Mendapatkan lokasi GPS&hellip;</span>
                </div>

                {{-- Tombol Buat Polygon (muncul saat &ge; 3 titik GPS ditandai) --}}
                <div id="polygon-actions" class="d-none mb-2 d-flex gap-2 flex-wrap">
                    <button type="button" id="btn-build-polygon" class="btn btn-sm btn-success">
                        <i class="bi bi-pentagon me-1"></i>Buat Polygon dari Titik-titik GPS
                        <span class="badge bg-white text-success ms-1" id="titik-count">0</span>
                    </button>
                    <button type="button" id="btn-clear-gps" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-x-circle me-1"></i>Hapus Semua Titik GPS
                    </button>
                </div>

                {{-- Leaflet Map --}}
                <div id="faMap" style="height:380px;border-radius:8px;border:1px solid #dee2e6;width:100%;"></div>

                {{-- Legend & Footer --}}
                <div class="d-flex align-items-center justify-content-between mt-3 flex-wrap gap-2">
                    <div class="form-text">
                        <div class="d-flex gap-3">
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:24px;height:4px;background:#1a6b3c;border-radius:2px;"></div>
                                <span class="small text-muted">Data tersimpan (biru)</span>
                            </div>
                            @if($application->tanamanUtama->first()?->polygon_geojson)
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:24px;height:4px;background:#6c757d;border-radius:2px;border-style:dashed;"></div>
                                <span class="small text-muted">Data kantor (abu-abu)</span>
                            </div>
                            @endif
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:14px;height:14px;border-radius:50%;background:#e74c3c;border:2px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.3);"></div>
                                <span class="small text-muted">Titik GPS</span>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btnClearMap">
                        <i class="bi bi-trash me-1"></i>Hapus Semua dari Peta
                    </button>
                </div>
            </div>
        </div>


        {{-- Status Message --}}
        @if(!empty($fa->section3_data['luas_estimasi_ha']))
        <div class="alert alert-success d-flex align-items-start gap-3 mb-4 py-2">
            <i class="bi bi-check-circle-fill fs-5 mt-1 flex-shrink-0"></i>
            <div class="small">
                <strong>Polygon sudah dikonfirmasi.</strong>
                Luas estimasi: <strong>{{ number_format($fa->section3_data['luas_estimasi_ha'], 4) }} Ha</strong>
                @if(!empty($fa->section3_data['saved_at']))
                    — Disimpan: {{ \Carbon\Carbon::parse($fa->section3_data['saved_at'])->format('d M Y H:i') }}
                @endif
            </div>
        </div>
        @else
        <div class="alert alert-warning d-flex align-items-start gap-3 mb-4 py-2">
            <i class="bi bi-exclamation-triangle-fill fs-5 mt-1 flex-shrink-0"></i>
            <div class="small">Gambar polygon lahan di peta dengan minimal 3 titik, lalu klik <strong>Konfirmasi Polygon & Simpan</strong>.</div>
        </div>
        @endif

        {{-- Footer Nav --}}
        <div class="d-flex justify-content-between mt-4 flex-wrap gap-3">
            <button type="button" class="btn btn-outline-secondary"
                    onclick="document.querySelector('#faTabs button[data-bs-target=\'#section2\']').click()">
                <i class="bi bi-arrow-left me-1"></i>Sebelumnya
            </button>
            <div class="d-flex gap-2 flex-wrap">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnBatal" style="display:none;" title="Batal menggambar polygon">
                    <i class="bi bi-x-circle me-1"></i>Batal
                </button>
                <button type="submit" class="btn btn-success" id="btnFooterSubmit" disabled>
                    <i class="bi bi-check2-circle me-1"></i>Konfirmasi Polygon & Simpan
                </button>
            </div>
        </div>

    </form>
</div>

@push('scripts')
{{-- Leaflet CSS --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
{{-- Leaflet.draw CSS --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />

<script>
(function () {
    // ── Koordinat awal: ambil dari section2_data GPS atau default Indonesia ──
    @php
        $s2     = $fa->section2_data ?? [];
        $defLat = $s2['gps_lat'] ?? $s2['lat'] ?? -2.5;
        $defLng = $s2['gps_lng'] ?? $s2['lng'] ?? 118.0;
    @endphp
    const DEFAULT_LAT = {{ (float) $defLat }};
    const DEFAULT_LNG = {{ (float) $defLng }};

    // ── Data tersimpan (biru) ──
    const savedGeoJSON = @json($fa->section3_data['polygon_geojson'] ?? null);

    // ── Data referensi kantor (abu-abu) ──
    const officeGeoJSON = @json($application->tanamanUtama->first()?->polygon_geojson ?? null);

    // ── Inisialisasi Leaflet setelah DOM siap ──
    document.addEventListener('DOMContentLoaded', function () {
        const map = L.map('faMap').setView([DEFAULT_LAT, DEFAULT_LNG], 13);

        // Base tile
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // ── Layer grup ──
        const drawnItems   = new L.FeatureGroup();
        const savedLayer   = new L.FeatureGroup();
        const officeLayer  = new L.FeatureGroup();
        // ── GPS Layer ──
        const gpsLayer   = new L.FeatureGroup();
        const gpsIcon = L.divIcon({
            className: '',
            html: `<div style="
                width:14px; height:14px; border-radius:50%;
                background:#e74c3c; border:2px solid #fff;
                box-shadow:0 0 4px rgba(0,0,0,.4);">
            </div>`,
            iconSize: [14, 14],
            iconAnchor: [7, 7],
        });
        let gpsPoints = [];
        map.addLayer(drawnItems);
        map.addLayer(savedLayer);
        map.addLayer(officeLayer);
        map.addLayer(gpsLayer);

        // ── Tampilkan data tersimpan (biru) ──
        if (savedGeoJSON) {
            try {
                const parsed = typeof savedGeoJSON === 'string' ? JSON.parse(savedGeoJSON) : savedGeoJSON;
                L.geoJSON(parsed, {
                    style: { color: '#1a6b3c', fillColor: '#1a6b3c', fillOpacity: 0.2, weight: 2 }
                }).addTo(savedLayer).bindPopup('Data tersimpan');
                map.fitBounds(savedLayer.getBounds());
            } catch (e) {
                console.warn('Failed to parse saved GeoJSON', e);
            }
        }

        // ── Tampilkan data referensi kantor (abu-abu) ──
        if (officeGeoJSON) {
            try {
                const parsed = typeof officeGeoJSON === 'string' ? JSON.parse(officeGeoJSON) : officeGeoJSON;
                L.geoJSON(parsed, {
                    style: { color: '#6c757d', fillColor: '#6c757d', fillOpacity: 0.15, weight: 2, dashArray: '6 4' }
                }).addTo(officeLayer).bindPopup('Data kantor (referensi)');
                if (!savedGeoJSON) map.fitBounds(officeLayer.getBounds());
            } catch (e) {
                console.warn('Failed to parse office GeoJSON', e);
            }
        }

        // ── Leaflet.draw control ──
        const drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems,
                remove: true
            },
            draw: {
                polygon:   { shapeOptions: { color: '#0d6efd', fillColor: '#0d6efd', fillOpacity: 0.2, weight: 2 } },
                polyline:  false,
                rectangle: false,
                circle:    false,
                marker:    false,
                circlemarker: false
            }
        });
        map.addControl(drawControl);

        // ── Tampilkan/sembunyikan tombol Batal saat edit ──
        const btnBatal = document.getElementById('btnBatal');
        map.on('draw:drawstart', function () {
            btnBatal.style.display = 'inline-block';
        });
        map.on('draw:editstart', function () {
            btnBatal.style.display = 'inline-block';
        });
        map.on('draw:deletestart', function () {
            btnBatal.style.display = 'inline-block';
        });
        map.on('draw:drawstop draw:editstop draw:deletestop', function () {
            if (!document.getElementById('polygonGeoJSON').value) {
                btnBatal.style.display = 'none';
            }
        });

        btnBatal.addEventListener('click', function () {
            clearPolygon();
            btnBatal.style.display = 'none';
        });

        // ── Hitung luas dari layer ──
        function calcLuas(layer) {
            if (typeof L.GeometryUtil !== 'undefined' && layer.getLatLngs) {
                return L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]) / 10000; // m² → Ha
            }
            // Fallback: Shoelace formula
            const latlngs = layer.getLatLngs()[0];
            let area = 0;
            const R = 6371000;
            const n = latlngs.length;
            for (let i = 0; i < n; i++) {
                const j = (i + 1) % n;
                const xi = latlngs[i].lng * Math.PI / 180 * R * Math.cos(latlngs[i].lat * Math.PI / 180);
                const yi = latlngs[i].lat * Math.PI / 180 * R;
                const xj = latlngs[j].lng * Math.PI / 180 * R * Math.cos(latlngs[j].lat * Math.PI / 180);
                const yj = latlngs[j].lat * Math.PI / 180 * R;
                area += (xi * yj - xj * yi);
            }
            return Math.abs(area / 2) / 10000;
        }

        // ── Validasi polygon: minimal 3 titik dan area realistis ──
        function isValidPolygon(layer) {
            const latlngs = layer.getLatLngs()[0];
            if (!latlngs || latlngs.length < 3) {
                return { valid: false, message: 'Polygon harus memiliki minimal 3 titik.' };
            }
            const luas = calcLuas(layer);
            if (luas < 0.01) {
                return { valid: false, message: 'Polygon terlalu kecil (< 0,01 Ha). Periksa kembali koordinat.' };
            }
            if (luas > 1000) {
                return { valid: false, message: 'Polygon terlalu besar (> 1000 Ha). Periksa kembali koordinat.' };
            }
            return { valid: true };
        }

        function updateFromLayer(layer) {
            const validation = isValidPolygon(layer);
            if (!validation.valid) {
                drawnItems.clearLayers();
                alert(validation.message);
                return;
            }
            const luas = calcLuas(layer);
            const luasHa = luas.toFixed(4);
            document.getElementById('luasLabel').textContent   = 'Luas: ' + luasHa + ' Ha';
            document.getElementById('luasEstimasi').value      = luasHa;
            document.getElementById('polygonGeoJSON').value    = JSON.stringify(layer.toGeoJSON());
            const submitBtn = document.getElementById('btnFooterSubmit');
            if (submitBtn) submitBtn.disabled = false;
        }

        function clearPolygon() {
            drawnItems.clearLayers();
            document.getElementById('luasLabel').textContent  = 'Luas: —';
            document.getElementById('luasEstimasi').value     = '';
            document.getElementById('polygonGeoJSON').value   = '';
            const submitBtn = document.getElementById('btnFooterSubmit');
            if (submitBtn) submitBtn.disabled = true;
        }

        function clearGps() {
            gpsLayer.clearLayers();
            gpsPoints = [];
            updateGpsUI();
            const label = document.getElementById('locate-label');
            if (label) label.textContent = 'Tandai Lokasi Saya';
            hideGpsStatus();
        }

        // ── Helper GPS: status ──
        function showGpsStatus(msg, type) {
            const el = document.getElementById('gps-status');
            const txt = document.getElementById('gps-status-text');
            if (!el || !txt) return;
            el.className = `alert alert-${type || 'info'} py-2 mb-2 small`;
            txt.textContent = msg;
            el.classList.remove('d-none');
        }
        function hideGpsStatus() {
            const el = document.getElementById('gps-status');
            if (el) el.classList.add('d-none');
        }
        function updateGpsUI() {
            const n = gpsPoints.length;
            const count = document.getElementById('titik-count');
            const acts = document.getElementById('polygon-actions');
            if (count) count.textContent = n;
            if (acts) acts.classList.toggle('d-none', n < 1);
        }

        // ── Event: polygon dibuat ──
        map.on(L.Draw.Event.CREATED, function (e) {
            drawnItems.clearLayers();
            drawnItems.addLayer(e.layer);
            updateFromLayer(e.layer);
        });

        // ── Event: polygon di-edit ──
        map.on(L.Draw.Event.EDITED, function (e) {
            e.layers.eachLayer(function (layer) {
                updateFromLayer(layer);
            });
        });

        // ── Event: polygon dihapus ──
        map.on(L.Draw.Event.DELETED, function () {
            clearPolygon();
        });

        // ── Tombol Gambar Ulang ──
        const btnGambarUlang = document.getElementById('btnGambarUlang');
        if (btnGambarUlang) {
            btnGambarUlang.addEventListener('click', function () {
                if (!confirm('Hapus polygon yang ada dan gambar ulang?')) return;
                clearPolygon();
            });
        }

        // ── Tombol Hapus Semua dari Peta ──
        const btnClearMap = document.getElementById('btnClearMap');
        if (btnClearMap) {
            btnClearMap.addEventListener('click', function (e) {
                e.preventDefault();
                if (!confirm('Hapus semua data polygon, titik GPS, dan layer referensi dari peta?')) return;
                clearPolygon();
                clearGps();
                savedLayer.clearLayers();
                officeLayer.clearLayers();
            });
        }

        // ── GPS: Tandai Lokasi Saat Ini ──
        const btnLocate   = document.getElementById('btn-locate-me');
        const locateLabel = document.getElementById('locate-label');

        if (btnLocate) {
            btnLocate.addEventListener('click', function () {
                if (!navigator.geolocation) {
                    showGpsStatus('Browser tidak mendukung GPS. Gunakan browser modern (Chrome/Firefox).', 'danger');
                    return;
                }

                locateLabel.textContent = 'Mendapatkan lokasi…';
                btnLocate.disabled = true;
                showGpsStatus('Mendapatkan posisi GPS Anda… Pastikan GPS aktif.', 'info');

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

                        const marker = L.marker([lat, lng], { icon: gpsIcon })
                            .bindPopup(
                                '<strong>Titik GPS #' + (gpsPoints.length + 1) + '</strong><br>' +
                                lat.toFixed(6) + ', ' + lng.toFixed(6) + '<br>' +
                                '<small class="text-muted">Akurasi &plusmn;' + acc + ' m</small>'
                            )
                            .addTo(gpsLayer);

                        marker.openPopup();
                        gpsPoints.push([lat, lng]);

                        map.flyTo([lat, lng], Math.min(map.getZoom() + 2, 17), { duration: 1 });

                        updateGpsUI();

                        showGpsStatus(
                            '✓ Titik #' + gpsPoints.length + ' ditandai: ' + lat.toFixed(5) + ', ' + lng.toFixed(5) + ' (±' + acc + ' m). ' +
                            'Pindah ke sudut berikutnya, lalu klik lagi.',
                            'success'
                        );

                        locateLabel.textContent = 'Tandai Titik Berikutnya (' + gpsPoints.length + ' titik)';
                        btnLocate.disabled = false;
                    },
                    function (err) {
                        var errMsg = {
                            1: 'Akses lokasi ditolak. Izinkan akses GPS di browser.',
                            2: 'Posisi tidak tersedia. Pastikan GPS aktif.',
                            3: 'Timeout. Coba lagi.',
                        }[err.code] || err.message;

                        showGpsStatus('⚠ ' + errMsg, 'warning');
                        locateLabel.textContent = 'Tandai Lokasi Saya';
                        btnLocate.disabled = false;
                    },
                    { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
                );
            });
        }

        // ── Buat Polygon dari titik-titik GPS ──
        const btnBuildPolygon = document.getElementById('btn-build-polygon');
        if (btnBuildPolygon) {
            btnBuildPolygon.addEventListener('click', function () {
                if (gpsPoints.length < 3) {
                    showGpsStatus('Minimal 3 titik GPS diperlukan untuk membuat polygon.', 'warning');
                    return;
                }

                const polygon = L.polygon(gpsPoints, {
                    color: '#0d6efd', weight: 2, fillOpacity: 0.2,
                });
                drawnItems.clearLayers();
                drawnItems.addLayer(polygon);
                updateFromLayer(polygon);

                map.fitBounds(polygon.getBounds(), { padding: [20, 20] });

                showGpsStatus(
                    '✓ Polygon dibuat dari ' + gpsPoints.length + ' titik GPS. Anda bisa edit shape via tombol edit di peta.',
                    'success'
                );
            });
        }

        // ── Hapus semua titik GPS ──
        const btnClearGps = document.getElementById('btn-clear-gps');
        if (btnClearGps) {
            btnClearGps.addEventListener('click', function () {
                clearGps();
            });
        }

        // ── Validasi sebelum submit ──
        document.getElementById('section3Form').addEventListener('submit', function (e) {
            const polygonJson = document.getElementById('polygonGeoJSON').value;
            if (!polygonJson) {
                e.preventDefault();
                alert('Gambar polygon terlebih dahulu sebelum menyimpan.');
                return;
            }
            const submitBtn = document.getElementById('btnFooterSubmit');
            if (submitBtn) {
                submitBtn.disabled = true;
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Menyimpan...';
                setTimeout(() => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }, 5000);
            }
        });
    });
})();
</script>

{{-- Load Leaflet JS & Leaflet.draw setelah DOM ──
     Urutan penting: Leaflet dulu, baru Leaflet.draw --}}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
@endpush