{{--
    単価ランク変更予約 登録サブモーダル
    ｜グループ価格設定モーダル（index.blade.php）内から呼び出す
    ｜種別により入力項目を出し分ける（1:標準ランク変更 / 2:品目別ランク設定 / 3:品目別ランク解除）
--}}
<x-modal.page id="modal_schedule" title="単価ランク変更予約">

    <div id="xschedule" x-data="{ scheduleType: '2' }" class="relative">

        <div class="flex justify-end absolute top-0 right-0">
            <x-button.modal-save id="btn_schedule_store" onclick="saveScheduleAction()" data-type-action />
        </div>

        <div id="xschedule_entry" x-data="xscheduleEntry">
            <form x-ref="form" id="form_schedule_store" method="POST" class="flex-col-space"
                action="{{ route('customer-price-rank-schedules.modal.store', ['customer'=>$customer->id]) }}"
                data-verify="{{ route('customer-price-rank-schedules.modal.verify.store') }}" >
                @csrf

                <div class="flex flex-col max-w-fit min-w-96">

                    {{-- 予約種別 --}}
                    <div class="entry-item">
                        <label class="required">予約種別</label>
                        <div>
                            <select id="schedule_schedule_type" name="schedule_type" class="input-select w-full"
                                x-model="scheduleType">
                                @foreach(\App\Enums\PriceRankScheduleType::cases() as $type)
                                    <option value="{{$type->value}}">{{$type->label()}}</option>
                                @endforeach
                            </select>
                            <x-input.error item="schedule_type" />
                        </div>
                    </div>

                    {{-- 商品分類（種別2・3のみ） --}}
                    <div class="entry-item" x-show="scheduleType !== '1'">
                        <label class="required">価格設定グループ</label>
                        <div>
                            <x-parts.select-category-price id="schedule_category_id" name="category_id"
                                class="w-full" value="" />
                            <x-input.error item="category_id" />
                        </div>
                    </div>

                    {{-- 新単価ランク（種別1・2のみ） --}}
                    <div class="entry-item" x-show="scheduleType !== '3'">
                        <label class="required">単価ランク（変更後）</label>
                        <div>
                            <x-parts.select-price-rank id="schedule_new_price_rank_id" name="new_price_rank_id"
                                class="w-full" value="" />
                            <x-input.error item="new_price_rank_id" />
                        </div>
                    </div>

                    {{-- 適用開始日 --}}
                    <div class="entry-item">
                        <label class="required">適用開始日</label>
                        <div>
                            <x-input.date id="schedule_effective_date" name="effective_date" value="" />
                            <x-input.error item="effective_date" />
                            <div class="text-xs text-secondary-600 mt-1">
                                翌日以降の日付を指定してください。当日00:05のバッチでマスタへ反映されます。
                            </div>
                        </div>
                    </div>

                    {{-- 備考 --}}
                    <div class="entry-item">
                        <label>備考</label>
                        <div>
                            <x-input.textarea id="schedule_note" name="note" class="w-full" value="" />
                            <x-input.error item="note" />
                        </div>
                    </div>

                    <input type="hidden" name="customer_id" value="{{$customer->id}}">
                </div>
            </form>
        </div>
    </div>

    {{-- script --}}
    <script>
        document.addEventListener('alpine:init', () => {
            // ModalAction.init() は同一ページの xstore / xupdate で実施済みのため初期化は行わない
            Alpine.data('xscheduleEntry', () => ({ ...Register.entry(), init() {} }));
        });

        document.addEventListener('DOMContentLoaded', function() {
            window.saveScheduleAction = () => {
                EntryAction.disableAction();

                const xroot = Alpine.$data($('#xschedule_entry'));
                xroot.verify();
            }
        });
    </script>
</x-modal.page>