{{-- 予約一覧タブコンテンツ --}}
<div x-data="scheduleList()" x-init="init()">

    {{-- 検索条件（標準スタイル） --}}
    <div 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-3 gap-4">
                {{-- 変更タイプ --}}
                <div>
                    <label>変更タイプ</label>
                    <select x-model="searchParams.change_type" class="w-full input-select">
                        <option value="">すべて</option>
                        @foreach($changeTypes 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>
                    <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="doSearch()" />
            </div>
        </div>
    </div>

    {{-- 一覧テーブル --}}
    <div class="bg-white border border-secondary-200 text-secondary-900 overflow-hidden shadow-xs rounded-lg p-3">
        {{-- ヘッダー（件数表示・ページネーション） --}}
        <div class="flex items-center justify-between mb-3">
            {{-- 件数表示（左） --}}
            <div class="flex items-center flex-wrap mx-2">
                <template x-if="!loading && totalCount > 0">
                    <div class="flex items-center">
                        <div class="mr-2">
                            <span class="text-lg font-bold font-sansf tracking-wider mr-1" x-text="totalCount"></span>件中
                        </div>
                        <div>
                            <span class="font-bold font-sansf tracking-wider" x-text="getCountFrom()"></span>
                            ～
                            <span class="font-bold font-sansf tracking-wider" x-text="getCountTo()"></span> 件を表示
                        </div>
                    </div>
                </template>
                <template x-if="!loading && totalCount === 0">
                    <div class="text-gray-500">データがありません</div>
                </template>
                <template x-if="loading">
                    <div class="text-gray-400">読み込み中...</div>
                </template>
            </div>

            {{-- ページネーション（右・上部） --}}
            <div x-show="lastPage > 1" class="flex items-center border rounded-md p-1">
                @include('user.sales-rep-schedules.partials.pager-controls')
            </div>
        </div>

        {{-- テーブル --}}
        <div class="overflow-x-auto">
            <table class="list-table-fixed">
                <colgroup>
                    <col class="w-12"> <!-- No -->
                    <col class="w-12"> <!-- タイプ -->
                    <col class="w-24"> <!-- ステータス -->
                    <col class="w-20"> <!-- 有効開始日 -->
                    <col class="w-20"> <!-- 旧担当者 -->
                    <col class="w-20"> <!-- 新担当者 -->
                    <col class="w-40"> <!-- 得意先/分類 -->
                    <col class="w-24"> <!-- 操作 -->
                </colgroup>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>タイプ</th>
                        <th>ステータス</th>
                        <th>有効開始日</th>
                        <th>旧担当者</th>
                        <th>新担当者</th>
                        <th>得意先/分類</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{-- ローディング表示 --}}
                    <tr x-show="loading">
                        <td colspan="8" class="text-center py-8">
                            <div class="flex justify-center items-center">
                                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
                                <span class="ml-2 text-gray-500">読み込み中...</span>
                            </div>
                        </td>
                    </tr>

                    {{-- データなし表示 --}}
                    <tr x-show="!loading && schedules.length === 0">
                        <td colspan="8" class="text-center py-8 text-gray-500">
                            予約データがありません。
                        </td>
                    </tr>

                    {{-- データ行 --}}
                    <template x-for="(schedule, index) in schedules" :key="schedule.id">
                        <tr class="cursor-pointer" @click="openEditModal(schedule)">
                            {{-- No --}}
                            <td class="text-center" x-text="(currentPage - 1) * 50 + index + 1"></td>

                            {{-- タイプ --}}
                            <td class="text-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                                    :class="schedule.change_type == 1 ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'"
                                    x-text="schedule.change_type == 1 ? '一括' : '個別'">
                                </span>
                            </td>

                            {{-- ステータス --}}
                            <td class="text-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                                    :class="getStatusClass(schedule.status)"
                                    x-text="getStatusLabel(schedule.status)">
                                </span>
                            </td>

                            {{-- 有効開始日 --}}
                            <td class="text-center" x-text="formatDate(schedule.effective_date)"></td>

                            {{-- 旧担当者 --}}
                            <td>
                                <template x-if="schedule.old_sales_rep">
                                    <span x-text="schedule.old_sales_rep.family_name + ' ' + schedule.old_sales_rep.given_name"></span>
                                </template>
                                <template x-if="!schedule.old_sales_rep">
                                    <span class="text-gray-400">-</span>
                                </template>
                            </td>

                            {{-- 新担当者 --}}
                            <td>
                                <template x-if="schedule.new_sales_rep">
                                    <span x-text="schedule.new_sales_rep.family_name + ' ' + schedule.new_sales_rep.given_name"></span>
                                </template>
                                <template x-if="!schedule.new_sales_rep">
                                    <span class="text-gray-400">-</span>
                                </template>
                            </td>

                            {{-- 得意先/分類 --}}
                            <td>
                                <template x-if="schedule.customer">
                                    <span x-text="schedule.customer.customer_name"></span>
                                </template>
                                <template x-if="!schedule.customer && schedule.category">
                                    <span class="text-gray-600" x-text="'分類: ' + schedule.category.category_name"></span>
                                </template>
                                <template x-if="!schedule.customer && !schedule.category">
                                    <span class="text-gray-400">全分類</span>
                                </template>
                            </td>

                            {{-- 操作 --}}
                            <td class="text-center" @click.stop>
                                <template x-if="schedule.status == 1">
                                    <div class="flex items-center gap-1.5 justify-center">
                                        <x-button.show @click="openEditModal(schedule)" />
                                        <button type="button" @click="confirmCancel(schedule)"
                                            class="btn-base btn-table btn-secondary-alt"
                                            title="キャンセル">
                                            <span class="button-inline-x flex flex-nowrap items-center justify-center w-full">
                                                <i class="fa-solid fa-ban fa-fw text-xs"></i>
                                                <span class="text-nowrap tracking-wider mr-1 -mt-[0.125rem]">取消</span>
                                            </span>
                                        </button>
                                    </div>
                                </template>
                                <template x-if="schedule.status != 1">
                                    <div class="flex items-center gap-1.5 justify-center">
                                        <x-button.show @click="openEditModal(schedule)" />
                                    </div>
                                </template>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- ページネーション（下部・右寄せ） --}}
        <div x-show="lastPage > 1" class="flex items-center justify-end mt-2">
            <div class="flex items-center border rounded-md p-1">
                @include('user.sales-rep-schedules.partials.pager-controls')
            </div>
        </div>
    </div>

    {{-- 編集モーダル --}}
    @include('user.sales-rep-schedules.partials.edit-modal')

</div>

{{-- 予約一覧用スクリプト --}}
@include('user.sales-rep-schedules.scripts.schedule-list-component')