{{--
    支店別営業担当変更予約 登録サブモーダル
    ｜支店別営業担当モーダル（reps/index.blade.php）内から呼び出す
    ｜対象（支店×クラス）は行で確定するため入力させない（変更内容は新担当者のみ）
--}}
<x-modal.page id="modal_schedule" title="支店別営業担当 予約登録">

    <div id="xschedule" x-data="xscheduleEntry" class="relative">

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

        <form x-ref="form" id="form_schedule_store" method="POST" class="flex-col-space"
            action="{{ route('edi-trusco-branch-schedules.modal.store', ['branch'=>$branch->id]) }}"
            data-verify="{{ route('edi-trusco-branch-schedules.modal.verify.store', ['branch'=>$branch->id]) }}" >
            @csrf
            <!-- entry -->
            <div class="flex flex-col max-w-fit min-w-96">
                <div class="entry-item">
                    <label>クラス（大分類）</label>
                    <div>
                        {{-- 対象の大分類は行で確定しているため入力させない --}}
                        <x-input.text id="schedule_category_name" class="w-full" value="" readonly />
                        <input type="hidden" id="schedule_category_id" name="category_id" value="" />
                        <x-input.error item="category_id" />
                    </div>
                </div>
                <div class="entry-item">
                    <label>現在の営業担当者</label>
                    <div>
                        <x-input.text id="schedule_current_rep" class="w-full" value="" readonly />
                    </div>
                </div>
                <div class="entry-item">
                    <label class="required">営業担当者（変更後）</label>
                    <div>
                        <x-parts.select-sales-user id="schedule_new_sales_rep_id" name="new_sales_rep_id" class="w-full" />
                        <x-input.error item="new_sales_rep_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:15のバッチでマスタへ反映されます。
                        </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>
            </div>
        </form>
    </div>

    {{-- script --}}
    <script>
        document.addEventListener('alpine:init', () => {
            // ModalAction.init() は同一ページの xstore（担当設定モーダル）で実施済みのため初期化は行わない
            Alpine.data('xscheduleEntry', () => ({ ...Register.entry(), init() {} }));
        });
        window.addEventListener('load', () => {
            $('#btn_schedule_store').addEventListener('click', () => {
                EntryAction.disableAction();

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