@extends('layouts.app')

@push('head')
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.js'></script>
@endpush

@section('title', 'Edit Peta — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
    <h1 class="text-2xl font-semibold font-display text-body mb-2">Edit Peta: {{ $ruas->nama_jalan }}</h1>
    <p class="text-sm text-muted mb-4">Edit vertex polyline ruas jalan.</p>

    <div class="rounded-xl border border-theme overflow-hidden bg-surface shadow-sm">
        <div id="map" style="width: 100%; height: 480px; min-height: 400px;"></div>
    </div>

    <div class="mt-4">
        <button id="save-btn" class="px-4 py-2 bg-blue-500 text-white rounded">Simpan</button>
        <a href="http://156.67.221.118/pju/public/peta" class="px-4 py-2 bg-gray-500 text-white rounded ml-2">Kembali</a>
    </div>

    <script>
        const geojsonData = @json($geojson);

        mapboxgl.accessToken = 'pk.eyJ1IjoiaXBpbnBwYyIsImEiOiJjbW5idnNydTUwNmQ1MnBvejR2Zzk5aTZ4In0.4bQwFqhKclF3-yjxiHSvxA';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v12',
            center: [114.3691, -8.2192],
            zoom: 10
        });

        const draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                polygon: false,
                point: false,
                line_string: false,
                trash: true
            },
            modes: {
                ...MapboxDraw.modes,
                simple_select: MapboxDraw.modes.simple_select,
                direct_select: MapboxDraw.modes.direct_select
            }
        });

        map.addControl(draw);

        map.on('load', function () {
            if (geojsonData) {
                draw.add(geojsonData);
            }
        });

        document.getElementById('save-btn').addEventListener('click', function () {
            const data = draw.getAll();
            const features = data.features;
            if (features.length > 0) {
                const geojson = features[0]; // Asumsikan satu feature
                console.log('GeoJSON to save:', geojson); // Debug
                fetch('http://156.67.221.118/pju/public/edit-peta/{{ $ruas->id }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ geojson: geojson })
                }).then(response => {
                    console.log('Response status:', response.status); // Debug
                    if (response.ok) {
                        alert('Peta berhasil disimpan!');
                        window.location.href = 'http://156.67.221.118/pju/public/peta';
                    } else {
                        response.text().then(text => {
                            console.error('Error response:', text); // Debug
                            alert('Gagal menyimpan: ' + text);
                        });
                    }
                }).catch(error => {
                    console.error('Fetch error:', error); // Debug
                    alert('Error: ' + error.message);
                });
            } else {
                alert('Tidak ada data untuk disimpan.');
            }
        });
    </script>
@endsection