@extends('layouts.admin')

@section('main-content')
        <div class="card" id="card_lock_info">
            <div class="card-header">
                <h4 class="card-title d-flex mb-0">
                    <span class="flex-grow-1 align-self-center">LIT helyek kezelése:</span>
                    @can('update lock')
                                <form method="POST" class=""
                                    action="{{ route('admin.locks.update_addresses') }}"
                                >
                                    @csrf
                                    <input type="hidden" name="back" value="back" />

                                    <button type="submit" class="btn btn-secondary btn-label waves-effect waves-light btn-block">
                                        Címek frissítése
                                    </button>
                                </form>
                    @endcan                    <div class="ms-auto align-self-center">

                        <div id="add-marker-button" class="btn btn-primary ml-5">Új LIT hely hozzáadása</div>
                    </div>
                </h4>
            </div>
            <div class="card-body">
                <div id="map" style="height: 50vh;"></div>
                <div id="lock_info" class="mt-5"></div>
            </div>
            <div class="card-footer d-flex">
                <div class="ms-auto align-self-center">
                </div>
            </div>
        </div>
@endsection

@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.draggable) {
                iconSvg.fillColor = 'hsl(120, 50%, 50%)'; // zöld
                // 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.active)
                iconSvg.fillColor = 'hsl(0, 100%, 60%)';
            // 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, 100%, 50%)';
        // iconSvg.scale = 1 + ( 0.1 * marker.price / 100 );
        // iconSvg.anchor = new google.maps.Point(12, 24 * iconSvg.scale);
        marker.setIcon(iconSvg);
    }

    async function showLockInfo(lockId) {
        $.ajax({
            url: '{{ route('admin.locks.map.lock.edit', [':slug']) }}'.replace(':slug', lockId),
            type: 'GET',
            success: function(data) {
                $('#lock_info').html(data);
                // document.getElementById('lock_info').scrollIntoView({ behavior: 'smooth' });
                // $('html, body').animate({
                //     scrollTop: $("#lock_info").offset().top
                // }, 2000);
                $('#lock_map_edit').on('submit', function(event) {
                    event.preventDefault();
                    const data = $(this).serialize();
                    //console.log(data);

                    $.ajax({
                        url: $('#lock_map_edit').attr('action'),
                        type: 'POST',
                        data,
                        success: function(response) {
                            console.log('Válasz: ' + response);
                            marker = markers.find(marker => marker.id == lockId);
                            marker.price = response.data.open_price;
                            markerColorSelect(marker);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error('Hiba történt: ' + textStatus + ', ' + errorThrown);
                        }
                    });
                });
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    }

    async function createLock(marker) {
        var newPosition = marker.getPosition();
        $.ajax({
            url: '{{ route('admin.locks.map_create') }}',
            type: 'POST',
            data: JSON.stringify({
                latitude: newPosition.lat(),
                longitude: newPosition.lng(),
            }),
            contentType: 'application/json',
            success: function(response) {
                marker.id = response.id;
            },
            error: function(xhr, status, error) {
                console.log('Hiba történt a LIT helyének létrehozása közben.', error);
            }
        });
    }

    async function updateLock(marker) {
        var newPosition = marker.getPosition();
        $.ajax({
            url: '{{ route('admin.locks.map_update', [':slug']) }}'.replace(':slug', marker.id),
            type: 'POST',
            data: JSON.stringify({
                latitude: newPosition.lat(),
                longitude: newPosition.lng(),
            }),
            contentType: 'application/json',
            success: function(response) {
                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'
    });


    var dragTimer;
    google.maps.event.addListener(map, 'drag', function() {
        clearTimeout(dragTimer);
        dragTimer = setTimeout(function() {
            var bounds = map.getBounds();
            var ne = bounds.getNorthEast(); // Észak-keleti sarok
            var sw = bounds.getSouthWest(); // Dél-nyugati sarok

            markers = markers.filter(function(marker) {
                if (marker.position && typeof marker.position.lat === "function") {
                    var lat = marker.position.lat();
                    var lng = marker.position.lng();
                    if(lat < sw.lat() || lat > ne.lat() || lng < sw.lng() || lng > sw.lng() ) {
                        marker.setMap(null);
                        return false;
                    }
                }
                return true;
            });
        }, 300);
    });
    var zoomDebounceTimer;
    google.maps.event.addListener(map, 'zoom_changed', function() {
        clearTimeout(zoomDebounceTimer);
        zoomDebounceTimer = setTimeout(function() {
            var bounds = map.getBounds();
            var ne = bounds.getNorthEast(); // Észak-keleti sarok
            var sw = bounds.getSouthWest(); // Dél-nyugati sarok

            markers = markers.filter(function(marker) {
                if (marker.position && typeof marker.position.lat === "function") {
                    var lat = marker.position.lat();
                    var lng = marker.position.lng();
                    if(lat < sw.lat() || lat > ne.lat() || lng < sw.lng() || lng > sw.lng() ) {
                        marker.setMap(null);
                        return false;
                    }
                }
                return true;
            });
        }, 300);
    });

    // Amikor a térkép betöltődik vagy átméretezés történik, frissítsük a sarok koordinátákat
    var debounceTimer;
    google.maps.event.addListener(map, 'idle', function() {

    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function() {
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast(); // Észak-keleti sarok
        var sw = bounds.getSouthWest(); // Dél-nyugati sarok

        //console.log('Észak-keleti sarok: ' + ne.lat() + ', ' + ne.lng());
        //console.log('Dél-nyugati sarok: ' + sw.lat() + ', ' + sw.lng());

        markers = markers.filter(function(marker) {
            if (marker.position && typeof marker.position.lat === "function") {
                var lat = marker.position.lat();
                var lng = marker.position.lng();
                if(lat < sw.lat() || lat > ne.lat() || lng < sw.lng() || lng > sw.lng() ) {
                    marker.setMap(null);
                    return false;
                }
            }
            return true;
        });

        $.ajax({
            url: '{{ route('admin.locks.map_locks', [':minLat', ':maxLat', ':minLng', ':maxLng']) }}'
                .replace(':minLat', sw.lat())
                .replace(':maxLat', ne.lat())
                .replace(':minLng', sw.lng())
                .replace(':maxLng', ne.lng()),
            type: 'GET',
            contentType: 'application/json',
            success: function(response) {
                    console.log('locks', response);
                    response.forEach(function(lock) {
                        if (!markers.some(marker => marker.id === lock.id)) {
                            if (markers.length > 500) {
                                return;
                            }
                            var marker = new google.maps.Marker({
                                id: lock.id,
                                coupon_id: lock.coupon_id,
                                position: { lat: parseFloat(lock.latitude), lng: parseFloat(lock.longitude) },
                                map: map,
                                draggable: lock.draggable,
                                price: lock.open_price,
                                icon: iconSvg,
                                active: lock.active
                            });
                            markers.push(marker);
                            // Opcionálisan hozzáadhatunk egy eseményfigyelőt is
                            marker.addListener('click', function() {
                                // Implementálható logika, mint például egy információs ablak megjelenítése
                            });
                        }
                    });
                    markerColorReset();
                    markers.forEach(function(marker) {
                        marker.addListener('click', function() {
                            markerColorSelect(marker);
                            showLockInfo(marker.id);
                        });

                        marker.addListener('dragend', function() {
                            marker.setPosition(marker);
                            marker.setMap(map);
                            updateLock(marker);
                        });
                    });

                    const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });
            },
            error: function(xhr, status, error) {
                console.log('Hiba történt a LIT helyek lekérdezése közben.', error);
            }
        });
        }, 600); // 1000 ms = 1 másodperc
    });

    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: 'gray',
        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 }}',
    //    position: { lat: {{ $lock->latitude }}, lng: {{ $lock->longitude }} },
    //    map: map,
    //    draggable: {{ $lock->draggable ? 'true' : 'false' }},
    //    price: {{ $lock->open_price }},
    //    icon: iconSvg,
    //    active: {{ $lock->active }}
    //});
    //showInfoWindow(marker, 'message');
    //markers.push(marker);
    // @endforeach

    // markerColorReset();

    // markers.forEach(function(marker) {
    //     marker.addListener('click', function() {
    //         markerColorSelect(marker);
    //         showLockInfo(marker.id);
    //     });

    //     marker.addListener('dragend', function() {
    //         marker.setPosition(marker);
    //         marker.setMap(map);
    //         updateLock(marker);
    //     });
    // });

    // const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

    $('#add-marker-button').on('click', async function() {
        var newMarker = new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            draggable: true,
            price: 0,
            icon: iconSvg
        });
        markers.push(newMarker);
        markerColorReset();

        await createLock(newMarker);

        newMarker.addListener('click', function() {
            markerColorSelect(newMarker);
            showLockInfo(newMarker.id);
        });

        newMarker.addListener('dragend', function() {
            newMarker.setPosition(newMarker);
            newMarker.setMap(map);
            updateLock(newMarker);
        });
    });
}

function showInfoWindow(marker, message) {
    var infoWindow = new google.maps.InfoWindow({
        content: message
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.open(map, marker);
    });
}

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&callback=handleMapLoad';
  document.body.appendChild(script);
}

loadGoogleMaps();
</script>
@endpush