{{-- 一覧テーブル --}}
<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>
            {{-- 読み込み中の表示はシステム標準のローディング（#overlay_loading）に任せる --}}
        </div>

        <div class="flex items-center gap-2">
            {{-- CSV出力（検索条件に一致する全件・ページング対象外） --}}
            <x-button.csv @click="exportCsv()" x-bind:disabled="exporting" />

            <div x-show="lastPage > 1" class="flex items-center border rounded-md p-1">
                @include('user.customer-price-rank-schedules.partials.pager-controls')
            </div>
        </div>
    </div>

    {{-- テーブル --}}
    <div class="overflow-x-auto">
        <table class="list-table-fixed">
            <colgroup>
                <col class="w-10">  <!-- No -->
                <col class="w-48">  <!-- 得意先 -->
                <col class="w-24">  <!-- 種別 -->
                <col class="w-32">  <!-- 商品分類 -->
                <col class="w-40">  <!-- 旧→新ランク -->
                <col class="w-24">  <!-- 適用開始日 -->
                <col class="w-20">  <!-- ステータス -->
                <col class="w-28">  <!-- 適用日時 -->
                <col class="w-24">  <!-- 登録者 -->
                <col class="w-32">  <!-- 操作 -->
            </colgroup>
            <thead>
                <tr>
                    <th>No</th>
                    <th>得意先</th>
                    <th>種別</th>
                    <th>商品分類</th>
                    <th>単価ランク（現在→予約）</th>
                    <th>適用開始日</th>
                    <th>ステータス</th>
                    <th>適用日時</th>
                    <th>登録者</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {{-- データなし表示（読み込み中はシステム標準のローディングが覆うため出さない） --}}
                <tr x-show="!loading && schedules.length === 0">
                    <td colspan="10" class="text-center py-8 text-gray-500">
                        予約データがありません。
                    </td>
                </tr>

                {{-- データ行（適用日超過かつ待機中の行は警告表示する） --}}
                <template x-for="(schedule, index) in schedules" :key="schedule.id">
                    <tr :class="schedule.is_overdue ? 'bg-danger-50' : ''">
                        <td class="text-center" x-text="(currentPage - 1) * perpage + index + 1"></td>

                        {{-- 得意先 --}}
                        <td>
                            <span class="font-sansf tracking-wider mr-1" x-text="schedule.customer_code"></span>
                            <span x-text="schedule.customer_name"></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="schedule.type_badge_class" x-text="schedule.type_label"></span>
                        </td>

                        {{-- 商品分類 --}}
                        <td x-text="schedule.category_name || '-'"></td>

                        {{-- 旧→新ランク --}}
                        <td>
                            <span class="text-secondary-600" x-text="schedule.old_rank_name || '（設定なし）'"></span>
                            <i class="fa-solid fa-arrow-right fa-fw text-xs text-secondary-400"></i>
                            <span class="font-bold" x-text="schedule.new_rank_name || '（解除）'"></span>
                        </td>

                        {{-- 適用開始日 --}}
                        <td class="text-center">
                            <span x-text="schedule.effective_date"></span>
                            <template x-if="schedule.is_overdue">
                                <span class="block text-xs text-danger-700 font-bold">
                                    <i class="fa-solid fa-triangle-exclamation fa-fw"></i>超過
                                </span>
                            </template>
                        </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.status_badge_class" x-text="schedule.status_label"></span>
                        </td>

                        {{-- 適用日時 --}}
                        <td class="text-center" x-text="schedule.applied_at || '-'"></td>

                        {{-- 登録者 --}}
                        <td x-text="schedule.created_by_name"></td>

                        {{-- 操作（待機中のみ・権限のある操作だけ出す） --}}
                        <td class="text-center">
                            <div class="flex items-center gap-1.5 justify-center">
                                @if($permissions->canUpdate)
                                <template x-if="schedule.is_editable">
                                    <button type="button" @click="openEditModal(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-pen fa-fw text-xs"></i>
                                            <span class="text-nowrap tracking-wider mr-1 -mt-[0.125rem]">編集</span>
                                        </span>
                                    </button>
                                </template>
                                @endif

                                @if($permissions->canDestroy)
                                <template x-if="schedule.is_editable">
                                    <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>
                                </template>
                                @endif
                            </div>
                        </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.customer-price-rank-schedules.partials.pager-controls')
        </div>
    </div>
</div>