@extends('frontend3_owner')

@section('content')
    <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-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">
                                            <a href="#" class="dropdown__toggle" data-toggle="dropdown">
                                                <div class="toggle-label" id="province-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($provinces as $province)
                                                    <li class="single-filter-area">
                                                        <a href="#" class="single-filter-area__link"
                                                           data-id="{{ $province->provinceid }}">
                                                            <div class="area-title">{{ $province->name }}</div>
                                                            <div class="area-count">Có {{ \App\Models\Hostel::where('province_id', $province->provinceid)
                                                             ->whereIn('id', $hostels->pluck('id')->toArray())->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="#" class="dropdown__toggle" data-toggle="dropdown">
                                                <div class="toggle-label">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" id="select_district">
                                                            Vui lòng chọn Tỉnh Thành phố

                                                        </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__content">
                                                        <div class="filter-properties-wrap">
                                                            @foreach ($amenities as $item)
                                                                <div class="single-filter-property">
                                                                    <label class="c-option">
                                                                        <input type="checkbox" value="{{ $item->id }}"
                                                                               class="c-option__input amenity-input">
                                                                        <div class="c-option__icon"></div>
                                                                        <div class="c-option__label">{{ $item->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">
                                                            <div class="single-filter-property">
                                                                <label class="c-option">
                                                                    <input type="checkbox"
                                                                           class="c-option__input price-input" value="1"
                                                                           data-min="0" data-max="2">
                                                                    <div class="c-option__icon"></div>
                                                                    <div class="c-option__label ">
                                                                        Dưới 2.000.000 đ
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="single-filter-property">
                                                                <label class="c-option">
                                                                    <input type="checkbox"
                                                                           class="c-option__input price-input" value="2"
                                                                           data-min="2" data-max="4">
                                                                    <div class="c-option__icon"></div>
                                                                    <div class="c-option__label ">
                                                                        Từ 2tr - 4tr
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="single-filter-property">
                                                                <label class="c-option">
                                                                    <input type="checkbox"
                                                                           class="c-option__input price-input"
                                                                           value="3">
                                                                    <div class="c-option__icon"></div>
                                                                    <div class="c-option__label ">
                                                                        Từ 4tr - 10tr
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="single-filter-property">
                                                                <label class="c-option">
                                                                    <input type="checkbox"
                                                                           class="c-option__input price-input"
                                                                           value="4">
                                                                    <div class="c-option__icon"></div>
                                                                    <div class="c-option__label ">
                                                                        Từ 10tr - 15tr
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="single-filter-property">
                                                                <label class="c-option">
                                                                    <input type="checkbox"
                                                                           class="c-option__input price-input"
                                                                           value="5">
                                                                    <div class="c-option__icon"></div>
                                                                    <div class="c-option__label ">
                                                                        Trên 15tr
                                                                    </div>
                                                                </label>
                                                            </div>

                                                        </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 " id="sort-order">
                                                    <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>
                        </div>
                        <div class="right-side">
                            <div class="filter-result-count">Có <b id="cnt-result">0</b> kết quả</div>
                        </div>
                    </div>
                </div>

                <div id="posts"></div>

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


@endsection

@push('scripts')
    <script>
        $(document).on('click', '.dropdown-menu--sP', function (e) {
            e.stopPropagation();
        });


        function get_posts(url) {
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'json',
                success: function (response) {
                    $('#posts').html(response.data);
                    $('#cnt-result').text(response.cnt);
                    $('.list-selected-filters').html(response.filtered);
                }
            });
        }

        function build_url() {
            var city_id = $('.selected').attr('data-id');
            var district_ids = $(".district-input:checked").map(function () {
                return $(this).val();
            }).get();
            var amenities_ids = $(".amenity-input:checked").map(function () {
                return $(this).val();
            }).get();

            var prices = $(".price-input:checked").map(function () {
                return $(this).val();
            }).get();

            var sort_order = $('#sort-order').val();

            var params = jQuery.param(
                {
                    province_id: city_id,
                    district: district_ids,
                    amenities: amenities_ids,
                    prices: prices,
                    sort_order: sort_order
                }
            );

            var url = '{{ url('owner-search-2') }}'
            return url + '?' + params;
        }

        $(document).ready(function () {
            var url = '{{ url('owner-search-2') }}'
            get_posts(url);
        });

        $(document).on('click', '.single-filter-area__link', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var id = $(this).attr('data-id');
            $(this).parent().parent().parent().removeClass('open');

            var name = $(this).find('.area-title').first().text();

            $('#province-label').text(name);
            $.ajax({
                url: '{{ url('districts') }}',
                type: 'get',
                data: {
                    id: id
                },
                dataType: 'html',
                success: function (response) {
                    $('#select_district').html(response);
                }
            });
            $('.single-filter-area__link').removeClass('selected');
            $(this).addClass('selected');
            var url = build_url();
            get_posts(url);
        });

        $(document).on('click', '.district-input', function (e) {
            var url = build_url();
            get_posts(url);
        });

        $(document).on('click', '.price-input', function (e) {
            var url = build_url();
            get_posts(url);
        });

        $(document).on('click', '.amenity-input', function (e) {
            var url = build_url();
            get_posts(url);
        });

        $(document).on('change', '#sort-order', function (e) {
            var url = build_url();
            get_posts(url);
        });


        $(document).on('click', '.pagination li > a', function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            get_posts(url);
        });

        $(document).on('click', '.filter-action__delete', function (e) {
            e.preventDefault();
            var type = $(this).attr('data-type');
            if (type === 'province') {
                $('#province-label').text('Tỉnh, thành phố');
                $('.single-filter-area__link').removeClass('selected');
            }

            if (type === 'price') {
                $(".price-input").prop('checked', false);
            }

            if (type === 'district') {
                $(".district-input").prop('checked', false);
            }

            if (type === 'amenity') {
                $(".amenity-input").prop('checked', false);
            }
            $(this).parent().parent().remove();
            var url = build_url();
            get_posts(url);
            return;
        });
    </script>
@endpush