@extends('layout4')

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

    <!-- CSS: Libs-->
    <link rel="stylesheet" href="frontend3/assets2/libs/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="frontend3/assets2/libs/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="frontend3/assets2/libs/select2/css/select2.min.css">
    <link rel="stylesheet" href="frontend3/assets2/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="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="frontend3/assets2/libs/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="frontend3/assets2/libs/slick/slick.css">
    <!-- <link rel="stylesheet" href="frontend3/assets2/libs/slick/slick-theme.css"> -->
    <!-- CSS: Main -->
    <link rel="stylesheet" href="frontend3/assets2/css/main.css">
    <link rel="stylesheet" href="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]-->
    <style>
        /*.list-filters{*/
        /*position: absolute;*/
        /*top: -760px;*/
        /*left: 40px;*/
        /*z-index: 1000;*/
        /*}*/

    </style>

@endsection
@section('meta')
    <meta property="og:url" content="{{ url()->current() }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="iTro.vn - Tìm là thấy, ở là thích"/>
    <meta property="og:description"
          content="Phần mềm quản lý nhà trọ giá rẻ, hiệu quả, đơn giản. iTro cung cấp đầy đủ hệ sinh thái nhà trọ từ quản lý nhà trọ, tìm trọ và kết nối giữa chủ trọ và khách thuê"/>
    <meta property="og:image" content="{{url('frontend3/stock2/home-bg1-dark.jpg')}}"/>

@endsection
<!-- site content -->
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="home-intro-section ht-bgcover"
                 style="background-image: url('frontend3/stock2/home-bg1-dark.jpg'">
                <div class="container">
                    <div class="ht-wrapper">
                        <div class="home-intro__content text-center">
                            <h2 class="home-intro__content__title">Cổng thông tin nhà trọ trực tuyến</h2>
                            <div class="home-intro__content__subtitle">iTro - Kết nối chủ trọ và khách thuê</div>
                        </div>
                        <div class="home-intro__search">
                            <div class="row">
                                <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
                                    <form action="" class="home-intro__search-form">
                                        <div class="row">
                                            <div class="col-xs-12 col-md-8">
                                                <div class="form-group ma-0">
                                                    <input type="text" class="search-input form-control"
                                                           placeholder="Bạn đang tìm phòng ở đâu">
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-md-4">
                                                <div class="form-group ma-0">
                                                    <button class="search-submit btn ht-btn-primary btn-block">Tìm
                                                        ngay
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="text-center" style="margin: 36px;">
                            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2"
                                 style="margin-bottom: 30px">
                                <h3 class="download-apps__title" style="color:white;">Tải ứng dụng iTro</h3>
                                <div class="download-apps__actions">
                                    <a href="https://itunes.apple.com/us/app/itro-qu%E1%BA%A3n-l%C3%BD-tr%E1%BB%8D-th%C3%B4ng-minh/id1352848785?ls=1&mt=8"
                                       class=""><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                                     data-src="/frontend3/assets/img/download-appstore.png" alt=""
                                                     height="48" style="margin: 5px"></a>
                                    <a href="https://play.google.com/store/apps/details?id=com.blue.hoantran.itro_host"
                                       class=""><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                                     data-src="/frontend3/assets/img/download-playstore.png" alt=""
                                                     height="48" style="margin: 5px"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--//nổi bật--}}

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

    <div class="container-fluid home-featured-properties-carousel-container">
         <div class="bg-color-grey-200">
            <div class="container container--extended has-mw-on-xs-screen">
                <p style="text-align: center; font-size: 42px; font-weight: bold; margin: 32px 0px 0px 0px;">Nhà trọ nổi bật</p>
                <div class="home-featured-properties-section">

                    {{--//begin content--}}
                    <div class="section-content">
                        <div class="list-property-cards">
                            <div class="">
                                <div class="list-property-cards">
                                    <div class="list-row">

                                        @foreach($hostels as $hostel)
                                            <div class="list-col">
                                                <div class="single-property-card single-property-card--size-lg ht-card ht-depth-1">
                                                    <a href="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}" class="block" target="_blank">
                                                        <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="{{ $hostel->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">Đã xác thực</span>
                                                                </div>
                                                                <div class="single-badge single-badge--featured">
                                                                    <i class="single-badge__icon ion-android-star"></i>
                                                                    <span class="single-badge__text">Nổi bật</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="card-content" style="height: 111px !important;">
                                                            <div class="property__intro">
                                                                <h4 class="property__title post_title">{{ $hostel->name }}</h4>
                                                                <div class="property__meta ht-oneline">
                                                                    {{--                                                    <span>Tìm ở ghép</span>--}}
                                                                    @if($hostel->smallest_price == $hostel->greatest_price)
                                                                        <span>{{ number_format($hostel->smallest_price, 0, '.', '.') }}
                                                                            đ</span>
                                                                    @else
                                                                        <span>{{ number_format($hostel->smallest_price, 0, '.', '.') }}
                                                                            đ - {{ number_format($hostel->greatest_price, 0, '.', '.') }}
                                                                            đ</span>
                                                                    @endif
                                                                </div>
                                                                <div class="property__address"><i
                                                                            class="ion-location"></i> {{ $hostel->address_text }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>

                                                </div>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>
                                {{ $hostels->links() }}
                            </div>
                        </div>
                    </div>

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


        {{--<div class="container-fluid home-featured-properties-carousel-container">--}}
            {{--<div class="featured-properties-carousel">--}}
                {{--<p style="font-size: 32px; margin: 32px 0px 24px 15px;">Nhà trọ nổi bật</p>--}}
                {{--<div class="ht-item-slick ht-featured-properties-slick has-slick-arrow-type-01">--}}
                    {{--@foreach($hostels as $hostel)--}}
                        {{--<div class="single-col">--}}
                            {{--<div class="single-property">--}}
                                {{--<a href="{{ url('nha-tro/'.str_slug($hostel->name).'-'.$hostel->id) }}"--}}
                                   {{--class="d-block pos-rel">--}}
                                    {{--<div class="property__photo ht-rectangle ratio-43">--}}
                                        {{--<div class="ht-inner bg-color-grey-100">--}}
                                            {{--<img src="{{ $hostel->image }}" alt=""--}}
                                                 {{--class="ht-img-obj-cover">--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                    {{--<div class="property__content">--}}
                                        {{--<div class="property__title ht-oneline">{{ $hostel->name }}--}}
                                        {{--</div>--}}
                                        {{--<div class="property__meta ht-oneline">--}}
                                            {{--                                                    <span>Tìm ở ghép</span>--}}
                                            {{--@if($hostel->smallest_price == $hostel->greatest_price)--}}
                                                {{--<span>{{ number_format($hostel->smallest_price, 0, '.', '.') }}--}}
                                                    {{--đ</span>--}}
                                            {{--@else--}}
                                                {{--<span>{{ number_format($hostel->smallest_price, 0, '.', '.') }}--}}
                                                    {{--đ - {{ number_format($hostel->greatest_price, 0, '.', '.') }}--}}
                                                    {{--đ</span>--}}
                                            {{--@endif--}}
                                        {{--</div>--}}
                                        {{--<div class="property__address"><i--}}
                                                    {{--class="ion-location"></i> {{ $hostel->address_text }}--}}
                                        {{--</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">Đã xác thực</span>--}}
                                        {{--</div>--}}
                                        {{--<div class="single-badge single-badge--featured">--}}
                                            {{--<i class="single-badge__icon ion-android-star"></i>--}}
                                            {{--<span class="single-badge__text">Nổi bật</span>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</a>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--@endforeach--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
        <div class="bg-color-grey-100">
            <div class="container container--extended has-mw-on-xs-screen">
                <p style="text-align: center; font-size: 42px; font-weight: bold; margin: 32px 0px 0px 0px;">Cho thuê</p>
                <div class="home-featured-properties-section">
                    <!-- <div class="section-header text-center">
                        <h3 class="section-header__title text-uppercase has-bdb">Nhà trọ còn phòng</h3>
                        <div class="section-header__actions">
                            <a href="#" class="see-more no-udl">Xem tất cả</a>
                        </div>
                    </div> -->

                    <div class="section-filters">
                        <button class="section-filters__toggle collapsed" data-toggle="collapse"
                                data-target="#Collapse__FilterProperties">
                            <span class="toggle-label">Lọc kết quả</span>
                            <i class="toggle-icon ion-navicon"></i>
                        </button>
                        <div id="Collapse__FilterProperties" class="section-filters__collapse collapse">
                            <div class="section-filters__menu">
                                <div class="left-side" id="left-side-filter">
                                    <div class="list-filters">
                                        <div class="single-filter">
                                            <div class="dropdown dropdown--filter-properties dropdown-menu--sP"
                                                 id="province">
                                                <a href="javascript:void(0)" class="dropdown__toggle"
                                                   data-toggle="dropdown">
                                                    <div class="toggle-label">Tỉnh, thành phố</div>
                                                    <div class="toggle-icon"><i class="ion-ios-arrow-down"></i>
                                                    </div>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu--filter-areas">
                                                    @foreach($provinceData as $province)
                                                        <li class="single-filter-area">
                                                            <a href="javascript:void(0)"
                                                               class="single-filter-area__link">
                                                                <div class="area-title"
                                                                     data-id="{{$province->provinceid}}">{{$province->name}}</div>
                                                                <div class="area-count">Có {{$province->count}}
                                                                    địa
                                                                    điểm
                                                                </div>
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="single-filter">
                                            <div class="dropdown dropdown--filter-properties dropdown-menu--sP">
                                                <a href="javascript:void(0)" class="dropdown__toggle"
                                                   data-toggle="dropdown">
                                                    <div class="toggle-label" id="district">Quận, huyện</div>
                                                    <div class="toggle-icon"><i class="ion-ios-arrow-down"></i>
                                                    </div>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu--filter-properties">
                                                    <div class="single-filter-cat">
                                                        <div class="single-filter-cat__content">
                                                            <div class="filter-properties-wrap district-list">
                                                                <span class="no-province" style="display: none">
                                                                    Vui lòng chọn Tỉnh, Thành phố
                                                                </span>
                                                                {{--//quận huyện--}}
                                                            </div>
                                                            <div class="district-list-template"
                                                                 style="display: none;">
                                                                <div class="single-filter-property">
                                                                    <label class="c-option district-item">
                                                                        <input type="checkbox"
                                                                               class="c-option__input district-value">
                                                                        <div class="c-option__icon"></div>
                                                                        <div class="c-option__label district-name">
                                                                            Option one
                                                                        </div>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="single-filter">
                                            <div class="dropdown dropdown--filter-properties dropdown-menu--sP">
                                                <a href="#" class="dropdown__toggle" data-toggle="dropdown">
                                                    <div class="toggle-label">Loại tin đăng</div>
                                                    <div class="toggle-icon"><i class="ion-ios-arrow-down"></i>
                                                    </div>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu--filter-properties">
                                                    <div class="single-filter-cat">
                                                        <div class="single-filter-cat__header">
                                                            <h4 class="single-filter-cat__title">Bạn có thể chọn
                                                                nhiều
                                                                mục dưới đây</h4>
                                                            <hr>
                                                        </div>
                                                        <div class="single-filter-cat__content">
                                                            <div class="filter-properties-wrap post-type-list">
                                                                @foreach($typePost as $type)
                                                                    <div class="single-filter-property">
                                                                        <label class="c-option post-type-item">
                                                                            <input type="checkbox"
                                                                                   class="c-option__input post-type-value"
                                                                                   value="{{$type->id}}">
                                                                            <div class="c-option__icon"></div>
                                                                            <div class="c-option__label">{{$type->name}}</div>
                                                                        </label>
                                                                    </div>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="single-filter">
                                            <div class="dropdown dropdown--filter-properties dropdown-menu--sP">
                                                <a href="#" class="dropdown__toggle" data-toggle="dropdown">
                                                    <div class="toggle-label">Tiện ích</div>
                                                    <div class="toggle-icon"><i class="ion-ios-arrow-down"></i>
                                                    </div>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu--filter-properties">
                                                    <div class="single-filter-cat">
                                                        <div class="single-filter-cat__header">
                                                            <h4 class="single-filter-cat__title">Bạn có thể chọn
                                                                nhiều
                                                                mục dưới đây</h4>
                                                            <hr>
                                                        </div>
                                                        <div class="single-filter-cat__content">
                                                            <div class="filter-properties-wrap post-amenities-list">
                                                                @foreach($amenities as $amenity)
                                                                    <div class="single-filter-property">
                                                                        <label class="c-option post-amenities-item">
                                                                            <input type="checkbox"
                                                                                   class="c-option__input post-amenities-value"
                                                                                   value="{{$amenity->id}}">
                                                                            <div class="c-option__icon"></div>
                                                                            <div class="c-option__label">{{$amenity->name}}</div>
                                                                        </label>
                                                                    </div>
                                                                @endforeach

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="single-filter">
                                            <div class="dropdown dropdown--filter-properties dropdown-menu--sP">
                                                <a href="#" class="dropdown__toggle" data-toggle="dropdown">
                                                    <div class="toggle-label">Khoảng giá</div>
                                                    <div class="toggle-icon"><i class="ion-ios-arrow-down"></i>
                                                    </div>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu--filter-properties">
                                                    <div class="single-filter-cat">
                                                        <div class="single-filter-cat__content">
                                                            <div class="filter-properties-wrap post-price-list">
                                                                @foreach($fees as $fee)
                                                                    <div class="single-filter-property">
                                                                        <label class="c-option post-price-item">
                                                                            <input type="checkbox"
                                                                                   class="c-option__input post-price-value"
                                                                                   value="{{$fee->id}}"
                                                                                   data-from="{{$fee->fee_from}}"
                                                                                   data-to="{{$fee->fee_to}}">
                                                                            <div class="c-option__icon"></div>
                                                                            <div class="c-option__label ">
                                                                                {{$fee->name}}
                                                                            </div>
                                                                        </label>
                                                                    </div>
                                                                @endforeach

                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right-side">
                                    <div class="sort-order">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <label class="sort-order__label">Sắp xếp theo:</label>
                                                <div class="sort-order__input">
                                                    <select class="form-control sort-order-post">
                                                        <option selected>Mặc định</option>
                                                        <option value="1">A - Z</option>
                                                        <option value="2">Z - A</option>
                                                        <option value="3">Giá tăng dần</option>
                                                        <option value="4">Giá giảm dần</option>
                                                    </select>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="section-filters__selected">
                            <div class="left-side">
                                <div class="list-selected-filters">
                                    <div class="single-selected-filters search-filter" style="display: none">
                                        <div class="filter-label">Từ khóa: <span
                                                    class="filter-count filter-count-search">(0)</span>
                                        </div>
                                        <div class="filter-action">
                                            <a href="javascript:void(0)"
                                               class="filter-action__delete filter-search__delete"><i
                                                        class="ion-android-close"></i></a>
                                        </div>
                                    </div>
                                    <div class="single-selected-filters district-filter" style="display: none">
                                        <div class="filter-label">Quận, huyện <span
                                                    class="filter-count filter-count-district">(0)</span>
                                        </div>
                                        <div class="filter-action">
                                            <a href="javascript:void(0)"
                                               class="filter-action__delete filter-district__delete"><i
                                                        class="ion-android-close"></i></a>
                                        </div>
                                    </div>
                                    <div class="single-selected-filters type-filter" style="display: none">
                                        <div class="filter-label">Loại tin đăng <span
                                                    class="filter-count filter-count-type">(0)</span>
                                        </div>
                                        <div class="filter-action">
                                            <a href="javascript:void(0)"
                                               class="filter-action__delete filter-type__delete"><i
                                                        class="ion-android-close"></i></a>
                                        </div>
                                    </div>
                                    <div class="single-selected-filters amenities-filter" style="display: none">
                                        <div class="filter-label">Tiện ích <span
                                                    class="filter-count filter-count-amentities">(0)</span>
                                        </div>
                                        <div class="filter-action">
                                            <a href="javascript:void(0)"
                                               class="filter-action__delete filter-amenities__delete"><i
                                                        class="ion-android-close"></i></a>
                                        </div>
                                    </div>
                                    <div class="single-selected-filters price-filter" style="display: none">
                                        <div class="filter-label">Khoảng giá <span
                                                    class="filter-count filter-count-price">(0)</span>
                                        </div>
                                        <div class="filter-action">
                                            <a href="javascript:void(0)"
                                               class="filter-action__delete filter-rangeprice__delete"><i
                                                        class="ion-android-close"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-side">
                                <div class="filter-result-count">Có <b id="total-result"></b> phòng còn trống
                                </div>
                            </div>
                        </div>
                    </div>


                    {{--//begin content--}}
                    <div class="section-content">
                        <div class="list-property-cards">
                            <div class="list-row" id="list_post">
                                <div class="list-col">

                                </div>
                                {{--//item colume--}}
                            </div>
                        </div>
                    </div>
                    <div style="display: none;">
                        @include("frontend3.find_room_2.list_post")
                    </div>
                    {{--//end content--}}

                    <div class="section-footer mt-12 py-12">
                        <div class="text-center">
                            <ul id="pagination"></ul>
                            {{--{{ $dataPost->links() }}--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-color-orange-500">
            <div class="container">
                <div class="home-why-choose-us-section">
                    <div class="section-header">
                        <h3 class="section-header__title text-uppercase has-bdb text-center">Tại sao nên chọn
                            chúng
                            tôi</h3>
                    </div>
                    <div class="section-content">
                        <div class="row">
                            <div class="col-xs-12 col-sm-4">
                                <div class="single-reason text-center">
                                    <div class="single-reason__icon"><img
                                                src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                                data-src="/frontend3/assets/img/so_sach.png" alt=""></div>
                                    <div class="single-reason__title">Tạm biệt sổ sách</div>
                                    <div class="single-reason__subtitle">Quản lý nhà trọ với mốt chiếc
                                        smartphone hoặc
                                        một
                                        chiếc máy tính có kết nối internet
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="single-reason text-center">
                                    <div class="single-reason__icon"><img
                                                src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                                data-src="/frontend3/assets/img/gia_re.png" alt=""></div>
                                    <div class="single-reason__title">Giá rẻ vô địch</div>
                                    <div class="single-reason__subtitle">Nếu bạn là chủ trọ, bạn sẽ được sử dụng
                                        phần
                                        mềm
                                        quản lý với giả rẻ nhất thị trường
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4">
                                <div class="single-reason text-center">
                                    <div class="single-reason__icon"><img
                                                src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                                                data-src="/frontend3/assets/img/trung_thuc.png" alt=""></div>
                                    <div class="single-reason__title">Thông tin trung thực, cập nhật</div>
                                    <div class="single-reason__subtitle">Tất cả các nhà trọ trên iTro đèu được
                                        đội ngũ
                                        iTro
                                        xác minh và cập nhật thường xuyên
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($testimonials->count() > 0)
            <div class="bg-color-white">
                <div class="container">
                    <div class="home-customer-feedbacks-section">
                        <div class="section-header">
                            <h3 class="section-header__title text-uppercase has-bdb text-center">Cảm nhận khách
                                hàng</h3>
                        </div>
                        <div class="section-content">
                            <div id="carouselHomeCustomerFeedback"
                                 class="customer-feedback-carousel carousel slide"
                                 data-ride="carousel">
                                <!-- Wrapper for slides -->

                                <div class="carousel-inner" role="listbox">
                                    @foreach($testimonials as $testimonial)
                                        <div class="item @if($loop->index == 0) active @endif">
                                            <div class="item-inner">
                                                <div class="feedback-content has-quote-icon">{{ $testimonial->content }}
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Indicators -->
                                <ul class="carousel-indicators list-unstyled">
                                    @foreach($testimonials as $testimonial)
                                        <li data-target="#carouselHomeCustomerFeedback"
                                            data-slide-to="{{ $loop->index }}"
                                            class="@if($loop->index == 0) active @endif">
                                            <div class="feedback-user">
                                                <div class="feedback-user__avatar">
                                                    <div class="image-wrap ht-bgcover"
                                                         style="background-image: url('/files/{{ $testimonial->image }}')"></div>
                                                </div>
                                                <div class="feedback-user__info">
                                                    <h5 class="feedback-user__title">{{ $testimonial->name }}</h5>
                                                    <div class="feedback-user__subtitle">{{ $testimonial->address }}</div>
                                                </div>
                                            </div>
                                        </li>
                                    @endforeach

                                </ul>
                                <!-- Controls -->
                                <a class="left ht-carousel-control" href="#carouselHomeCustomerFeedback"
                                   role="button"
                                   data-slide="prev"><i class="ion-ios-arrow-left"></i></a>
                                <a class="right ht-carousel-control" href="#carouselHomeCustomerFeedback"
                                   role="button"
                                   data-slide="next"><i class="ion-ios-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="newsletter-signup bg-color-grey-50">
            <div class="container">
                <form action="#" class="text-center">
                    <div class="newsletter-icon mr-24 d-iblock va-mid">
                        <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
                             data-src="/frontend3/assets/img/newsletter.svg" alt="">
                    </div>
                    <div class="newsletter-intro mr-48 text-left d-iblock va-mid">
                        <h5 class="info-title">Đăng ký nhận bản tin iTro</h5>
                        <div class="info-descr">Cập nhật tin tức mới nhất và khuyến mãi hấp dẫn</div>
                    </div>
                    <div class="newsletter-input form-inline d-iblock va-mid">
                        <div class="form-group">
                            <label class="sr-only">Email</label>
                            <input type="text" class="form-control" placeholder="Địa chỉ email của bạn"
                                   id="email-subscribe">
                        </div>
                        <button type="button" class="btn ht-btn-primary" id="btn-subscribe-email">Đăng ký
                        </button>
                    </div>
                </form>
            </div>
        </div>
        @endsection

    <!-- END site content -->
    </div>
    @push('scripts')
        {{--<!-- JS: Libs -->--}}
        {{--<script src="frontend3/assets2/libs/jquery.min.js"></script>--}}
        {{--<script src="frontend3/assets2/libs/bootstrap/js/bootstrap.js"></script>--}}
        <script src="frontend3/assets2/libs/select2/js/select2.full.min.js"></script>
        <script src="frontend3/assets2/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
        {{--<script src="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="frontend3/assets2/libs/fancybox/jquery.fancybox.min.js"></script>
        <script src="frontend3/assets2/libs/slick/slick.min.js"></script>
        <script src="frontend3/assets2/libs/autosize/autosize.min.js"></script>
        <script src="frontend3/assets2/libs/moment-with-locales.min.js"></script>
        <script src="frontend3/assets2/libs/moment.min.js"></script>
        <!-- JS: Main -->
        <script src="frontend3/assets2/js/main.js"></script>
        <script src="/frontend3/assets/libs/twbsPagination/jquery.twbsPagination.min.js"></script>

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

                $('#btn-subscribe-email').click(function () {

                    var email = $('#email-subscribe').val();
                    $.ajax({

                        url: '{{ url('account/subscribe') }}',
                        data: {
                            email: email
                        },
                        dataType: 'json',
                        type: 'post',
                        success: function (response) {
                            if (response.status == 0) {
                                swal('Thông báo', response.message, 'warning');
                            }
                            if (response.status == 1) {
                                $('#email-subscribe').val('');
                                swal('Thông báo', 'Đăng ký nhận bản tin thành công', 'success');
                            }
                        }
                    });

                });

                // prevent dropdown menu close while clicking inside
                $(document).on('click', '.dropdown-menu--sP', function (e) {
                    e.stopPropagation();
                });

                //build danh sách các phòng
                getPostList();


                ////////LỌC TÌM KIẾM BEGIN//////////////////
                //tìm kiếm theo tiêu đề
                //option
                $(".home-intro__search-form").submit(function (e) {
                    e.preventDefault();
                });

                $(document).on('click', '.search-submit', function () {
                    var search = $('.search-input').val();
                    if (search != '') {
                        getPostList();
                        $('.filter-count-search').text($('.search-input').val());
                        $('.search-filter').css('display', '');
                    }
                })
                //move to list
                $('.search-submit, .nav-type-post').click(function () {
                    $("html, body").animate({scrollTop: 775}, 400);
                });


                //sắp xếp tăng, giảm...
                $('.sort-order-post').change(function () {
                    getPostList();

                })

                //lọc theo danh sách loại tin trên header
                $('.nav-type-post').click(function () {
                    // remove active class on all nav links
                    $(this).parents('.navbar-nav').find('.nav-type-post').removeClass("active");
                    var typepost = $(this).addClass('active');

                    //hủy loại tin bên dưới
                    $(".post-type-value").each(function () {
                        this.checked = false;
                    })
                    $('.type-filter').css('display', 'none')

                    $('.filter-count-type').text('(1)');
                    $('.type-filter').css('display', '');

                    //$('.type-filter').css('display', 'none');

                    getPostList();

                })

                //click lựa chọn tỉnh thành phố
                $('.single-filter-area').click(function () {

                    var province_id = $(this).find('.area-title').attr('data-id');
                    var province_name = $(this).find('.area-title').text();
                    $(this).parents('#province').find('.toggle-label').text(province_name)
                    $(this).parents('#province').find('.toggle-label').attr('data-id', province_id)
                    $(this).parents('#province').removeClass("open");

                    //build district
                    var province = $("#province").find('.toggle-label').attr('data-id');
                    $.ajax({
                        url: '{{ route('FindRoom2Controller.getDistrictByProvince') }}',
                        type: 'get',
                        dataType: 'json',
                        data: {province_id: province},
                        success: function (response) {
                            if (response.status == true) {
                                var dt = response.data;
                                var container = $('.district-list');
                                container.empty();
                                dt.forEach(function (obj) {
                                    var item = $('.district-list-template').contents().clone();
                                    $(item).find('.district-value').val(obj.districtid);
                                    $(item).find('.district-name').text(obj.name);
                                    container.append(item);
                                })
                            }
                        },
                        error: function (error) {
                        }
                    })

                })

                //hiển thị list quận huyện theo tỉnh thành không có
                $("#district, .ion-ios-arrow-down").click(function () {
                    var province = $("#province").find('.toggle-label').attr('data-id');
                    //trường hợp chưa chọn tỉnh thành thì hiện thông báo hãy chọn tỉnh thành
                    if (province == undefined || province == null) {
                        $('.no-province').css('display', 'block');
                    }
                });

                //lọc theo district
                $(document).on('click', '.district-item', function () {
                    var count = $('.district-list').find(".district-value:checked").length;
                    if (count > 0) {
                        $('.filter-count-district').text('(' + count + ')');
                        $('.district-filter').css('display', '');
                    } else {
                        $('.district-filter').css('display', 'none');
                    }
                })

                //lọc theo Loại Tin
                $(document).on('click', '.post-type-item', function () {
                    // remove active class on all nav links
                    $('.nav-type-post').removeClass("active");
                    var count = $('.post-type-list').find(".post-type-value:checked").length;
                    if (count > 0) {
                        $('.filter-count-type').text('(' + count + ')');
                        $('.type-filter').css('display', '');
                    } else {
                        $('.type-filter').css('display', 'none');
                    }
                })

                //lọc theo Tiện ích
                $(document).on('click', '.post-amenities-item', function () {
                    var count = $('.post-amenities-list').find(".post-amenities-value:checked").length;
                    if (count > 0) {
                        $('.filter-count-amentities').text('(' + count + ')');
                        $('.amenities-filter').css('display', '');
                    } else {
                        $('.amenities-filter').css('display', 'none');
                    }
                })


                //lọc theo Khoảng giá
                $(document).on('click', '.post-price-item', function () {
                    //kiểm tra checked nếu check thì remove cái khác đi
                    var count = $('.post-price-list').find(".post-price-value:checked").length;
                    if (count > 0) {
                        $('.filter-count-price').text('(' + count + ')');
                        $('.price-filter').css('display', '');
                    } else {
                        $('.price-filter').css('display', 'none');
                    }
                })

                $('.dropdown-menu--sP').on('hidden.bs.dropdown', function () {
                    getPostList()
                })
                ////////LỌC TÌM KIẾM END//////////////////


                ///////HỦY TÌM KIẾM BEGIN
                //hủy search
                $('.filter-search__delete').click(function () {
                    $('.search-input').val('');
                    $('.search-filter').css('display', 'none')
                    getPostList();
                })
                //hủy quận huyện
                $('.filter-district__delete').click(function () {
                    $(".district-value").each(function () {
                        this.checked = false;
                    })
                    $('.district-filter').css('display', 'none')
                    getPostList();
                })
                //hủy loại tin
                $('.filter-type__delete').click(function () {
                    $('.nav-type-post').removeClass("active");
                    $(".post-type-value").each(function () {
                        this.checked = false;
                    })
                    $('.type-filter').css('display', 'none')
                    getPostList();
                })
                //hủy tiện ích
                $('.filter-amenities__delete').click(function () {
                    $(".post-amenities-value").each(function () {
                        this.checked = false;
                    })
                    $('.amenities-filter').css('display', 'none')
                    getPostList();
                })
                //hủy khoảng giá
                $('.filter-rangeprice__delete').click(function () {
                    $(".post-price-value").each(function () {
                        this.checked = false;
                    })
                    $('.price-filter').css('display', 'none')
                    getPostList();
                })

                /////////HỦY TÌM KIẾM END

                //get post list
                function getPostList() {

                    //CÁC BIẾN THEO BỘ LỌC
                    var province = $("#province").find('.toggle-label').attr('data-id');
                    var search = $('.search-input').val();
                    var sort = $(".sort-order-post").children("option:selected").val();
                    //quận huyện
                    var district = [];
                    $(".district-value").each(function () {
                        if ($(this).is(':checked')) {
                            district.push($(this).val());
                        }
                    })
                    //loại tin
                    var postType = [];

                    $('.nav-type-post').each(function () {
                        if ($(this).hasClass('active')) {
                            postType.push($(this).attr('data-id'));
                        } else {
                            $(".post-type-value").each(function () {
                                if ($(this).is(':checked')) {
                                    postType.push($(this).val());
                                }
                            })
                        }
                    })

                    //tiện ích
                    var amenities = [];
                    $(".post-amenities-value").each(function () {
                        if ($(this).is(':checked')) {
                            amenities.push($(this).val());
                        }
                    })

                    //khoảng giá
                    var price = $(".post-price-value:checked").val();
                    var fee_from = $(".post-price-value:checked").attr('data-from');
                    var fee_to = $(".post-price-value:checked").attr('data-to');
                    var price_range = [fee_from, fee_to];

                    $.ajax({
                        url: '{{ route('FindRoom2Controller.getListPost') }}',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            province: province,
                            district: district,
                            search: search,
                            sort: sort,
                            post_type: postType,
                            amenities: amenities,
                            price: price,
                            price_range: price_range,
                        },
                        success: function (response) {
                            if (response.status == true) {
                                buildList(response);
                                buildPaginate(response);
                            }
                        },
                        error: function (error) {
                        }
                    })
                }

                //function build data
                function buildList(response) {
                    $('#total-result').text(response.data.total)
                    var dt = response.data.data;
                    var container = $('#list_post');
                    var today = moment().format('YYYY MM DD');

                    container.empty();
                    dt.forEach(function (obj) {
                        var item = $('#list_post_template').contents().clone();
                        var date = moment(obj.date_available).format("YYYY MM DD");

                        $(item).find('a').attr({
                            'href': ChangeToSlug(obj.type_post) + '/' + ChangeToSlug(obj.title) + '-' + obj.id,
                            'data-post-id': obj.id,
                            'target': '_blank'
                        });
                        $(item).find('.post_image').attr('src', "/files/" + obj.image);
                        if (today > date) {
                            $(item).find('.post_date_avai').text('Có thể ở ngay');
                        } else {
                            $(item).find('.post_date_avai').text("Ngày trống: " + moment(obj.date_available).format("DD-MM-YYYY"));
                        }

                        $(item).find('.post_price').text(formatNumber(obj.price));
                        $(item).find('.post_title').text(obj.title);
                        $(item).find('.post_address').text(obj.address + ", " + obj.ward_name + ", " + obj.district_name + ", " + obj.province_name);

                        if (obj.type_electric_price === 1) {
                            $(item).find('.electrict_price').text(obj.electricity_price)
                        } else if (obj.type_electric_price === 2) {
                            $(item).find('.electrict_price').text(obj.electricity_price)
                        } else if (obj.type_electric_price === 3) {
                            $(item).find('.electrict_price').text(formatNumber(obj.electricity_price) + "/Kwh")
                        } else if (obj.type_electric_price === 4) {
                            $(item).find('.electrict_price').text(formatNumber(obj.electricity_price) + "/Người")
                        } else if (obj.type_electric_price === 5) {
                            $(item).find('.electrict_price').text(obj.electricity_price)
                        }

                        if (obj.type_water_price === 1) {
                            $(item).find('.water_price').text(obj.water_price)
                        } else if (obj.type_water_price === 2) {
                            $(item).find('.water_price').text(obj.water_price)
                        } else if (obj.type_water_price === 3) {
                            $(item).find('.water_price').text(formatNumber(obj.water_price) + "/Kwh")
                        } else if (obj.type_water_price === 4) {
                            $(item).find('.water_price').text(formatNumber(obj.water_price) + "/Người")
                        } else if (obj.type_water_price === 5) {
                            $(item).find('.water_price').text(obj.water_price)
                        }


                        if (obj.favorite_status === true) {
                            $(item).find('.single-action--like').addClass('active');
                        } else {
                            $(item).find('.single-action--like').removeClass('active');
                        }
                        container.append(item);
                    })
                }

                //function build paginate
                function buildPaginate(data) {
                    var dt = data.data.data;
                    if (dt != 0 || dt != null) {
                        var page_dt = data.data;
                        $('#pagination').twbsPagination('destroy');
                        $('#pagination').twbsPagination({
                            prev: '',
                            next: '',
                            first: 'Trang đầu',
                            last: 'Trang cuối',
                            hideOnlyOnePage: true,
                            initiateStartPageClick: false,
                            totalPages: page_dt.last_page,
                            visiblePages: 5,
                            onPageClick: function (event, page) {
                                var page = page;
                                $.ajax({
                                    url: "{{route('FindRoom2Controller.getListPost')}}",
                                    type: 'get',
                                    dataType: 'json',
                                    data: {page: page},
                                    success: function (data) {
                                        buildList(data);
                                    }
                                })
                            }
                        });
                    }
                }

                //fomat date
                function fomatDate(date) {
                    var formattedDate = new Date(date);
                    var d = formattedDate.getDate();
                    var m = formattedDate.getMonth();
                    var y = formattedDate.getFullYear();
                    return date = d + "-" + m + "-" + y;
                }

                //format number
                function formatNumber(num) {
                    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
                }


                function ChangeToSlug(string) {
                    var slug;
                    //Lấy text từ thẻ input title
                    // string = document.getElementById("title").value;

                    //Đổi chữ hoa thành chữ thường
                    slug = string.toLowerCase();

                    //Đổi ký tự có dấu thành không dấu
                    slug = slug.replace(/á|à|ả|ạ|ã|ă|ắ|ằ|ẳ|ẵ|ặ|â|ấ|ầ|ẩ|ẫ|ậ/gi, 'a');
                    slug = slug.replace(/é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ/gi, 'e');
                    slug = slug.replace(/i|í|ì|ỉ|ĩ|ị/gi, 'i');
                    slug = slug.replace(/ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ/gi, 'o');
                    slug = slug.replace(/ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự/gi, 'u');
                    slug = slug.replace(/ý|ỳ|ỷ|ỹ|ỵ/gi, 'y');
                    slug = slug.replace(/đ/gi, 'd');
                    //Xóa các ký tự đặt biệt
                    slug = slug.replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\.|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '');
                    slug = slug.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
                    //Đổi khoảng trắng thành ký tự gạch ngang
                    slug = slug.replace(/ /gi, "-");
                    //Đổi nhiều ký tự gạch ngang liên tiếp thành 1 ký tự gạch ngang
                    //Phòng trường hợp người nhập vào quá nhiều ký tự trắng
                    slug = slug.replace(/\-\-\-\-\-/gi, '-');
                    slug = slug.replace(/\-\-\-\-/gi, '-');
                    slug = slug.replace(/\-\-\-/gi, '-');
                    slug = slug.replace(/\-\-/gi, '-');
                    //Xóa các ký tự gạch ngang ở đầu và cuối
                    slug = '@' + slug + '@';
                    slug = slug.replace(/\@\-|\-\@|\@/gi, '');
                    // replace non letter or digits by -

                    //In slug ra textbox có id “slug”
                    //document.getElementById('slug').value = slug;

                    return slug;
                }
            });

        </script>
    @endpush