{{-- 一覧テーブル --}}
<div class="bg-white border border-secondary-200 text-secondary-900 overflow-hidden shadow-xs rounded-lg p-3">

    {{-- ヘッダー（件数表示・CSV出力・ページネーション） --}}
    <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.product-price-change-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-24">  <!-- 商品コード -->
                <col class="w-44">  <!-- 商品名 -->
                <col class="w-80">  <!-- 変更内容（項目ごとの現在→予約） -->
                <col class="w-24">  <!-- 適用開始日 -->
                <col class="w-20">  <!-- ステータス -->
                <col class="w-28">  <!-- 適用日時 -->
                <col class="w-24">  <!-- 登録者 -->
                <col class="w-40">  <!-- 備考 -->
                <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 class="font-sansf tracking-wider" x-text="schedule.product_code"></td>

                        {{-- 商品名 --}}
                        <td x-text="schedule.product_name"></td>

                        {{-- 変更内容（変更対象の項目だけを「現在→予約」で並べる） --}}
                        <td>
                            <template x-for="change in schedule.changes" :key="change.key">
                                <div class="flex items-center gap-1 text-xs whitespace-nowrap">
                                    <span class="text-secondary-600 w-28 shrink-0" x-text="change.label"></span>
                                    <span class="text-secondary-600 text-right w-20"
                                        x-text="change.old ?? '（未設定）'"></span>
                                    <i class="fa-solid fa-arrow-right fa-fw text-xs text-secondary-400"></i>
                                    <span class="font-bold text-right w-20" x-text="change.new"></span>
                                </div>
                            </template>
                        </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">
                            <span x-text="schedule.applied_at || '-'"></span>
                            <template x-if="schedule.retroactive_count !== null">
                                <span class="block text-xs text-secondary-600">
                                    受注遡及<span class="font-bold mx-0.5" x-text="schedule.retroactive_count"></span>件
                                </span>
                            </template>
                        </td>

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

                        {{-- 備考 --}}
                        <td class="text-xs" x-text="schedule.note"></td>

                        {{-- 操作（待機中のみ・更新権限がある場合だけ出す。REQ-6.10） --}}
                        <td class="text-center">
                            @if($permissions->canUpdate)
                            <div class="flex items-center gap-1.5 justify-center">
                                <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>

                                <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>
                            </div>
                            @endif
                        </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.product-price-change-schedules.partials.pager-controls')
        </div>
    </div>
</div>