@extends('layout4')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="home-intro-section ht-bgcover"
                 style="background-image: url('frontend3/stock2/home-bg.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>
                </div>
                <div class="container-fluid home-featured-properties-carousel-container">
                    <div class="featured-properties-carousel">
                        <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>
        </div>
    </div>
    <div class="bg-color-grey-100">
        <div class="container container--extended has-mw-on-xs-screen">
            <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">
                                <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="frontend3/assets2/img/icon/why-choose-us-01.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="frontend3/assets2/img/icon/why-choose-us-02.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="frontend3/assets2/img/icon/why-choose-us-03.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>
    <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">
                            <div class="item active">
                                <div class="item-inner">
                                    <div class="feedback-content has-quote-icon">Tôi đã dùng iTro để quản lý 4 nhà
                                        trọ của tôi, rất tiện lợi và hiệu quả, vừa có phần mềm quản lý nhà trọ, lại
                                        có chỗ đăng tin trọ!
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item-inner">
                                    <div class="feedback-content has-quote-icon">Cựu tổng thống Sarkozy bị tạm giam
                                        hôm 20/3 để điều tra về cáo buộc nhận hàng chục triệu euro từ chính quyền
                                        nhà độc tài Gaddafi ở Libya cho chiến dịch tranh cử năm 2007.
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item-inner">
                                    <div class="feedback-content has-quote-icon">HĐXX chấp nhận đơn kiện của ông Vũ,
                                        yêu cầu bà Thảo trả lại cho Công ty cổ phần Đầu tư Trung Nguyên con dấu và
                                        giấy chứng nhận đăng ký doanh nghiệp mà bà Thảo đã chiếm đoạt.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Indicators -->
                        <ul class="carousel-indicators list-unstyled">
                            <li data-target="#carouselHomeCustomerFeedback" data-slide-to="0" class="active">
                                <div class="feedback-user">
                                    <div class="feedback-user__avatar">
                                        <div class="image-wrap ht-bgcover"
                                             style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg')"></div>
                                    </div>
                                    <div class="feedback-user__info">
                                        <h5 class="feedback-user__title">Cô Hạnh</h5>
                                        <div class="feedback-user__subtitle">Chủ trọ - Hà Nội</div>
                                    </div>
                                </div>
                            </li>
                            <li data-target="#carouselHomeCustomerFeedback" data-slide-to="1">
                                <div class="feedback-user">
                                    <div class="feedback-user__avatar">
                                        <div class="image-wrap ht-bgcover"
                                             style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/jadlimcaco/128.jpg')"></div>
                                    </div>
                                    <div class="feedback-user__info">
                                        <h5 class="feedback-user__title">Bạn Adam Hin</h5>
                                        <div class="feedback-user__subtitle">Người thuê nhà - Hà Nội</div>
                                    </div>
                                </div>
                            </li>
                            <li data-target="#carouselHomeCustomerFeedback" data-slide-to="2">
                                <div class="feedback-user">
                                    <div class="feedback-user__avatar">
                                        <div class="image-wrap ht-bgcover"
                                             style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/glif/128.jpg')"></div>
                                    </div>
                                    <div class="feedback-user__info">
                                        <h5 class="feedback-user__title">Anh N-golo Zuku</h5>
                                        <div class="feedback-user__subtitle">Người thuê nhà - Hà Nội</div>
                                    </div>
                                </div>
                            </li>
                        </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>
    <div class="bg-color-grey-500 ht-bgcover"
         style="background-image: url('http://via.placeholder.com/1920x800/212121/212121')">
        <div class="container">
            <div class="home-download-apps-section">
                <div class="container">
                    <h3 class="download-apps__title">Tải ngay ứng dụng iTro để quản lý <br
                                class="hidden-xs hidden-sm">và tìm kiếm dễ dàng hơn</h3>
                    <div class="download-apps__actions">
                        <a href="#" class="d-iblock"><img src="frontend3/assets2/img/download-appstore.png" alt=""
                                                          height="48"></a>
                        <a href="#" class="d-iblock"><img src="frontend3/assets2/img/download-playstore.png" alt=""
                                                          height="48"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection