@extends('socialite::layouts.default')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-2">
            @include('socialite::partials/home-leftbar',compact('trending_tags'))
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-inline filter-bar filter-map" id="items-type-form">
                        <div class="col-md-12 search-map-filters" id="search-map-items-list">
                            <div class="row flex-center-left">
                                <div class="form-group input-search">
                                    {{-- <label class="form-input-name" for="item-name" >Name</label> --}}
                                    <input class="form-control" type="text" name="item_name" id="item-name" placeholder="{{trans('common.search_placeholder')}}" />
                                    <input id="search-by-place" type="text" placeholder="{{trans('common.google_map_placeholder')}}">

                                </div>
                                <div class="form-group form-check form-check-inline">
                                    <a name="search-name" id="submit-name" class="btn btn-primary">{{trans('common.search')}}</a>
                                </div>
                                <div class="form-group form-check form-check-inline icon-img brewery">
                                    <input class="form-check-input" type="checkbox" id="breweries">
                                    <label class="form-check-label" for="breweries">{{ trans('common.menu.breweries') }}</label>
                                </div>
                                <div class="form-group form-check form-check-inline" style="display: none;">
                                    <input class="form-check-input" type="checkbox" id="events">
                                    <label class="form-check-label" for="events">Events</label>
                                </div>
                                <div class="form-group form-check form-check-inline icon-img promoter">
                                    <input class="form-check-input" type="checkbox" id="promotors">
                                    <label class="form-check-label" for="promotors">{{ trans('common.menu.promoters') }}</label>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-12 search-map-filters criteria" id="search-map-items-list">
                            <div class="flex-center-left row">
                                {{-- <a class="btn btn-primary search-filter" id="filter-category">Category</a>--}}
                                <div class="form-group">
                                    <a class="btn btn-transparent-black white">
                                        <span class="search-filter" id="filter-rating">{{trans('common.rating')}}</span>
                                        <span id="rating-value"></span>
                                        <i id="clear-rating" class="fa fa-times clear-filter" style="display: none;"></i>
                                    </a>
                                </div>
                                <div class="form-group">
                                    <a class="btn btn-transparent-black white">
                                        <span class="search-filter" id="filter-beer-type">{{trans('common.beer_type')}}</span>
                                        <span id="beer-type-value"></span>
                                        <i id="clear-beer-type" class="fa fa-times clear-filter" style="display: none;"></i>
                                    </a>
                                </div>
                                <div class="form-group">
                                    <a class="btn btn-transparent-black white">
                                        <span class="search-filter" id="filter-beer-name">{{trans('common.linked_beers')}}</span>
                                        <span id="beer-name-value"></span>
                                        <i id="clear-beer-name" class="fa fa-times clear-filter" style="display: none;"></i>
                                    </a>
                                </div>
                                <div class="form-group">
                                    <a class="btn btn-transparent-black white" style="display: none;">
                                        <span class="search-filter" id="filter-event-dates">Dates</span>
                                        <span id="event-dates-value"></span>
                                        <i id="clear-event-dates" class="fa fa-times clear-filter"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div id="search-modal" class="tooltip-custom" style="display: none;">
                            <div class="modal-header">
                                <h3></h3>
                            </div>
                            <div class="modal-body">
                                <span id="filter-beer-name-block" class="filter-block form-group form-inline flex-center" style="display: none;">
                                    <label class="form-beer-name control-label" for="beer-name" >Name</label>
                                    <input class="form-control" type="text" name="beer_name" id="beer-name" />
                                </span>
                                <span id="filter-beer-type-block" class="filter-block form-group form-inline flex-center" style="display: none;">
                                    {{ Form::label('type', trans('beers.type'), ['class' => 'control-label']) }}
                                    {{ Form::select('type', [null => trans('beers.select_type')] + $beerTypes , null, ['class' => 'form-control select2 col-sm-6', 'id' => 'beer-type']) }}
                                </span>
                                <span id="filter-event-dates-block" class="filter-block form-group form-inline" style="display: none;">
                                    <div class="input-group date form_datetime">
                                        <label class="form-event-start-date-label control-label" for="event-start-date" >Start date</label>
                                        <input type="text" class="form-control" name="event_start_date" id="event-start-date" placeholder="01/01/1970" value=""/>
                                        <span class="input-group-addon addon-right calendar-addon">
                                            <span class="fa fa-calendar"></span>
                                        </span>
                                    </div>
                                    <div class="input-group date form_datetime form-group form-inline flex-center">
                                        <label class="form-event-end-date-label control-label " for="event-end-date" >End date</label>
                                        <input type="text" class="form-control" name="event_end_date" id="event-end-date" placeholder="01/01/1970" value=""/>
                                        <span class="input-group-addon addon-right calendar-addon">
                                            <span class="fa fa-calendar"></span>
                                        </span>
                                    </div>
                                </span>
                                <span id="filter-rating-block" class="filter-block form-group form-inline flex-center" style="display: none;">

                                    <span id="rating-filter" data-value=""></span>
                                    <span class="rating-text-full">
                                        <span class="rating-text"></span><span> / 5 stars</span>
                                    </span>
                                </span>

                            </div>
                            <div class="modal-footer">
                                    <button type="button" class="btn btn-transparent no-border pull-left tooltip-close">{{ trans('socialite::common.close') }}</button>
                                    <button type="button" class="btn btn-primary" id="filter-add" data-target="">Apply</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-5">
                    <div class="row sorting-container">
                        <div class="col-sm-5 results-container">
                            <span id="total"></span> {{trans('common.results')}}
                        </div>
                        <div class="col-sm-7">
                            <span class="label-small">{{trans('common.sort_by')}}: </span>
                            <select class="form-control" id="map_order_by">
                                <option value="created_at-DESC">{{trans('common.most_recent')}}</option>
                                <option value="name-ASC">{{trans('common.name')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="center">
                        <ul id="items-pagination" class="pagination-sm"></ul>
                    </div>
                    <div class="list-group map-list" id="items-list"></div>
                </div>
                <div class="col-md-7 sticky">
                    <div class="map-container" >
                        <div id="map" data-spy="affix" data-offset-top="200"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

@endsection

@section('bottom_js')
@parent

<script src={{asset('js/async-each.js')}}></script>

<script src={{asset('js/jquery.twbsPagination.min.js')}}></script>

<script src={{asset('js/google-maps-markerclusterer.js')}}></script>
<script>
    const ICONS_URL = "{{asset('images/icons')}}";

    const ITEM_TYPE_BREWERY = "{{trans("common.brewery")}}";
    const ITEM_TYPE_EVENT = "{{trans("socialite::common.event")}}";
    const ITEM_TYPE_PROMOTOR = "{{trans("common.promoter")}}";

    const ITEMS_PER_PAGE = 10;

    var MONTHS_DICT = {
        '01': 'JANUARY',
        '02': 'FEBRUARY',
        '03': 'MARCH',
        '04': 'APRIL',
        '05': 'MAY',
        '06': 'JUNE',
        '07': 'JULY',
        '08': 'AUGUSTUS',
        '09': 'SEPTEMBER',
        '10': 'OCTOBER',
        '11': 'NOVEMBER',
        '12': 'DECEMBER'
    };

    const PAGE_SEARCH_BY_COORDS = 'page_search_by_coord';
    const PAGE_SEARCH_BY_NAME = 'page_search_by_name';

    var checkboxes = [];

    checkboxes[0] = {id: "breweries", "label": "Breweries", "checked": false, "disabled": false};
    checkboxes[1] = {id: "events", "label": "Events", "checked": false, "disabled": false};
    checkboxes[2] = {id: "promotors", "label": "Promotors", "checked": false, "disabled": false};

    var currentPage = 1;
    var currentBounds = {};
    var markers = [];

    var pagesSearchMode = PAGE_SEARCH_BY_COORDS;

    var filters = {
        beerName : '',
        category : '',
        beerType : '',
        dates : '',
        rating : ''
    };


    /* Pseudo Mutex to lock events concurrency */
    var itemsMapLock = false;

    var allow_google_maps_event = true;

    function getTotalPagesByCoords(callback) {

        var datas = {
            _token: $('[name="csrf_token"]').attr('content'),
            datas: {types: checkboxes, coords: currentBounds,name: name, searchFilters : filters}
        };

        $.ajax({
            type: "POST",
            url: base_url + 'ajax/get-pages-count-by-coords?page=' + currentPage + '&items-per-page=' + ITEMS_PER_PAGE,
            data: datas,
            success: function (result) {

                result.items == 0 ? result.items = 1 : result.items;
                callback(result.items);
            },
            dataType: 'json'
        });

    }

    function getTotalPagesByName(name, callback) {

        var datas = {
            _token: $('[name="csrf_token"]').attr('content'),
            datas: {types: checkboxes, name: name, searchFilters : filters}
        };

        $.ajax({
            type: "POST",
            url: base_url + 'ajax/get-pages-count-by-name?page=' + currentPage + '&items-per-page=' + ITEMS_PER_PAGE,
            data: datas,
            success: function (result) {

                result.items == 0 ? result.items = 1 : result.items;
                callback(result.items);
            },
            dataType: 'json'
        });

    }

    function generateListItems(items) {

        var itemsHtml = "";

        var itemsTypes = [];

        itemsTypes['brewery'] = ITEM_TYPE_BREWERY;
        itemsTypes['event'] = ITEM_TYPE_EVENT;
        itemsTypes['promoter'] = ITEM_TYPE_PROMOTOR;

        if (items.length > 0) {

            $('#total').html(items.length);

            for (var i = 0; i < items.length; i++) {

                var item = items[i];

                var leftBlock="";
                var location="";
                var categoryBlock = "";
                var likesBlock = "";
                var geo_location_warning = false;

                switch (item.type) {
                    case 'brewery':

                        leftBlock =
                            '<div class="col-sm-4 list-image" style="background-image: url('+item.avatarUrl+')">' +

                            '</div>';

                        if (item.brewery.full_address) {
                            location = item.brewery.full_address;
                        }

                        var id = item.brewery.id;

                        if( (item.brewery.latitude == 0 || item.brewery.latitude == null) && (item.brewery.longitude == 0 || item.brewery.longitude == null) ) {
                            geo_location_warning = true;
                        }

                        break;
                    case 'event':

                        var leftDate = item.event.start_date;
                        var matches = leftDate.match(/[0-9]{4}\-([0-9]{2})\-([0-9]{2})\ [0-9]{2}\:[0-9]{2}\:[0-9]{2}/i)

                        var leftBlock =
                            '<div class="col-sm-4">' +
                            '<h3><div class=" text-center">' + MONTHS_DICT[matches[1]] + '</div><div class=" text-center">' + matches[2] + '</div></h3>' +
                            '</div>';

                        location = item.event.location;
                        var id = item.event.id;

                        break;
                    case 'promoter':

                        leftBlock =
                            '<div class="col-sm-4 list-image" style="background-image: url('+item.avatarUrl+')">' +
                            '</div>';

                        if (item.promoter.full_address) {
                            location = item.promoter.full_address;
                        }

                        categoryBlock = '<div class="location"><i class="fa fa-circle "></i>     ' +
                            '<p class="mb-1" style="display: inline;">' + item.promoter.typeTranslation + '</p>' +
                            '</div>';

                        likesBlock = '<div class="location"><i class="fa fa-thumbs-o-up"></i>     ' +
                            '<p class="mb-1" style="display: inline;">' + item.promoter.likesCount + ' likes</p>' +
                            '</div>';

                        var id = item.promoter.id;

                        if( (item.promoter.latitude == 0 || item.promoter.latitude == null) && (item.promoter.longitude == 0 || item.promoter.longitude == null) ) {
                            geo_location_warning = true;
                        }

                        break;
                }

                itemsHtml +=

                    '<a href="' + base_url + item.username + '/timeline">' +
                    '<div href="#" value="' + id + '" class="list-group-item list-group-item-action flex-column align-items-start map-listed-item">' +
                    leftBlock +
                    '<div class="col-sm-8">' +
                    '<div class="d-flex w-100 justify-content-between ">' +
                    '<div class="icon-img" style="background-image: url('+ ICONS_URL + '/' + item.type + '-new-list-item.svg)">'+
                    '</div>'+
                    /* '<img style="height : 50px; width: 40px; float: left;" src="' + ICONS_URL + '/' + item.type + '-list-item.png">' +*/
                    '<h6>' + itemsTypes[item.type] + ' </h6>' +
                    '<h5 class="mb-1">' + item.name + '</h5>' +
                    '</div>' +
                    categoryBlock;
                    if (location != ''){
                        itemsHtml += '<div class="location"><i class="fa fa-map-marker"></i>     ' +
                        '<p class="mb-1" style="display: inline;">' + location + '</p></div>';
                    }
                    itemsHtml += likesBlock;

                    if(geo_location_warning) {
                        itemsHtml += '<div class="location alert alert-warning" role="alert"><a href="{{route('contact')}}" target="_blank">Coordinates not found! Please contact the site administrator here and send the correct address of your establishment</a></div>';
                    }

                    itemsHtml += '<div class="read-more">' +
                    '<a href="' + base_url + item.username + '/timeline">{{trans('common.see_more')}}</a>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</a>';
            }
            $('#items-list').html(itemsHtml);
            initializeItemsListListeners();
        } else {
            $('#items-list').html('');
            $('#total').html(0);
        }

    }

    function reloadPagination(pagesNb) {

        $pagination = $('#items-pagination');

        $pagination.twbsPagination('destroy');
        $pagination.twbsPagination($.extend({},
            {
                totalPages: pagesNb,
                visiblePages: 5,
                initiateStartPageClick: false
            },
            {
                startPage: 1,
                totalPages: pagesNb,
                onPageClick: function (event, page) {
                    currentPage = page;
                    if(pagesSearchMode === PAGE_SEARCH_BY_COORDS) {
                        getTotalPagesByCoords(function (currentPage) {
                            reloadStack();
                        });
                    }else{
                        allow_google_maps_event = false;
                        var name = $('#item-name').val();
                        getTotalPagesByName(name, function (currentPage) {

                            getItemsByName(name, function(items){
                                relocateMap(items,function(items){
                                    resetMarkers(items, function () {
                                        loadMapMarkers(items, function () {
                                            generateListItems(items);
                                            itemsMapLock = false;
                                            allow_google_maps_event = true;
                                        });
                                    });
                                });
                            });
                        });
                    }
                }
            }));
    }

    function relocateMap(items, callback){

        // console.log(items);

        var minLat=0, maxLat=0, maxLng=0, minLng=0;
        var bounds = new google.maps.LatLngBounds();

        asyncEach(items,
            function (itemToProcess, i) {

                var item;

                switch (itemToProcess.type) {
                    case 'brewery':
                        item = itemToProcess.brewery;
                        break;
                    case 'event':
                        item = itemToProcess.event;
                        break;
                    case 'promoter':
                        item = itemToProcess.promoter;
                        break;
                }

                //console.log('lat',item.latitude);
                //console.log('lng',item.longitude);
                if(item.latitude != 0 && item.latitude != null &&  item.longitude != 0 && item.longitude != null) {

                    var geoCode = new google.maps.LatLng(item.latitude, item.longitude);

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.latitude, item.longitude),
                        map: map,
                        // label: item.name,
                        icon: item.icon,
                        animation: google.maps.Animation.DROP,
                        id: item.id,
                        type: itemToProcess.type
                    });

                    marker.addListener('mouseover', function(e) {
                        $('div[value="' + this.id + '"]').addClass('active');
                        var icon = {
                            url: ICONS_URL + '/' + marker.type + '-map-selected.png',
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        marker.setIcon(icon);
                    });

                    marker.addListener('mouseout', function(e) {
                        $('div[value="' + this.id + '"]').removeClass('active');
                        var icon = {
                            url: ICONS_URL + '/' + marker.type + '-map.png',
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        marker.setIcon(icon);
                    });


                    markers.push(marker);

                    bounds.extend(geoCode);
                }

            },
            function () {
                if(items.length > 0) {
                    map.fitBounds(bounds);
                }
                callback(items);
            });

    }

    function getItemsByLatAndLng(currentBounds, callback) {
        coords = {
            'minLat': currentBounds.minLat,
            'minLng': currentBounds.minLng,
            'maxLat': currentBounds.maxLat,
            'maxLng': currentBounds.maxLng
        };

        $.ajax({
            type: "POST",
            url: base_url + 'ajax/get-map-items-by-coords?page=' + currentPage + '&items-per-page=' + ITEMS_PER_PAGE,
            data: {_token: $('[name="csrf_token"]').attr('content'), datas: {types: checkboxes, coords: coords,name: name, searchFilters : filters}, order_by : $('#map_order_by').val()},
            success: function (result) {
                callback(result);
            }
        });
    }

    function getItemsByName(name, callback){

        if (itemsMapLock == true) {
            return;
        }

        // currentPage = 1;

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].id == $(this).attr('id')) {

                if ($(this).is(':checked')) {
                    checkboxes[i].checked = true;
                } else {
                    checkboxes[i].checked = false;
                }
            }
        }

        //console.log('filters', filters);

        $.ajax({
            type: "POST",
            url: base_url + 'ajax/get-map-items-by-name?page=' + currentPage + '&items-per-page=' + ITEMS_PER_PAGE,
            data: {_token: $('[name="csrf_token"]').attr('content'), datas: {types: checkboxes, name: name, searchFilters: filters}, order_by : $('#map_order_by').val()},
            success: function (result) {
                callback(result.items);
            }
        });
    }

    function resetMarkers(items, callback) {
        if (markers && markers.length > 0) {
            asyncEach(markers,
                function (marker, i) {
                    marker.setMap(null);
                    marker = null;
                },
                function () {
                    // markers.length = 0;
                    callback();
                }
            );
        } else {
            callback();
        }

    }

    function loadMapMarkers(items, callback) {
        asyncEach(items,
            function (itemToProcess, i) {

                var item = {};
                //console.log(itemToProcess);
                switch (itemToProcess.type) {
                    case 'brewery':
                        item = itemToProcess.brewery;
                        item.icon = {
                            url: ICONS_URL + '/' + itemToProcess.type + '-map' + '.png', // url
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        break;
                    case 'event':
                        item = itemToProcess.event;
                        item.icon = {
                            url: ICONS_URL + '/' + itemToProcess.type + '-map' + '.png', // url
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        break;
                    case 'promoter':
                        item = itemToProcess.promoter;
                        // console.log(itemToProcess);
                        item.icon = {
                            // url: ICONS_URL + '/' + itemToProcess.type + '-map' + '.png', // url
                            url: ICONS_URL + '/event-map' + '.png', // url
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        break;
                }

                if(item.latitude != 0 && item.latitude != null && item.longitude != 0 && item.longitude != null) {

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(item.latitude, item.longitude),
                        map: map,
                        // label: item.name,
                        icon: item.icon,
                        animation: google.maps.Animation.DROP,
                        id: item.id,
                        type: itemToProcess.type
                    });

                    marker.addListener('mouseover', function(e) {
                        $('div[value="' + this.id + '"]').addClass('active');
                        var icon = {
                            url: ICONS_URL + '/' + marker.type + '-map-selected.png',
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        marker.setIcon(icon);
                    });

                    marker.addListener('mouseout', function(e) {
                        $('div[value="' + this.id + '"]').removeClass('active');
                        var icon = {
                            url: ICONS_URL + '/' + marker.type + '-map.png',
                            scaledSize: new google.maps.Size(35, 37)
                        };
                        marker.setIcon(icon);
                    });

                    marker.addListener('click', function() {
                        window.location.href = base_url + itemToProcess.username + '/timeline';
                    });


                    markers.push(marker);
                }
            },
            function () {
                callback();
            }
        );

    }

    function initMapAPI(callback) {

        var myOptions =
            {
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: {lat: 50.503887, lng: 4.469936}
            };

        map = new google.maps.Map(document.getElementById("map"), myOptions);

        infoWindow = new google.maps.InfoWindow;


        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                /*  infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    infoWindow.open(map);*/
                map.setCenter(pos);
            }, function() {
                map.setCenter( {lat: 50.853887, lng: 4.359936});
                //handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            map.setCenter( {lat: 50.853887, lng: 4.359936});
            // handleLocationError(false, infoWindow, map.getCenter());
        }



        google.maps.event.addListenerOnce(map, 'tilesloaded', function(){

            if(allow_google_maps_event == true) {

                pagesSearchMode = PAGE_SEARCH_BY_COORDS;

                currentBounds = {
                    'minLat': map.getBounds().getSouthWest().lat(),
                    'minLng': map.getBounds().getSouthWest().lng(),
                    'maxLat': map.getBounds().getNorthEast().lat(),
                    'maxLng': map.getBounds().getNorthEast().lng()
                };


                callback();
            }
        });

        google.maps.event.addListener(map, 'dragend', function () {

            if(pagesSearchMode == PAGE_SEARCH_BY_NAME) {
                currentPage = 1;
            }

            pagesSearchMode = PAGE_SEARCH_BY_COORDS;

            if (itemsMapLock === true) {
                return;
            }

            itemsMapLock = true;

            currentBounds = {
                'minLat': map.getBounds().getSouthWest().lat(),
                'minLng': map.getBounds().getSouthWest().lng(),
                'maxLat': map.getBounds().getNorthEast().lat(),
                'maxLng': map.getBounds().getNorthEast().lng()
            };

            /*console.log({
                'minLat': map.getBounds().getSouthWest().lat(),
                'minLng': map.getBounds().getSouthWest().lng(),
                'maxLat': map.getBounds().getNorthEast().lat(),
                'maxLng': map.getBounds().getNorthEast().lng()
            });*/

            if(allow_google_maps_event == true) {
                callback();
            }
        });

        google.maps.event.addListener(map,'zoom_changed', function() {
            //console.log("zoom_changed");
            if(allow_google_maps_event == true) {

                if(pagesSearchMode == PAGE_SEARCH_BY_NAME) {
                    currentPage = 1;
                }

                pagesSearchMode = PAGE_SEARCH_BY_COORDS;

                currentBounds = {
                    'minLat': map.getBounds().getSouthWest().lat(),
                    'minLng': map.getBounds().getSouthWest().lng(),
                    'maxLat': map.getBounds().getNorthEast().lat(),
                    'maxLng': map.getBounds().getNorthEast().lng()
                };


                callback();
            }
        });

        var input = document.getElementById('search-by-place');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        searchBox.addListener('places_changed', function() {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }

            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function(place) {
                if (!place.geometry) {
                    //console.log("Returned place contains no geometry");
                    return;
                }

                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });

    }

    function reloadStack() {
        getItemsByLatAndLng(
            currentBounds,
            function (result) {
                var items = result.items ? result.items : [];
                resetMarkers(items, function () {
                    loadMapMarkers(items, function () {
                        generateListItems(items);
                        itemsMapLock = false;
                    });
                });
            }
        );
    }


    function loadByName(){

        var name = $('#item-name').val();
        //console.log(name);
        if (itemsMapLock == true) {
            return;
        }

        allow_google_maps_event = false;

        pagesSearchMode = PAGE_SEARCH_BY_NAME;

        currentPage = 1;
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].id == $(this).attr('id')) {

                if ($(this).is(':checked')) {
                    checkboxes[i].checked = true;
                } else {
                    checkboxes[i].checked = false;
                }
            }
        }

        getTotalPagesByName(name, function (pagesNb) {

            reloadPagination(pagesNb);

            getItemsByName(name, function(items){
                relocateMap(items,function(items){
                    resetMarkers(items, function () {
                        loadMapMarkers(items, function () {
                            generateListItems(items);
                            itemsMapLock = false;
                            allow_google_maps_event = true;
                        });
                    });
                });
            });
        });

    }

    $(document).ready(function () {

        var reload_data = presetFilterParams();

        if( reload_data ) {
            allow_google_maps_event = false;
        }

        google.maps.event.addDomListener(window, 'load', initMapAPI(
            function () {
                getTotalPagesByCoords(function (pagesNb) {
                    reloadPagination(pagesNb);
                    reloadStack();
                });
                $("#search-by-place").removeClass('hidden');
            })
        );

        $('#items-type-form :checkbox').change(function(){

            if (itemsMapLock == true) {
                return;
            }

            currentPage = 1;

            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].id == $(this).attr('id')) {

                    if ($(this).is(':checked')) {
                        checkboxes[i].checked = true;
                    } else {
                        checkboxes[i].checked = false;
                    }
                }
            }

            if($(this).attr('id') == 'events' && $(this).is(":checked")) {
                $('#filter-event-dates').show();
                $('#filter-beer-name').hide();
                $('#filter-beer-type').hide();
            }else{
                $('#filter-event-dates').hide();
                $('#filter-beer-name').show();
                $('#filter-beer-type').show();
            }
            loadByName();
        });

        $('#items-type-form :checkbox').each(function () {
            $(this).attr('checked', false);
            //loadByName();
        });

        $('#submit-name').click(function(event){
            loadByName();
        });



/*        var stickyTop = $('.map-container').offset().top;

        $(window).on('load scroll', function () {
            if ($(window).width() > 800) {
                if ($(window).scrollTop() + 70 >= stickyTop) {
                    $('.map-container').addClass('sticky');
                } else {
                    $('.map-container').removeClass('sticky');
                }
            }
        });*/

        if( reload_data ) {
            loadByName();
        }

    });

    function initializeItemsListListeners() {

        $('#items-list div').mouseover(function () {

            var target = $(this).attr('value');

            $.each(markers, function (k, marker) {

                if (marker.id == target) {

                    var icon = {
                        url: ICONS_URL + '/' + marker.type + '-map-selected.png',
                        scaledSize: new google.maps.Size(35, 37)
                    };
                } else {
                    var icon = {
                        url: ICONS_URL + '/' + marker.type + '-map.png',
                        scaledSize: new google.maps.Size(35, 37)
                    };
                }
                marker.setIcon(icon);
            });


        });

        $('#items-list div').mouseout(function () {

            $.each(markers, function (k, marker) {
                var icon = {
                    url: ICONS_URL + '/' + marker.type + '-map.png',
                    scaledSize: new google.maps.Size(35, 37)
                };
                marker.setIcon(icon);
            });

        });


    }

    /*Filters interactions */

    $('.search-filter').click(function(event){

        $('.filter-block').hide();

        if($(this).attr('id') == 'filter-beer-name'){
            $('#'+$(this).attr('id')+'-block').show();
            var p = $(this);
            var position = p.position();
            var elWidth = $(this).width();
            var offset = p.offset();
            var heading = $(this).text();
        }
        if($(this).attr('id')  == 'filter-beer-type'){
            $('#'+$(this).attr('id')+'-block').show();
            var p = $(this);
            var position = p.position();
            var elWidth = $(this).width();
            var offset = p.offset();
            var heading = $(this).text();
        }
        if($(this).attr('id')  == 'filter-event-dates'){
            $('#'+$(this).attr('id')+'-block').show();
            var p = $(this);
            var position = p.position();
            var elWidth = $(this).width();
            var offset = p.offset();
            var heading = $(this).text();
        }
        if($(this).attr('id')  == 'filter-rating'){
            $('#'+$(this).attr('id')+'-block').show();
            var p = $(this);
            var position = p.position();
            var elWidth = $(this).width();
            var offset = p.offset();
            var heading = $(this).text();
        }
        $('#search-modal').find('#filter-add').attr('data-target', $(this).attr('id'));
        $('#search-modal').css({"left": position.left + elWidth, "top": offset.top - 40});
        $('#search-modal .modal-header h3').text(heading);
        $('#search-modal').show();

    });

    $('.tooltip-close').click(function () {
       $(this).parents('.tooltip-custom').hide();
    });

    $('#filter-add').click(function(event){

        if($(this).attr('data-target') == 'filter-beer-name'){
            filters.beerName = $('#beer-name').val();
            $('#beer-name-value').html(' : '+filters.beerName);
            $('#clear-beer-name').show();
        }

        if($(this).attr('data-target') == 'filter-beer-type'){
            filters.beerType = $('#beer-type').val();
            $filters_beerType = filters.beerType;
            $('#beer-type-value').html(' : '+ window.i18n['beers']['types_values'][filters.beerType]);
            $('#clear-beer-type').show();
        }

        if($(this).attr('data-target') == 'filter-event-dates'){
            filters.dates = {startDate : $('#event-start-date').val(), endDate : $('#event-end-date').val()};
            //console.log(filters.dates.startDate+' to '+filters.dates.endDate);
            $('#event-dates-value').html(' : '+filters.dates.startDate+' to '+filters.dates.endDate);
            $('#clear-event-dates').show();
        }

        if($(this).attr('data-target') == 'filter-rating'){
            filters.rating = $('#rating-filter').attr('data-value');
            $('#rating-value').html(' : '+filters.rating );
            $('#clear-rating').show();
        }

        $('#search-modal').hide();
        loadByName();
    });

    $('.clear-filter').click(function(event){
        if($(this).attr('id') == 'clear-rating'){
            $('#rating-value').html('');
            $('#rating-filter').attr('data-value','');
            filters.rating = '';
            $(this).hide();
        }
        if($(this).attr('id') == 'clear-beer-type'){
            $('#beer-type-value').html('');
            $('#beer-type').val('');
            filters.beerType = '';
            $(this).hide();
        }
        if($(this).attr('id') == 'clear-event-dates'){
            $('#event-dates-value').html('');
            filters.dates = '';
            $(this).hide();
        }
        if($(this).attr('id') == 'clear-beer-name'){
            $('#beer-name-value').html('');
            $('#beer-name').val('');
            filters.beerName = '';
            $(this).hide();
        }

        loadByName();

    });

    $("#rating-filter").rateYo({
        rating: 0,
        precision: 0,
        starWidth: "20px",
        "starSvg": "<svg class='star-cap'>"+
        "</svg>",
        onSet: function (currentRating, rateYoInstance) {
            $('#rating-filter').attr('data-value',currentRating);
        }
    }).on("rateyo.change", function (e, data) {
        var rating = data.rating;
        $('.rating-text').text(rating);
    });

    $('.rating-text').text($("#rating-filter").rateYo("rating"));

    $('#map_order_by').change(function () {
        if(pagesSearchMode === PAGE_SEARCH_BY_COORDS) {
            getTotalPagesByCoords(function (currentPage) {
                reloadStack();
            });
        }else{
            allow_google_maps_event = false;
            var name = $('#item-name').val();
            getTotalPagesByName(name, function (currentPage) {
                getItemsByName(name, function(items){
                    relocateMap(items,function(items){
                        resetMarkers(items, function () {
                            loadMapMarkers(items, function () {
                                generateListItems(items);
                                itemsMapLock = false;
                                allow_google_maps_event = true;
                            });
                        });
                    });
                });
            });
        }
    });

    function presetFilterParams() {
        if($('#beer-name').val() != ''){
            filters.beerName = $('#beer-name').val();
            $('#beer-name-value').html(' : '+filters.beerName);
            $('#clear-beer-name').show();
        }

        if($('#beer-type').val() != ''){
            filters.beerType = $('#beer-type').val();
            $filters_beerType = filters.beerType;
            $('#beer-type-value').html(' : '+ window.i18n['beers']['types_values'][filters.beerType]);
            $('#clear-beer-type').show();
        }


        if($('#rating-filter').attr('data-value') != ''){
            filters.rating = $('#rating-filter').attr('data-value');
            $('#rating-value').html(' : '+filters.rating );
            $('#clear-rating').show();
        }

        if($('#beer-name').val() != '' || $('#beer-type').val() != '' || $('#rating-filter').attr('data-value') != '' || $('#item-name').val() != '') {
            return true;
        } else {
            return false;
        }
    }

</script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.api_key') }}&libraries=places"></script>
@endsection