@php
    $locks = App\Models\Lock::all();
@endphp

<div id="map" style="height: 50vh;"></div>
<div id="campaign_locks"></div>

@push('scripts')
{{-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> --}}
<script>
function initMap() {

    function markerColorReset() {
        markers.forEach(function(marker){
            // console.log(Math.random());
            if(marker.campaign_id == {{ $item->id }}) {
                if(marker.coupon_id) {
                iconSvg.fillColor = 'hsl(120, 50%, 40%)'; // zöld
                    // iconSvg.fillColor = 'hsl(0, 50%, ' + ( Math.floor(Math.random() * 60) + 20 ) + '%)';
                } else {
                iconSvg.fillColor = 'hsl(120, 50%, 60%)'; // zöld
                    // iconSvg.fillColor = 'hsl(240, 50%, ' + ( Math.floor(Math.random() * 60) + 20 ) + '%)';
                }
                // iconSvg.fillColor = 'hsl(120, 50%, ' + ( Math.floor(Math.random() * 60) + 20 ) + '%)';
            } else {
                // iconSvg.fillColor = 'hsl(240, 50%, 50%)'; // kék
                iconSvg.fillColor = 'hsl(0, 0%, 60%)'; // szürke
                // iconSvg.fillColor = 'hsl(240, 50%, ' + ( Math.floor(Math.random() * 60) + 20 ) + '%)';
            }

            if(!marker.campaign_id) {
                iconSvg.fillColor = 'hsl(120, 50%, 80%)';
                // iconSvg.fillColor = 'hsl(120, 50%, ' + ( Math.floor(Math.random() * 60) + 20 ) + '%)';
            }
            // iconSvg.scale = 1 + ( 0.1 * marker.price / 100 );
            // iconSvg.anchor = new google.maps.Point(12, 24 * iconSvg.scale);
            marker.setIcon(iconSvg);
        });
    }

    // function markerColorSelect(marker = null) {
    //     markerColorReset();
    //     iconSvg.fillColor = 'hsl(240, 50%, 50%)';
    //     // iconSvg.scale = 1 + ( 0.1 * marker.price / 100 );
    //     // iconSvg.anchor = new google.maps.Point(12, 24 * iconSvg.scale);
    //     marker.setIcon(iconSvg);
    // }

    async function showLocks() {
        $.ajax({
            url: '{{ route('admin.campaigns.locks', [':slug']) }}'.replace(':slug', {{ $item->id }}),
            type: 'GET',
            success: function(data) {
                $('#campaign_locks').html(data);
                // $('html, body').animate({
                //     scrollTop: $("#lock_info").offset().top
                // }, 2000);
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    }
    showLocks();

    async function updateLock(marker) {

        $.ajax({
            url: '{{ route('admin.locks.map_update', [':slug']) }}'.replace(':slug', marker.id),
            type: 'POST',
            data: JSON.stringify({
                campaign_id: {{ $item->id }},
            }),
            contentType: 'application/json',
            success: function(response) {
                if(!marker.campaign_id) {
                    marker.campaign_id = {{ $item->id }};
                } else if(marker.campaign_id == {{ $item->id }}) {
                    marker.campaign_id = null;
                }
                markerColorReset();
                console.log('LIT helyének frissítése sikeres.');
            },
            error: function(xhr, status, error) {
                console.log('Hiba történt a LIT helyének frissítése közben.', error);
            }
        });
    }

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: { lat: 47.4979, lng: 19.0402 },
        mapId: '9b6a718fbda6cc3e'
    });

        const drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.CIRCLE,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ["circle"],
          },
          circleOptions: {
            fillOpacity: 0.5,
            strokeWeight: 1,
            clickable: true,
            editable: true,
            draggable: true,
            zIndex: 1,
          },
        });
        drawingManager.setMap(map);

        google.maps.event.addListener(drawingManager, "circlecomplete", function (circle) {
          listMarkersInCircle(circle);
          circle.setMap(null);
        });

function listMarkersInCircle(circle) {
  var markersInCircle = markers.filter(function(marker) {
    var center = circle.getCenter();
    var radius = circle.getRadius();
    var distance = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), center);
    return distance <= radius;
  });

  markersInCircle.forEach(function(marker) {
    updateLock(marker);
  });
  showLocks();
// console.log(markersInCircle);
  // Most már használhatja a markersInCircle tömböt, amely csak a körön belüli markereket tartalmazza.
}


    var iconSvg = {
        path: 'M12 0C5.4 0 0 5.4 0 12c0 10 12 20 12 20s12-10 12-20C24 5.4 18.6 0 12 0zm0 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z',
        fillColor: 'purple',
        fillOpacity: 1.0,
        strokeWeight: 0.5,
        scale: 1,
        anchor: new google.maps.Point(12, 32)
    };

    var markers = [];
    @foreach($locks as $lock)
    var marker = new google.maps.Marker({
        id: '{{ $lock->id }}',
        coupon_id: '{{ $lock->coupon_id }}',
        campaign_id: '{{ $lock->campaign_id }}',
        position: { lat: {{ $lock->latitude }}, lng: {{ $lock->longitude }} },
        map: map,
        draggable: false,
        price: {{ $lock->open_price }},
        icon: iconSvg
    });
    markers.push(marker);
    @endforeach

    markerColorReset();

    markers.forEach(function(marker) {
        marker.addListener('click', function() {
            updateLock(marker);
            showLocks();
        });
    });
}

function handleMapLoad() {
  initMap();
}

function loadGoogleMaps() {
  var script = document.createElement('script');
  script.src = 'https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places,drawing,geometry&callback=handleMapLoad';
  document.body.appendChild(script);
}

loadGoogleMaps();
</script>
@endpush