@php

if (!$attributes['id']) {
    $attributes['id'] = rand();
}

@endphp

<div class="rounded-lg mt-2 flex overflow-hidden relative w-full h-64">
    <input name="{{$attributes['lat-name']??'latitude'}}" id="latitude{{$attributes['id']}}" value="{{$attributes['default-lat']??'35.69473'}}"
           type="hidden"/>
    <input name="{{$attributes['long-name']??'longitude'}}" id="longitude{{$attributes['id']}}" type="hidden"
           value="{{$attributes['default-long']??'51.414072'}}"/>
    <div id='mapid{{$attributes['id']}}' class="w-full h-64 z-0"></div>
</div>
<script>
    const lat{{$attributes['id']}} = document.getElementById('latitude{{$attributes['id']}}')
    const long{{$attributes['id']}} = document.getElementById('longitude{{$attributes['id']}}')

    const mymap{{$attributes['id']}} = L.map('mapid{{$attributes['id']}}', {
        center: ['{{$attributes['default-lat']??'35.69473'}}', '{{$attributes['default-long']??'51.414072'}}'],
        zoom: 18
    });
    const greenIcon{{$attributes['id']}} = L.icon({
        iconUrl: '/images/marker.svg',
        // shadowUrl: 'leaf-shadow.png',

        iconSize: [38, 95], // size of the icon
        shadowSize: [50, 64], // size of the shadow
        iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    const marker{{$attributes['id']}} = L.marker(['{{$attributes['default-lat']??'35.69473'}}', '{{$attributes['default-long']??'51.414072'}}'], {icon: greenIcon{{$attributes['id']}}, draggable: 'true'}).addTo(mymap{{$attributes['id']}});
    mymap{{$attributes['id']}}.on('click', function (e) {
        console.log(e.latlng)
        lat{{$attributes['id']}}.value = e.latlng.lat;
        long{{$attributes['id']}}.value = e.latlng.lng;
        var newLatLng{{$attributes['id']}} = new L.LatLng(e.latlng.lat, e.latlng.lng);
        marker{{$attributes['id']}}.setLatLng(newLatLng{{$attributes['id']}});
    });
    marker{{$attributes['id']}}.on('dragend', function (event) {

        var position{{$attributes['id']}} = event.target.getLatLng();
        event.target.setLatLng(new L.LatLng(position{{$attributes['id']}}.lat, position{{$attributes['id']}}.lng), {draggable: 'true'});
        lat{{$attributes['id']}}.value = position{{$attributes['id']}}.lat;
        long{{$attributes['id']}}.value = position{{$attributes['id']}}.lng;
    }).addTo(mymap{{$attributes['id']}});
    // L.popup().setContent('خیابان جمهوری چهارراه سی تیر ساختمان فرقانی همکف واحد ۲۹').openOn(marker);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        // attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 32,
        id: 'mapbox/streets-v11',
        detectRetina: true,
        className: 'map',
        accessToken: 'pk.eyJ1IjoiZmFyemFtNzciLCJhIjoiY2swcWdjbWE4MDdpNzNucG1jaHJxdHE0cyJ9.MUUX6-h141zTajAaxuqGHg'
    }).addTo(mymap{{$attributes['id']}});
</script>