@extends('frontend3')

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

    <!-- CSS: Libs-->
    <link rel="stylesheet" href="/frontend3/assets/libs/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/select2/css/select2.min.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/slick/slick.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/slick/slick-theme.css">
    <link rel="stylesheet" href="/frontend3/assets/libs/bootstrap-slider/css/slider.css">

    <link rel="stylesheet" href="/frontend3/assets/libs/noUiSlider/nouislider.min.css">
    <!-- CSS: Main -->
    <link rel="stylesheet" href="/frontend3/assets/css/main.css">
    <link rel="stylesheet" href="/frontend3/assets/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>
        .fee-content {
            border: solid 3px #ff5722;
            height: 315px;
            width: 100%;
        }

        .fee-header {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #ff5722;
            font-size: 20px;
            height: 40px;
            color: #fff;
            width: 100%;
        }

        .slider {
            width: 95%;
            margin-left: 15px;
            color: white;
        }

        .pagination {
            margin-top: 50px;
        }

        a, a:active, a:focus, a:hover, a:visited {
            color: #003460;
        }

        .itemscontainer .wishlist {
            position: absolute;
            bottom: 22px;
            left: 14px;
            width: 30px;
            height: 30px;
            z-index: 2;
            line-height: 30px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            color: #fff !important;
        }

        b, strong {
            font-weight: bold;
        }


        .img_list img {
            width: auto;
            height: 300px;
            position: absolute;
            left: -10%;
        }

        .img_list a img {
            margin-left: 45px;
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }

        .img_list img {
            display: block;
            -webkit-transition: all 0.5s linear;
            -moz-transition: all 0.5s linear;
            -ms-transition: all 0.5s linear;
            -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
            width: 100%;
            height: 210px;
            position: absolute;
            left: -13%;
        }

        .search-header {
            color: #525252;
            background-color: #FFFFFF;
            padding: 10px;
            margin-bottom: 19px;
            border: 1px solid #e8e8e8;
            margin-left: 23px;
            margin-right: 16px;
            border-radius: 4px;
            margin-top: 15px;
        }


    </style>
@endsection


@section('content')

    <div class="wrap-content" style="background-color: #f1f3f5">
        <div class="searching-content">
            @include('frontend3.find_room.search')
        </div>
        <div class="container" style="margin-top: 30px; padding-bottom: 40px">
            <div class="side-menu col-md-3">
                @include('frontend3.find_room.side-menu')
            </div>
            <div class="body-content col-md-9">
                {{--////Phần nội dung có thu phí hiển thị trên đầu--}}
                <div class="fee-content">
                    <div class="fee-header">
                        <span>Nhà trọ, Căn hộ nổi bật</span>
                    </div>
                    {{-- ///slider tin có trả phí////--}}
                    <div class="row slider fee-content-slider">
                        @if(isset($fee_content))
                            @foreach($fee_content as $feecontent)
                                <div class="col-xs-12 col-sm-6 col-md-3 slide">
                                    <div class="single-property-card single-property-card--size-lg ht-card ht-depth-1">
                                        <a href="#" class="block">
                                            <div class="card-header">
                                                <div class="property__photo ht-rectangle ratio-43">
                                                    <div class="ht-inner bg-color-grey-300">
                                                        <img src="/random/pic3.jpg" 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">Đã 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 class="property__prices">
                                                    <div class="single-price">
                                                        <span class="single-price__number">{{$feecontent->price}}</span>
                                                        <span class="single-price__currency on-right">&#8363;</span>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="card-content">
                                                <div class="property__intro">
                                                    <h4 class="property__title">{{$feecontent->title}}</h4>
                                                    <div class="property__address">{{$feecontent->address}}
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="property__quickview">
                                            <div class="ht-rectangle ratio-43">
                                                <div class="ht-inner">
                                                    <div class="actions-wrapper">
                                                        <a href="#" class="single-action"><i
                                                                    class="ion-ios-search-strong"></i></a>
                                                        <a href="#" class="single-action"><i
                                                                    class="ion-link rotate45"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="property__actions">
                                            <a href="#" class="single-action single-action--like" title="Thích"
                                               data-toggle="tooltip"
                                               data-placement="top"><i class="ion-android-favorite-outline"></i></a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>

                </div>
                <div class="search-header">
                    <a data-slide="next" href="#myCarousel" class=""></a>
                    <div id="property-search-header" class="col-24-24"><a data-slide="next" href="#myCarousel" class="">
                        </a>
                        <div id="property-search-header-wrap" class="clearfix"><a data-slide="next" href="#myCarousel"
                                                                                  class="">
                                <div class="query-section">
                                    Kết quả tìm thấy <strong class="blue search-result"></strong>
                                    nhà trọ, căn hộ <strong class="blue"></strong> còn phòng trống.
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
                <div id="nomal_content" style="width: 100%">
                    {{--///nội dung miễn phí--}}
                </div>

                {{-- ////////////pagination////////////--}}
                <div class="text-center py-24">
                    <ul id="pagination"></ul>
                </div>
            </div>
            <div class="content-template" style="display: none">
                @include('frontend3.find_room.nomal_content')
                <div class="district-template" style="display: none">
                    <div class="clearfix">
                        <a href="javascript:void(0)">
                            <div class="go-right">
                                <div class="checkbox checkbox--customized"><span class="glyphicon glyphicon-triangle-right"
                                                                                 style="padding: 0 10px 0 20px; font-size: 7px"></span><span
                                            class="district-item" data-id="">Hà
                                đông</span>
                                </div>
                            </div>
                        </a>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
            <script src="/frontend3/assets/libs/bootstrap-slider/js/bootstrap-slider.js"></script>

            <script src="/frontend3/assets/libs/slick/slick.min.js"></script>
            <script src="/frontend3/assets/libs/twbsPagination/jquery.twbsPagination.min.js"></script>

            <script>

                ///////
                //varibles

                var __price = [];
                var __district = null;

                $(document).ready(function () {

                    getRoom();
                    $('.slider').slick({
                        autoplay: true,
                        adaptiveHeight: false,
                        autoplaySpeed: 1500,
                        arrows: true,
                        prevArrow: '<button type="button" class="slick-prev"></button>',
                        nextArrow: '<button type="button" class="slick-next"></button>',
                        centerMode: true,
                        slidesToShow: 3,
                        slidesToScroll: 1
                    });

                    //Rank price With JQuery
                    $("#ex12c").slider({
                        id: "slider12c",
                        min: 0,
                        max: 100,
                        range: true,
                        value: [0, 30],
                        step: 1,
                    });

                });
                $("#ex12c").on('slide',function (e) {
                    var min = e.value[0];
                    var max = e.value[1];
                    __price.push(min, max);
                    getRoom();
                })

                //set district
                $(document).on('click', '.district-item', function () {
                    __district = $(this).data('id');
                    getRoom();
                });

                ///checked ô checkbox Type
                $('.item-news-type').change(function (event) {
                    getRoom();
                });

                ///checked ô checkbox Amenity
                $('.amenity-item').change(function (event) {
                    getRoom();
                });

                //get district
                $('#search').change(function () {
                    getRoom();
                })

                //when click change province
                $('#province').change(function () {
                    province = $(this).find('option:selected').val();
                    $.ajax({
                        url: '{{ route('findroom.getDistrict') }}',
                        type: 'get',
                        dataType: 'json',
                        data: {province_id: province},
                        success: function (response) {
                            if (response.status == true) {
                                var dt = response.data;
                                var container = $('.district-container');
                                container.empty();
                                dt.forEach(function (obj) {
                                    var item = $('.district-template').contents().clone();
                                    $(item).find('.district-item').text(obj.name);
                                    $(item).find('.district-item').data('id',obj.districtid);
                                    container.append(item);
                                })
                            }
                        },
                        error: function (error) {
                        }
                    })
                })

                $('#searchnow').click(function () {
                    getRoom()
                })

                $('#search').keyup(function (e) {
                    if (e.keyCode == 13) {
                        getRoom()
                    }
                });

                //get room
                function getRoom() {
                    var search = $('#search').val();
                    var province = $('#province').find('option:selected').val();
                    var price = __price;
                    //type
                    var typepost = [];
                    $(".type-post .item-news-type:checked").each(function () {
                        typepost.push($(this).val());
                    });

                    var amenity = [];
                    $(".amenity-list .amenity-item:checked").each(function () {
                        amenity.push($(this).val());
                    });

                    var district = __district;

                    $.ajax({
                        url: '{{ route('findroom.getRoomList') }}',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            search: search,
                            province: province,
                            price: price,
                            typepost: typepost,
                            amenity:amenity,
                            district: district
                        },
                        success: function (response) {
                            if (response.status == true) {
                                if (response.data.data === undefined || response.data.data.length == 0) {
                                    // array empty or does not exist
                                    alert('No data')
                                }else {
                                    buildList(response);
                                    buildPaginate(response);
                                }

                            }
                        },
                        error: function (error) {
                        }
                    })
                }

                //function build data
                function buildList(response) {
                    var dt = response.data.data;
                    var container = $('#nomal_content');;
                    $('.search-result').val();
                    container.empty();
                    dt.forEach(function (obj) {
                        var item = $('.nomal-content-temp').contents().clone();
                        $(item).find('.title_room').text(obj.title);
                        $(item).find('.address_room').text(obj.address);
                        $(item).find('.description_room').text(obj.description);
                        $(item).find('.price_room').text(obj.price);
                        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({
                            hideOnlyOnePage: true,
                            initiateStartPageClick: false,
                            totalPages: page_dt.last_page,
                            visiblePages: 3,
                            onPageClick: function (event, page) {
                                var page = page;
                                $.ajax({
                                    url: "{{route('findroom.getRoomList')}}",
                                    type: 'get',
                                    dataType: 'json',
                                    data: {page: page},
                                    success: function (data) {
                                        buildList(data);
                                    }
                                })
                            }
                        });
                    }
                }


            </script>
    </div>
    @endpush