@extends('frontend3_owner')


@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($hostel->desc),100) }}"/>
    <meta property="og:image" content="{{ $room->first_image }}"/>

@endsection

@php $agent = new \Jenssegers\Agent\Agent(); $firstImage = $room->first_image @endphp
@section('content')

    @php $images = DB::table('room_images')->where('room_id', $room->id)->get(); @endphp

    <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($firstImage))
                            <li data-target="#carouselPhotoProperty" data-slide-to="0"
                                class="active"></li>
                        @endif
                        @if(!empty($images))

                            @foreach($images as $image)
                                <li data-target="#carouselPhotoProperty"
                                    data-slide-to="{{ $loop->index + 1 }}"></li>
                            @endforeach

                        @endif
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        @if(!empty($firstImage))
                            <div class="item active"><a href="{{ $firstImage }}"
                                                        data-fancybox="propertyPhotoGallery"
                                                        class="img-wrap"><img
                                            src="{{ $firstImage }}"></a></div>
                        @endif
                        @if(!empty($images))

                            @foreach($images as $image)
                                <div class="item"><a href="/files/{{ $image->image }}"
                                                     data-fancybox="propertyPhotoGallery"
                                                     class="img-wrap"><img
                                                src="/files/{{ $image->image }}"></a></div>
                            @endforeach

                        @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">--}}
                {{--<a href="#" class="single-action--}}
                {{--@if(auth('backend')->check())--}}
                {{--@if(\App\Components\Functions::checkFavourite(auth('backend')->user()->id, $hostel->id)) active--}}
                {{--@endif--}}
                {{--@endif btn btn-icon ht-btn-default single-action--like"--}}
                {{--data-hostel-id="{{ $hostel->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(isset($images))
                    @if(is_array($images))
                        <div class="detail-property__photos__albums">
                            <button id="openPropertyGallery1"
                                    class="view-property-album">Xem {{ count($images) + 1  }}
                                ảnh
                            </button>
                        </div>
                    @endif
                @endif
            </div>

            <div class="detail-property__header ht-depth-1">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-8">
                            <h1 class="detail-property__header__title">Phòng {{ $room->name }}, {{ $hostel->name }}</h1>
                            <div class="detail-property__header__subtitle"><i
                                        class="ion-ios-location"></i>{{ $hostel->address }}
                                , {{ $hostel->address_detail}}</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($hostel->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('{{ $hostel->owner->image }}');"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="owner-content">
                                                <h3 class="owner-title">{{ $hostel->owner->first_name. ' '. $hostel->owner->last_name }}
                                                    @if(!empty($hostel->owner->birthday))
                                                        , {{ \App\Components\Functions::getOld($hostel->owner) }}
                                                        tuổi @endif </h3>
                                                <div class="owner-info mt-12">
                                                    <div class="single-info @if($hostel->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">{{ $hostel->owner->status_email_text }}</span></a>
                                                    </div>
                                                    <div class="single-info @if($hostel->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">{{ $hostel->owner->status_phone_text }}</span></a>
                                                    </div>
                                                </div>
                                                {{--<hr>--}}
                                                {{--<div class="owner-contact mt-12">--}}
                                                {{--<a href="{{ url('chat').'?to='.$hostel->owner->id }}"--}}
                                                {{--class="btn ht-btn-primary btn-xl btn-block">Nhắn tin</a>--}}
                                                {{--</div>--}}
                                            </div>

                                        </div>
                                        <div class="detail-property__owner ht-depth-1">
                                            <div class="row" style="width: 100%">

                                                <div class="col-xs-12">
                                                    <form id="form-send-message-owner">
                                                        <input type="hidden" name="room_id" value="{{ $room->id }}">
                                                        <h4 class="owner-title">Đặt lịch xem phòng</h4>
                                                        <div class="form-group">
                                                            <label>Tên</label>
                                                            <input type="text" class="form-control" placeholder="Tên"
                                                                   name="name">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>SĐT</label>
                                                            <input type="text" class="form-control"
                                                                   placeholder="Số điện thoại" name="phone">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Thời gian</label>
                                                            <input type="text" class="form-control" id="mask_date"
                                                                   placeholder="Ngày / tháng / giờ : phút. Ví dụ: {{ Carbon\Carbon::now()->format('d/m/Y H:i') }}"
                                                                   name="date">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Tin nhắn</label>
                                                            <textarea type="text" class="form-control"
                                                                      placeholder="Tin nhắn" name="note"></textarea>
                                                        </div>
                                                        <div class="owner-contact mt-12">
                                                            <a href="#"
                                                               class="btn ht-btn-primary btn-xl btn-block"
                                                               id="send-message-owner">Gửi</a>
                                                        </div>
                                                    </form>
                                                </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">
                                        <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>

                                    <h4>
                                        Tên phòng: Phòng {{ $room->name }}
                                        (Mã nhà trọ:
                                        000{{ $hostel->id * 1000 + 125 }})</h4>

                                    {!! str_replace('\n', '<br>', $hostel->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="{{ $amenity->web_image_url }}" 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="{{ $policy->web_image_url }}" width="12"
                                                         height="12"><span>{{ $policy->name }}</span></li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <hr>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty(doubleval(trim($hostel->lat))) && !empty(doubleval(trim($hostel->lng))))
                <div id="propertyMapSection" class="detail-property__addresses pos-rel zi-400">
                    <div class="container">
                        <div class="ht-depth-1 mt-12 pa-12">
                            <div class="detail-property__addresses__details">{{ $hostel->address }}</div>
                            <div class="detail-property__addresses__details__maps">

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

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


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

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

            <div class="detail-property__share">
                <div class="container">
                    <div class="detail-property__share__wrap flex-ai-center flex-jc-center">
                        <div class="share-label flex-item">Chia sẻ ngay để nhiều người biết đến hơn!</div>
                        <div class="share-action flex-item">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{  url()->current() }}"
                               class="btn ht-btn-social ht-btn-facebook my-4 w-220"><span class="ht-icon-social"><i
                                            class="ion-social-facebook"></i></span>Chia sẻ qua Facebook</a>
                            <a href="https://plus.google.com/share?url={{  url()->current() }}"
                               class="btn ht-btn-social ht-btn-googleplus my-4 w-220"><span class="ht-icon-social"><i
                                            class="ion-email"></i></span>Chia sẻ qua Email</a>
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty($relates))
                <div class="detail-property__related bg-color-grey-200">
                    <div class="container">
                        <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', [
                                            '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::HOSTEL }}">
                        <input type="hidden" name="object_id" value="{{ $hostel->id }}">

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


@endsection

@push('scripts')
<script 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 src="/assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js" type="text/javascript"></script>


<script>

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


    $(document).ready(function () {
        $("#mask_date").inputmask("d/m h:s", {autoUnmask: false});

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

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

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

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


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

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

        }

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

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

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

                        });

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

                }
            }
        });
    })

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

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


        // ====
        // sticky menu

        function stickyMenuBar_singleProperty() {

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

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

        stickyMenuBar_singleProperty();

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

        // END sticy menu
        // ====


        // ====
        // smooth scroll

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

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


        // map toggle location

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

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

    });

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

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

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

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

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

        });

    });

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

        $('#send-message-owner').click(function (e) {
            var data = $('#form-send-message-owner').serialize();
            e.preventDefault();
            var formStatus = $('#form-send-message-owner').validate({
                errorElement: "span",
                errorClass: "help-block help-block-error",

                highlight: function (e) {
                    $(e).closest(".form-group").addClass("has-error")
                },
                unhighlight: function (e) {
                    $(e).closest(".form-group").removeClass("has-error")
                },
                success: function (e) {
                    e.closest(".form-group").removeClass("has-error")
                },
                rules: {
                    'name': "required",
                    //  'amenities[]': "required",
                    'phone': {
                        required: true,
                    },
                    'date': {
                        required: true,
                    },
                },
                messages: {
                    'name': "Không được bỏ trống tên",
                    'phone': "Không được bỏ trống SĐT",
                    'date': "Không được bỏ trống thời gian",
                    // 'amenities[]': "Không được bỏ trống tiện ích"
                }
            }).form();

            if (formStatus) {
                $.ajax({
                    url: '{{ url('send-message-owner') }}',
                    data: data,
                    type: 'post',
                    dataType: 'json',
                    success: function (response) {
                        if (response.status == 1) {
                            $('#form-send-message-owner')[0].reset();
//                        $.toast({
//                            heading: 'Thành công',
//                            text: response.message,
//                            position: 'top-right',\
//                            icon: 'success',
//                            stack: false,
//                        })
                            swal('Thành công', 'Thông tin đã được gửi tới chủ trọ', 'success');
                        } else {
                            swal('Thông báo', response.message, 'info');
                        }
                    }
                });

            }
        });
    });



</script>
@endpush