@extends('frontend3')

@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="https://itro.vn/placeholder.jpg"/>


@endsection

@section('content')



    <div class="container-fluid">
        <div class="row">
            <div class="home-intro-section ht-bgcover bgcoverdefer" data-src="/frontend3/stock/home-bg.jpg" style="background-image: url('data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=')">
                <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 - Tìm là thấy, ở là thích</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="{{ url('tim-kiem') }}" method="get" class="home-intro__search-form">
                                        <input type="hidden" name="lat" id="query_lat">
                                        <input type="hidden" name="lng" id="query_lng">
                                        <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" id="query"
                                                           name="query">
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-md-4">
                                                <div class="form-group ma-0">
                                                    <button type="submit"
                                                            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($features as $feature)
                                @include('frontend3.item_featured', [
                                    'item'=>$feature
                                ])
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-color-grey-100">
        <div class="container 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="{{ url('tim-kiem') }}" class="see-more no-udl">Xem tất cả</a>
                    </div>
                </div>
                <div class="section-content">
                    <div class="list-property-cards">
                        @foreach($hostelHasEmpty->chunk(4) as $chunk)
                            <div class="row">
                                @foreach($chunk as $item)
                                    <div class="col-xs-12 col-sm-6 col-md-3">
                                        @include('frontend3.item', compact('item'))
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="section-footer mt-24 py-24">
                    <div class="section-footer__text text-center">
                        <p>Bạn có nhà trọ muốn khách thuê tìm thấy trên iTro?</p>
                        <p>Bạn muốn quản lý nhà trọ chỉ với một chiếc smartphone hay laptop?</p>
                    </div>
                    <div class="section-footer__actions text-center mt-28">
                        <a href="#" class="btn ht-btn-primary btn-xl text-uppercase px-28 post-hostel">Đăng tin miễn
                            phí</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{--<div class="bg-color-grey-200">--}}
        {{--<div class="container 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">Tìm người ở ghép</h3>--}}
                    {{--<div class="section-header__actions">--}}
                        {{--<a href="{{ url('tim-o-ghep') }}" class="see-more no-udl">Xem tất cả</a>--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div class="section-content">--}}
                    {{--<div class="list-property-cards">--}}
                        {{--@foreach($needMores->chunk(4) as $chunk)--}}
                            {{--<div class="row">--}}
                                {{--@foreach($chunk as $item)--}}
                                    {{--<div class="col-xs-12 col-sm-6 col-md-3">--}}
                                        {{--@include('frontend3.item_need_more', compact('item'))--}}
                                    {{--</div>--}}
                                {{--@endforeach--}}
                            {{--</div>--}}
                        {{--@endforeach--}}
                    {{--</div>--}}
                {{--</div>--}}
                {{--<div class="section-footer mt-24 py-24">--}}
                    {{--<div class="section-footer__text text-center">--}}
                        {{--<p>Bạn có nhà trọ muốn khách thuê tìm thấy trên iTro?</p>--}}
                        {{--<p>Hãy sử dụng tính năng đăng tin miễn phí của chúng tôi</p>--}}
                    {{--</div>--}}
                    {{--<div class="section-footer__actions text-center mt-28">--}}
                        {{--<a href="#" class="btn ht-btn-primary btn-xl text-uppercase px-28 post-need-more">Đăng tin miễn--}}
                            {{--phí</a>--}}
                    {{--</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="bg-color-grey-500 ht-bgcover" style="background-image: url('https://via.placeholder.com/1920x800/212121/212121')">
        <div class="container">
            <div class="home-download-apps-section">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6" style="margin-top: 15px">

                            <h3 class="download-apps__title">Tải phần mềm quản lý nhà trọ cho chủ trọ </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="d-iblock"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/frontend3/assets/img/download-appstore.png" alt="" height="48"></a>
                                <a href="https://play.google.com/store/apps/details?id=com.blue.hoantran.itro_host" class="d-iblock"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/frontend3/assets/img/download-playstore.png" alt="" height="48"></a>
                            </div>
                        </div>
                        <div class="col-md-6" style="margin-top: 15px">

                            <h3 class="download-apps__title pull-right-not-xs pull-right-not-sm">Tải phần mềm itro cho khách thuê</h3>
                            <div class="download-apps__actions pull-right-not-xs pull-right-not-sm">
                                <a href="https://itunes.apple.com/us/app/itro-t%C3%ACm-l%C3%A0-th%E1%BA%A5y-%E1%BB%9F-l%C3%A0-th%C3%ADch/id1363964411?ls=1&mt=8" class="d-iblock"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/frontend3/assets/img/download-appstore.png" alt="" height="48"></a>
                                <a href="https://play.google.com/store/apps/details?id=meboo.com.itrouser" class="d-iblock"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="/frontend3/assets/img/download-playstore.png" alt="" height="48"></a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <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

@push('scripts')
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCydLs7dhJPuozABFQjJO-uk1PITW18oo8&libraries=places&region=vi&language=vi&sensor=false"></script>
<script type="text/javascript" async defer src="/frontend/scripts/infobox.min.js"></script>
<script type="text/javascript" async defer src="/frontend/scripts/markerclusterer.js"></script>
<script type="text/javascript" async defer src="/js/gmap.js"></script>
<script>

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

        });

    });
    $(document).ready(function () {
        var input = document.getElementById('query');
        var autocomplete = new google.maps.places.Autocomplete(input, {
            types: ["geocode"],
            componentRestrictions: {country: "vn"}
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            var lat_place = place.geometry.location.lat();
            var lng_place = place.geometry.location.lng();
            $('#query_lat').val(lat_place);
            $('#query_lng').val(lng_place);
        });
    });

    $('.post-hostel').click(function (e) {
        e.preventDefault();
        @if(!auth('backend')->check())

        $('#modal__sign-in').modal('show');
        $('#subtitle-sign-in').text('Bạn cần đăng nhập để thực hiện chức năng này');

//        $('#modal__normal').modal('show');
//        $('#subtitle-normal').text('Bạn phải là chủ trọ để sử dụng tính năng này');
        @elseif(auth('backend')->user()->type == \App\User::OWNER)
            window.location.href = "https://itro.vn/admin2/hostel/list#add-hostel";
            @else
             $('#modal__normal').modal('show');
        $('#subtitle-normal').text('Bạn phải là chủ trọ để sử dụng tính năng này');
        @endif

    });

    $('.post-need-more').click(function (e) {
        e.preventDefault();
        @if(!auth('backend')->check())


        $('#modal__sign-in').modal('show');
        $('#subtitle-sign-in').text('Bạn cần đăng nhập để thực hiện chức năng này');
        @else
            window.location.href = "{{ url('tim-ban') }}";
        @endif

    });
</script>

@endpush