@extends('layouts.default')
@section('title'){!! trans('list.' . $types . '.meta_title') !!} @stop
@section('description') {!! trans('list.' . $types . '.meta_desc') !!} @stop
@section('canonical'){{ request()->url() }}@stop
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ url('css/list.css') }}?v={{ env('ASSET_VERSION') }}">
@stop
@section('content')
    <main class="list_page">
        <button class="filter_btn">Filter</button>
        <div class="top-heading" data-title-sale="{{ trans('list.on_sale_heading') }}"
            data-title-rent="{{ trans('list.on_rent_heading') }}">
            <h1>{{ trans('list.' . $types . '_heading') }}</h1>
        </div>
        <div class="list_haed">
            <span class="close"></span>
            <div class="list_top filters" data-action="{{ url('/proxy/https://api.whise.eu/v1/estates/list') }}">
                <input type="hidden" id="sale_url" name="path" value="{{ trans('list.on_sale.single_slug') }}">
                <input type="hidden" id="rent_url" name="path" value="{{ trans('list.on_rent.single_slug') }}">
                <input type="hidden" id="sale_title" value="{{ trans('list.on_sale.meta_title') }}">
                <input type="hidden" id="rent_title" value="{{ trans('list.on_rent.meta_title') }}">
                <input type="hidden" id="sale_desc" value="{{ trans('list.on_sale.meta_desc') }}">
                <input type="hidden" id="rent_desc" value="{{ trans('list.on_rent.meta_desc') }}">
                <input type="hidden" id="subcategory_3" value="{{ trans('single.subcategory.3') }}">
                <form onsubmit="return false;">
                    <div class="search-autocomplite">
                        <div class="search_header">
                            <div class="search_box search-autocomplite__inner">
                                <input type="text" placeholder="{{ trans('list.search') }}" id="localisation"
                                    autocomplete="off">
                                <div class="search-autocomplite__list dropdown_wrap">
                                    <ul>
                                        @foreach ($cities as $key => $value)
                                            <li data-code="{{ $key }}"> <span>{{ $key }}</span>
                                                <e>{{ $value }}</e> <i class="fa fa-plus" aria-hidden="true"></i>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>

                            </div>
                            <!-- <div class="btn_grid">
                                                                            <button class="add_btn">{{ trans('list.add') }}</button>
                                                                            <button class="enter_btn">{{ trans('list.press') }} <span>{{ trans('list.enter') }}</span> <img src="{{ url('/images/ArrowEnter.svg') }}" alt="Arrow"></button>
                                                                        </div> -->
                        </div>
                        <div class="search_result">
                            <div class="search_result_inner">
                                <ul class="search-autocomplite__result"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="dropdown_list">
                        <div class="drop_block border @if ($types == 'on_sale') for-sale @else for-rent @endif">
                            <label>{{ trans('list.sale_rent') }}</label>
                            <div class="dropdown_wrap" id="nos_biens_filter">
                                <p data-purpose="@if ($types == 'on_rent') 2 @else 1 @endif">
                                    {{ trans('list.' . $types) }}</p>
                                <ul>
                                    <li data-href="{{ trans('list.on_sale.slug') }}" data-purpose="1">
                                        {{ trans('list.sale') }}</li>
                                    <li data-href="{{ trans('list.on_rent.slug') }}" data-purpose="2">
                                        {{ trans('list.rent') }}</li>
                                </ul>
                            </div>
                        </div>
                        <div
                            class="drop_block border range-options__inner-type @if ($types == 'on_sale') for-sale @else for-rent @endif">
                            <label>{{ trans('list.bien') }}</label>
                            <div class="dropdown_wrap range-options__inner-type-popup"
                                data-options='{
                            "categories": [
                                    {  "label": "{{ trans('list.filter.maison') }}",
                                        "id": "1"
                                    },
                                    {
                                        "label": "{{ trans('list.filter.appartment') }}",
                                        "id": "2"
                                            
                                    },
                                    {
                                        "label": "{{ trans('list.filter.bureau') }}",
                                        "id": "4"
                                    },
                                    {
                                        "label": "{{ trans('list.filter.terrains') }}",
                                        "id": "3"

                                    },
                                    {
                                        "label": "{{ trans('list.filter.commerces') }}",
                                        "id": "5"
                                    },
                                    {
                                        "label": "{{ trans('list.filter.garage') }}",
                                        "id": "7"
                                    }
                                                    
                                ]
                            }'>
                                <p class="range-options__inner-type-btn" data-text="{{ trans('list.bien_text') }}">
                                    {{ trans('list.bien_text') }}</p>
                                <ul></ul>
                            </div>
                        </div>
                        <div
                            class="drop_block roomrange-options__inner-budget-wrap @if ($types == 'on_sale') for-sale @else for-rent @endif">
                            <label>{{ trans('list.rooms') }}</label>
                            <div class="double_dropdown">
                                <div class="label-heading">
                                    <p class="chamber-room">Nombre de chambre minimum</p>
                                    <div class="dropdown_wrap filter__room-list filter__room-list_min">
                                        <p id="min-room">{{ trans('list.minroom') }} <span>0</span></p>
                                        <ul>
                                            <li data-value="0">{{ trans('list.minroom') }} 0</li>
                                            <li data-value="1">{{ trans('list.minroom') }} 1</li>
                                            <li data-value="2">{{ trans('list.minroom') }} 2</li>
                                            <li data-value="3">{{ trans('list.minroom') }} 3</li>
                                            <li data-value="4">{{ trans('list.minroom') }} 4</li>

                                        </ul>
                                    </div>
                                </div>
                                <div class="label-heading">
                                    <p class="chamber-room">Nombre de chambre maximum</p>
                                    <div class="dropdown_wrap  filter__room-list filter__room-list_max">
                                        <p id="max-room">{{ trans('list.maxroom') }} <span>3</span></p>
                                        <ul>
                                            <li data-value="1">{{ trans('list.maxroom') }} 1</li>
                                            <li data-value="2">{{ trans('list.maxroom') }} 2</li>
                                            <li data-value="3">{{ trans('list.maxroom') }} 3</li>
                                            <li data-value="4">{{ trans('list.maxroom') }} 4</li>
                                            <li data-value="5+">{{ trans('list.maxroom') }} 5</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="drop_block range-options__inner-budget-wrap @if ($types == 'on_sale') for-sale @else for-rent @endif">
                            <div class="list_double for_sale @if ($types == 'on_sale') show @else hide @endif">
                                <div class="box">
                                    <label>{{ trans('list.minprice') }}</label>
                                    <div class="dropdown_wrap filter__budget-list filter__budget-list_min filter__budget-list_min_1"
                                        id="filter__budget-list_min_1">
                                        <p id="price-minimum_1">600.000 €</p>
                                        <ul>
                                            <li data-value="0">0 €</li>
                                            <li data-value="100000">100.000 €</li>
                                            <li data-value="200000">200.000 €</li>
                                            <li data-value="300000">300.000 €</li>
                                            <li data-value="400000">400.000 €</li>
                                            <li data-value="500000">500.000 €</li>
                                            <li data-value="600000">600.000 €</li>
                                            <li data-value="700000">700.000 €</li>
                                            <li data-value="800000">800.000 €</li>
                                            <li data-value="900000">900.000 €</li>
                                            <li data-value="1000000">1.000.000 €</li>
                                        </ul>

                                    </div>
                                </div>
                                <div class="box">
                                    <label>{{ trans('list.maxprice') }}</label>
                                    <div class="dropdown_wrap filter__budget-list filter__budget-list_max filter__budget-list_max_1"
                                        id="filter__budget-list_max_1">
                                        <p id="price-maximum_1">800.000 €</p>
                                        <ul>
                                            <li data-value="200000">200.000 €</li>
                                            <li data-value="300000">300.000 €</li>
                                            <li data-value="400000">400.000 €</li>
                                            <li data-value="500000">500.000 €</li>
                                            <li data-value="600000">600.000 €</li>
                                            <li data-value="700000">700.000 €</li>
                                            <li data-value="800000">800.000 €</li>
                                            <li data-value="900000">900.000 €</li>
                                            <li data-value="1000000+">1.000.000 € +</li>
                                        </ul>

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


                            <div class="list_double for_rent @if ($types == 'on_rent') show @else hide @endif">
                                <div class="box">
                                    <label>{{ trans('list.minprice') }}</label>
                                    <div class="dropdown_wrap filter__budget-list filter__budget-list_min filter__budget-list_min_2"
                                        id="filter__budget-list_min_2">
                                        <p id="price-minimum_2">-750€</p>
                                        <ul>
                                            <li data-value="0">0 €</li>
                                            <li data-value="100">100 €</li>
                                            <li data-value="200">200 €</li>
                                            <li data-value="300">300 €</li>
                                            <li data-value="400">400 €</li>
                                            <li data-value="500">500 €</li>
                                            <li data-value="600">600 €</li>
                                            <li data-value="700">700 €</li>
                                            <li data-value="800">800 €</li>
                                            <li data-value="900">900 €</li>
                                            <li data-value="1000">1.000 €</li>
                                            <li data-value="1100">1.100 €</li>
                                            <li data-value="1200">1.200 €</li>
                                            <li data-value="1300">1.300 €</li>
                                            <li data-value="1400">1.400 €</li>
                                            <li data-value="1500">1.500 €</li>
                                            <li data-value="1600">1.600 €</li>
                                            <li data-value="1700">1.700 €</li>
                                            <li data-value="1800">1.800 €</li>
                                            <li data-value="1900">1.900 €</li>
                                            <li data-value="2000">2.000 €</li>
                                            <li data-value="2100">2.100 €</li>
                                            <li data-value="2200">2.200 €</li>
                                            <li data-value="2300">2.300 €</li>
                                            <li data-value="2400">2.400 €</li>
                                            <li data-value="2500">2.500 €</li>
                                            <li data-value="2600">2.600 €</li>
                                            <li data-value="2700">2.700 €</li>
                                            <li data-value="2800">2.800 €</li>
                                            <li data-value="2900">2.900 €</li>
                                            <li data-value="3000">3.000 €</li>

                                        </ul>
                                    </div>
                                </div>
                                <div class="box">
                                    <label>{{ trans('list.maxprice') }}</label>
                                    <div class="dropdown_wrap filter__budget-list filter__budget-list_max filter__budget-list_max_2"
                                        id="filter__budget-list_max_2">
                                        <p id="price-maximum_2">750 €</p>
                                        <ul>
                                            <li data-value="500">500 €</li>
                                            <li data-value="600">600 €</li>
                                            <li data-value="700">700 €</li>
                                            <li data-value="800">800 €</li>
                                            <li data-value="900">900 €</li>
                                            <li data-value="1000">1.000 €</li>
                                            <li data-value="1100">1.100 €</li>
                                            <li data-value="1200">1.200 €</li>
                                            <li data-value="1300">1.300 €</li>
                                            <li data-value="1400">1.400 €</li>
                                            <li data-value="1500">1.500 €</li>
                                            <li data-value="1600">1.600 €</li>
                                            <li data-value="1700">1.700 €</li>
                                            <li data-value="1800">1.800 €</li>
                                            <li data-value="1900">1.900 €</li>
                                            <li data-value="2000">2.000 €</li>
                                            <li data-value="2100">2.100 €</li>
                                            <li data-value="2200">2.200 €</li>
                                            <li data-value="2300">2.300 €</li>
                                            <li data-value="2400">2.400 €</li>
                                            <li data-value="2500">2.500 €</li>
                                            <li data-value="2600">2.600 €</li>
                                            <li data-value="2700">2.700 €</li>
                                            <li data-value="2800">2.800 €</li>
                                            <li data-value="2900">2.900 €</li>
                                            <li data-value="3000+">3.000 € +</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="Furniture_btn @if ($types == 'on_sale') hide @endif">
                            <label>
                                <input type="checkbox" name="furniture" id="furnished">
                                <span></span>{{ trans('list.furniture') }}
                            </label>
                        </div>
                        <div class="ajouter-btn-grp">
                            <button class="zero_btn clear-filter-btn">Rétablir à zéro</button>
                            <button class="continue_btn btn_block">{{ trans('list.save_continue') }}</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
        <section class="list_section">
            <div class="side_bar_scroll criteria" data-id="popup">
                <p>@lang('home.side_bar')</p>
            </div>
            <div class="container">
                <div class="list_wrapper">
                    <div class="card_head sort">
                        <div class="left">
                            <div class="card_search">
                                <input type="number" placeholder="{{ trans('list.search_ref') }}">
                            </div>
                            <p class="txt clear-filter-btn" id="clear-filter-btn">{{ trans('list.reset') }}</p>
                        </div>
                        <div class="right">
                            <p class="txt">{{ trans('list.sortby') }}</p>
                            <div class="dropdown_wrap" id="estate">
                                <p data-value="updateDateTime">{{ trans('list.date_modi') }}</p>
                                <ul>
                                    <li data-value="updateDateTime">{{ trans('list.date_modi') }}</li>
                                    <li data-value="price">{{ trans('list.price') }}</li>
                                </ul>
                            </div>
                            <div class="dropdown_wrap" id="order">
                                <p data-value='false'>{{ trans('list.desc') }}</p>
                                <ul>
                                    <li data-value="false">{{ trans('list.desc') }}</li>
                                    <li data-value="true">{{ trans('list.asc') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="list_block_box" data-rented={{ trans('list.rented') }}
                        data-for="{{ trans('single.for') }}"></div>

                    <div class="estimation_card">
                        <div class="box_success estimate_card">
                            <a href="{{ route('estimat_' . app()->getLocale()) }}" class="card card__Box color_card">
                                <div class="hover_box">
                                    <h2>@lang('list.estimate_title')</h2>
                                    <button class="btn_block">{{ trans('list.estimate_text') }}</button>
                                    <p>{{ trans('list.estimate_content') }}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="contact_card">
                        <div class="box_success contactcard">
                            <span href="#" class="card card__Box  color_card">
                                <div class="hover_box">
                                    <h2>@lang('list.contact_title')</h2>
                                    <button class="btn_block criteria"
                                        data-id="popup">{{ trans('list.contact_btn') }}</button>
                                    <p>@lang('list.contact_content')</p>
                                </div>
                            </span>
                        </div>
                    </div>
                    <div class="new-tag"><span class="side_bar new">{{ trans('list.new_property') }}</span></div>
                </div>
            </div>
        </section>

        <div class="loader">
            <div class="center no_result result-empty">
                {{ trans('list.no_result') }}
                <p class="sub-text">Inscrivez-vous pour reçevoir en avant-première, avant toute publication officielle</p>
                <button class="vous criteria" data-id="popup">Inscrivez-vous</button>
            </div>
            <div class="center whise-error result-empty">
                <p>@lang('list.whise-error_1') <a
                        href="{{ LaravelLocalization::localizeUrl('/contact') }}">@lang('list.whise-error_2')</a>@lang('list.whise-error_3')
                </p>
            </div>
            <img src="{{ url('/images/loader_list.gif') }}" alt="loader" class="loader_img">
            <button class="btn_block" id="gototop" aria-label="Go to top"><img
                    src="{{ url('/images/go_to _top.svg') }}" alt="" aria-hidden="true"></button>
        </div>
    </main>

@stop
@section('scripts')
    <script async type="text/javascript" src="{{ url('./js/filter.min.js') }}?v={{ env('ASSET_VERSION') }}" defer>
    </script>
@stop