{{-- 編集モーダル --}}
<div x-show="showEditModal" x-cloak
    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
    @click.self="closeEditModal()">

    <div class="relative top-10 mx-auto p-5 border w-11/12 max-w-2xl 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-edit mr-2"></i>
                <span x-text="selectedSchedule?.status == 1 ? '予約編集' : '予約詳細'"></span>
            </h3>
            <button type="button" @click="closeEditModal()"
                class="text-gray-400 hover:text-gray-600">
                <i class="fa-solid fa-times text-xl"></i>
            </button>
        </div>

        {{-- コンテンツ --}}
        <div class="py-4" x-show="selectedSchedule">
            {{-- 基本情報 --}}
            <div class="mb-4 p-3 bg-gray-50 rounded-lg">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-500">予約ID:</span>
                        <span class="font-medium ml-2" x-text="selectedSchedule?.id"></span>
                    </div>
                    <div>
                        <span class="text-gray-500">変更タイプ:</span>
                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                            :class="selectedSchedule?.change_type == 1 ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'"
                            x-text="selectedSchedule?.change_type == 1 ? '一括変更' : '個別変更'">
                        </span>
                    </div>
                    <div>
                        <span class="text-gray-500">ステータス:</span>
                        <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                            :class="getStatusClass(selectedSchedule?.status)"
                            x-text="getStatusLabel(selectedSchedule?.status)">
                        </span>
                    </div>
                    <div>
                        <span class="text-gray-500">登録日時:</span>
                        <span class="font-medium ml-2" x-text="selectedSchedule?.created_at ? new Date(selectedSchedule.created_at).toLocaleString('ja-JP') : '-'"></span>
                    </div>
                </div>
            </div>

            {{-- 編集可能フォーム（待機中のみ） --}}
            <template x-if="selectedSchedule?.status == 1">
                <div class="space-y-4">
                    {{-- 一括変更の場合：旧担当者 --}}
                    <div x-show="selectedSchedule?.change_type == 1">
                        <label>旧担当者</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="repName(selectedSchedule?.old_sales_rep) || '-'"></span>
                            <input type="hidden" name="edit_old_sales_rep_id" :value="selectedSchedule?.old_sales_rep_id">
                        </div>
                        <p class="text-xs text-gray-500 mt-1">旧担当者は変更できません</p>
                    </div>

                    {{-- 個別変更の場合：得意先 --}}
                    <div x-show="selectedSchedule?.change_type == 2">
                        <label>得意先</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="selectedSchedule?.customer?.customer_name || '-'"></span>
                            <input type="hidden" name="edit_customer_id" :value="selectedSchedule?.customer_id">
                        </div>
                        <p class="text-xs text-gray-500 mt-1">得意先は変更できません</p>
                    </div>

                    {{-- 新担当者 --}}
                    <div>
                        <label class="required">新担当者</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="repName(selectedSchedule?.new_sales_rep) || '-'"></span>
                            <input type="hidden" name="edit_new_sales_rep_id" :value="selectedSchedule?.new_sales_rep_id">
                        </div>
                        <p class="text-xs text-gray-500 mt-1">担当者の変更は新規予約で対応してください</p>
                    </div>

                    {{-- 商品大分類 --}}
                    <div>
                        <label>商品大分類</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="selectedSchedule?.category?.category_name || '全分類'"></span>
                            <input type="hidden" name="edit_category_id" :value="selectedSchedule?.category_id">
                        </div>
                    </div>

                    {{-- 適用開始日 --}}
                    <div>
                        <label class="required">適用開始日</label>
                        <div>
                            <x-input.date name="edit_effective_date" class="w-full"
                                x-bind:value="formatDate(selectedSchedule?.effective_date)" />
                            <p class="text-xs text-gray-500 mt-1">翌日以降の日付を指定してください</p>
                        </div>
                    </div>

                    {{-- 備考 --}}
                    <div>
                        <label>備考</label>
                        <textarea name="edit_note" rows="2" class="w-full input-text"
                            x-text="selectedSchedule?.note || ''" maxlength="500"></textarea>
                    </div>

                    {{-- 除外得意先（一括変更のみ） --}}
                    <div x-show="selectedSchedule?.change_type == 1 && selectedSchedule?.exclusions?.length > 0">
                        <label>除外得意先</label>
                        <div class="max-h-32 overflow-y-auto border rounded p-2">
                            <template x-for="exclusion in selectedSchedule?.exclusions || []" :key="exclusion.id">
                                <div class="text-sm py-1 border-b last:border-b-0">
                                    <span x-text="exclusion.customer?.customer_code || ''"></span>
                                    <span class="ml-2" x-text="exclusion.customer?.customer_name || ''"></span>
                                </div>
                            </template>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">除外得意先の変更はキャンセル後に再登録してください</p>
                    </div>
                </div>
            </template>

            {{-- 読み取り専用表示（適用済み/キャンセル） --}}
            <template x-if="selectedSchedule?.status != 1">
                <div class="space-y-4">
                    {{-- 一括変更の場合：旧担当者 --}}
                    <div x-show="selectedSchedule?.change_type == 1">
                        <label>旧担当者</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="repName(selectedSchedule?.old_sales_rep) || '-'"></span>
                        </div>
                    </div>

                    {{-- 個別変更の場合：得意先 --}}
                    <div x-show="selectedSchedule?.change_type == 2">
                        <label>得意先</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="selectedSchedule?.customer?.customer_name || '-'"></span>
                        </div>
                    </div>

                    {{-- 新担当者 --}}
                    <div>
                        <label>新担当者</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="repName(selectedSchedule?.new_sales_rep) || '-'"></span>
                        </div>
                    </div>

                    {{-- 商品大分類 --}}
                    <div>
                        <label>商品大分類</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="selectedSchedule?.category?.category_name || '全分類'"></span>
                        </div>
                    </div>

                    {{-- 適用開始日 --}}
                    <div>
                        <label>適用開始日</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="formatDate(selectedSchedule?.effective_date)"></span>
                        </div>
                    </div>

                    {{-- 備考 --}}
                    <div x-show="selectedSchedule?.note">
                        <label>備考</label>
                        <div class="text-sm text-gray-600 p-2 bg-gray-50 rounded">
                            <span x-text="selectedSchedule?.note"></span>
                        </div>
                    </div>

                    {{-- 除外得意先（一括変更のみ） --}}
                    <div x-show="selectedSchedule?.change_type == 1 && selectedSchedule?.exclusions?.length > 0">
                        <label>除外得意先</label>
                        <div class="max-h-32 overflow-y-auto border rounded p-2">
                            <template x-for="exclusion in selectedSchedule?.exclusions || []" :key="exclusion.id">
                                <div class="text-sm py-1 border-b last:border-b-0">
                                    <span x-text="exclusion.customer?.customer_code || ''"></span>
                                    <span class="ml-2" x-text="exclusion.customer?.customer_name || ''"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        {{-- フッター --}}
        <div class="flex justify-end gap-2 pt-4 border-t">
            <x-button shape="btn-sub btn-secondary"
                text="閉じる"
                @click="closeEditModal()" />
            <template x-if="selectedSchedule?.status == 1">
                <x-button shape="btn-main btn-primary"
                    text="更新"
                    @click="updateSchedule()"
                    x-bind:disabled="editProcessing" />
            </template>
        </div>
    </div>
</div>