@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')}}">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
@endsection

@section('meta')
    <title>{{$dataPostDetail->title}}</title>
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="{{$dataPostDetail->title }}"/>
    <meta property="og:description"
          content="{{ \Illuminate\Support\Str::words(strip_tags(html_entity_decode($dataPostDetail->description)),100) }}"/>
    <meta property="og:image" content="{{asset('files/'.$dataPostDetail->image)}}"/>
    {{--<meta property="og:image:width" content="1200" />--}}
    {{--<meta property="og:image:height" content="630" />--}}
    <meta property="og:image:type" content="image/jpeg"/>

@endsection
@section('content')
    <div class="detail-property">
        <div class="detail-property__photos">
            <!-- 					<div id="carouselPhotoProperty" class="detail-property__photos__carousel carousel slide" data-ride="carousel">
                                  <ol class="carousel-indicators">
                                    <li data-target="#carouselPhotoProperty" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselPhotoProperty" data-slide-to="1"></li>
                                    <li data-target="#carouselPhotoProperty" data-slide-to="2"></li>
                                    <li data-target="#carouselPhotoProperty" data-slide-to="3"></li>
                                  </ol>
                                  <div class="carousel-inner" role="listbox">
                                    <div class="item active"></div>
                                    <div class="item"><a href="https://cdn.stocksnap.io/img-thumbs/960w/8LHTBAZW32.jpg" data-fancybox="propertyPhotoGallery" class="img-wrap"><img src="https://cdn.stocksnap.io/img-thumbs/960w/8LHTBAZW32.jpg"></a></div>
                                    <div class="item"><a href="https://cdn.stocksnap.io/img-thumbs/960w/UN5RN5XG3H.jpg" data-fancybox="propertyPhotoGallery" class="img-wrap"><img src="https://cdn.stocksnap.io/img-thumbs/960w/UN5RN5XG3H.jpg"></a></div>
                                    <div class="item"><a href="https://cdn.stocksnap.io/img-thumbs/960w/YPM6VH3FCW.jpg" data-fancybox="propertyPhotoGallery" class="img-wrap"><img src="https://cdn.stocksnap.io/img-thumbs/960w/YPM6VH3FCW.jpg"></a></div>
                                  </div>
                                    <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__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="/files/{{$image->image}}"
                                    data-fancybox="propertyPhotoGallery" class="img-wrap"><img
                                        src="/files/{{$image->image}}"></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__header ht-depth-1 has-bottom-info">
            <div class="container container--extended">
                <div class="row">
                    <div class="col-xs-12 col-md-9">
                        <h1 class="detail-property__header__title">{{$dataPostDetail->title}}</h1>
                        <div class="detail-property__header__subtitle"><i
                                    class="ion-ios-location"></i>{{$dataPostDetail->address}}
                            , {{$dataPostDetail->ward_name}}, {{$dataPostDetail->district_name}}
                            , {{$dataPostDetail->province_name}}</div>
                        <div class="single-info clearfix">
                            <div class="single-info__label" style="font-size: 14px; color: #757575;">
                                <span class="label-icon"><i class="ion-android-create"></i></span>
                                <span class="label-text">Ngày đăng: {{date_format($dataPostDetail->created_at,'d-m-Y - H:i:s')}}</span>
                            </div>
                        </div>
                        <div class="detail-property__header__infos has-7-items clearfix">
                            <div class="single-info clearfix">
                                <div class="single-info__label">
                                    <span class="label-icon"><i class="ion-calendar"></i></span>
                                    <span class="label-text">Ngày chuyển</span>
                                </div>
                                <div class="single-info__data">{{date('d-m-Y', strtotime($dataPostDetail->date_available))>date('d-m-Y')?date('d-m-Y', strtotime($dataPostDetail->date_available)):"Có thể ở ngay"}}</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">{{number_format($dataPostDetail->price)}} đ</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">{{number_format($dataPostDetail->deposit)}} đ</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">{{$dataPostDetail->amount_people}} Người</div>
                            </div>
                            <div class="menu-divider"></div>
                            <div class="single-info clearfix">
                                <div class="single-info__label">
                                    <span class="label-icon"><i class="ion-arrow-expand"></i></span>
                                    <span class="label-text">Diện tích</span>
                                </div>
                                <div class="single-info__data">{{$dataPostDetail->size}} m&sup2;</div>
                            </div>
                            <div class="single-info clearfix">
                                <div class="single-info__label">
                                    <span class="label-icon"><i class="ion-outlet"></i></span>
                                    <span class="label-text">Tiền điện</span>
                                </div>
                                <div class="single-info__data">
                                    @if($dataPostDetail->type_electric_price==1)
                                        {{$dataPostDetail->electricity_price}}
                                    @elseif($dataPostDetail->type_electric_price==2)
                                        {{$dataPostDetail->electricity_price}}
                                    @elseif($dataPostDetail->type_electric_price==3)
                                        {{number_format($dataPostDetail->electricity_price)}}đ/Kwh
                                    @elseif($dataPostDetail->type_electric_price==4)
                                        {{number_format($dataPostDetail->electricity_price)}}đ/Người
                                    @elseif($dataPostDetail->type_electric_price==5)
                                        {{$dataPostDetail->electricity_price}}
                                    @endif
                                </div>
                            </div>
                            <div class="single-info clearfix">
                                <div class="single-info__label">
                                    <span class="label-icon"><i class="ion-waterdrop"></i></span>
                                    <span class="label-text">Tiền nước</span>
                                </div>
                                <div class="single-info__data">
                                    @if($dataPostDetail->type_water_price==1)
                                        {{$dataPostDetail->water_price}}
                                    @elseif($dataPostDetail->type_water_price==2)
                                        {{$dataPostDetail->water_price}}
                                    @elseif($dataPostDetail->type_water_price==3)
                                        {{number_format($dataPostDetail->water_price)}}đ/Khối
                                    @elseif($dataPostDetail->type_water_price==4)
                                        {{number_format($dataPostDetail->water_price)}}đ/Người
                                    @elseif($dataPostDetail->type_water_price==5)
                                        {{$dataPostDetail->water_price}}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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 sticky-type-02">
                            <div class="sticky-sidebar__inner">
                                <div class="detail-property__owner ht-depth-1">
                                    @if(!empty($dataPostDetail))
                                        <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('{{asset("")}}{{optional($user)->image}}')"></div>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="owner-content">
                                            <h3 class="owner-title">{{$dataPostDetail->owner_name}}</h3>
                                            <div class="owner-info mt-12">
                                                <div class="single-info single-info--verified">
                                                    <a href="#"><span class="info-icon"><i
                                                                    class="ion-email info-icon"></i></span><span
                                                                class="info-data ml-8">{{$dataPostDetail->email!=null?$dataPostDetail->email:"Không có email"}}</span></a>
                                                </div>
                                                <div class="single-info">
                                                    <a href="#"><span class="info-icon"><i
                                                                    class="ion-android-call"></i></span><span
                                                                class="info-data ml-8">{{$dataPostDetail->owner_phone}}</span></a>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="owner-contact mt-12">
                                                <a href="https://m.me/itro.vn?fbclid=IwAR0baULOUf3P4olUrRJ0vURZJMHa_lTZ7gSn9iEXq7nKjmiClN7OatlGXrI" target="_blank"
                                                   class="btn ht-btn-primary btn-xl btn-block">Nhắn tin</a>
                                            </div>
                                        </div>
                                    @endif
                                </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">
                                <ul class="list-unstyled has-4-items clearfix">
                                    <li><a class="smooth-scroll-link" href="#propertyDescriptionSection">Mô tả</a>
                                    </li>
                                    <li><a class="smooth-scroll-link" href="#propertyFeaturesSection">Tiện ích</a>
                                    </li>
                                    <li><a class="smooth-scroll-link" href="#propertyRulesSection">Nội quy</a></li>
                                    <!-- <li><a class="smooth-scroll-link" href="#propertyRoomsSection">Phòng trống</a></li> -->
                                    <li><a class="smooth-scroll-link" 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>
                                <a href="#" class="speech"><span class="ion-ios-microphone"></span> Đọc</a>|
                                <a href="#" class="stop-speech"><span class="ion-ios-microphone"></span> Dừng</a>
                                <audio id="audioplayid" src="" controls hidden></audio>

                                <p style="min-height: 150px; margin-top: 20px ;" class="textTo">
                                    {!! str_replace('\n', '<br>',$dataPostDetail->description) !!}
                                </p>

                                <hr>
                                <div id="propertyFeaturesSection">
                                    <h3 class="descr-title">Tiện ích</h3>
                                    <ul class="descr__features-list clearfix">
                                        @foreach($amenities as $amenity)
                                            @if($amenity->type==0)
                                                <li><img src="{{asset("files/$amenity->web_image")}}"
                                                         width="12"
                                                         height="12"><span>{{$amenity->name}}</span>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                                <hr>
                                <div id="propertyRulesSection">
                                    <h3 class="descr-title">Nội quy</h3>
                                    <ul class="descr__features-list clearfix">
                                        @foreach($amenities as $amenity)
                                            @if($amenity->type==1)
                                                <li><img src="{{asset("files/$amenity->web_image")}}"
                                                         width="12"
                                                         height="12"><span>{{$amenity->name}}</span></li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="propertyMapSection" class="detail-property__addresses">
            <div class="container container--extended">
                <div class="ht-depth-1 mt-12 pa-12">
                    <div class="detail-property__addresses__details">Địa Chỉ: <span class="query">{{$dataPostDetail->address}}
                            , {{$dataPostDetail->ward_name}}, {{$dataPostDetail->district_name}}
                            , {{$dataPostDetail->province_name}}</span>
                    </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">
                                <!-- map here -->
                                <div id="map" class="address-map-pin"
                                     style="height: 300px; background-color: #eee"></div>
                            </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">
                                        {{--result here--}}
                                    </div>
                                    <div class="locations__selected__list_template" style="display:none;">
                                        <a href="#" class="single-location">
                                            <div class="single-location__title">Trường mầm non tư thục Vạn Phúc Gia
                                                Bản An Nhiên
                                            </div>
                                            <div class="single-location__subtitle"><i
                                                        class="ion-ios-location mr-8"></i>Số 1243, ngách 123/123
                                                12m, Ngõ 2, phố Định Công, phường Định Công, quận Hoàng Mai, Hà Nội
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-property__share">
            <div class="container container--extended">
                <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>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-property__related bg-color-grey-200">
            <div class="container container--extended">
                @if(!empty($postRelation))
                    <h3 class="related-properies-title">Có thể bạn quan tâm</h3>
                @endif
                <div class="list-property-cards">
                    <div class="list-row">
                        @foreach($postRelation as $relation)
                            <div class="list-col">
                                <div class="single-property-card single-property-card--size-lg ht-card ht-depth-1">
                                    <a href="{{ url(str_slug($relation->type_post).'/'.str_slug($relation->title).'-'.$relation->id) }}"
                                       class="block">
                                        <div class="card-header">
                                            <div class="property__photo ht-rectangle ratio-43">
                                                <div class="ht-inner bg-color-grey-300">
                                                    <img class="post_image"
                                                         src="{{asset("")}}/files/{{$relation->image}}" alt="">
                                                </div>
                                            </div>
                                            <div class="property__badges">
                                                <div class="single-badge single-badge--verified">
                                                    <i class="single-badge__icon ion-checkmark-circled"></i>
                                                    <span class="single-badge__text post_date_avai">{{date('d-m-Y', strtotime($relation->date_available))>date('d-m-Y')?date('d-m-Y', strtotime($relation->date_available)):"Có thể ở ngay"}}</span>
                                                </div>
                                            </div>
                                            <div class="property__prices">
                                                <div class="single-price">
                                                    <span class="single-price__number post_price">{{number_format($relation->price)}}</span>
                                                    <span class="single-price__currency on-right">&#8363;</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-content">
                                            <div class="property__intro">
                                                <h4 class="property__title post_title">{{$relation->title}}</h4>
                                                <div class="property__address post_address">{{$relation->address}}
                                                    , {{$relation->ward_name}}
                                                    , {{$relation->district_name}}
                                                    , {{$relation->province_name}}</div>
                                            </div>
                                            <div class="property__infos">
                                                <div class="single-info">
                                                    <span class="single-info__icon "><img
                                                                src="{{asset('frontend3/stock2/icons/electricity.svg')}}"></span>
                                                    <span class="single-info__data">@if($relation->type_electric_price==1)
                                                            {{$relation->electricity_price}}
                                                        @elseif($relation->type_electric_price==2)
                                                            {{$relation->electricity_price}}
                                                        @elseif($relation->type_electric_price==3)
                                                            {{number_format($relation->electricity_price)}}đ/Kwh
                                                        @elseif($relation->type_electric_price==4)
                                                            {{number_format($relation->electricity_price)}}đ/Người
                                                        @elseif($relation->type_electric_price==5)
                                                            {{$relation->electricity_price}}
                                                        @endif</span>
                                                </div>
                                                <div class="single-info">
                                                    <span class="single-info__icon"><img
                                                                src="{{asset('frontend3/stock2/icons/water.svg')}}"></span>
                                                    <span class="single-info__data">@if($relation->type_water_price==1)
                                                            {{$relation->water_price}}
                                                        @elseif($relation->type_water_price==2)
                                                            {{$relation->water_price}}
                                                        @elseif($relation->type_water_price==3)
                                                            {{number_format($relation->water_price)}}đ/Khối
                                                        @elseif($relation->type_water_price==4)
                                                            {{number_format($relation->water_price)}}đ/Người
                                                        @elseif($relation->type_water_price==5)
                                                            {{$relation->water_price}}
                                                        @endif</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <div class="property__quickview">
                                        <div class="ht-rectangle ratio-43">
                                            <div class="ht-inner">
                                                <div class="actions-wrapper">
                                                    <a href="#" class="single-action"><i
                                                                class="ion-ios-search-strong"></i></a>
                                                    <a href="#" class="single-action"><i class="ion-link rotate45"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="property__actions">
                                        <a href="#" class="single-action single-action--like" title="Thích"
                                           data-toggle="tooltip" data-placement="top"><i
                                                    class="ion-android-favorite-outline"></i></a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

    </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::POST_NEWS }}">
                        <input type="hidden" name="object_id" value="{{ $dataPostDetail->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')
    <!-- JS: Libs -->
    {{--<script src="{{asset('frontend3/assets2/libs/jquery.min.js')}}"></script>--}}
    {{--<script src="{{asset('frontend3/assets2/libs/bootstrap/js/bootstrap.js')}}"></script>--}}
    {{--<script src="{{asset('frontend3/assets2/libs/select2/js/select2.full.min.js')}}"></script>--}}
    <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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></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>

    <!-- custom JS -->
    <script>
        $(document).ready(function () {

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

            @if(!empty(doubleval(trim($dataPostDetail->lat))) && !empty(doubleval(trim($dataPostDetail->lng))))
                map = new GMaps({
                div: '#map',
                lat: '{{ $dataPostDetail->lat }}',
                lng: '{{ $dataPostDetail->lng }}',
                zoom: 15,
            });

            map.addMarker({
                lat: '{{ $dataPostDetail->lat }}',
                lng: '{{ $dataPostDetail->lng }}',
                infoWindow: {
                    content: '{{ $dataPostDetail->name }}'
                },
                icon: '/frontend3/assets/img/hostel2.png'
            });
            @else
            //////////////////// GOOLGE MAPS detech by address//////////////////////////////

            var geocoder = new google.maps.Geocoder();
            var map;
            var service;
            var infowindow;

            var query = $('.query').text();

            function initialize() {
                var sydney = new google.maps.LatLng(geocoder);

                infowindow = new google.maps.InfoWindow();

                map = new google.maps.Map(
                    document.getElementById('map'), {center: sydney, zoom: 15});
                var request = {
                    query: query,
                    fields: ['name', 'geometry'],
                };

                service = new google.maps.places.PlacesService(map);

                service.findPlaceFromQuery(request, function (results, status) {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        for (var i = 0; i < results.length; i++) {
                            createMarker(results[i]);
                        }

                        map.setCenter(results[0].geometry.location);
                    }
                });
            }

            function createMarker(place) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: place.geometry.location
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(place.name);
                    infowindow.open(map, this);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);
            ////////////////////////////////////////////////////////////
            @endif

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


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

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

                }

                radius = $('#radius').val();
                $.ajax({
                    url: '{{ url('map/nearby') }}',
                    data: {
                        lat: '{{ $dataPostDetail->lat }}',
                        lng: '{{ $dataPostDetail->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: '{{ $dataPostDetail->lat }}',
                                lng: '{{ $dataPostDetail->lng }}',
                                infoWindow: {
                                    content: '{{ $dataPostDetail->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.setZoom(15);
                            map.removePolygons();
                            circle = map.drawCircle({
                                strokeColor: '#FF5722',
                                fillColor: '#E28B21',
                                lat: '{{ $dataPostDetail->lat }}',
                                lng: '{{ $dataPostDetail->lng }}',
                                radius: radius * 1000
                            });

                            var container = $('.locations__selected__list');
                            container.empty();
                            data.forEach(function (obj) {
                                var item = $('.locations__selected__list_template').contents().clone();

                                $(item).find('.single-location__title').text(obj.name);
                                $(item).find('.single-location__subtitle').text("Địa chỉ:" + obj.address);

                                container.append(item);
                            })

                        }
                    }
                });
            })

            var sidebar = new StickySidebar('#stickySidebar_propertyOwner.sticky-type-02', {
                containerSelector: '#stickySidebar_container',
                innerWrapperSelector: '.sticky-sidebar__inner',
                topSpacing: 272,
                // bottomSpacing: 200,
                minWidth: 992
            });


            // ====
            // 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,
                },
            });

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


            // 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');
                }
            })

            $('.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;
            });

            var textTo = $('.textTo').text();
            downloadspeech(textTo);

            $(document).on('click', '.speech', function (e) {
                e.preventDefault();
                $('#audioplayid').trigger('play')
                // var audio = $('#audioplayid');
                // if(audio.paused && audio.currentTime > 0 && !audio.ended) {
                //     console.log(1);
                //     $('#audioplayid').trigger('play');
                // } else {
                //     console.log(0);
                //     $('#audioplayid').trigger('pause')
                // }
            })
            $(document).on('click', '.stop-speech', function (e) {
                e.preventDefault();
                $('#audioplayid').trigger('pause');
            })

            function downloadspeech(text) {
                var xhr = new XMLHttpRequest();
                var url = "https://vtcc.ai/voice/api/tts/v1/rest/syn";
                xhr.open("POST", url, true);
                xhr.setRequestHeader("Content-Type", "application/json");
                //get token by register Viettell voice apis
                xhr.setRequestHeader("token", "iZnVIHIkuz3g35dY-6gJ0XZ4CLZMyCVQTdYSBFviui-3evAaIAicjQE-JTE2ltpg");
                xhr.responseType = "arraybuffer";


                var data = JSON.stringify({
                    "text": text,
                    "voice": "doanngoclev2",
                    "id": "2",
                    "without_filter": false,
                    "speed": 1.0,
                    "tts_return_option": 2
                });

                xhr.onreadystatechange = function (a) {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var filename = "speech.wav";

                        var type = xhr.getResponseHeader('Content-Type');
                        datalength = xhr.response.length;
                        var blob = new Blob([xhr.response], {type: type});

                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                            window.navigator.msSaveBlob(blob, filename);
                        } else {
                            var URL = window.URL || window.webkitURL;
                            var downloadUrl = URL.createObjectURL(blob);

                            var audiotag = document.getElementById('audioplayid');
                            audiotag.src = downloadUrl;
                            // audiotag.play();

                        }
                    }
                };

                xhr.send(data);
            }
        });
        $(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');
                        swal('Thông báo', response.message, 'success');
                    }
                }
            });
        });
    </script>


@endpush
