@props([
    'results' => 0,
])

<div x-data="{ isOpen: false }" class="flex flex-col gap-8 mb-8 lg:mb-16">
    <div class="flex items-center justify-between">
        <div>
            <x-frontend.section.title title="{{ __('Lakások') }}" />
        </div>
        <div>
            <x-frontend.animation delay="150">
                <button type="button" @click="isOpen = !isOpen"
                    class="flex items-center gap-2 rounded-full border-2 border-iron bg-white px-5 py-2.5">
                    <x-frontend.icons.adjustments-horizontal />
                    <span class="font-bold">{{ __('Szűrés') }}</span>
                    <span class="rounded-md bg-iron px-2 text-sm py-0.5 text-white">{{ $results }}</span>
                </button>
            </x-frontend.animation>
        </div>
    </div>
    <div x-cloak x-show="isOpen" x-collapse>
        <form action="" method="GET" autocomplete="off">
            <div class="relative z-10 pt-2 overflow-hidden shadow-xl bg-gradient rounded-2xl">
                <div
                    class="flex flex-col gap-4 p-4 bg-white md:flex-row md:flex-wrap md:items-end md:justify-between md:gap-6 md:p-6">
                    <div>
                        <label for="building" class="block mb-2 text-sm opacity-75">{{ __('Épület') }}</label>
                        <select name="building" id="building">
                            <option value="">{{ __('Bármelyik') }}</option>
                            <option value="A" @if (request()->has('building') && request()->get('building') == 'A') selected="selected" @endif>
                                {{ __('A épület') }}</option>
                            <option value="B" @if (request()->has('building') && request()->get('building') == 'B') selected="selected" @endif>
                                {{ __('B épület') }}</option>
                            <option value="C" @if (request()->has('building') && request()->get('building') == 'C') selected="selected" @endif>
                                {{ __('C épület') }}</option>
                            {{--
                                    <option value="D" @if (request()->has('building') && request()->get('building') == 'D') selected="selected" @endif>
                                        {{ __('D épület') }}</option>
                                    <option value="E" @if (request()->has('building') && request()->get('building') == 'E') selected="selected" @endif>
                                        {{ __('E épület') }}</option>
                                    <option value="F" @if (request()->has('building') && request()->get('building') == 'F') selected="selected" @endif>
                                        {{ __('F épület') }}</option>
                                    <option value="G" @if (request()->has('building') && request()->get('building') == 'G') selected="selected" @endif>
                                        {{ __('G épület') }}</option>
                                    <option value="H" @if (request()->has('building') && request()->get('building') == 'H') selected="selected" @endif>
                                        {{ __('H épület') }}</option>
                                    <option value="I" @if (request()->has('building') && request()->get('building') == 'I') selected="selected" @endif>
                                        {{ __('I épület') }}</option>
                                    --}}
                        </select>
                    </div>
                    <div>
                        <div class="mb-2 text-sm opacity-75">{{ __('Emelet') }}</div>
                        <div class="flex gap-3">
                            <x-frontend.form.custom-checkbox id="floor_0" name="floor[]" label="{{ __('Fsz.') }}"
                                value="0" :checked="request()->has('floor') && in_array(0, request()->get('floor'))" />

                            <x-frontend.form.custom-checkbox id="floor_1" name="floor[]" label="1" value="1"
                                :checked="request()->has('floor') && in_array(1, request()->get('floor'))" />

                            <x-frontend.form.custom-checkbox id="floor_2" name="floor[]" label="2" value="2"
                                :checked="request()->has('floor') && in_array(2, request()->get('floor'))" />

                            <x-frontend.form.custom-checkbox id="floor_3" name="floor[]" label="3" value="3"
                                :checked="request()->has('floor') && in_array(3, request()->get('floor'))" />

                            <x-frontend.form.custom-checkbox id="floor_4" name="floor[]" label="4" value="4"
                                :checked="request()->has('floor') && in_array(4, request()->get('floor'))" />
                        </div>
                    </div>
                    <div>
                        <div class="mb-2 text-sm opacity-75">{{ __('Szoba') }}</div>
                        <div class="flex gap-3">
                            <x-frontend.form.custom-checkbox id="rooms_2" name="rooms[]" label="2" value="2"
                                :checked="request()->has('rooms') && in_array(2, request()->get('rooms'))" />

                            <x-frontend.form.custom-checkbox id="rooms_3" name="rooms[]" label="3" value="3"
                                :checked="request()->has('rooms') && in_array(3, request()->get('rooms'))" />

                            <x-frontend.form.custom-checkbox id="rooms_4" name="rooms[]" label="4" value="4"
                                :checked="request()->has('rooms') && in_array(4, request()->get('rooms'))" />
                        </div>
                    </div>
                    <div class="flex items-center gap-3 md:-translate-y-1/3 md:gap-6">
                        <div>
                            <label for="terrace" class="flex items-center gap-2">
                                <input type="checkbox" name="terrace" id="terrace" value="1"
                                    @if (request()->has('terrace') && request()->get('terrace') == 1) checked="checked" @endif />
                                <span>
                                    {{ __('Terasz') }}
                                </span>
                            </label>
                        </div>
                        <div>
                            <label for="garden" class="flex items-center gap-2">
                                <input type="checkbox" name="garden" id="garden" value="1"
                                    @if (request()->has('garden') && request()->get('garden') == 1) checked="checked" @endif />
                                <span>
                                    {{ __('Kert') }}
                                </span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <x-frontend.form.button type="submit" class="button">{{ __('Keresés') }}</x-frontend.form.button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>