@extends('layout4')
@section('styles')
    <!-- Favicon -->
    <link rel="shortcut icon" href="{{asset('frontend3/assets2/img/favicon_16.ico')}}"/>
    <link rel="bookmark" href="{{asset('frontend3/assets2/img/favicon_16.ico')}}"/>

    <!-- CSS: Libs-->
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/bootstrap/css/bootstrap.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/ionicons/css/ionicons.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/select2/css/select2.min.css')}}">
    <link rel="stylesheet"
          href="{{asset('frontend3/assets2/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
    <link rel="stylesheet"
          href="{{asset('frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css')}}">
    {{--<!-- <link rel="stylesheet" href="frontend3/assets2/libs/bootstrap-slider/css/slider.css"> -->--}}
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/fancybox/jquery.fancybox.min.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/libs/slick/slick.css')}}">
    <link rel="stylesheet" href="frontend3/assets2/libs/slick/slick-theme.css">
    <!-- CSS: Main -->
    <link rel="stylesheet" href="{{asset('frontend3/assets2/css/main.css')}}">
    <link rel="stylesheet" href="{{asset('frontend3/assets2/css/custom.css')}}">
@endsection

@section('meta')
    <title>{{$hostel->name}}</title>
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="{{ $hostel->name }}"/>
    <meta property="og:description"
          content="{{ \Illuminate\Support\Str::words(strip_tags(html_entity_decode($hostel->desc)),100) }}"/>
    <meta property="og:image" content="{{ $hostel->image }}"/>

@endsection

@php $agent = new \Jenssegers\Agent\Agent(); @endphp
@section('content')

    @php $images = $hostel->medias @endphp

    <div id="siteContent" class="site-content">
        <div class="detail-property">
            <div class="detail-property__photos">
                <div class="detail-property__photos__gallery">
                    <div class="photo-gallery has-0{{$images->count()>5?5:$images->count()}}-items">
                        @foreach($images as $image)
                            <div class="single-gallery-item"><a
                                        href="{{$image->media}}"
                                        data-fancybox="propertyPhotoGallery" class="img-wrap"><img
                                            src="{{$image->media}}"></a></div>
                        @endforeach
                        @if($images->count()>5)
                            <button id="openPropertyGallery1" class="view-property-album remain-items-count">
                                + {{$images->count()-5}} ảnh
                            </button>
                        @endif
                    </div>
                </div>
                <div class="detail-property__photos__actions">
						<span class="d-iblock va-top" title="Thích" data-toggle="tooltip" data-placement="bottom">
							<a href="#" class="single-action active btn btn-icon ht-btn-default"><i
                                        class="ion-heart"></i></a>
						</span>
                    <span class="d-iblock va-top" title="Báo cáo sai phạm" data-toggle="tooltip"
                          data-placement="bottom">
							<a href="#modal__report-property" class="single-action btn btn-icon ht-btn-default"
                               data-toggle="modal"><i class="ion-flag"></i></a>
						</span>
                </div>
                <!-- <div class="detail-property__photos__albums"></div> -->
            </div>

            <div class="detail-property__content has-sticky-navbar mt-12">
                <div class="container container--extended">
                    <div class="clearfix">
                        <div id="stickySidebar_container" class="clearfix">

                            <div id="stickySidebar_propertyOwner" class="detail-property__right-col">
                                <div class="sticky-sidebar__inner">
                                    <div class="detail-property__owner ht-depth-1">
                                        <div class="owner-avatar-wrap">
                                            <div class="owner-avatar">
                                                <div class="ht-rectangle ratio-11">
                                                    <div class="ht-inner ht-bgcover bd-rd-circle"
                                                         style="background-image: url('{{ $hostel->user_post_image }}');"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="owner-content">
                                            <h3 class="owner-title">{{ $hostel->user_post }} </h3>
                                            <div class="owner-info mt-12">
                                                <div class="single-info single-info--verified">
                                                    <a href="#"><span class="info-icon"><i
                                                                    class="ion-android-call"></i></span><span
                                                                class="info-data ml-8">{{ $hostel->user_post_phone }}</span></a>
                                                </div>
                                            </div>
                                            <hr>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="detail-property__left-col">
                                <div id="stickyMenu_helperDiv" style="height: 38px; display: none;"></div>
                                <div id="stickyMenu_singleProperty" class="detail-property__menubar ht-depth-1"
                                     style="position: static; top: auto; left: auto; width: auto;">
                                    <ul class="list-unstyled">
                                        <li><a data-scroll="" href="#propertyDescriptionSection">Mô tả</a></li>
                                        @if($amenities)
                                            <li><a data-scroll="" href="#propertyFeaturesSection">Tiện ích</a></li>
                                        @endif
                                        @if($policies)
                                            <li><a data-scroll="" href="#propertyRulesSection">Nội quy</a></li>
                                        @endif
                                        <li><a data-scroll="" href="#propertyMapSection">Bản đồ</a></li>
                                    </ul>
                                </div>
                                <div id="propertyDescriptionSection"
                                     class="detail-property__description mt-12 ht-depth-1">
                                    <h3 class="descr-title">Thông tin mô tả</h3><h4></h4>

                                    {!! nl2br($hostel->content) !!}
                                    <hr>
                                    @if($amenities)
                                        <div id="propertyFeaturesSection">
                                            <h3 class="descr-title">Tiện ích</h3>
                                            <ul class="descr__features-list clearfix">
                                                @foreach($amenities as $amenity)
                                                    <li><img src="/files/{{ $amenity->web_image }}" width="12"
                                                             height="12"><span>{{ $amenity->name }}</span></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    @if($policies)
                                        <hr>
                                        <div id="propertyRulesSection">
                                            <h3 class="descr-title">Nội quy</h3>
                                            <ul class="descr__features-list clearfix">
                                                @foreach($policies as $policy)
                                                    <li><img src="/files/{{ $policy->web_image }}" width="12"
                                                             height="12"><span>{{ $policy->name }}</span></li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty(doubleval(trim($hostel->lat))) && !empty(doubleval(trim($hostel->lng))))
                <div id="propertyMapSection" class="detail-property__addresses pos-rel zi-400">
                    <div class="container container--extended">
                        <div class="ht-depth-1 mt-12 pa-12">
                            <div class="detail-property__addresses__details">{{ $hostel->address }}</div>
                            <div class="detail-property__addresses__details__maps">

                                <div class="map_container flex-item flex-item-dw bg-color-grey-50">
                                    <div class="map-wrapper" id="map" style="height: 100%">
                                        <!-- map here -->
                                    </div>
                                    <div class="map-actions">
                                        <a href="#" id="propertyListLocationsToggle"
                                           class="map__location__toggle-btn btn btn-default bd-rd-0 bda-c-df "><i
                                                    class="ion-ios-arrow-forward"></i></a>
                                    </div>
                                </div>

                                <div id="propertyListLocations" class="map__locations flex-item flex-item-tw">
                                    <div class="ht-wrapper">
                                        <div class="map__locations__types">
                                            <div class="row">
                                                <div class="col-xs-9">
                                                    <div class="form-group">
                                                        <select class="form-control" id="type-place">
                                                            <option value="0" selected="">Chọn loại địa điểm</option>
                                                            <option value="school">Trường học</option>
                                                            <option value="hospital">Bệnh viện</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-xs-3">
                                                    <div class="form-group">
                                                        <select class="form-control has-border-left" id="radius">
                                                            <option selected value="0.2">200m</option>
                                                            <option value="0.5">500m</option>
                                                            <option value="1">1km</option>
                                                            <option value="2">2km</option>
                                                            <option value="5">5km</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="map__locations__selected ht-styled-scroll">
                                            <div class="locations__selected__list" id="places" style="z-index: 10000">


                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="detail-property__share">
                <div class="container">
                    <div class="detail-property__share__wrap flex-ai-center flex-jc-center">
                        <div class="share-label flex-item">Chia sẻ ngay để nhiều người biết đến hơn!</div>
                        <div class="share-action flex-item">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{  url()->current() }}"
                               class="btn ht-btn-social ht-btn-facebook my-4 w-220"><span class="ht-icon-social"><i
                                            class="ion-social-facebook"></i></span>Chia sẻ qua Facebook</a>
                            <a href="https://plus.google.com/share?url={{  url()->current() }}"
                               class="btn ht-btn-social ht-btn-googleplus my-4 w-220"><span class="ht-icon-social"><i
                                            class="ion-email"></i></span>Chia sẻ qua Email</a>
                        </div>
                    </div>
                </div>
            </div>
            {{--            @if(!empty($relates))--}}
            {{--                <div class="detail-property__related bg-color-grey-200">--}}
            {{--                    <div class="container container--extended">--}}
            {{--                        <h3 class="related-properies-title">Có thể bạn quan tâm</h3>--}}
            {{--                        <div class="list-property-cards">--}}

            {{--                            @include('frontend3.item_relation', [--}}
            {{--                            'hostels' => $relates])--}}

            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                </div>--}}
            {{--            @endif--}}
        </div>
    </div>
    <div id="images-ajax" style="display: none"></div>
    <div class="modal fade" tabindex="-1" role="dialog" id="modal__report-property">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title color-primary_text">Báo cáo về tin đăng này</h4>
                </div>
                <form id="form-report">
                    <div class="modal-body">
                        <div class="form-group mb-0">
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::DUPLICATE }}"
                                                                               checked><span></span>Tin bị trùng
                                    lặp</label>
                            </div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::WRONG_REALITY }}"><span></span>Nội
                                    dung không đúng
                                    thực tế</label></div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::WRONG_INFO }}"><span></span>Thông
                                    tin bị sai
                                    lệch</label></div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::SPAM_SCAM }}"><span></span>Spam
                                    / Scam</label>
                            </div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::AGENCY }}"><span></span>Tin
                                    môi giới</label>
                            </div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="{{ \App\Models\Report::OTHER }}"><span></span>Khác</label>
                            </div>
                        </div>
                        <div class="form-group pl-12">
                            <input type="text" class="form-control form-sm bda-c-tsp" placeholder="Nhập diễn giải"
                                   name="message">
                        </div>
                        <input type="hidden" name="object_type" value="{{ \App\Models\Report::HOSTEL }}">
                        <input type="hidden" name="object_id" value="{{ $hostel->id }}">

                    </div>
                </form>
                <div class="modal-footer">
                    <button type="button" class="btn ht-btn-primary btn-block" id="btn-send-report">Gửi</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


@endsection

@push('scripts')
    <script src="{{asset('frontend3/assets2/libs/fancybox/jquery.fancybox.min.js')}}"></script>
    <script src="{{asset('frontend3/assets2/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js')}}"></script>
    {{--<!-- <script src="frontend3/assets2/libs/bootstrap-slider/js/bootstrap-slider.js"></script> -->--}}
    <script src="{{asset('frontend3/assets2/libs/slick/slick.min.js')}}"></script>
    <script src="{{asset('frontend3/assets2/libs/autosize/autosize.min.js')}}"></script>
    <script src="{{asset('frontend3/assets2/libs/sticky-sidebar.min.js')}}"></script>
    <script src="{{asset('frontend3/assets2/libs/smooth-scroll/smooth-scroll.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('/frontend/scripts/infobox.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('/frontend/scripts/markerclusterer.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/gmap.js')}}"></script>
    <!-- JS: Main -->
    <script src="{{asset('frontend3/assets2/js/main.js')}}"></script>

    <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>

        var map = null;
        var type_place = null;
        var radius = null;
        var circle = null;
        markers = [];


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

            map.addMarker({
                lat: '{{ $hostel->lat }}',
                lng: '{{ $hostel->lng }}',
                infoWindow: {
                    content: '{{ $hostel->name }}'
                },
                icon: '/frontend3/assets/img/hostel2.png'
            });
        });

        $(document).on('click', '#btn-send-report', function () {
            var data = $('#form-report').serialize();
            $.ajax({
                url: '{{ url('send-report') }}',
                data: data,
                type: 'post',
                dataType: 'json',
                success: function (response) {
                    if (response.status == 1) {
                        $('#form-report')[0].reset();
                        $('#modal__report-property').modal('hide');
                        $.toast({
                            heading: 'Thành công',
                            text: response.message,
                            position: 'top-right',
                            icon: 'success',
                            stack: false,
                        })
                    }
                }
            });
        });

        $(document).on('change', '#type-place, #radius', function () {
            type_place = $('#type-place').val();


            if (type_place == '0') {
                map.removeMarkers();
                map.removePolygons();
                map.addMarker({
                    lat: '{{ $hostel->lat }}',
                    lng: '{{ $hostel->lng }}',
                    infoWindow: {
                        content: '{{ $hostel->name }}'
                    },
                    icon: '/frontend3/assets/img/hostel2.png'
                });

                $('#places').html('');
                markers = [];
                map.setZoom(13);
                return;

            }

            radius = $('#radius').val();
            $.ajax({
                url: '{{ url('map/nearby') }}',
                data: {
                    lat: '{{ $hostel->lat }}',
                    lng: '{{ $hostel->lng }}',
                    type: type_place,
                    radius: radius
                },
                dataType: 'json',
                success: function (response) {
                    if (response.status == 1) {
                        var data = response.data;
                        $('#places').html(response.html);

                        map.removeMarkers();
                        markers = [];
                        marker = map.addMarker({
                            lat: '{{ $hostel->lat }}',
                            lng: '{{ $hostel->lng }}',
                            infoWindow: {
                                content: '{{ $hostel->name }}'
                            },
                            icon: '/frontend3/assets/img/hostel2.png'
                        });

                        $.each(data, function (key, value) {
                            map.addMarker({
                                lat: value.lat,
                                lng: value.lng,
                                infoWindow: {
                                    content: value.name
                                },
                                icon: '/frontend3/assets/img/' + type_place + '_normal2.png'

                            });

                            markers.push({lat: value.lat, lng: value.lng, name: value.name});
                        });
                        map.fitZoom();
                        map.removePolygons();
                        circle = map.drawCircle({
                            strokeColor: '#FF5722',
                            fillColor: '#E28B21',
                            lat: '{{ $hostel->lat }}',
                            lng: '{{ $hostel->lng }}',
                            radius: radius * 1000
                        });

                    }
                }
            });
        })

        $(document).ready(function () {
            var sidebar = new StickySidebar('#stickySidebar_propertyOwner', {
                containerSelector: '#stickySidebar_container',
                innerWrapperSelector: '.sticky-sidebar__inner',
                topSpacing: 192,
                // bottomSpacing: 200,
                minWidth: 992
            });

            $('#openPropertyGallery1').click(function (e) {
                e.preventDefault();
                $('[data-fancybox="propertyPhotoGallery"]').first().trigger('click');
            });


            // ====
            // sticky menu

            function stickyMenuBar_singleProperty() {

                if ($(window).scrollTop() > offsetTop) {
                    stickyMenu.css({
                        'position': 'fixed',
                        'top': '0',
                        'left': offsetLeft + 'px',
                        'width': menuWidth + 'px',
                    });
                    stickyHelperDiv.css({
                        'display': 'block'
                    });
                } else {
                    stickyMenu.css({
                        'position': 'static',
                        'top': 'auto',
                        'left': 'auto',
                        'width': 'auto',
                    });
                    stickyHelperDiv.css({
                        'display': 'none'
                    });
                }
            }

            var stickyMenu = $("#stickyMenu_singleProperty");
            stickyHelperDiv = $('#stickyMenu_helperDiv');
            offsetTop = stickyMenu.offset().top;
            offsetLeft = stickyMenu.offset().left;
            menuWidth = stickyMenu.width();

            stickyMenuBar_singleProperty();

            $(window).scroll(function () {
                stickyMenuBar_singleProperty();
            });
            $(window).resize(function () {
                var stickyMenu = $("#stickyMenu_singleProperty");
                stickyHelperDiv = $('#stickyMenu_helperDiv');
                offsetTop = stickyMenu.offset().top;
                offsetLeft = stickyMenu.offset().left;
                menuWidth = stickyMenu.width();
                stickyMenuBar_singleProperty();
            });

            // END sticy menu
            // ====


            // ====
            // smooth scroll

            var scroll = new SmoothScroll('a[href*="#"].smooth-scroll-link', {
                offset: 48,
            });

            // ====
            // fancy box gallery
            $('[data-fancybox="propertyPhotoGallery"]').fancybox({
                loop: true,
                buttons: [
                    // 'slideShow',
                    // 'fullScreen',
                    'thumbs',
                    // 'share',
                    //'download',
                    //'zoom',
                    'close'
                ],
                thumbs: {
                    autoStart: true,
                },
            });


            // map toggle location

            var mapList = $('#propertyListLocations');
            var mapListToggle = $('#propertyListLocationsToggle');

            $(mapListToggle).click(function (e) {
                e.preventDefault();
                if (!mapList.hasClass('hidden')) {
                    mapList.addClass('hidden');
                    $(this).addClass('hide-map');
                } else {
                    mapList.removeClass('hidden');
                    $(this).removeClass('hide-map');
                }
            })

        });

        $('.view-room-type').click(function (e) {
            e.preventDefault();
            var type = $(this).attr('data-room-type');
            $.ajax({
                url: '{{ url('get-images-room-type') }}',
                data: {
                    type: type
                },
                dataType: 'html',
                success: function (response) {
                    $('#images-ajax').html(response);
                    $('.img-wrap2').fancybox({
                        loop: true,
                        buttons: [
                            // 'slideShow',
                            // 'fullScreen',
                            'thumbs',
                            // 'share',
                            //'download',
                            //'zoom',
                            'close'
                        ],
                        thumbs: {
                            autoStart: true,
                        },
                    }).first().trigger('click');
                }
            });
        });

        $(document).on('click', '.single-location', function (e) {
            e.preventDefault();
            $('.single-location').removeClass('active');
            $(this).addClass('active');

            var setLat = $(this).attr('data-lat');
            var setLng = $(this).attr('data-lng');
            map.removeMarkers();
            map.addMarker({
                lat: '{{ $hostel->lat }}',
                lng: '{{ $hostel->lng }}',
                infoWindow: {
                    content: '{{ $hostel->name }}'
                },
                icon: '/frontend3/assets/img/hostel2.png'
            });

            $.each(markers, function (key, value) {
                if (value.lat != setLat && value.lng != setLng) {
                    map.addMarker({
                        lat: value.lat,
                        lng: value.lng,
                        infoWindow: {
                            content: value.name
                        },
                        icon: '/frontend3/assets/img/' + type_place + '_normal2.png'
                    });
                }
            });

            map.addMarker({
                lat: $(this).attr('data-lat'),
                lng: $(this).attr('data-lng'),
                infoWindow: {
                    content: $(this).attr('data-content')
                },
                icon: '/frontend3/assets/img/' + type_place + '_active2.png'

            });

        });

        $(document).ready(function () {
            $('.ht-btn-facebook').click(function (e) {
                e.preventDefault();
                window.open($(this).attr('href'), 'fbShareWindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
                return false;
            });
        });

    </script>
@endpush