@extends('layouts.app')

@push('head')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin />
@endpush

@section('title', 'Tambah Data Jalan — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
@php $base = rtrim(request()->getBasePath(), '/'); @endphp
    <div class="page-header">
        <div>
            <h1 class="page-title">Tambah Data Ruas Jalan</h1>
            <p class="page-subtitle">Ruas jalan dan lokasi PJU</p>
        </div>
        <a href="{{ $base.'/data-jalan' }}" class="page-back">← Kembali</a>
    </div>

    @if (session('error'))
        <div class="mb-6 p-4 rounded-lg alert-error text-sm">{{ session('error') }}</div>
    @endif
    @if ($errors->any())
        <div class="mb-6 p-4 rounded-lg alert-error text-sm">
            <ul class="list-disc list-inside space-y-1">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="p-6 bg-surface rounded-lg w-full">
        <form action="{{ $base.'/data-jalan' }}" method="POST" enctype="multipart/form-data" id="formJalan">
            @csrf
            <input type="hidden" name="geojson" id="geojson" value="{{ old('geojson') }}">
            @if(isset($kabupatenDefault) && $kabupatenDefault)
                <input type="hidden" name="kabupaten_id" id="kabupaten_id" value="{{ old('kabupaten_id', $kabupatenDefault->id) }}">
            @endif

            <div class="form-section">
                <h2 class="form-section-title">Identitas Ruas Jalan</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                     <div class="form-group">
                        <label for="nomor_ruas" class="form-label">Nomor Ruas</label>
                        <input type="text" name="nomor_ruas" id="nomor_ruas" value="{{ old('nomor_ruas', $nextNomorRuas ?? '') }}" maxlength="100" readonly class="input-theme bg-page/50" tabindex="-1">
                        <p class="text-xs text-muted mt-1">Nilai asli dari DB. Auto: terbesar + 1.</p>
                    </div>
                    <div class="form-group sm:col-span-2">
                        <label for="nama_jalan" class="form-label">Nama Ruas / Nama Jalan <span class="required">*</span></label>
                        <input type="text" name="nama_jalan" id="nama_jalan" value="{{ old('nama_jalan') }}" required class="input-theme" placeholder="Nama ruas jalan">
                    </div>
                    <div class="form-group">
                        <label for="status_jalan" class="form-label">Status Jalan</label>
                        <select name="status_jalan" id="status_jalan" class="input-theme">
                            <option value="">— Pilih Status —</option>
                            @foreach(\App\Models\RuasJalan::opsiStatusJalan() as $value => $label)
                                <option value="{{ $value }}" {{ old('status_jalan') === $value ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    @if(isset($jenisJalan) && $jenisJalan->isNotEmpty())
                    <div class="form-group">
                        <label for="jenis_jalan_id" class="form-label">Jenis Jalan</label>
                        <select name="jenis_jalan_id" id="jenis_jalan_id" class="input-theme">
                            <option value="">— Pilih Jenis Jalan —</option>
                            @foreach($jenisJalan as $jj)
                                <option value="{{ $jj->id }}" {{ old('jenis_jalan_id') == $jj->id ? 'selected' : '' }}>{{ $jj->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="form-group">
                        <label for="fungsi" class="form-label">Fungsi</label>
                        <input type="text" name="fungsi" id="fungsi" value="{{ old('fungsi') }}" maxlength="50" class="input-theme" placeholder="—">
                    </div>
                    <div class="form-group">
                        <label for="panjang_jalan" class="form-label">Panjang Jalan (km)</label>
                        <input type="number" name="panjang_jalan" id="panjang_jalan" value="{{ old('panjang_jalan') }}" step="0.001" min="0" class="input-theme" placeholder="Contoh: 1.250">
                        <p class="text-xs text-muted mt-1">3 angka di belakang koma, satuan km</p>
                    </div>
                    @if(isset($kecamatan) && $kecamatan->isNotEmpty())
                    <div class="form-group">
                        <label for="kecamatan_id" class="form-label">Kecamatan</label>
                        <select name="kecamatan_id" id="kecamatan_id" class="input-theme">
                            <option value="">— Pilih Kecamatan —</option>
                            @foreach($kecamatan as $k)
                                <option value="{{ $k->id }}" {{ old('kecamatan_id') == $k->id ? 'selected' : '' }}>{{ $k->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="form-group">
                        <label class="form-label">Kabupaten/Kota</label>
                        <input type="text" value="{{ isset($kabupatenDefault) && $kabupatenDefault ? $kabupatenDefault->nama : 'Kabupaten Banyuwangi' }}" readonly class="input-theme bg-page/50" aria-readonly="true">
                    </div>
                    <div class="form-group sm:col-span-2">
                        <h3 class="text-sm font-semibold text-body mb-1">Titik pangkal dan ujung</h3>
                        <p class="text-xs text-muted mb-3">Lintang/bujur titik pangkal dan ujung ruas. Terisi otomatis dari garis di peta atau file; dapat disesuaikan manual.</p>
                        <div class="grid gap-4 sm:grid-cols-2">
                            <div class="form-group">
                                <label for="titik_pangkal_lat" class="form-label">Titik pangkal — Lintang</label>
                                <input type="number" name="titik_pangkal_lat" id="titik_pangkal_lat" step="any" value="{{ old('titik_pangkal_lat') }}" class="input-theme" placeholder="Contoh: -8.2192">
                            </div>
                            <div class="form-group">
                                <label for="titik_pangkal_lng" class="form-label">Titik pangkal — Bujur</label>
                                <input type="number" name="titik_pangkal_lng" id="titik_pangkal_lng" step="any" value="{{ old('titik_pangkal_lng') }}" class="input-theme" placeholder="Contoh: 114.3691">
                            </div>
                            <div class="form-group">
                                <label for="titik_ujung_lat" class="form-label">Titik ujung — Lintang</label>
                                <input type="number" name="titik_ujung_lat" id="titik_ujung_lat" step="any" value="{{ old('titik_ujung_lat') }}" class="input-theme">
                            </div>
                            <div class="form-group">
                                <label for="titik_ujung_lng" class="form-label">Titik ujung — Bujur</label>
                                <input type="number" name="titik_ujung_lng" id="titik_ujung_lng" step="any" value="{{ old('titik_ujung_lng') }}" class="input-theme">
                            </div>
                        </div>
                    </div>
                    <div class="form-group sm:col-span-2">
                        <label for="file_ruas" class="form-label">Upload File GeoJSON / KML / KMZ</label>
                        <p class="text-sm text-muted mb-2">Pilih file untuk menampilkan garis di peta dan mengisi field dari data file. Atau gambar polyline di peta di bawah. Maks. 10MB.</p>
                        <input type="file" name="file_ruas" id="file_ruas" accept=".geojson,.json,.kml,.kmz,image/*" class="input-theme">
                        <p class="text-xs text-muted mt-1" id="file_ruas_status"></p>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h2 class="form-section-title">Gambar Garis di Peta</h2>
                <p class="text-sm text-muted mb-4">Gambar polyline di peta <strong>atau</strong> upload file di atas. Setelah simpan, koordinat diisi otomatis dari gambar/file.</p>
                <div class="flex flex-wrap gap-2 mb-4">
                    <button type="button" id="btnMulaiGambar" class="btn-primary text-sm">Mulai gambar</button>
                    <button type="button" id="btnSelesaiGambar" class="btn-outline text-sm" disabled>Selesai gambar</button>
                    <button type="button" id="btnHapusPolyline" class="btn-outline text-sm">Hapus polyline</button>
                </div>
                <div id="map" class="map-wrap" style="height: 360px; min-height: 360px;"></div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-primary">Simpan</button>
                <a href="{{ $base.'/data-jalan' }}" class="btn-outline">Batal</a>
            </div>
        </form>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" crossorigin></script>
    <script>
    (function() {
        function getFeatureFromGeojsonText(text) {
            try {
                var data = JSON.parse(text);
                var feature = null;
                if (data.type === 'Feature' && data.geometry) {
                    feature = data;
                } else if (data.type === 'FeatureCollection' && data.features && data.features.length) {
                    for (var i = 0; i < data.features.length; i++) {
                        if (data.features[i].geometry && (data.features[i].geometry.type === 'LineString' || data.features[i].geometry.type === 'MultiLineString')) {
                            feature = data.features[i];
                            break;
                        }
                    }
                }
                if (!feature || !feature.geometry) return null;
                var coords = feature.geometry.coordinates;
                if (feature.geometry.type === 'MultiLineString' && coords[0]) coords = coords[0];
                if (!coords || coords.length < 2) return null;
                return { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: feature.properties || {} };
            } catch (e) { return null; }
        }
        function getFeatureFromKmlText(text) {
            try {
                var parser = new DOMParser();
                var doc = parser.parseFromString(text, 'text/xml');
                var placemarks = doc.getElementsByTagName('Placemark');
                for (var i = 0; i < placemarks.length; i++) {
                    var pm = placemarks[i];
                    var lineEl = pm.getElementsByTagName('LineString')[0] || pm.getElementsByTagNameNS('http://www.opengis.net/kml/2.2', 'LineString')[0];
                    if (!lineEl) continue;
                    var coordEl = lineEl.getElementsByTagName('coordinates')[0] || lineEl.getElementsByTagNS('http://www.opengis.net/kml/2.2', 'coordinates')[0];
                    if (!coordEl) continue;
                    var coordStr = (coordEl.textContent || coordEl.innerText || '').trim();
                    var coords = [];
                    coordStr.split(/\s+/).forEach(function(part) {
                        var p = part.split(',');
                        if (p.length >= 2) coords.push([parseFloat(p[0]), parseFloat(p[1])]);
                    });
                    if (coords.length < 2) continue;
                    var nameEl = pm.getElementsByTagName('name')[0] || pm.getElementsByTagNameNS('http://www.opengis.net/kml/2.2', 'name')[0];
                    var name = nameEl ? (nameEl.textContent || nameEl.innerText || '').trim() : '';
                    return { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: name ? { name: name, Nama_Ruas: name } : {} };
                }
                return null;
            } catch (e) { return null; }
        }
        function fillFormFromProperties(props) {
            if (!props) return;
            var nama = props.Nama_Ruas || props.nama_ruas || props.name;
            if (nama && document.getElementById('nama_jalan')) document.getElementById('nama_jalan').value = nama;
            if (props.Fungsi != null && document.getElementById('fungsi')) document.getElementById('fungsi').value = props.Fungsi;
            if (props.Panjang != null && document.getElementById('panjang_jalan')) document.getElementById('panjang_jalan').value = Number(props.Panjang);
            if (props.Status != null && document.getElementById('status_jalan')) {
                var sel = document.getElementById('status_jalan');
                for (var j = 0; j < sel.options.length; j++) {
                    if (sel.options[j].value === props.Status) { sel.value = props.Status; break; }
                }
            }
        }
        function initMap() {
            var mapEl = document.getElementById('map');
            if (!mapEl || typeof L === 'undefined') return;
            var defaultCenter = [-8.2192, 114.3691];
            var map = L.map('map', { center: defaultCenter, zoom: 13 });
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; OpenStreetMap', maxZoom: 19 }).addTo(map);

            var points = [];
            var polylineLayer = null;
            var markerLayer = null;
            var isDrawing = false;

            function clearEndpointInputs() {
                ['titik_pangkal_lat', 'titik_pangkal_lng', 'titik_ujung_lat', 'titik_ujung_lng'].forEach(function(id) {
                    var el = document.getElementById(id);
                    if (el) el.value = '';
                });
            }
            function syncEndpointInputs() {
                var elP = document.getElementById('titik_pangkal_lat');
                var elPL = document.getElementById('titik_pangkal_lng');
                var elU = document.getElementById('titik_ujung_lat');
                var elUL = document.getElementById('titik_ujung_lng');
                if (!elP || !elPL || !elU || !elUL || points.length < 2) return;
                var first = points[0];
                var last = points[points.length - 1];
                elP.value = first.lat;
                elPL.value = first.lng;
                elU.value = last.lat;
                elUL.value = last.lng;
            }

            function clearDrawing() {
                points = [];
                if (polylineLayer) { map.removeLayer(polylineLayer); polylineLayer = null; }
                if (markerLayer) { map.removeLayer(markerLayer); markerLayer = null; }
                document.getElementById('geojson').value = '';
                document.getElementById('btnSelesaiGambar').disabled = true;
                clearEndpointInputs();
            }
            function drawPolyline() {
                if (polylineLayer) map.removeLayer(polylineLayer);
                if (markerLayer) map.removeLayer(markerLayer);
                if (points.length < 2) return;
                var latlngs = points.map(function(p) { return [p.lat, p.lng]; });
                polylineLayer = L.polyline(latlngs, { color: '#039509', weight: 4 }).addTo(map);
                var markers = points.map(function(p) { return L.circleMarker([p.lat, p.lng], { radius: 5, color: '#039509', fillColor: '#05c20d', fillOpacity: 1, weight: 2 }); });
                markerLayer = L.layerGroup(markers).addTo(map);
                syncEndpointInputs();
            }
            function buildGeoJSON() {
                if (points.length < 2) return null;
                var coordinates = points.map(function(p) { return [p.lng, p.lat]; });
                return JSON.stringify({ type: 'Feature', geometry: { type: 'LineString', coordinates: coordinates }, properties: {} });
            }
            function applyFeatureToMapAndForm(feature) {
                if (!feature || !feature.geometry || !feature.geometry.coordinates || feature.geometry.coordinates.length < 2) return false;
                clearDrawing();
                points = feature.geometry.coordinates.map(function(c) { return { lat: c[1], lng: c[0] }; });
                drawPolyline();
                document.getElementById('geojson').value = JSON.stringify(feature);
                fillFormFromProperties(feature.properties);
                var bounds = L.latLngBounds(points.map(function(p) { return [p.lat, p.lng]; }));
                map.fitBounds(bounds.pad(0.15));
                return true;
            }

            map.on('click', function(e) {
                if (!isDrawing) return;
                points.push({ lat: e.latlng.lat, lng: e.latlng.lng });
                drawPolyline();
                document.getElementById('btnSelesaiGambar').disabled = false;
            });
            document.getElementById('btnMulaiGambar').addEventListener('click', function() {
                clearDrawing();
                isDrawing = true;
                this.disabled = true;
                document.getElementById('btnSelesaiGambar').disabled = false;
            });
            document.getElementById('btnSelesaiGambar').addEventListener('click', function() {
                if (!isDrawing) return;
                isDrawing = false;
                document.getElementById('btnMulaiGambar').disabled = false;
                this.disabled = true;
                var geojson = buildGeoJSON();
                if (geojson) {
                    document.getElementById('geojson').value = geojson;
                    syncEndpointInputs();
                }
            });
            document.getElementById('btnHapusPolyline').addEventListener('click', function() {
                clearDrawing();
                isDrawing = false;
                document.getElementById('btnMulaiGambar').disabled = false;
            });
            document.getElementById('formJalan').addEventListener('submit', function() {
                if (points.length >= 2) {
                    var geojson = buildGeoJSON();
                    if (geojson) {
                        document.getElementById('geojson').value = geojson;
                        syncEndpointInputs();
                    }
                }
            });

            var fileInput = document.getElementById('file_ruas');
            var statusEl = document.getElementById('file_ruas_status');
            fileInput.addEventListener('change', function() {
                var file = this.files[0];
                statusEl.textContent = '';
                if (!file) return;
                var name = (file.name || '').toLowerCase();
                var isKmz = name.endsWith('.kmz');
                var isKml = name.endsWith('.kml');
                var isGeo = name.endsWith('.geojson') || name.endsWith('.json');
                if (!isKmz && !isKml && !isGeo) {
                    statusEl.textContent = 'Format tidak didukung. Gunakan .geojson, .json, .kml, atau .kmz';
                    return;
                }
                statusEl.textContent = 'Memuat…';
                function onText(text) {
                    var feature = null;
                    if (isGeo) feature = getFeatureFromGeojsonText(text);
                    else feature = getFeatureFromKmlText(text);
                    if (feature && applyFeatureToMapAndForm(feature)) {
                        statusEl.textContent = 'File ditampilkan di peta dan field diisi dari data file.';
                    } else {
                        statusEl.textContent = 'Tidak ada LineString yang valid dalam file.';
                    }
                }
                if (isKmz && typeof JSZip !== 'undefined') {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        JSZip.loadAsync(e.target.result).then(function(zip) {
                            var kmlEntry = null;
                            zip.forEach(function(relPath, entry) {
                                if (!kmlEntry && /\.kml$/i.test(relPath)) kmlEntry = entry;
                            });
                            if (!kmlEntry) { statusEl.textContent = 'Tidak ada file .kml di dalam KMZ.'; return; }
                            return kmlEntry.async('text');
                        }).then(function(text) {
                            if (text) onText(text);
                        }).catch(function() { statusEl.textContent = 'Gagal membaca file KMZ.'; });
                    };
                    reader.readAsArrayBuffer(file);
                } else {
                    var reader = new FileReader();
                    reader.onload = function(e) { onText(e.target.result); };
                    reader.onerror = function() { statusEl.textContent = 'Gagal membaca file.'; };
                    reader.readAsText(file, 'UTF-8');
                }
            });

            var oldGeojson = document.getElementById('geojson').value;
            if (oldGeojson) {
                try {
                    var f = JSON.parse(oldGeojson);
                    if (f.geometry && (f.geometry.type === 'LineString' || f.geometry.type === 'MultiLineString') && f.geometry.coordinates) {
                        var coords = f.geometry.type === 'LineString' ? f.geometry.coordinates : (f.geometry.coordinates[0] || []);
                        if (coords.length >= 2) {
                            points = coords.map(function(c) { return { lat: c[1], lng: c[0] }; });
                            drawPolyline();
                            syncEndpointInputs();
                        }
                    }
                } catch (e) {}
            }
            setTimeout(function() { map.invalidateSize(); }, 200);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initMap);
        } else {
            setTimeout(initMap, 50);
        }
    })();
    </script>
@endsection