@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="row">
            <div class="col-md-12">

                @includeif('partials.errors')

                <div class="card card-default">
                    <div class="card-header">
                        <span class="card-title">{{ __('Crear') }} Cliente</span>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('customers.store') }}"  role="form" enctype="multipart/form-data">
                            @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() {

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var coordinates = {};
                    coordinates.position = {};
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;

                    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);

                    coordinates.position.lat = latitude;
                    coordinates.position.lng = longitude;
                    coordinates.draggable = true;

                    const marker = generateMarker(coordinates, 0);
                    marker.addTo(map).bindPopup(`<b>${latitude},  ${longitude}</b>`);
                    map.panTo(coordinates.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