@extends('frontend3')


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

@endsection


@section('content')
    @if(!empty($room->images))
        @php $images = json_decode($room->images, true); @endphp
    @endif
    <div id="siteContent" class="site-content">
        <div class="detail-property">
            <div class="detail-property__photos">
                <div id="carouselPhotoProperty" class="detail-property__photos__carousel carousel slide"
                     data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        @if(!empty($room->images))
                            @if(is_array($images))
                                @foreach($images as $image)
                                    <li data-target="#carouselPhotoProperty" data-slide-to="{{ $loop->index }}"
                                        @if($loop->first) class="active" @endif
                                        class=""></li>
                                @endforeach
                            @endif
                        @endif
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        {{--@if(!empty($room->image))--}}
                            {{--<div class="item"><a href="{{ $room->image }}"--}}
                                                 {{--data-fancybox="propertyPhotoGallery"--}}
                                                 {{--class="img-wrap"><img--}}
                                            {{--src="{{ $room->image }}"></a></div>--}}
                        {{--@endif--}}
                        @if(!empty($room->images))
                            @if(is_array($images))

                                @foreach($images as $image)
                                    <div class="item @if($loop->first) active @endif">
                                        <a href="/files/{{ $image }}"
                                                                                         data-fancybox="propertyPhotoGallery"
                                                                                         class="img-wrap"><img
                                                    src="/files/{{ $image }}"></a></div>
                                @endforeach
                            @endif
                        @endif
                    </div>
                    <!-- Controls -->
                    <a class="left ht-carousel-control" href="#carouselPhotoProperty" role="button" data-slide="prev"><i
                                class="ion-ios-arrow-left"></i></a>
                    <a class="right ht-carousel-control" href="#carouselPhotoProperty" role="button"
                       data-slide="next"><i class="ion-ios-arrow-right"></i></a>
                </div>
                <div class="detail-property__photos__actions">

						<span class="d-iblock va-top" title="" data-toggle="tooltip" data-placement="bottom"
                              data-original-title="Thích">
							<a href="#" class="single-action
							@if(auth('backend')->check())
                            @if(\App\Components\Functions::checkFavourite(auth('backend')->user()->id, $room->id)) active
@endif
                            @endif btn btn-icon ht-btn-default single-action--like"
                               data-hostel-id="{{ $room->id }}"><i
                                        class="ion-heart"></i></a>
						</span>

                    <span class="d-iblock va-top" title="" data-toggle="tooltip" data-placement="bottom"
                          data-original-title="Báo cáo sai phạm">
							<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>
                @if(is_array($images))
                    <div class="detail-property__photos__albums">
                        <button id="openPropertyGallery1"
                                class="view-property-album">Xem {{ count($images)  }}
                            ảnh
                        </button>
                    </div>
                @endif
            </div>
            <div class="detail-property__header ht-depth-1 has-bottom-info">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-9">
                            <h1 class="detail-property__header__title">{{ $room->name }}</h1>
                            <div class="detail-property__header__subtitle"><i
                                        class="ion-ios-location"></i>{{ $room->address }}
                                {{--, {{ $room->address_detail}}--}}
                            </div>
                            <div class="detail-property__header__infos has-4-items clearfix">
                                <div class="single-info clearfix">
                                    <div class="single-info__label">
                                        <span class="label-icon"><i class="ion-log-in"></i></span>
                                        <span class="label-text">Ngày chuyển</span>
                                    </div>
                                    <div class="single-info__data">{{ $room->date_available_text }}</div>
                                </div>
                                <div class="single-info clearfix">
                                    <div class="single-info__label">
                                        <span class="label-icon"><i class="ion-social-usd"></i></span>
                                        <span class="label-text">Tiền phòng</span>
                                    </div>
                                    <div class="single-info__data">{{ $room->price_text }}</div>
                                </div>
                                <div class="single-info clearfix">
                                    <div class="single-info__label">
                                        <span class="label-icon"><i class="ion-pricetags"></i></span>
                                        <span class="label-text">Đặt cọc</span>
                                    </div>
                                    <div class="single-info__data">{{ $room->deposit_text }}</div>
                                </div>
                                <div class="single-info clearfix">
                                    <div class="single-info__label">
                                        <span class="label-icon"><i class="ion-ios-people"></i></span>
                                        <span class="label-text">Số người</span>
                                    </div>
                                    <div class="single-info__data">{{ $room->number_peoples_text }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-property__content has-sticky-navbar mt-12">
                <div class="container">
                    <div class="clearfix">
                        <div id="stickySidebar_container" class="clearfix">
                            @if($room->owner)
                                <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('{{ $room->owner->image }}');"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="owner-content">
                                                <h3 class="owner-title">
                                                    @php $owner = $room->owner @endphp

                                                    @if(!empty(trim($owner->name)))
                                                    {{ $owner->name }}
                                                    @else
                                                        {{ $owner->first_name.' '.$owner->last_name }}
                                                        @endif


                                                    @if(!empty($room->owner->birthday)) , {{ \App\Components\Functions::getOld($room->owner) }} tuổi @endif </h3>
                                                <div class="owner-info mt-12">
                                                    <div class="single-info @if($room->owner->status_email) single-info--verified @endif">
                                                        <a href="#"><span class="info-icon"><i
                                                                        class="ion-email info-icon"></i></span><span
                                                                    class="info-data ml-8">{{ $room->owner->status_email_text }}</span></a>
                                                    </div>
                                                    <div class="single-info @if($room->owner->status_phone) single-info--verified @endif">
                                                        <a href="#"><span class="info-icon"><i
                                                                        class="ion-android-call"></i></span><span
                                                                    class="info-data ml-8">{{ $room->owner->status_phone_text }}</span></a>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="owner-contact mt-12">
                                                    <a href="" class="btn ht-btn-primary btn-xl btn-block">Nhắn tin</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            <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 has-4-items clearfix">
                                        <li><a data-scroll="" href="#propertyDescriptionSection">Mô tả</a></li>
                                        <li><a data-scroll="" href="#propertyFeaturesSection">Tiện ích</a></li>
                                        <li><a data-scroll="" href="#propertyRulesSection">Nội quy</a></li>
                                        <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>

                                    {!! nl2br($room->desc) !!}
                                    <hr>
                                    <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>
                                    <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>
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="propertyMapSection" class="detail-property__addresses pos-rel zi-400">
                <div class="container">
                    <div class="ht-depth-1 mt-12 pa-12">
                        <div class="detail-property__addresses__details">{{ $room->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>
            <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">
                        <h3 class="related-properies-title">Có thể bạn quan tâm</h3>
                        <div class="list-property-cards">
                            <div class="row">
                                @foreach($relates as $relate)
                                    <div class="col-xs-12 col-sm-6 col-md-3">
                                        @include('frontend3.item_need_more', [
                                            'item' => $relate
                                        ])
                                    </div>
                                @endforeach
                            </div>
                        </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::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::ROOM_NEED_MORE }}">
                        <input type="hidden" name="object_id" value="{{ $room->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 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: '{{ $room->lat }}',
            lng: '{{ $room->lng }}',
            zoom: 13,
        });

        map.addMarker({
            lat: '{{ $room->lat }}',
            lng: '{{ $room->lng }}',
            infoWindow: {
                content: '{{ $room->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: '{{ $room->lat }}',
                lng: '{{ $room->lng }}',
                infoWindow: {
                    content: '{{ $room->name }}'
                },
                icon: '/frontend3/assets/img/hostel2.png'
            });

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

        }

        radius = $('#radius').val();
        $.ajax({
            url: '{{ url('map/nearby') }}',
            data: {
                lat: '{{ $room->lat }}',
                lng: '{{ $room->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: '{{ $room->lat }}',
                        lng: '{{ $room->lng }}',
                        infoWindow: {
                            content: '{{ $room->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: '{{ $room->lat }}',
                        lng: '{{ $room->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: '{{ $room->lat }}',
            lng: '{{ $room->lng }}',
            infoWindow: {
                content: '{{ $room->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