@php($clsRequired = ($mode!='show') ? 'required' : '')
<div class="flex-col-gap">
    {{-- header --}}
    <x-box.toggle class="entry-base-4 max-h">
        <div class="entry">
            <!-- box-1 -->
            <div>
                <!-- line-01 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item w-1/2">
                        <label>入荷番号</label>
                        <div>
                            <x-input.text readonly class="w-full" name="_receipt_number" value="{{$receipt->receipt_number}}" />
                        </div>
                    </div>
                    <div class="entry-item w-1/2">
                        <label class="">INVOICE No.</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly id="invoice_number" name="invoice_number" class="w-full"
                                value="{{old('invoice_number', $receipt->invoice_number)}}" />
                            @else
                            <x-input.text id="invoice_number" name="invoice_number" class="w-full"
                                value="{{old('invoice_number', $receipt->invoice_number)}}" />
                            @endif
                            <x-input.error item="invoice_number" />
                        </div>
                    </div>
                </div>
                <!-- line-02 -->
                <div>
                    <label class="{{ $clsRequired }}">仕入先</label>
                    <div>
                        @if($mode=='show' || $mode=='edit')
                        <x-input.code-name size="w-20" class="w-full"
                            code="{{$receipt->supplier->supplier_code}}"
                            name="{{$receipt->supplier->supplier_name}}" />
                        <input type="hidden" name="supplier_id" value="{{old('supplier_id', $receipt->supplier_id)}}" />
                        @else
                        <livewire:parts.input-supplier
                            wire:key="receipt-supplier-{{ $receipt->id ?? 'new' }}"
                            custom="supplier_name"
                            type="receipt-parent"
                            value="{{old('supplier_id', $receipt->supplier_id)}}" >
                        @endif
                        <x-input.error item="supplier_id" />
                        <x-input.error item="supplier_name" />
                    </div>
                </div>
                <!-- line-03 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item w-1/2">
                        <label class="{{ $clsRequired }}">公開用入荷予定日</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly class="w-full" id="public_expected_receipt_date_display"
                                name="_public_expected_receipt_date"
                                value="{{old('public_expected_receipt_date', $receipt->public_expected_receipt_date)}}" />
                            <div id="public_expected_receipt_date_edit_wrapper" style="display:none;">
                                <x-input.date id="public_expected_receipt_date_edit"
                                    name="public_expected_receipt_date"
                                    value="{{old('public_expected_receipt_date', $receipt->public_expected_receipt_date)}}" />
                            </div>
                            @else
                            <x-input.date id="public_expected_receipt_date" name="public_expected_receipt_date"
                                value="{{old('public_expected_receipt_date', $receipt->public_expected_receipt_date)}}" />
                            @endif
                            <x-input.error item="public_expected_receipt_date" />
                        </div>
                    </div>
                    <div class="entry-item w-1/2">
                        <label class="{{ $clsRequired }}">予定配送日</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly class="w-full" id="scheduled_delivery_date_display"
                                name="_scheduled_delivery_date"
                                value="{{old('scheduled_delivery_date', $receipt->scheduled_delivery_date)}}" />
                            <div id="scheduled_delivery_date_edit_wrapper" style="display:none;">
                                <x-input.date id="scheduled_delivery_date_edit"
                                    name="scheduled_delivery_date"
                                    value="{{old('scheduled_delivery_date', $receipt->scheduled_delivery_date)}}" />
                            </div>
                            @else
                            <x-input.date id="scheduled_delivery_date" name="scheduled_delivery_date"
                                value="{{old('scheduled_delivery_date', $receipt->scheduled_delivery_date)}}" />
                            @endif
                            <x-input.error item="scheduled_delivery_date" />
                        </div>
                    </div>
                </div>
                @if($mode=='show' && (isset($approval)) && ($approval->status == App\Enums\ApprovalStatus::InApproval->value))
                <!-- 日付変更ボタンエリア（承認依頼時のみ表示） -->
                <div id="date_change_button_area" class="flex items-center gap-3">
                    <!-- 日付変更ボタン -->
                    <x-button id="btn_date_change" onclick="toggleDateEdit()" text="日付変更" class="btn-base btn-sub btn-secondary" icon="fa-solid fa-calendar-days fa-fw" />
                    <!-- 登録ボタン（初期は非表示） -->
                    <x-button.main id="btn_date_save" onclick="saveDateChange()" style="display:none;" text="登録" icon="fa-solid fa-check fa-fw" />
                    <!-- キャンセルボタン（初期は非表示） -->
                    <x-button.main id="btn_date_cancel" onclick="cancelDateEdit()" style="display:none;" text="キャンセル" icon="fa-solid fa-times fa-fw" />
                </div>
                @endif
                <!-- line-04 -->
                <div>
                    <label>備考</label>
                    <div>
                        @if($mode=='show')
                        <x-input.textarea readonly name="note" class="w-full"
                            value="{{old('note', $receipt->note)}}" rows=4 />
                        @else
                        <x-input.textarea name="note" class="w-full"
                            value="{{old('note', $receipt->note)}}" rows=4 />
                        @endif
                        <x-input.error item="note" />
                    </div>
                </div>
            </div>
            <!-- box-2 -->
            <div>
                <!-- line-01 -->
                <div>
                    <label>購買ステータス</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="purchase_status" class="w-full" value="{{Enum::name('PurchaseHeaderStatus', $receipt->purchase_status)}}" />
                        @else
                        <x-input.enum-select key="PurchaseHeaderStatus" required class="w-full"
                            id="purchase_status" name="purchase_status"
                            value="{{ old('purchase_status', $receipt->purchase_status) }}" />
                        @endif
                        <x-input.error item="bl_number" />
                    </div>
                </div>
                <!-- line-02 -->
                <div>
                    <label>船荷証券</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="bl_number" class="w-full"
                            value="{{old('bl_number', $receipt->bl_number)}}" />
                        @else
                        <x-input.text name="bl_number" class="w-full"
                            value="{{old('bl_number', $receipt->bl_number)}}" />
                        @endif
                        <x-input.error item="bl_number" />
                    </div>
                </div>
                <!-- line-03 -->
                <div>
                    <label>本船名</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="vessel_name" class="w-full"
                            value="{{old('vessel_name', $receipt->vessel_name)}}" />
                        @else
                        <x-input.text name="vessel_name" class="w-full"
                            value="{{old('vessel_name', $receipt->vessel_name)}}" />
                        @endif
                        <x-input.error item="vessel_name" />
                    </div>
                </div>
                <!-- line-04 -->
                <div>
                    <label>乙仲業者</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="forwarder_name" class="w-full"
                            value="{{old('forwarder_name', $receipt->forwarder_name)}}" />
                        @else
                        <x-input.text name="forwarder_name" class="w-full"
                            value="{{old('forwarder_name', $receipt->forwarder_name)}}" />
                        @endif
                        <x-input.error item="forwarder_name" />
                    </div>
                </div>
                <!-- line-05 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item w-1/2">
                        <label>入荷形態</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly name="receipt_type" class="w-full"
                                value="{{old('receipt_type', $receipt->receipt_type)}}" />
                            @else
                            <x-input.text name="receipt_type" class="w-full"
                                value="{{old('receipt_type', $receipt->receipt_type)}}" />
                            @endif
                            <x-input.error item="receipt_type" />
                        </div>
                    </div>
                    <div class="entry-item w-1/2">
                        <label>コンテナNo.</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly name="container_number" class="w-full"
                                value="{{old('container_number', $receipt->container_number)}}" />
                            @else
                            <x-input.text name="container_number" class="w-full"
                                value="{{old('container_number', $receipt->container_number)}}" />
                            @endif
                            <x-input.error item="container_number" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- box-4 -->
            <div>
                <label>【 金額合計 】</label>
                <div>
                    <table class="slip-summary">
                    <tbody>
                        <tr>
                            <th>入荷数量合計</th>
                            <td>
                                <input type="hidden" id="total_receipt_qty" name="total_receipt_qty" value="{{old('total_receipt_qty', $total->totalReceiptQty ?? 0)}}" />
                                <span id="_total_receipt_qty">{{old('total_receipt_qty', $total->totalReceiptQty ?? 0)}}</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>入荷金額合計</th>
                            <td>
                                <input type="hidden" id="total_receipt_amount" name="total_receipt_amount" value="{{old('total_receipt_amount', $total->totalReceiptAmount ?? 0)}}" />
                                <input type="hidden" id="total_order_amount" name="total_order_amount" value="{{old('total_order_amount', $total->totalOrderAmount ?? 0)}}" />
                                <span id="_total_receipt_amount">{{old('total_receipt_amount', $total->totalReceiptAmount ?? 0)}}</span>
                            </td>
                        </tr>
                        {{--
                        <tr>
                            <th style="background-color: rgb(246 247 249 / var(--tw-bg-opacity, 1));">発注金額合計</th>
                            <td style="background-color: initial">
                                <input type="hidden" id="total_order_amount" name="total_order_amount" value="{{old('total_order_amount', $total->totalOrderAmount ?? 0)}}" />
                                <span id="_total_order_amount">{{old('total_order_amount', $total->totalOrderAmount ?? 0)}}</span>
                            </td>
                        </tr>
                        --}}
                    </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </x-box.toggle>

    {{-- 承認経路 --}}
    @if(isset($approvalTemplate))
    <x-box.toggle class="entry-base-4 max-h" title="承認WF">
        <div class="entry">
            <!-- box-1 -->
            <div>
                <!-- line-01 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item">
                        <label>承認ステータス</label>
                        <div>
                            &nbsp;
                            {{isset($approval) ? Enum::name('ApprovalStatus', $approval->status) : '申請前'}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- box-2 -->
            <div>
                <!-- line-01 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item">
                        <label>作成者</label>
                        <div>
                            &nbsp;
                            {{isset($approval) ? obj_attr($approval->crateUser, 'family_name') : ''}}{{isset($approval) ? obj_attr($approval->crateUser, 'given_name') : ''}}
                        </div>
                    </div>
                </div>
                <!-- line-02 -->
                <div>
                    <div class="entry-item">
                        <label>申請者</label>
                        <div>
                            &nbsp;
                            {{isset($approval) ? obj_attr($approval->requestUser, 'family_name') : ''}}{{isset($approval) ? obj_attr($approval->requestUser, 'given_name') : ''}}
                        </div>
                    </div>
                </div>
                <!-- line-03 -->
                <div>
                    <div class="entry-item">
                        <label>申請日時</label>
                        <div>
                            &nbsp;
                            {{isset($approval) && $approval->requested_at ? \Carbon\Carbon::parse($approval->requested_at)->format('Y/m/d H:i') : ''}}
                        </div>
                    </div>
                </div>
            </div>
            @if(isset($approvalSteps) && $approvalSteps->count() > 0)
            {{-- 実際の承認ステップデータがある場合 --}}
                @foreach($approvalSteps as $step)
            <div>
                <div class="flex items-center gap-3">
                    <div class="entry-item">
                        <label>承認者{{$step->step_order}}</label>
                        <div>
                            &nbsp;
                            {{obj_attr($step->actionUser, 'family_name')}}{{obj_attr($step->actionUser, 'given_name')}}
                        </div>
                    </div>
                </div>
                <div>
                    <div class="entry-item">
                        <label>承認日時{{$step->step_order}}</label>
                        <div>
                            &nbsp;
                            {{$step->approved_at ? \Carbon\Carbon::parse($step->approved_at)->format('Y/m/d H:i') : ''}}
                        </div>
                    </div>
                </div>

            </div>
                @endforeach
            @elseif(isset($approvalTemplateSteps) && $approvalTemplateSteps->count() > 0)
            {{-- 承認テンプレートステップがある場合（新規作成時など） --}}
                @foreach($approvalTemplateSteps as $step)
            <div>
                <div class="flex items-center gap-3">
                    <div class="entry-item">
                        <label>承認者{{$step->step_order}}</label>
                        <div>
                            &nbsp;
                            {{obj_attr($step->approver, 'name')}}
                        </div>
                    </div>
                </div>
                <div>
                    <div class="entry-item">
                        <label>承認日時{{$step->step_order}}</label>
                        <div>
                            &nbsp;
                        </div>
                    </div>
                </div>

            </div>
                @endforeach
            @endif
        </div>
    </x-box.toggle>
    @endif


    {{-- detail --}}
    <div x-ref="box" class="entry-slip-detail-box" >
    <div {{-- @load.window="fixed()" @resize.window="fixed()" @toggle-open.window="fix()" --}}>
        <div class="scroll-wrap thin-scroll" x-ref="wrap">
            <livewire:partials.user.purchase-order.entry-receipt-detail mode="{{$mode}}"
                :details="$details" :header="$receipt" />
        </div>
    </div>
    </div>

    {{-- modal --}}
    <x-modal.search key="search" id="search" />
    <x-modal.frame key="frame" id="frame" />

</div>

<script>
window.addEventListener('load', () => {

    /* Alpine.js */
    const xroot = Alpine.$data($('#root'));

    /* Events */

    /* ｜仕入先の選択時 */
    Livewire.on('parts.input-supplier.send',
        (event) => selectedSupplier(event[0]));

    @if($mode!='show')
    /* ｜予定配送日の変更時 */
    $('#scheduled_delivery_date').addEventListener('change',
        (event) => changeScheduledDeliveryDate());
    @endif

    /* Actions */
    const getVal = Editor.getValueInObject;

    /* 仕入先選択時の処理 */
    const selectedSupplier = (supplier) =>
    {
        //｜明細一覧の仕入先をリセットして発注データを取得する
        const schedDate = $('#scheduled_delivery_date').value;
        const sId = getVal(supplier,'id',null);
        const data = {supplierId: sId, scheduledDeliveryDate: schedDate};
        Livewire.dispatch('partials.user.purchase-order.entry-receipt-detail.supplier-selected', data);
    }

    /* 予定配送日変更時の処理 */
    const changeScheduledDeliveryDate = () =>
    {
        //｜明細一覧の仕入先をリセットして発注データを取得する
        const schedDate = $('#scheduled_delivery_date').value;
        const sId = $('#supplier_id').value;
        const data = {supplierId: sId, scheduledDeliveryDate: schedDate};
        Livewire.dispatch('partials.user.purchase-order.entry-receipt-detail.supplier-selected', data);
    }

    /* ｜明細行サマリーの変更時 */
    Livewire.on('partials.user.purchase-order.entry-receipt-detail.summary',
        (event) => changeSummary(event[0]));

    // 明細行サマリーの変更時の処理 */
    const changeSummary = (summary) =>
    {
        const digit = summary.digit;
        // 合計を更新
        $('#total_receipt_qty').value = Editor.numberFormat(summary.total_receipt_qty);
        $('#_total_receipt_qty').innerText = Editor.numberFormat(summary.total_receipt_qty);

        $('#total_receipt_amount').value = Editor.numberFormat(summary.total_receipt_amount, digit ,true);
        $('#_total_receipt_amount').innerText = Editor.numberFormat(summary.total_receipt_amount, digit ,true);

        $('#total_order_amount').value = Editor.numberFormat(summary.total_order_amount, digit ,true);
        $('#_total_order_amount').innerText = Editor.numberFormat(summary.total_order_amount, digit ,true);
    }

    /* 日付変更機能 - 編集モード切替 */
    window.toggleDateEdit = () => {
        // 表示用フィールドを非表示
        $('#public_expected_receipt_date_display').style.display = 'none';
        $('#scheduled_delivery_date_display').style.display = 'none';

        // 編集用フィールド（Wrapper）を表示
        $('#public_expected_receipt_date_edit_wrapper').style.display = 'block';
        $('#scheduled_delivery_date_edit_wrapper').style.display = 'block';

        // ボタンの表示切替
        document.getElementById('btn_date_change').style.display = 'none';
        document.getElementById('btn_date_save').style.display = '';
        document.getElementById('btn_date_cancel').style.display = '';
    };

    /* 日付変更機能 - キャンセル */
    window.cancelDateEdit = () => {
        // 編集用フィールド（Wrapper）を非表示
        $('#public_expected_receipt_date_edit_wrapper').style.display = 'none';
        $('#scheduled_delivery_date_edit_wrapper').style.display = 'none';

        // 表示用フィールドを表示
        $('#public_expected_receipt_date_display').style.display = 'block';
        $('#scheduled_delivery_date_display').style.display = 'block';

        // ボタンの表示切替
        document.getElementById('btn_date_change').style.display = '';
        document.getElementById('btn_date_save').style.display = 'none';
        document.getElementById('btn_date_cancel').style.display = 'none';

        // 編集内容をリセット（元の値に戻す）
        const originalPublicDate = '{{$receipt->public_expected_receipt_date}}';
        const originalScheduledDate = '{{$receipt->scheduled_delivery_date}}';
        $('#public_expected_receipt_date_edit').value = originalPublicDate;
        $('#scheduled_delivery_date_edit').value = originalScheduledDate;
    };

    /* 日付変更機能 - 保存 */
    window.saveDateChange = () => {
        const publicDate = $('#public_expected_receipt_date_edit').value;
        const scheduledDate = $('#scheduled_delivery_date_edit').value;

        // バリデーション
        if (!publicDate || !scheduledDate) {
            alert('公開用入荷予定日と予定配送日を入力してください。');
            return false;
        }

        const confirmed = confirm('日付を変更します。よろしいですか？');
        if (!confirmed) {
            return false;
        }

        // ローディング開始
        EntryAction.disableAction();
        Action.onLoading();

        // データ送信
        const url = @if($mode=='show') '{{ route('receipts.update-dates', ['receipt' => $receipt->id]) }}' @else '' @endif;
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                public_expected_receipt_date: publicDate,
                scheduled_delivery_date: scheduledDate
            })
        })
        .then(response => response.json())
        .then(data => {
            EntryAction.disableAction(false);
            Action.onLoading(false);

            if (data.success) {
                // 表示用フィールドの値を更新
                $('#public_expected_receipt_date_display').value = publicDate;
                $('#scheduled_delivery_date_display').value = scheduledDate;

                // 通常表示モードに戻す
                cancelDateEdit();

                //alert('日付を更新しました。');
            } else {
                alert('エラーが発生しました: ' + (data.message || '不明なエラー'));
            }
        })
        .catch(error => {
            EntryAction.disableAction(false);
            Action.onLoading(false);
            console.error('Error:', error);
            alert('通信エラーが発生しました。');
        });
    };
});
</script>