{{-- プレビューモーダル --}}
<div x-show="showPreviewModal" x-cloak
    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
    @click.self="closePreview()">

    <div class="relative top-10 mx-auto p-5 border w-11/12 max-w-5xl shadow-lg rounded-md bg-white mb-10">
        {{-- ヘッダー --}}
        <div class="flex items-center justify-between pb-4 border-b">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fa-solid fa-eye mr-2"></i>
                一括変更 影響確認
            </h3>
            <button type="button" @click="closePreview()"
                class="text-gray-400 hover:text-gray-600">
                <i class="fa-solid fa-times text-xl"></i>
            </button>
        </div>

        {{-- コンテンツ --}}
        <div class="py-4">
            {{-- ローディング表示 --}}
            <div x-show="previewLoading" class="flex justify-center items-center py-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
                <span class="ml-4 text-gray-600">読み込み中...</span>
            </div>

            {{-- プレビュー内容 --}}
            <div x-show="!previewLoading">
                {{-- 集計情報 --}}
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <div class="flex items-center">
                        <i class="fa-solid fa-info-circle text-blue-600 mr-2"></i>
                        <span class="font-medium text-blue-800">
                            対象件数: <span x-text="previewCount" class="text-xl font-bold"></span> 件
                        </span>
                    </div>
                    <p class="text-sm text-blue-600 mt-1">
                        この得意先の営業担当が変更されます。
                    </p>
                </div>

                {{-- 対象一覧テーブル --}}
                <div class="border rounded-lg overflow-hidden max-h-96 overflow-y-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50 sticky top-0">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                    得意先コード
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                    得意先名
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                                    商品大分類
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <template x-for="(item, index) in previewData" :key="index">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-2 text-sm" x-text="item.customer?.customer_code || '-'"></td>
                                    <td class="px-4 py-2 text-sm" x-text="item.customer?.customer_name || '-'"></td>
                                    <td class="px-4 py-2 text-sm" x-text="item.category?.category_name || '-'"></td>
                                </tr>
                            </template>
                            <tr x-show="previewData.length === 0">
                                <td colspan="3" class="px-4 py-8 text-center text-sm text-gray-500">
                                    対象となる得意先がありません。
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- 注意事項 --}}
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mt-4">
                    <div class="flex items-start">
                        <i class="fa-solid fa-triangle-exclamation text-yellow-600 mt-0.5 mr-2"></i>
                        <div>
                            <p class="font-medium text-yellow-800">注意事項</p>
                            <ul class="text-sm text-yellow-700 mt-1 list-disc list-inside">
                                <li>予約は有効開始日に自動的にマスタに反映されます。</li>
                                <li>予約登録後もキャンセルが可能です（待機中ステータスの場合）。</li>
                                <li>同じ日付で同一得意先への変更が既に予約されている場合、後から登録された予約が優先されます。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- フッター --}}
        <div class="flex justify-between pt-4 border-t">
            <div>
                <x-button shape="btn-sub btn-secondary"
                    text="CSV出力"
                    icon="fa-solid fa-file-csv"
                    @click="exportCsv()"
                    x-bind:disabled="previewLoading || previewData.length === 0" />
            </div>
            <div class="flex gap-2">
                <x-button shape="btn-sub btn-secondary"
                    text="戻る"
                    @click="closePreview()" />
                <x-button shape="btn-main btn-primary"
                    text="予約を確定"
                    @click="confirmSchedule()"
                    x-bind:disabled="previewLoading || previewData.length === 0 || processing" />
            </div>
        </div>
    </div>
</div>