<?php $__env->startSection('styles'); ?>
    <!-- Favicon -->
    <link rel="shortcut icon" href="<?php echo e(asset('frontend3/assets2/img/favicon_16.ico')); ?>"/>
    <link rel="bookmark" href="<?php echo e(asset('frontend3/assets2/img/favicon_16.ico')); ?>"/>

    <!-- CSS: Libs-->
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/libs/bootstrap/css/bootstrap.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/libs/ionicons/css/ionicons.min.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/libs/select2/css/select2.min.css')); ?>">
    <link rel="stylesheet"
          href="<?php echo e(asset('frontend3/assets2/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')); ?>">
    <link rel="stylesheet"
          href="<?php echo e(asset('frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css')); ?>">
    
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/libs/fancybox/jquery.fancybox.min.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/libs/slick/slick.css')); ?>">
    <link rel="stylesheet" href="frontend3/assets2/libs/slick/slick-theme.css">
    <!-- CSS: Main -->
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/css/main.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('frontend3/assets2/css/custom.css')); ?>">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('meta'); ?>
    <title><?php echo e($hostel->name); ?></title>
    <meta property="og:url" content="<?php echo e(url()->current()); ?>"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="<?php echo e($hostel->name); ?>"/>
    <meta property="og:description"
          content="<?php echo e(\Illuminate\Support\Str::words(strip_tags(html_entity_decode($hostel->desc)),100)); ?>"/>
    <meta property="og:image" content="<?php echo e($hostel->image); ?>"/>

<?php $__env->stopSection(); ?>

<?php $agent = new \Jenssegers\Agent\Agent(); ?>
<?php $__env->startSection('content'); ?>

    <?php $images = $hostel->medias ?>

    <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<?php echo e($images->count()>5?5:$images->count()); ?>-items">
                        <?php $__currentLoopData = $images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="single-gallery-item"><a
                                        href="<?php echo e($image->media); ?>"
                                        data-fancybox="propertyPhotoGallery" class="img-wrap"><img
                                            src="<?php echo e($image->media); ?>"></a></div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php if($images->count()>5): ?>
                            <button id="openPropertyGallery1" class="view-property-album remain-items-count">
                                + <?php echo e($images->count()-5); ?> ảnh
                            </button>
                        <?php 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('<?php echo e($hostel->user_post_image); ?>');"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="owner-content">
                                            <h3 class="owner-title"><?php echo e($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"><?php echo e($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>
                                        <?php if($amenities): ?>
                                            <li><a data-scroll="" href="#propertyFeaturesSection">Tiện ích</a></li>
                                        <?php endif; ?>
                                        <?php if($policies): ?>
                                            <li><a data-scroll="" href="#propertyRulesSection">Nội quy</a></li>
                                        <?php 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>

                                    <?php echo nl2br($hostel->content); ?>

                                    <hr>
                                    <?php if($amenities): ?>
                                        <div id="propertyFeaturesSection">
                                            <h3 class="descr-title">Tiện ích</h3>
                                            <ul class="descr__features-list clearfix">
                                                <?php $__currentLoopData = $amenities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $amenity): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li><img src="/files/<?php echo e($amenity->web_image); ?>" width="12"
                                                             height="12"><span><?php echo e($amenity->name); ?></span></li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </ul>
                                        </div>
                                    <?php endif; ?>
                                    <?php if($policies): ?>
                                        <hr>
                                        <div id="propertyRulesSection">
                                            <h3 class="descr-title">Nội quy</h3>
                                            <ul class="descr__features-list clearfix">
                                                <?php $__currentLoopData = $policies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $policy): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <li><img src="/files/<?php echo e($policy->web_image); ?>" width="12"
                                                             height="12"><span><?php echo e($policy->name); ?></span></li>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </ul>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php 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"><?php echo e($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>
            <?php 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=<?php echo e(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=<?php echo e(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>
            
            
            
            
            

            
            

            
            
            
            
        </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="<?php echo e(\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="<?php echo e(\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="<?php echo e(\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="<?php echo e(\App\Models\Report::SPAM_SCAM); ?>"><span></span>Spam
                                    / Scam</label>
                            </div>
                            <div class="radio radio--customized"><label><input type="radio" name="report_type"
                                                                               value="<?php echo e(\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="<?php echo e(\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="<?php echo e(\App\Models\Report::HOSTEL); ?>">
                        <input type="hidden" name="object_id" value="<?php echo e($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 -->


<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
    <script src="<?php echo e(asset('frontend3/assets2/libs/fancybox/jquery.fancybox.min.js')); ?>"></script>
    <script src="<?php echo e(asset('frontend3/assets2/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')); ?>"></script>
    <script src="<?php echo e(asset('frontend3/assets2/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js')); ?>"></script>
    
    <script src="<?php echo e(asset('frontend3/assets2/libs/slick/slick.min.js')); ?>"></script>
    <script src="<?php echo e(asset('frontend3/assets2/libs/autosize/autosize.min.js')); ?>"></script>
    <script src="<?php echo e(asset('frontend3/assets2/libs/sticky-sidebar.min.js')); ?>"></script>
    <script src="<?php echo e(asset('frontend3/assets2/libs/smooth-scroll/smooth-scroll.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/frontend/scripts/infobox.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/frontend/scripts/markerclusterer.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('/js/gmap.js')); ?>"></script>
    <!-- JS: Main -->
    <script src="<?php echo e(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: '<?php echo e($hostel->lat); ?>',
                lng: '<?php echo e($hostel->lng); ?>',
                zoom: 13,
            });

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

        $(document).on('click', '#btn-send-report', function () {
            var data = $('#form-report').serialize();
            $.ajax({
                url: '<?php echo e(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: '<?php echo e($hostel->lat); ?>',
                    lng: '<?php echo e($hostel->lng); ?>',
                    infoWindow: {
                        content: '<?php echo e($hostel->name); ?>'
                    },
                    icon: '/frontend3/assets/img/hostel2.png'
                });

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

            }

            radius = $('#radius').val();
            $.ajax({
                url: '<?php echo e(url('map/nearby')); ?>',
                data: {
                    lat: '<?php echo e($hostel->lat); ?>',
                    lng: '<?php echo e($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: '<?php echo e($hostel->lat); ?>',
                            lng: '<?php echo e($hostel->lng); ?>',
                            infoWindow: {
                                content: '<?php echo e($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: '<?php echo e($hostel->lat); ?>',
                            lng: '<?php echo e($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: '<?php echo e(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: '<?php echo e($hostel->lat); ?>',
                lng: '<?php echo e($hostel->lng); ?>',
                infoWindow: {
                    content: '<?php echo e($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>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layout4', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>