{{--
    商品金額変更予約 登録サブモーダル
    ｜商品マスタ編集画面（edit.blade.php）から呼び出す
    ｜対象商品は画面で確定しているため入力させない（ルートのIDを正とする）
    ｜変更する項目だけを入力する。空欄の項目は予約に含めない（new_xxx IS NOT NULL が変更対象）
--}}
@php
    $scheduleService = \App\Services\Logic\User\Product\ProductPriceChangeScheduleService::class;
    $scheduleCurrent = $priceSchedule->current ?? [];
@endphp

<x-modal.page id="modal_price_schedule" title="商品金額変更 予約登録" width="3xl">

    <div id="xpriceschedule" x-data="xpriceScheduleEntry" class="relative">

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

        <form x-ref="form" id="form_price_schedule_store" method="POST" class="flex-col-space"
            action="{{ route('product-price-change-schedules.modal.store', ['product'=>$product->id]) }}"
            data-verify="{{ route('product-price-change-schedules.modal.verify.store', ['product'=>$product->id]) }}" >
            @csrf

            <div class="flex flex-col gap-3 max-w-fit">

                {{-- 対象商品（予約の対象キーは商品IDのみ。ルートのIDを正とするため入力させない） --}}
                <div class="text-sm">
                    <span class="text-secondary-600">対象商品</span>
                    <span class="ml-2 font-bold">{{ $scheduleService::targetLabel($product->product_code, $product->product_name) }}</span>
                    {{-- 待機中重複の検証エラー（product_id）はここに出す。
                         置き場が無いと setResult() が黙って捨て、トーストだけが出る --}}
                    <x-input.error item="product_id" />
                </div>

                {{-- 変更内容（6項目のうち変更する項目のみ入力する） --}}
                <table class="entry-list-table">
                    <colgroup>
                        <col class="w-40"><!-- 項目 -->
                        <col class="w-32"><!-- 現在値 -->
                        <col class="w-40"><!-- 変更後 -->
                    </colgroup>
                    <thead>
                        <tr>
                            <th>項目</th>
                            <th>現在値</th>
                            <th>変更後</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($scheduleService::TARGET_FIELDS as $key => $label)
                        <tr>
                            <td class="text">{{ $label }}</td>
                            <td class="text-right">
                                {{ $scheduleService::formatValue($key, $scheduleCurrent[$key] ?? null) ?? '（未設定）' }}
                            </td>
                            <td>
                                <x-input.number id="schedule_new_{{$key}}" name="new_{{$key}}" class="w-full"
                                    :digit="$scheduleService::FIELD_DECIMALS[$key]" value="" />
                                <x-input.error item="new_{{$key}}" />
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="text-xs text-secondary-600 -mt-1">
                    変更する項目だけを入力してください。空欄の項目は変更されません（1項目以上の入力が必要です）。
                </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">
                            翌日以降の日付を指定してください。当日{{ $scheduleService::BATCH_TIME }}のバッチでマスタへ反映されます。
                        </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() は同一ページの entry（商品マスタ本体）で実施済みのため初期化は行わない
            Alpine.data('xpriceScheduleEntry', () => ({ ...Register.entry(), init() {} }));
        });

        window.addEventListener('load', () => {
            $('#btn_price_schedule_store').addEventListener('click', () => {
                EntryAction.disableAction();

                const xroot = Alpine.$data($('#xpriceschedule'));
                xroot.verify();
            });
        });

        /*
           予約登録ボタン押下時
           ｜入力欄と検証エラーをクリアしサブモーダルを表示する
        */
        const priceScheduleCreate = () =>
        {
            document.querySelectorAll('#form_price_schedule_store input[name^="new_"]').forEach((el) => {
                el.value = '';
            });
            $('#schedule_effective_date').value = '';
            $('#schedule_note').value = '';

            // 検証エラー表示をクリアする
            document.querySelectorAll('#modal_price_schedule ul[data-type="input_error"]').forEach((ui) => {
                ui.innerHTML = '';
                ui.classList.add('hidden');
            });

            MicroModal.show('modal_price_schedule');
        }
    </script>
</x-modal.page>