@props([
    'statusInvoices' => null,
    'invoicesState' => null,
    'teams' => null,
    'months' => null,
    'years' => null,
])
<div>
    <x-jet-dialog-modal wire:model="modalSearchVisible" max-width="2xl">
        <x-slot name="title">{{ __('saas_search_invoice') }}</x-slot>

        <x-slot name="content">
            <div class="mt-2 w-full">
                <x-jet-label for="number" :value="__('label_invoice_number')" />
                <x-jet-input type="text" id="number" wire:model.defer="criteriasSearch.invoice_number" :placeholder="__('placeholder_invoice_number')" />
            </div>
            <div class="mt-2 w-full">
                <x-jet-label for="house_type" :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_invoice_type_statut') }}</option>
                        @foreach ($statusInvoices as $status)
                            <option value="{{ $status->id }}">{{ $status->description }}</option>
                        @endforeach
                    </select>
            </div>
            <div class="flex flex-wrap -mx-3">
                <div class="mt-5 w-full {{ !empty($teams) ? 'md:w-1/2': 'w-full' }} px-3">
                    <x-jet-label for="type_team" :value="__('label_state')" />
                    <select wire:model.defer="criteriasSearch.state" 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_invoice_state') }}</option>
                        @foreach($invoicesState  as $key =>  $state)
                            <option value="{{ $key }}"> {{ __($state->description) }}</option>
                        @endforeach
                    </select>
                </div>
                @if(!empty($teams))
                    <div class="mt-5 mb-2 w-full md:w-1/2 px-3">
                        <x-jet-label for="project" :value="__('label_search_project')" />
                        <select 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>
            <div class="flex flex-wrap -mx-3">
                <div class="mt-5 w-full md:w-1/2 px-3">
                    <x-jet-label for="period" :value="__('label_period')" />
                    <select wire:model.defer="criteriasSearch.period" class="bg-gray-input focus:bg-gray-50 focus:border-teal-600
                        focus:ring-opacity-50 rounded-md mt-1 block w-full capitalize"
                    >
                        <option value="">{{ __('select_month') }}</option>
                        @foreach ($months as $key => $month)
                            <option class="capitalize" value="{{ $key }}">{{ $month }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mt-5 mb-2 w-full md:w-1/2 px-3">
                    <x-jet-label for="year" :value="__('label_year')" />
                    <select wire:model.defer="criteriasSearch.year" 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="">{{ __('placeholder_year') }}</option>
                            @foreach($years as $key => $year)
                                <option value="{{ $key }}">{{ $year }}</option>
                            @endforeach
                    </select>
                </div>
            </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-search ml-1"></i>
                <i wire:loading wire:target="search" class="fad fa-spinner fa-spin ml-1"></i>
            </x-info-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>