@props([
    'title' => 'بحث',
    'fields' => [],
    'resetMethod' => 'resetSearch',
    'searchMethod' => '$refresh',
    'defaultWireModel' => null,
    'columnsClass' => 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3',
    'defaultOpen' => null,
])

@php
    $hasValues = false;
    foreach ($fields as $field) {
        $model = $field['model'] ?? null;
        if (! $model) {
            continue;
        }

        $value = data_get($this, $model);
        $stringValue = trim((string) $value);

        if (! is_null($value) && $stringValue !== '' && $stringValue !== 'all') {
            $hasValues = true;
            break;
        }
    }
@endphp

<div class="kt-card shadow-sm mb-3" x-data="{ open: @js($defaultOpen ?? $hasValues) }">
    <div class="kt-card-header h-50px cursor-pointer" @click="open = !open">
        <h3 class="kt-card-title">{{ $title }}</h3>
        <div class="kt-card-toolbar" :class="{ 'rotate-180': open }">
            <i class="ki-filled ki-down text-xs text-muted-foreground"></i>
        </div>
    </div>

    <div x-show="open" x-collapse>
        <div class="kt-card-body p-3">
            <div class="grid {{ $columnsClass }} gap-3" wire:keydown.enter.prevent="{{ $searchMethod }}">
                @foreach($fields as $field)
                    @php
                        $wireModel = $field['wireModel'] ?? $defaultWireModel;
                    @endphp

                    @if(($field['type'] ?? 'text') === 'select')
                        <div class="kt-form-item mb-1">
                            <label class="kt-form-label">{{ $field['title'] ?? '' }}</label>
                            <div class="kt-form-control">
                                <select
                                    class="kt-input"
                                    name="{{ $field['name'] ?? '' }}"
                                    @if($wireModel === 'defer')
                                        wire:model.defer="{{ $field['model'] ?? '' }}"
                                    @elseif($wireModel === 'lazy')
                                        wire:model.lazy="{{ $field['model'] ?? '' }}"
                                    @else
                                        wire:model.live="{{ $field['model'] ?? '' }}"
                                    @endif
                                >
                                    @foreach(($field['options'] ?? []) as $optionValue => $optionTitle)
                                        <option value="{{ $optionValue }}">{{ $optionTitle }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @else
                        <div class="kt-form-item mb-1">
                            <label class="kt-form-label">{{ $field['title'] ?? '' }}</label>
                            <div class="kt-form-control">
                                <input
                                    class="kt-input"
                                    name="{{ $field['name'] ?? '' }}"
                                    @if($wireModel === 'defer')
                                        wire:model.defer="{{ $field['model'] ?? '' }}"
                                    @elseif($wireModel === 'lazy')
                                        wire:model.lazy="{{ $field['model'] ?? '' }}"
                                    @else
                                        wire:model.live.debounce.400ms="{{ $field['model'] ?? '' }}"
                                    @endif
                                    type="{{ $field['type'] ?? 'text' }}"
                                    step="{{ $field['step'] ?? '' }}"
                                    placeholder="{{ $field['placeholder'] ?? ($field['title'] ?? '') }}"
                                >
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="kt-card-footer p-2 flex justify-end gap-2">
            <button type="button" wire:click="{{ $resetMethod }}" class="kt-btn kt-btn-destructive rounded-full w-150px">
                <i class="la la-redo la-lg"></i>
                تفريغ
            </button>
            <button type="button" class="kt-btn rounded-full w-150px"
                    wire:click="{{ $searchMethod }}">
                <i class="la la-search la-lg"></i>
                بحث
            </button>
        </div>
    </div>
</div>