@props([
    'housesType' => null,
    'numbersPiece' => null,
    'housesStatus' => null,
    'teams' => null,
])
<x-jet-dialog-modal wire:model="modalSearchVisible" max-width="2xl">
    <x-slot name="title">{{ __('admin_search_house') }}</x-slot>

    <x-slot name="content">
        <div class="grid grid-cols-6 gap-4 mb-3">
            <div class="col-span-6 sm:col-span-6">
                <x-jet-label for="reference" :value="__('label_reference')" />
                <x-jet-input type="text" id="reference" wire:model.defer="criteriasSearch.reference" :placeholder="__('placeholder_reference')" />
            </div>
            <div class="col-span-3 sm:col-span-3">
                <x-jet-label for="ilot" :value="__('label_ilot')" />
                <x-jet-input type="number" id="ilot" wire:model.defer="criteriasSearch.ilot" :placeholder="__('placeholder_ilot')" />
            </div>
            <div class="col-span-3 sm:col-span-3">
                <x-jet-label for="lot" :value="__('label_lot')" />
                <x-jet-input type="number" id="lot" wire:model.defer="criteriasSearch.lot" :placeholder="__('placeholder_lot')" />
            </div>
            <div class="col-span-3">
                <x-jet-label for="house_type" :value="__('label_house_type')" />
                <select wire:model.defer="criteriasSearch.house_type" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                    focus:ring-opacity-50 rounded-md mt-1 block w-full"
                >
                    <option value="">{{ __('select_house_type') }}</option>
                    @foreach ($housesType as $houseType)
                        <option value="{{ $houseType->id }}">{{ $houseType->description }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-span-3">
                <x-jet-label for="number_piece" :value="__('label_number_piece')" />
                <select wire:model.defer="criteriasSearch.number_piece" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                    focus:ring-opacity-50 rounded-md mt-1 block w-full"
                >
                    <option value="">{{ __('select_number_piece') }}</option>
                    @foreach ($numbersPiece as $numberPiece)
                        <option value="{{ $numberPiece->id }}">{{ $numberPiece->description }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-span-{{ !empty($teams) ? '3': '6' }}">
                <x-jet-label for="status" :value="__('label_status')" />
                <select wire:model.defer="criteriasSearch.status" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                    focus:ring-opacity-50 rounded-md mt-1 block w-full"
                >
                    <option value="">{{ __('select_search_house') }}</option>
                    @foreach($housesStatus  as $key =>  $houseStatus)
                        <option value="{{ $key }}"> {{ __($houseStatus->description) }}</option>
                    @endforeach

                </select>
            </div>
            @if(! empty($teams))
                <div class="col-span-3">
                    <x-jet-label for="project" :value="__('label_search_project')" />
                    <select id="project" wire:model.defer="criteriasSearch.team" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                        focus:ring-opacity-50 rounded-md mt-1 block w-full"
                    >
                        <option value="">{{ __('select_project_type') }}</option>
                            @foreach($teams as $team)
                                <option value="{{ $team->id }}">{{ $team->name }}</option>
                            @endforeach
                    </select>
                </div>
            @endif
        </div>
    </x-slot>

    <x-slot name="footer">
        <x-danger-button wire:click="closeSearchModal()" data-dismiss="modal">
            {{ __('button_cancel') }}
            <i wire:target="closeSearchModal()" class="fad fa-times-circle ml-1"></i>
        </x-danger-button>
        <x-info-button wire:click="search()" wire:loading.attr="disabled">
            {{ __('button_search') }}
            <i wire:loading.remove  wire:target="search()" class="fad fa-spin ml-1"></i>
            <i wire:loading wire:target="search()" class="fad fa-spin fa-spinner mr-2"></i>
        </x-info-button>
    </x-slot>
</x-jet-dialog-modal>