@push('styles')
    @vite(['resources/assets/vendor/libs/leaflet/leaflet.scss'])
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
@endpush
@props([
    'object' => null,
])

<div class="col-12">
    <div class="card mb-4">
        {{-- <h5 class="card-header">Draggable Marker With Popup</h5> --}}
        <div class="card-body">
            <div class="leaflet-map" id="dragMap"></div>
        </div>
    </div>
</div>
<input type="hidden" name="latitude" id="latitude" value="{{ $object?->latitude }}">
<input type="hidden" name="longitude" id="longitude" value="{{ $object?->longitude }}">
<!-- /Draggable Marker With Popup -->


@once
    @push('scripts')
        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
        <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
        <script>
            const dragMapVar = document.getElementById('dragMap');
            if (dragMapVar) {
                const map = L.map('dragMap').setView([25.245938079306878, 55.28663635253907], 12);

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

                var searchControl = L.Control.geocoder({
                    defaultMarkGeocode: false
                }).on('markgeocode', function(e) {
                    var latlng = e.geocode.center;
                    map.flyTo(latlng, 12);
                    // You can do additional actions here, such as adding a marker
                }).addTo(map);

                // Check if latitude and longitude input fields have values
                var latitude = $('#latitude').val();
                var longitude = $('#longitude').val();
                console.log('latitude');
                console.log(latitude);
                console.log(longitude);
                if (latitude && longitude) {
                    console.log('yes');
                    // Set initial marker location from input fields
                    var initialLocation = [parseFloat(latitude), parseFloat(longitude)];
                    map.setView(initialLocation, 12);

                    var marker = L.marker(initialLocation, {
                        draggable: true
                    }).addTo(map);

                    marker.on('dragend', function(event) {
                        var markerLocation = marker.getLatLng();
                        console.log(markerLocation.lat, markerLocation.lng);
                        // Update hidden input fields in the form with these values
                        $('#latitude').val(markerLocation.lat);
                        $('#longitude').val(markerLocation.lng);
                    });

                    map.on('click', function(event) {
                        marker.setLatLng(event.latlng);

                        var markerLocation = marker.getLatLng();
                        console.log(markerLocation.lat, markerLocation.lng);
                        // Update hidden input fields in the form with these values
                        $('#latitude').val(markerLocation.lat);
                        $('#longitude').val(markerLocation.lng);
                    });

                } else {
                    // Try to get the user's location
                    // Success, center the map on the user's location
                    var userLocation = [25.245938079306878, 55.28663635253907];
                    $('#latitude').val(25.245938079306878);
                    $('#longitude').val(55.28663635253907);
                    map.setView(userLocation, 12);

                    // Add a marker at the user's location
                    var marker = L.marker(userLocation, {
                        draggable: true
                    }).addTo(map);

                    marker.on('dragend', function(event) {
                        var markerLocation = marker.getLatLng();
                        console.log(markerLocation.lat, markerLocation.lng);
                        // Update hidden input fields in the form with these values
                        $('#latitude').val(markerLocation.lat);
                        $('#longitude').val(markerLocation.lng);
                    });

                    map.on('click', function(event) {
                        marker.setLatLng(event.latlng);
                        var markerLocation = marker.getLatLng();
                        console.log(markerLocation.lat, markerLocation.lng);
                        // Update hidden input fields in the form with these values
                        $('#latitude').val(markerLocation.lat);
                        $('#longitude').val(markerLocation.lng);
                    });
                }

            }
        </script>
    @endpush
@endonce