@extends('frontend')

@section('styles')
    <link href="/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
@endsection
@section('content')

    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-md-12 margin-top-20">
                <div class="sidebar">

                    <!-- Widget -->
                    <div class="widget margin-bottom-10">

                        <!-- Row -->
                        <form method="get">
                            <div class="row with-forms">
                                <!-- Cities -->
                                <div class="col-md-2">
                                    <label>Loại nhà</label>
                                    <select class="chosen-select-no-single" name="hostel_type">

                                        <option value="0">Chọn Loại nhà</option>
                                        @php $hostelTypes = \App\Models\HostelType::all(); @endphp
                                        @foreach($hostelTypes as $hostelTypeI)
                                            <option @if($hostelType == $hostelTypeI->id) selected=""
                                                    @endif value="{{ $hostelTypeI->id }}">{{ $hostelTypeI->name }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Tỉnh thành</label>
                                            <select class="chosen-select" id="province" name="province">

                                                <option value="0">Tất cả</option>
                                                @php $cities = \App\Components\Functions::getProvinces(); @endphp
                                                @foreach($cities as $city)

                                                    <option @if($province == $city->provinceid) selected=""
                                                            @endif value="{{ $city->provinceid }}">{{ $city->name }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Quận / huyện</label>
                                            <select class="chosen-select" id="district" name="district">

                                                <option value="0">Tất cả</option>

                                                    @if(!empty($province))
                                                        @php $districts = DB::table('district')->where('provinceid', $province)->get();@endphp
                                                        @foreach($districts as $districtI)
                                                            <option
                                                    @if($district == $districtI->districtid) selected @endif      value="{{ $districtI->districtid }}">{{ $districtI->name }}</option>
                                                        @endforeach
                                                    @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>Phường / Xã</label>
                                            <select class="chosen-select" id="ward" name="ward">

                                                <option value="0">Tất cả</option>

                                                    @if(!empty($district))

                                                        @php $wards = DB::table('ward')->where('districtid', $district)->get();@endphp
                                                        @foreach($wards as $wardI)
                                                            <option
                                                                    @if($ward == $wardI->wardid) selected @endif   value="{{ $wardI->wardid }}">{{ $wardI->name }}</option>
                                                        @endforeach
                                                    @endif


                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label>Khoảng giá</label>
                                            <select class="chosen-select-no-single" name="price">

                                                <option value="0">Chọn mức giá</option>
                                                <option @if($price == 1) selected @endif value="1">Dưới 1 triệu</option>
                                                <option @if($price == 2) selected @endif value="2">1 triệu - 2 triệu</option>
                                                <option @if($price == 3) selected @endif value="3">2 triệu - 3 triệu</option>
                                                <option @if($price == 4) selected @endif value="4">3 triệu - 5 triệu</option>
                                                <option @if($price == 5) selected @endif value="5">5 triệu - 7 triệu</option>
                                                <option @if($price == 6) selected @endif value="6">7 triệu - 10 triệu</option>
                                                <option @if($price == 7) selected @endif value="7">10 triệu - 15 triệu</option>
                                                <option @if($price == 8) selected @endif value="8">Trên 15 triệu</option>

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="row">
                                        <div class="col-md-7">
                                            <label>Diện tích</label>
                                            <select class="chosen-select-no-single" name="size">

                                                <option value="0">Chọn diện tích</option>
                                                <option @if($size == 1) selected @endif value="1">Dưới 20 m2</option>
                                                <option @if($size == 2) selected @endif value="2">20 m2 - 30 m2</option>
                                                <option @if($size == 3) selected @endif value="3">30 m2 - 50 m2</option>
                                                <option @if($size == 4) selected @endif value="4"> 50 - 60 m2</option>
                                                <option @if($size == 5) selected @endif value="5"> 60 - 70 m2</option>
                                                <option @if($size == 6) selected @endif value="6"> 70 - 80 m2</option>
                                                <option @if($size == 7) selected @endif value="7"> 80 - 90 m2</option>
                                                <option @if($size == 8) selected @endif value="8"> 90 - 100 m2</option>
                                                <option @if($size == 9) selected @endif value="9"> Trên 100 m2</option>

                                            </select>
                                        </div>
                                        <div class="col-md-5">
                                            <button style="border-radius: 8px" class="button margin-top-40"
                                                    type="submit">
                                                <i class="fa fa-filter" aria-hidden="true"></i>
                                                Lọc
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <!-- Row / End -->

                        <br>

                        <!-- Area Range -->


                        <!-- More Search Options -->
                        <!-- More Search Options / End -->


                    </div>
                    <!-- Widget / End -->

                </div>
            </div>

            <div class="col-lg-12 col-md-12">

                <!-- Sorting / Layout Switcher -->
                <div class="row margin-bottom-25">

                    <div class="col-md-6 col-xs-6">
                        <!-- Layout Switcher -->
                        <div class="layout-switcher">
                            <a href="{{ url('/?view=map') }}" class="grid"><i class="fa fa-th"></i></a>
                            <a href="{{ url('/?view=listing') }}" class="list active"><i
                                        class="fa fa-align-justify"></i></a>
                        </div>
                    </div>

                    <div class="col-md-6 col-xs-6">
                        <!-- Sort by -->
                        <div class="sort-by">
                            <div class="sort-by-select">
                                <select data-placeholder="Default order" class="chosen-select-no-single">
                                    <option>Mới nhất</option>
                                    <option>Đánh giá cao nhất</option>
                                    <option>Nhiều đánh giá nhất</option>
                                    <option>Đánh giá mới nhất</option>
                                    <option>Cũ nhất</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Sorting / Layout Switcher / End -->


                <div id="listing">
                    @include('frontend.map.hostel_listings', compact( 'hostels' ))
                </div>
                <!-- Pagination / End -->

            </div>


            <!-- Sidebar
            ================================================== -->
            <!-- Sidebar / End -->
        </div>
    </div>
@endsection

@push('scripts')
<script src="/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script>


    $(document).ready(function () {
        //  $('.select2').select2();
        // $('.select2').select2();

        {{--$.ajax({--}}
        {{--url: '{{ url('map/hostels') }}',--}}
        {{--type: 'get',--}}
        {{--data: {--}}
        {{--view: 'listing'--}}
        {{--},--}}
        {{--dataType: 'json',--}}
        {{--success: function (response) {--}}
        {{--$('#listing').html(response.html);--}}
        {{--}--}}
        {{--});--}}


    });

    $(document).on('change', '#province', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'province'
            },
            dataType: 'html',
            success: function (response) {
                $('#district').html(response).trigger("chosen:updated");
            }
        });
    });

    $(document).on('change', '#district', function (e) {
        $.ajax({
            url: '{{ url('get-sub-location') }}',
            type: 'get',
            data: {
                'id': $(this).val(),
                'type': 'district'
            },
            dataType: 'html',
            success: function (response) {
                $('#ward').html(response).trigger("chosen:updated");
            }
        });
    });
</script>
@endpush