@extends('frontend')

@section('styles')

@endsection
@section('content')

    <div class="fs-container">


        <div class="fs-inner-container content" style="padding-top: 80px;">
            <div class="fs-content">

                <!-- Search -->
                <section class="search">

                    <div class="row">
                        <div class="col-md-12">

                            <!-- Row With Forms -->
                            <div class="row with-forms">

                                <!-- Main Search Input -->
                                <div class="col-fs-6">
                                    <div class="input-with-icon">
                                        <i class="sl sl-icon-magnifier"></i>
                                        <input type="text" placeholder="What are you looking for?" value="">
                                    </div>
                                </div>

                                <!-- Main Search Input -->
                                <div class="col-fs-6">
                                    <div class="input-with-icon location">

                                        <input type="text" placeholder="Destination, city, address" value="">
                                        <a href="#"><i class="fa fa-dot-circle-o"></i></a>
                                    </div>
                                </div>


                                <!-- Filters -->
                                <div class="col-fs-12">


                                    <!-- Panel Dropdown -->
                                    <div class="panel-dropdown wide">
                                        <a href="#">Lọc theo tiện ích</a>
                                        <div class="panel-dropdown-content checkboxes">

                                            <!-- Checkboxes -->
                                            <div class="row">
                                                @foreach ($amenities->chunk($amenities->count() / 2) as $chunk)
                                                    <div class="col-md-6">
                                                        @foreach ($chunk as $item)
                                                            @php $id = uniqid(); @endphp
                                                            <input id="check-{{ $id }}" type="checkbox" name="amenities[]">
                                                            <label for="check-{{ $id }}">{{ $item->name }}</label>

                                                        @endforeach
                                                    </div>

                                                @endforeach
                                            </div>

                                            <!-- Buttons -->
                                            <div class="panel-buttons">
                                                <button class="panel-cancel">Hủy</button>
                                                <button class="panel-apply">Áp dụng</button>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- Panel Dropdown / End -->

                                    <!-- Panel Dropdown -->
                                    <div class="panel-dropdown">
                                        <a href="#">Bán kính khoảng cách</a>
                                        <div class="panel-dropdown-content">
                                            <input class="distance-radius" type="range" min="1" max="10" step="0.1" value="1" data-title="Bán kính từ vị trí hiện tại của bạn">
                                            <div class="panel-buttons">
                                                <button class="panel-cancel">Hủy</button>
                                                <button class="panel-apply">Áp dụng</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Panel Dropdown / End -->

                                </div>
                                <!-- Filters / End -->

                            </div>
                            <!-- Row With Forms / End -->

                        </div>
                    </div>

                </section>
                <!-- Search / End -->


                <section class="listings-container margin-top-30" id="listing">


                </section>

            </div>
        </div>
        <div class="fs-inner-container map-fixed" style="padding-top: 80px;">

            <!-- Map -->
            <div id="map-container">
                <div id="map" data-map-zoom="9" data-map-scroll="true" style="position: relative; overflow: hidden;">
                    <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);">
                        <div class="gm-err-container">
                            <div class="gm-err-content">
                                <div class="gm-err-icon"><img
                                            src="http://maps.gstatic.com/mapfiles/api-3/images/icon_error.png"
                                            draggable="false" style="user-select: none;"></div>
                                <div class="gm-err-title">Oops! Có lỗi xảy ra.</div>
                                <div class="gm-err-message">Chúng tôi đang cố gắng khắc phục sớm nhất có thể. Bạn vui lòng quay lại sau nhé
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
<!-- Maps -->
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8"></script>
<script type="text/javascript" src="/frontend/scripts/infobox.min.js"></script>
<script type="text/javascript" src="/frontend/scripts/markerclusterer.js"></script>
<script type="text/javascript" src="/js/gmap.js"></script>

<script>
    // infoBox Rating Type
    var infoBox_ratingType = 'numerical-rating';

    var map = '';

    $('.listing-item-container').on('mouseover', function () {
        var listingAttr = $(this).data('marker-id');
        if (listingAttr !== undefined) {
            var listing_id = $(this).data('marker-id') - 1;
            var marker_div = allMarkers[listing_id].div;
            $(marker_div).addClass('clicked');
            $(this).on('mouseout', function () {
                if ($(marker_div).is(":not(.infoBox-opened)")) {
                    $(marker_div).removeClass('clicked');
                }
            });
        }
    });

    $(document).on('click', '.link-pagination', function (e) {
        e.preventDefault();

        var href = $(this).attr('data-href');

        $.ajax({
            url: href,
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#listing').html(response.html);

                data = response.locations;
                $.each(data, function (i, item) {


                    var marker = map.addMarker({
                        lat: item.lat,
                        lng: item.lng,
                        //scaledSize : new google.maps.Size(22, 32),
                        //  icon: '/images/school.png',
                        infoWindow: {
                            content: item.name
                        }
                    });


                    // marker_schools.push(marker);
                });

                map.setCenter(response.center.lat, response.center.lng);
            }
        });
    });

    $(document).ready(function () {
        map = new GMaps({
            div: '#map',
            lat: -12.043333,
            lng: -77.028333,
            zoom: 13,
        });

//        map.drawRoute({
//            origin: [21.172507007037446, 106.06212340942386],
//            destination: [21.0157524, 105.79258449999998],
//            travelMode: 'driving',
//            avoidHighways: true,
//            strokeColor: '#131540',
//            strokeOpacity: 0.6,
//            strokeWeight: 6
//        });

        $.ajax({
            url: '{{ url('map/hostels') }}',
            type: 'get',
            dataType: 'json',
            success: function (response) {
                $('#listing').html(response.html);

                data = response.locations;
                $.each(data, function (i, item) {


                    var marker = map.addMarker({
                        lat: item.lat,
                        lng: item.lng,
                        //scaledSize : new google.maps.Size(22, 32),
                        //  icon: '/images/school.png',
                        infoWindow: {
                            content: item.content
                        },
                        click: function (e) {
                            map.cleanRoute();
                            map.drawRoute({
                                origin: [c_lat, c_lng],
                                destination: [item.lat, item.lng],
                                travelMode: 'driving',
                                avoidHighways: true,
                                strokeColor: '#131540',
                                strokeOpacity: 0.6,
                                strokeWeight: 6
                            });

                            if (c_lat !== '' && c_lng !== '') {
                                map.addMarker({
                                    lat: c_lat,
                                    lng: c_lng,
                                    //scaledSize : new google.maps.Size(22, 32),
                                    //  icon: '/images/school.png',
                                    infoWindow: {
                                        content: 'Vị trí của bạn'
                                    }
                                });
                            }
                        }
                    });

                    map.setCenter(response.center.lat, response.center.lng);

                    // marker_schools.push(marker);
                });
            }
        });
    });
</script>
@endpush