@php
    $locks = App\Models\Lock::where('active', true)->get();
    $coupon_locks = $item->locks->pluck('id')->toArray();    
    $map_locks = [];

    foreach( $locks as $lock ) {
        $open_lock_count = App\Models\Event::where('lock_id', $lock->id)->where('type', 'openLock')->count();
        $discard_coupon_count = App\Models\Event::where('lock_id', $lock->id)->where('type', 'discardCoupon')->count();
        $redeem_coupon_count = App\Models\Event::where('lock_id', $lock->id)->where('type', 'redeemCoupon')->count();

        $map_locks[] = (object) [
            ...$lock->toArray(),
            'use' => in_array($lock->id, $coupon_locks),
            'open_lock_count' => $open_lock_count,
            'discard_coupon_count' => $discard_coupon_count,
            'redeem_coupon_count' => $redeem_coupon_count,
        ];
    }
@endphp

<div class="card-box mb-3">
    <div class="form-row d-flex align-items-center">
        <div class="col-md-3">
            <div class="input-group">
                <input type="text" class="form-control" id="filterAddress" placeholder="Cím keresés">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="searchButton" onclick="filter()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <select class="form-control" id="filterDistrict" onchange="filter()">
                <option selected value="">Kerület kiválasztása</option>
                <option value="I.">I. kerület</option>
                <option value="II.">II. kerület</option>
                <option value="III.">III. kerület</option>
                <option value="IV.">IV. kerület</option>
                <option value="V.">V. kerület</option>
                <option value="VI.">VI. kerület</option>
                <option value="VII.">VII. kerület</option>
                <option value="VIII.">VIII. kerület</option>
                <option value="IX.">IX. kerület</option>
                <option value="X.">X. kerület</option>
                <option value="XI.">XI. kerület</option>
                <option value="XII.">XII. kerület</option>
                <option value="XIII.">XIII. kerület</option>
                <option value="XIV.">XIV. kerület</option>
                <option value="XV.">XV. kerület</option>
                <option value="XVI.">XVI. kerület</option>
                <option value="XVII.">XVII. kerület</option>
                <option value="XVIII.">XVIII. kerület</option>
                <option value="XIX.">XIX. kerület</option>
                <option value="XX.">XX. kerület</option>
                <option value="XXI.">XXI. kerület</option>
                <option value="XXII.">XXII. kerület</option>
                <option value="XXIII.">XXIII. kerület</option>
            </select>
        </div>
        {{--
        <div class="col-md-3">
            <select class="form-control" id="filterLevel" onchange="filterLevel(this.value)">
                <option value="">LIT szintek</option>
                <option value="1">1. szint</option>
                <option value="2">2. szint</option>
                <option value="3">3. szint</option>
                <option value="4">4. szint</option>
            </select>
        </div>
        --}}
        <div class="col-md-2">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="filterUse" name="filterUse" onclick="filter()">
                <label class="form-check-label" for="filterUse">Kihelyezett LIT-ek</label>
            </div>
        </div>
        {{--
        <div class="col-md-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="szabadLitek" name="szabadLitek">
                <label class="form-check-label" for="szabadLitek">Csak szabad LIT helyek mutatása</label>
            </div>
        </div>
        --}}
        <div class="col-md-4">
            <button id="select_all_marker" class="btn btn-primary float-right" type="button" onclick="selectAllLock()">
                Összes LIThely kijelölése
                <span id="loading_spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            </button>
        </div> 
    </div>
</div>

<div id="alert_warning" class="alert alert-warning alert-dismissible fade show d-none" role="alert">
    <strong>Összes LIT hely kijelölése folyamatban.</strong> 
    Kijelölve: <span id="lit_selected">0</span>
</div>

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <span class="mr-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0F6CBD" class="bi bi-info-circle-fill" viewBox="0 2 19 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
        </svg>
    </span>
    <strong>LIT hely kiválasztása</strong> 
    Jelöld ki, hogy melyik LIT helyeken szeretnéd, hogy kuponjaid megjelenjenek. Kiválaszthatod őket egyesével, vagy többet is egyszerre.
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>

<div id="map" class="mb-4" style="height: 50vh;"></div>

<div class="card mb-4">
    <div class="card-header m-0 p-0 pb-4" style="background: #F7FAFC">
        <h3 class="card-title d-flex mb-0"> 
            <span class="flex-grow-1 align-self-center">Kijelölt Lit-ek</span> 
        </h3>
    </div>
    <div class="card-body" style="border-radius: 20px">
        <table id="markerList" class="table">
            <thead style="background: #D2E8F4; border-radius: 20px;">
                <tr>
                    @foreach ([
                        'Cím',
                        'Állapot',
                        //'Ár (nyitás)',
                        //'Ár (beváltás)',
                        'Összes nyitás',
                        'Összes beváltás',
                        '',
                    ] as $th)
                    <th 
                        scope="col" 
                        @if($loop->index == 0)style="border-bottom-left-radius: 15px;border-top-left-radius: 15px;"@endif
                        @if($loop->last)style="border-bottom-right-radius: 15px;border-top-right-radius: 15px;"@endif
                    >{{__($th)}}</th>
                    @endforeach
                </tr>
            </thead>
        </table>
    </div>
</div>

@push('scripts')
<script>
new DataTable('#markerList', {
    dom: 'Plfrtip',
    bLengthChange: false,
    ajax: {
            url  : '{{ route('admin.locks.coupon_lock', [$item->id]) }}',
            dataSrc:"",
            type : 'GET',
        },
    columns: [
        { "data": "address" },
        { 
            "data": "active",
            "render": function(data, type, row) {
                return data ? '<span class="dot-green"></span> elérhető' : '<span class="dot-red"></span> nem elérhető'; 
            }
        },
        { "data": "open_lock_count" },
        { "data": "redeem_coupon_count" },
        { 
            "data": null,
            "render": function(data, type, row) {
                return  '<a href="javascript:void(0)" onclick="removeMarker('+ data.id +');">' +
                        '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#dc3545" class="bi bi-x" viewBox="0 0 16 16">' +
                        '<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>' +
                        '</svg>' +
                        '</a>';
            }
        },
    ],
    search: {
            smart: true,
            regex: true
        },
});

async function removeMarker(id) {
    markers.forEach(function(marker){
        if(marker.id == id) {
            updateLock(marker, true, function() {
                var table = $('#markerList').DataTable();
                table.ajax.reload();
                return true;
            });
        } 
    });
}

function filter() {    
    let filter = {
        address: $('#filterAddress').val() ? true : false,
        district: $('#filterDistrict').val() ? true : false,
        use: $('#filterUse').prop('checked') ? true : false,
    }
    markerCluster.clearMarkers();

    markers.forEach(function(marker){
        isVisible = true;

        // address
        if (filter.address && marker.address.toLowerCase().indexOf($('#filterAddress').val().toLowerCase()) === -1) 
            isVisible = false;     

        // district
        if (filter.district && marker.district !== $('#filterDistrict').val()) 
            isVisible = false;
        
        // use
        if (filter.use && !marker.use) 
            isVisible = false;

        console.log(isVisible);

        marker.setVisible(isVisible);
    });

    markerCluster.addMarkers(markers)
}

/*
function filterLevel(value) {
    markers.forEach(function(marker){
        if(marker.level == value)
            marker.setVisible(true);
        else
            marker.setVisible(false);

        if(!value)
            marker.setVisible(true);
    });
}
*/

function initMap() {

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

    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)
    };

    function markerColorReset() {
        markers.forEach(function(marker){
            if(marker.use) {
                iconSvg.fillColor = 'hsl(120, 50%, 60%)';
            } else {
                iconSvg.fillColor = 'hsl(0, 0%, 60%)';
            }
           marker.setIcon(iconSvg);
        });
    }

    window.markers = [];
    @foreach($map_locks as $lock)
    @php
        $open_discard_percentage = ($lock->discard_coupon_count != 0) ? intval(($lock->discard_coupon_count / $lock->open_lock_count) * 100) : 0;
        $open_redeem_percentage = ($lock->redeem_coupon_count != 0) ? intval(($lock->redeem_coupon_count / $lock->open_lock_count) * 100) : 0;
        $district = '';

        if (strpos($lock->address, 'kerület') !== false) {
            $address_parts = explode(' ', $lock->address);
            $key = array_search('kerület,', $address_parts);
                
            if ($key !== false && $key > 0)
                $district = $address_parts[$key - 1];
        }
    @endphp
    var contentString = 
    '<div>' +
        '<p>Cím: {{$lock->address}}</p>' + 
        '<p>Nyitási díj: {{$lock->open_price}} Kredit</p>' + 
        '<p>Beváltási díj: {{$lock->redeem_price}} Kredit</p>' + 
        '<p>Felvétel / visszarakás: {{$open_discard_percentage}}%</p>' + 
        '<p>Felvétel / beváltás: {{$open_redeem_percentage}}%</p>' + 
        //'<p>discard_coupon_count: {{$lock->discard_coupon_count}} open_lock_count: {{$lock->open_lock_count}} redeem_coupon_count: {{$lock->redeem_coupon_count}}</p>'
    '</div>';

    var marker = new google.maps.Marker({
        id: '{{ $lock->id }}',
        use: {{ $lock->use ? "true" : "false" }},
        position: { lat: {{ $lock->latitude }}, lng: {{ $lock->longitude }} },
        map: map,
        district: '{{ $district }}',
        address: '{{$lock->address}}',
        level: '{{$lock->level}}',
        draggable: false,
        icon: iconSvg,
        content: contentString,
    });
    marker.addListener('click', function() {
        console.log('marker.addListener');
        updateLock(this, true);

        var table = $('#markerList').DataTable();
        table.ajax.reload();
    });
    markers.push(marker);
    @endforeach

    markerColorReset();

    var infoWindow = new google.maps.InfoWindow();

    markers.forEach(function(marker) {
        google.maps.event.addListener(marker, 'mouseover', function () {
            infoWindow.setContent(this.content);
            infoWindow.open(map, this);
        });
    });

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

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

    google.maps.event.addListener(drawingManager, "rectanglecomplete", function (rectangle) {
        listMarkersInRectangle(rectangle);
        rectangle.setMap(null);
    });

    function listMarkersInRectangle(rectangle) {
        var markersInRectangle = markers.filter(function(marker) {
            var bounds = rectangle.getBounds();
            return bounds.contains(marker.getPosition());
        });

        markersInRectangle.forEach(function(marker) {
            updateLock(marker);
        });

        var table = $('#markerList').DataTable();
        table.ajax.reload();
    }

    window.updateLock = async function(marker, markerRemove = false, callback = function() {}) {                   
        if(marker.use && !markerRemove) return true;   
        
        $.ajax({
            url: '{{ route('admin.coupons.lock', [':coupon', ':lock']) }}'.replace(':coupon', {{$item->id}}).replace(':lock', marker.id),
            type: 'POST',
            data: JSON.stringify({}),
            contentType: 'application/json',
            success: function(response) {   
                if(markerRemove)                 
                marker.use = !marker.use;
                else
                marker.use = true;
            
                markerColorReset();
                callback();
                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);
            }
        });
    }

    window.selectAllLock = async function() {
        $('#loading_spinner').removeClass('d-none');
        $('#alert_warning').removeClass('d-none');
        $('#select_all_marker').prop( "disabled", true );
        window.count = 0; 

        var markerUseFalseCount = markers.filter(function(marker) {
            return !marker.use;
        }).length;

        if(markerUseFalseCount == 0) {
            $('#loading_spinner').addClass('d-none');
            $('#alert_warning').addClass('d-none');
            $('#select_all_marker').prop( "disabled", false );
            return true;
        }

        markers.forEach(function(marker){
            updateLock(marker, false, function() {
                window.count++;
                $('#lit_selected').html(window.count + ' / ' + markerUseFalseCount);

                if(markerUseFalseCount <= window.count) {
                    $('#loading_spinner').addClass('d-none');
                    $('#alert_warning').addClass('d-none');
                    $('#select_all_marker').prop( "disabled", false );
                    var table = $('#markerList').DataTable();
                    table.ajax.reload();
                }
            });
        });   
    }
}

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