@extends('frontend3_map')

@section('content')


    <div class="item-map-section" style="height: 91vh;">
        <button id="toggleBtn-listItemColumn--show" class="list-item-action--show"><i class="ion-ios-arrow-right"></i>
        </button>
        <div class="list-items-col resizeable-col">
            <div class="list-items__header">
                <div class="header-wrapper">
                    <div class="left-side flex-item flex-item-tw">
                        <a href="#" id="toggleBtn-listItemColumn--hide" class="header-action-btn icon-btn"><i
                                    class="ion-ios-arrow-left"></i></a>
                    </div>
                    <div class="center-side flex-item flex-item-dw">
                        <h1 class="header-title text-center ht-oneline">Danh sách nhà</h1>
                    </div>
                    <div class="right-side flex-item flex-item-tw">
                        <a href="#" id="toggleBtn-listItemSearch" class="header-action-btn icon-btn"><i
                                    class="ion-ios-search-strong"></i></a>
                    </div>
                </div>
                <div id="listItemSearch" class="header-search">
                    <div class="flex flex-ai-center">
                        <div class="flex-item flex-item-dw">
                            <div class="form-group">
                                <input type="text" class="search-input form-control" placeholder="Tìm kiếm"
                                       id="search-address">
                                <button class="search-submit"><i class="ion-ios-search-strong"></i></button>
                            </div>
                        </div>
                        <div class="flex-item flex-item-tw ml-12">
                            <a href="#" class="search-dismiss"><i class="ion-android-close"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list-items__main list--scrollable">
                <div class="list-items">
                </div>
                {{--<div class="ht-loading" id="loading"></div>--}}
            </div>
            <div class="list-items__filter">
                <div id="listItemFilter" class="filter__input-content">
                    <div class="content-inner clearfix">
                        <div class="form-group">
                            <label>Tỉnh / Thành phố</label>
                            <select class="select2-form-control form-control" id="province">
                                <option value="" selected>Chọn</option>
                                @foreach($provinces as $province)
                                    <option data-lat="{{ $province->lat }}" data-lng="{{ $province->lng }}"
                                            value="{{ $province->provinceid }}">{{ $province->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Quận / Huyện</label>
                            <select class="select2-form-control form-control" id="district">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Xã / Phường</label>
                            <select class="select2-form-control form-control" id="ward">

                            </select>
                        </div>
                        <div class="form-group">
                            <label>Khoảng giá</label>
                            <select class="select2-form-control form-control" id="price">
                                <option value="" selected>Chọn</option>
                                <option value="1">Dưới 1 triệu</option>
                                <option value="2">Từ 1 đến 2 triệu</option>
                                <option value="3">Từ 2 đến 3 triệu</option>
                                <option value="4">Từ 3 đến 5 triệu</option>
                                <option value="5">Từ 5 đến 7 triệu</option>
                                <option value="6">Từ 7 đến 10 triệu</option>
                                <option value="7">Từ 10 đến 15 triệu</option>
                                <option value="8">Trên 15 triệu</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Tiện ích</label>
                            <div class="list-room-options">
                                @foreach ($amenities as $amenity)
                                    <div class="single-room-option">
                                        <div class="checkbox checkbox--customized"><label><input type="checkbox"
                                                                                                 class="amenities"
                                                                                                 value="{{ $amenity->id }}"
                                                ><span></span>{{ $amenity->name }}</label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Quy định</label>
                            <div class="list-room-options">
                                @foreach ($policies as $policy)
                                    <div class="single-room-option">
                                        <div class="checkbox checkbox--customized"><label><input type="checkbox"
                                                                                                 class="policies"
                                                                                                 value="{{ $policy->id }}"
                                                ><span></span>{{ $policy->name }}</label></div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" value="1" name="filter" id="filter">
                <div class="filter__label-content">
                    <div class="flex-item flex-item-dw">
                        <div class="filter__current-options">Tất cả kết quả</div>
                    </div>
                    <div class="flex-item flex-item-tw">
                        <a id="toggleBtn-listItemFilter" href="#" class="filter__toggle-input text-uppercase">Lọc</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="resize-drag-col">
            <div class="helped-resize-btn"><i class="ion-ios-arrow-back"></i></div>
        </div>
        <div class="main-loading">
            <span></span>
        </div>
        <div id="map" class="map-items-col">

        </div>
    </div>
@endsection

@push('scripts')
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwNGSYkdvi2O939bp9F2yeZHytXleYyWc&libraries=places&region=vi&language=vi&sensor=false"></script>
<script type="text/javascript" src="/js/infobox.js"></script>
<script type="text/javascript" src="/frontend/scripts/markerclusterer.js"></script>
<script type="text/javascript" src="/js/gmap.js"></script>
<script>
    var map;
    var current_lat = localStorage.getItem('current_lat');
    var current_lng = localStorage.getItem('current_lng');

    if (current_lat === null || current_lng === null) {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                if (typeof (Storage) !== 'undefined') {
                    localStorage.setItem('current_lat', position.coords.latitude);
                    localStorage.setItem('current_lng', position.coords.longitude);

                    current_lat = parseFloat(position.coords.latitude);
                    current_lng = parseFloat(position.coords.longitude);
//                    map.setCenter({
//                        lat: current_lat,
//                        lng: current_lng,
//                    });
//                    map.addMarker({
//                        lat: current_lat,
//                        lng: current_lng,
//                        title: "Vị trí của bạn",
//                        animation: google.maps.Animation.BOUNCE,
//                        icon: {
//                            url: "https://homedy.com/images/icon/map/my-location-01.png",
//                            scaledSize: new google.maps.Size(150, 100)
//                        }
//                    });
                }
            });
        }
    }

    var page = 1;

    // filter toggle

    $(document).on('keyup', '#search-address', function (e) {
        if (e.keyCode === 13) {
            GMaps.geocode({
                address: $('#search-address').val(),
                callback: function (results, status) {
                    if (status == 'OK') {
                        var latlng = results[0].geometry.location;
                        map.setCenter(latlng.lat(), latlng.lng());
                        map.addMarker({
                            lat: latlng.lat(),
                            lng: latlng.lng()
                        });

                        get_hostel_by_location(latlng.lat(), latlng.lng(), 7);

                    }
                }
            });
        }
    });

    function getValue() {
        var amenities = [];
        var policies = [];
        var province = '';
        var district = '';
        var ward = '';
        var lat = '';
        var lng = '';
        var price = 0;
        var q = '';
        var filter = 0;
        var ne_lat = map.map.getBounds().getNorthEast().lat();
        var ne_lng = map.map.getBounds().getNorthEast().lng();

        var sw_lat = map.map.getBounds().getSouthWest().lat();
        var sw_lng = map.map.getBounds().getSouthWest().lng();
        var ie = null;

        $('.amenities:checked').each(function (i) {
            amenities.push($(this).val());
        });

        $('.policies:checked').each(function (i) {
            policies.push($(this).val());
        });

        province = $('#province').val();
        district = $('#district').val();
        ward = $('#ward').val();
        lat = current_lat;
        lng = current_lng;
        price = $('#price').val();
        q = $('#query').val();
        filter = $('#filter').val() || 0;
        ie = '{{ request()->input('ie') }}';


        return {
            price: price,
            amenities: amenities,
            policies: policies,
            province: province,
            district: district,
            ward: ward,
            lat: lat,
            lng: lng,
            q: q,
            filter: filter,
            ne_lat: ne_lat,
            ne_lng: ne_lng,
            sw_lat: sw_lat,
            sw_lng: sw_lng,
            ie: ie
        }

    }

    function getData(data) {

        $.ajax({
            url: '{{ url('map-2/locations') }}',
            type: 'get',
            beforeSend: function () {
                $('.main-loading').fadeIn();
                $('.list-items').addClass('ht-on-loading')
            },
            data: data,
            dataType: 'json',
            success: function (response) {

                map.removeMarkers();
                bounds = [];
                $.each(response.locations, function (key, value) {
                    drawMap(value);
                });
                $('.list-items').removeClass('ht-on-loading').html(response.html);

                $('.main-loading').fadeOut();

            }
        });
    }

    function getData2() {
        $.ajax({
            url: '{{ url('map-2/rooms') }}',
            type: 'get',
            data: {
                lat: current_lat,
                lng: current_lng,
                page: 1
            },
            dataType: 'json',
            beforeSend: function () {
                $('#loading').show();
            },
            success: function (response) {
                current_lat = response.lat;
                current_lng = response.lng;
                $('.list-items').html(response.html);
                $('#loading').hide();
//                map = new GMaps({
//                    div: '#map',
//                    lat: response.lat,
//                    lng: response.lng,
//                    zoom: 15,
//                    clickableIcons: false,
////                    click: function () {
////                        $('.items-map').hide();
////                    },
////                    dragend: function () {
////                        var lat = map.getCenter().lat();
////                        var lng = map.getCenter().lng();
////                        var bounds = map.getBounds();
////                        var radius = getBoundsRadius(bounds);
////                        getRoomsLocation(lat, lng, radius);
////                    }
//                });

                map.removeOverlays();
                bounds = [];
                $.each(response.locations, function (key, value) {
                    drawMap(value);
                });
            }
        });
    }

    $("#toggleBtn-listItemFilter").click(function (e) {
        e.preventDefault();
        filterlist = $('#listItemFilter');
        if (filterlist.hasClass('active')) {
            filterlist.removeClass('active');
            var data = getValue();
            getData(data);
        } else {
            filterlist.addClass('active');
        }
    });


    function getMarkerbyLocation(markers, title) {
        //  console.log('-'+lng);
        for (var i = 0; i < markers.length; i++) {
            if (markers[i].title == title)
                return markers[i];
        }
    }

    function viewMarker(title) {
        var markerInstance = getMarkerbyLocation(map.markers, title);
        //  console.log(markerInstance);


        markerInstance.infoWindow.open(map, markerInstance);
    }

    function itemMouseOut() {
        map.hideInfoWindows();


    }

    $(document).on('click', '.single-item-2', function (e) {
        $('.single-item').removeClass('active');
        $(this).addClass('active');
        var hostel_id = $(this).attr('data-hostel');
        $('#hostel-' + hostel_id).show();
        var lat = $(this).attr('data-lat');
        var lng = $(this).attr('data-lng');
        var title = $(this).attr('data-title');
        var url = $(this).attr('data-url');

        window.open(url, '_blank');
        if (typeof (lat) != 'undefined' && typeof (lng) != 'undefined') {


            var markerInstance = getMarkerbyLocation(map.markers, title);
            //  console.log(markerInstance);


//
//            map.setZoom(17);
//            map.setCenter({
//                lat: parseFloat(lat),
//                lng: parseFloat(lng)
//            });
//            markerInstance.infoWindow.open(map, markerInstance);
        }


    });

    $(document).on('change', '#province', function (e) {
        var that = this;
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province'
            },
            dataType: 'html',
            success: function (response) {
                $('#district').html(response);
                $('#ward').html('');
                current_lat = $('option:selected', that).attr('data-lat');
                current_lng = $('option:selected', that).attr('data-lng');

                if (current_lat != '' && current_lng != '') {
                    map.setCenter({
                        lat: parseFloat(current_lat),
                        lng: parseFloat(current_lng),
                    });
                }

                var data = getValue();
                getData(data);

            }
        });
    });

    $(document).on('change', '#district', function (e) {
        var that = this;
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                current_lat = $('option:selected', that).attr('data-lat');
                current_lng = $('option:selected', that).attr('data-lng');

                if (current_lat != '' && current_lng != '') {
                    map.setCenter({
                        lat: parseFloat(current_lat),
                        lng: parseFloat(current_lng),
                    });
                }
                var data = getValue();
                getData(data);
                $('#ward').html(response);

            }
        });
    });


    $(document).on('change', '#ward', function (e) {

        current_lat = $('option:selected', this).attr('data-lat');
        current_lng = $('option:selected', this).attr('data-lng');

        if (current_lat != '' && current_lng != '') {
            map.setCenter({
                lat: parseFloat(current_lat),
                lng: parseFloat(current_lng),
            });

        }
        var data = getValue();
        getData(data);


    });

    function getCurrentCoor() {
        if (current_lat === null || current_lng === null) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    if (typeof (Storage) !== 'undefined') {
                        localStorage.setItem('current_lat', position.coords.latitude);
                        localStorage.setItem('current_lng', position.coords.longitude);

                        current_lat = parseFloat(position.coords.latitude);
                        current_lng = parseFloat(position.coords.longitude);

                        map.setCenter({
                            lat: current_lat,
                            lng: current_lng,
                        });
//                        map.addMarker({
//                            lat: current_lat,
//                            lng: current_lng,
//                            title: "Vị trí của bạn",
//                            animation: google.maps.Animation.BOUNCE,
//                            icon: {
//                                url: "https://homedy.com/images/icon/map/my-location-01.png",
//                                scaledSize: new google.maps.Size(150, 100)
//                            }
//                        });

//                        var data = getData();
//                        getData2();

                    }
                });
            }
        }
    }

    function drawMap(value) {
        //  var latlng = new google.maps.LatLng(value.lat, value.lng);

//        bounds.push(latlng);


        map.addMarker({
            lat: value.lat,
            lng: value.lng,
            icon: '/frontend3/icon-place-product-red.png',
            infoWindow: {
                content: value.content
            },
            scrollwheel: !0,
            title: value.name,
            label: {
                text: value.label,
                color: "white"
            },

        });

//        map.addMarker({
//            lat: current_lat,
//            lng: current_lng,
//            title: "Vị trí của bạn",
//            animation: google.maps.Animation.BOUNCE,
//            icon: {
//                url: "https://homedy.com/images/icon/map/my-location-01.png",
//                scaledSize: new google.maps.Size(150, 100)
//            }
//        });


//        overlay = map.drawOverlay({
//            lat: value.lat,
//            lng: value.lng,
//            content: value.content,
//            click: function () {
//
//                $('.items-map').hide();
//                var flag = $('[data-coor="' + value.lat + ',' + value.lng + '"]').data('flag');
//                if (flag) {
//                    $('[data-coor="' + value.lat + ',' + value.lng + '"]').show();
//                } else {
//                    $('[data-coor="' + value.lat + ',' + value.lng + '"]').hide();
//                }
//                $('[data-coor="' + value.lat + ',' + value.lng + '"]').data('flag', !flag);
//            }
//
//        });
    }

    function getBoundsRadius(bounds) {
// r = radius of the earth in km
        var r = 6378.8;
// degrees to radians (divide by 57.2958)
        var ne_lat = bounds.getNorthEast().lat() / 57.2958;
        var ne_lng = bounds.getNorthEast().lng() / 57.2958;
        var c_lat = bounds.getCenter().lat() / 57.2958;
        var c_lng = bounds.getCenter().lng() / 57.2958;
// distance = circle radius from center to Northeast corner of bounds
        var r_km = r * Math.acos(
                Math.sin(c_lat) * Math.sin(ne_lat) +
                Math.cos(c_lat) * Math.cos(ne_lat) * Math.cos(ne_lng - c_lng)
            );
        return r_km // radius in meters
    }

    function getRoomsLocation(lat, lng, radius) {
        $.ajax({
            url: '{{ url('map-2/rooms') }}',
            type: 'get',
            data: {
                lat: lat,
                lng: lng,
                radius: radius
            },
            dataType: 'json',
            success: function (response) {
                $('.list-items').html(response.html);
                map.removeOverlays();
                bounds = [];
                $.each(response.locations, function (key, value) {
                    drawMap(value);
                });
            }
        });
    }

    function get_hostel_by_location_2(lat, lng, radius) {
        $.ajax({
            url: '{{ url('map-2/locations') }}',
            type: 'get',
            data: {
                lat: lat,
                lng: lng,
                radius: radius
            },
            dataType: 'json',
            success: function (response) {
                map.removeOverlays();
                bounds = [];
                $.each(response.locations, function (key, value) {
                    drawMap(value);
                });
            }
        });
    }

    function get_hostel_by_location(lat, lng, radius) {

        if (lat == null) {
            lat = 21.0277644;
        }

        if (lng == null) {
            lng = 105.8341598;
        }

        map = new GMaps({
            div: '#map',
            lat: lat,
            lng: lng,
            zoom: 15,
            click: function () {
                map.hideInfoWindows();
            },
            clickableIcons: false,
//            markerClusterer: function(map) {
//                var options = {
//                    imagePath: '/frontend3/cluster/m'
//                };
//
//                return new MarkerClusterer(map, map.markers, options);
//            }
            {{--dragend: function () {--}}
            {{--var lat = map.getCenter().lat();--}}
            {{--var lng = map.getCenter().lng();--}}
            {{--var ne_lat = map.map.getBounds().getNorthEast().lat();--}}
            {{--var ne_lng = map.map.getBounds().getNorthEast().lng();--}}

            {{--var sw_lat = map.map.getBounds().getSouthWest().lat();--}}
            {{--var sw_lng = map.map.getBounds().getSouthWest().lng();--}}

            {{--$.ajax({--}}
            {{--url: '{{ url('map-2/locations') }}',--}}
            {{--type: 'get',--}}
            {{--beforeSend: function()--}}
            {{--{--}}
            {{--$('.main-loading').fadeIn();--}}
            {{--},--}}
            {{--data: {--}}
            {{--ne_lat: ne_lat,--}}
            {{--ne_lng: ne_lng,--}}
            {{--sw_lat: sw_lat,--}}
            {{--sw_lng: sw_lng--}}
            {{--},--}}
            {{--dataType: 'json',--}}
            {{--success: function (response) {--}}
            {{--map.removeOverlays();--}}
            {{--bounds = [];--}}
            {{--$.each(response.locations, function (key, value) {--}}
            {{--drawMap(value);--}}
            {{--});--}}

            {{--$('.main-loading').fadeOut();--}}

            {{--}--}}
            {{--});--}}

            {{--}--}}
        });


//

        google.maps.event.addListener(map.map, "projection_changed", function () {
            getMarker(lat, lng);
        });

        google.maps.event.addListener(map.map, "dragend", function () {
            getMarker(lat, lng);
        });

        google.maps.event.addListener(map.map, "zoom_changed", function () {
            getMarker(lat, lng);
        });


    }

    function getMarker(lat, lng) {
        var data = getValue();

//                                map.setCenter({
//                        lat: parseFloat(lat),
//                        lng: parseFloat(lng),
//                    });
        $.ajax({
            url: '{{ url('map-2/locations') }}',
            type: 'get',
            beforeSend: function () {
                $('.main-loading').fadeIn();
                $('.list-items').addClass('ht-on-loading')
            },
            data: data,
            dataType: 'json',
            success: function (response) {
                map.removeMarkers();
                bounds = [];

                $.each(response.locations, function (key, value) {
                    drawMap(value);

                });
                $('.list-items').removeClass('ht-on-loading').html(response.html);

                $('.main-loading').fadeOut();

                map.addMarker({
                    lat: parseFloat(lat),
                    lng: parseFloat(lng),
                    title: "Vị trí của bạn",
                    animation: google.maps.Animation.BOUNCE,
                    icon: {
                        url: "https://homedy.com/images/icon/map/my-location-01.png",
                        scaledSize: new google.maps.Size(150, 100)
                    }
                });


            }
        });
    }

    $(document).ready(function () {
        getCurrentCoor();
        $('.main-loading').fadeOut();

        var req_lat = '{{ $lat }}';
        var req_lng = '{{ $lng }}';

        if (req_lat !== '' && req_lng !== '') {
            get_hostel_by_location(req_lat, req_lng, 7);
        } else {
            get_hostel_by_location(current_lat, current_lng, 7);
        }
    });

    $('.list-items__main').scroll(function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            var that = this;
            page++;
            $.ajax({
                url: '{{ url('map-2/rooms') }}',
                type: 'get',
                data: {
                    lat: current_lat,
                    lng: current_lng,
                    page: page
                },
                beforeSend: function () {
                    $('#loading').show();
                },
                dataType: 'json',
                success: function (response) {
                    current_lat = response.lat;
                    current_lng = response.lng;
                    $('#loading').hide();
                    if (response.html != '') {
                        $('.list-items').append(response.html);
                        //   map.removeOverlays();
                        bounds = [];
//                        $.each(response.locations, function (key, value) {
//                            drawMap(value);
//                        });
                    }
                }
            });

        }
    });

</script>
@endpush