{{--
    予約編集モーダル（一覧から開く）
    ｜編集できるのは「適用開始日」「備考」のみ。
      対象（得意先・種別・商品分類）と変更内容（単価ランク）は取消＋再登録で変更する。
      これらは画面から送らず Controller が保存済みの値を引き継ぐ（送信漏れによるNULL化を防ぐため）。
--}}
<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-pen fa-fw mr-1"></i>予約編集
            </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">

            {{-- 変更できない項目（対象・変更内容） --}}
            <div class="mb-4 p-3 bg-gray-50 rounded-lg">
                <div class="grid grid-cols-2 gap-3 text-sm">
                    <div>
                        <span class="text-gray-500">得意先:</span>
                        <span class="font-medium ml-2">
                            <span class="font-sansf tracking-wider mr-1" x-text="selectedSchedule?.customer_code"></span>
                            <span x-text="selectedSchedule?.customer_name"></span>
                        </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?.type_badge_class" x-text="selectedSchedule?.type_label"></span>
                    </div>
                    <div>
                        <span class="text-gray-500">商品分類:</span>
                        <span class="font-medium ml-2" x-text="selectedSchedule?.category_name || '-'"></span>
                    </div>
                    <div>
                        <span class="text-gray-500">単価ランク:</span>
                        <span class="ml-2">
                            <span class="text-secondary-600" x-text="selectedSchedule?.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="selectedSchedule?.new_rank_name || '（解除）'"></span>
                        </span>
                    </div>
                </div>
                <p class="text-xs text-gray-500 mt-2">
                    対象・変更内容は編集できません。変更する場合は取消してから登録し直してください。
                </p>
            </div>

            {{-- エラー表示 --}}
            <div x-show="editError" x-cloak
                class="bg-danger-50 border-l-4 border-danger-600 text-danger-700 p-3 mb-4 rounded text-sm">
                <i class="fa-solid fa-triangle-exclamation fa-fw mr-1"></i>
                <span x-text="editError"></span>
            </div>

            {{-- 編集できる項目 --}}
            <div class="space-y-4">
                <div>
                    <label class="required">適用開始日</label>
                    <div>
                        <x-input.date name="edit_effective_date" />
                        <div class="text-xs text-secondary-600 mt-1">
                            翌日以降の日付を指定してください。当日00:05のバッチでマスタへ反映されます。
                        </div>
                    </div>
                </div>

                <div>
                    <label>備考</label>
                    <textarea name="edit_note" rows="2" class="w-full input-text" maxlength="500"></textarea>
                </div>
            </div>
        </div>

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