@extends('layouts.partials.master')

@section('title', 'Definição de Área')

@push('styles')
    <!-- Leaflet CSS & JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        #beaconsMap { height: 500px; width: 100%; z-index: 1; }
    </style>
@endpush

@section('content')
    <nav aria-label="breadcrumb">
        {!! $breadcrumbs !!}
    </nav>
    @include('layouts.components.section-title', ['title' => 'Definição de Área'])

    @include('layouts.components.alerts')

    <form id="markerForm" action="{{ route('bcn_coordinates.update-area') }}" method="POST">
        @csrf
        @method('PUT')

        <p class="mt-3">Adicionar coordenada: clique esquerdo.<br/>Atualizar coordenada: arrastar.<br/>Eliminar coordenada: clique direito</p>

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                <div class="error handle-error">{{ $error }}</div>
            @endforeach
        @endif

        <div id="beaconsMap"></div>

        <input type="hidden" name="markers" id="markersInput">

        <div class="row my-4">
            <div class="col-12 text-end">
                <button type="submit" class="btn btn-sm btn-primary">Gravar <i class="fa-light fa-floppy-disk"></i></button>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
    <script>
        var map = L.map('beaconsMap')
            // center in portugal, if no markers where added yet
            .setView([38.7369, -9.1395], 6);
        var markers = {};
        var nextMarkerId = 1;

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

        // update the area drawn
        function drawArea(fitBounds) {
            var coordinates = Object.values(markers).map(marker => [marker.getLatLng().lat, marker.getLatLng().lng]);

            // remove existing polygon if exists
            if (window.currentPolyline) {
                map.removeLayer(window.currentPolyline);
            }

            // create a new polygon
            var polyline = L.polygon(coordinates, {
                color: 'red',
                weight: 3,
                opacity: 0.5
            }).addTo(map);

            window.currentPolyline = polyline;

            if (fitBounds) {
                // adjust map to fit the bounds of the polygon
                map.fitBounds(polyline.getBounds());
            }
        }

        // get markers from database
        fetch('{{ route("bcn_coordinates.get_coordinates") }}')
            .then(response => response.json())
            .then(data => {
                data.forEach(marker => {
                    addMarker(marker.id, marker.latitude, marker.longitude);
                });

                drawArea(true);
            });

        // click on map to create new marker
        map.on('click', function (event) {
            var lat = event.latlng.lat;
            var lng = event.latlng.lng;
            addMarker(null, lat, lng);
        });

        // when the form is about to be submitted,
        // populate the hidden input field with the markers' data
        document.getElementById('markerForm').addEventListener('submit', function (e) {
            e.preventDefault();

            var markersData = Object.values(markers).map((marker, key) => ({
                lat: marker.getLatLng().lat,
                lng: marker.getLatLng().lng
            }));

            document.getElementById('markersInput').value = JSON.stringify(markersData);

            document.getElementById('markerForm').submit();
        });

        function addMarker(id, lat, lng) {
            // use a new ID for new markers, or use the passed ID for existing markers
            var markerId = id || nextMarkerId++;
            var marker = L.marker([lat, lng], { draggable: true }).addTo(map);
            markers[markerId] = marker;

            drawArea(false);

            // drag event - update coordinates
            marker.on('dragend', function () {
                var position = marker.getLatLng();
                drawArea(false);
            });

            // right-click event - delete
            marker.on('contextmenu', function () {
                map.removeLayer(marker);
                delete markers[markerId];
                drawArea(false);
            });
        }
    </script>
@endpush