@extends('layouts.main')

@section('title', '| Clientes')
@section('titlePage', 'Clientes')

@section('page-styles')
    <link rel='stylesheet' href='https://unpkg.com/leaflet@1.8.0/dist/leaflet.css' crossorigin=''>

    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
@endsection


@section('content')
    <section class="content container-fluid">
        <div class="">
            <div class="col-md-12">

                @includeif('partials.errors')

                <div class="card card-default">
                    <div class="card-header">
                        <span class="card-title">{{ __('Actualizar') }} Cliente</span>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('customers.update', $customer->id) }}"  role="form" enctype="multipart/form-data">
                            {{ method_field('PATCH') }}
                            @csrf

                            @include('customer.form')

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('page-scripts')
    <script src='https://unpkg.com/leaflet@1.8.0/dist/leaflet.js' crossorigin=''></script>

    <script>
        let map, markers = [];
        /* ----------------------------- Initialize Map ----------------------------- */
        function initMap() {
            map = L.map('map', {
                center: {
                    lat: 13.697694013442618,
                    lng: -89.19130325317384,
                },
                zoom: 15
            });

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

            map.on('click', mapClicked);
            initMarkers();
        }
        initMap();

        /* --------------------------- Initialize Markers --------------------------- */
        function initMarkers() {

            const initialMarkers = null;

            for (let index = 0; index < initialMarkers.length; index++) {

                const data = initialMarkers[index];
                const marker = generateMarker(data, index);
                marker.addTo(map).bindPopup(`<b>${data.position.lat},  ${data.position.lng}</b>`);
                map.panTo(data.position);
                markers.push(marker)
            }
        }

        function generateMarker(data, index) {
            return L.marker(data.position, {
                draggable: data.draggable
            })
                .on('click', (event) => markerClicked(event, index))
                .on('dragend', (event) => markerDragEnd(event, index));
        }

        /* ------------------------- Handle Map Click Event ------------------------- */
        function mapClicked($event) {
            console.log(map);
            console.log($event.latlng.lat, $event.latlng.lng);
        }

        /* ------------------------ Handle Marker Click Event ----------------------- */
        function markerClicked($event, index) {
            console.log(map);
            console.log($event.latlng.lat, $event.latlng.lng);
        }

        /* ----------------------- Handle Marker DragEnd Event ---------------------- */
        function markerDragEnd($event, index) {
            console.log(map);
            console.log($event.target.getLatLng());

            map.removeLayer(markers[index])
            markers.splice(index, 1)

            var coordinates = {};
            var data = {};
            data.position = {};
            data.position.lat = $event.target.getLatLng().lat;
            data.position.lng = $event.target.getLatLng().lng;
            data.draggable = true;

            const marker = generateMarker(data, index);
            marker.addTo(map).bindPopup(`<b>${$event.target.getLatLng().lat},  ${$event.target.getLatLng().lng}</b>`);
            markers.push(marker);

            coordinates.latitude = $event.target.getLatLng().lat;
            coordinates.longitude = $event.target.getLatLng().lng;

            document.getElementById("coordinates").value = JSON.stringify(coordinates);
        }
    </script>

    <script>
        $(function(){
            coordinates("coordinates")
        });

    </script>
@endsection