{{-- 検索条件 --}}
<div id="search_area"
    class="bg-white border border-secondary-200 text-secondary-900 rounded-lg shadow-xs max-w-fit sm:w-base-wrap mb-4">

    {{-- 折りたたみヘッダー --}}
    <div class="h-8 px-3 flex items-center justify-between cursor-pointer"
        :class="searchOpen ? 'bg-secondary-50 text-secondary-600 rounded-t' : 'bg-secondary-300 text-secondary-800 rounded'"
        @click="toggleSearch()">
        <span class="flex items-center">
            <i class="fa-solid fa-magnifying-glass fa-fw mr-1"></i>
        </span>
        <span class="flex items-center">
            <i class="fa-solid fa-fw" :class="searchOpen ? 'fa-caret-up' : 'fa-caret-down'"></i>
        </span>
    </div>

    {{-- 検索条件コンテンツ --}}
    <div x-show="searchOpen" x-collapse class="px-3 pt-1 pb-2">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            {{-- 得意先（得意先マスタから開いた場合は初期値に入る） --}}
            <div>
                <label>得意先</label>
                <livewire:parts.input-customer name="customer_id" value="{{ $customerId }}" />
            </div>

            {{-- 商品分類 --}}
            <div>
                <label>商品分類</label>
                <x-parts.select-category-price id="search_category_id" name="category_id"
                    class="w-full" value="" x-model="searchParams.category_id" />
            </div>

            {{-- 予約種別 --}}
            <div>
                <label>予約種別</label>
                <select x-model="searchParams.schedule_type" class="w-full input-select">
                    <option value="">すべて</option>
                    @foreach($scheduleTypes as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                    @endforeach
                </select>
            </div>

            {{-- ステータス --}}
            <div>
                <label>ステータス</label>
                <select x-model="searchParams.status" class="w-full input-select">
                    <option value="">すべて</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status->value }}">{{ $status->label() }}</option>
                    @endforeach
                </select>
            </div>

            {{-- 適用開始日 --}}
            <div class="lg:col-span-2">
                <label>適用開始日</label>
                <div class="flex items-center gap-1.5">
                    <x-input.date name="search_effective_date_from"
                        x-model="searchParams.effective_date_from" class="flex-1" />
                    <span>～</span>
                    <x-input.date name="search_effective_date_to"
                        x-model="searchParams.effective_date_to" class="flex-1" />
                </div>
            </div>
        </div>

        {{-- アクションボタン --}}
        <div class="flex justify-end gap-2 mt-1 border-t pt-2.5">
            <x-button shape="btn-sub btn-secondary" text="リセット" @click="resetSearch()" />
            <x-button shape="btn-main btn-primary" text="検索" @click="currentPage = 1; doSearch()" />
        </div>
    </div>
</div>