@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>伝票No.</label>
                        <div>
                            <x-input.text readonly class="w-full" value="{{$paymentReceiptHeader->slip_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="{{$paymentReceiptHeader->customer->customer_code}}" 
                            name="{{$paymentReceiptHeader->customer->customer_name}}" />
                        <input type="hidden" name="customer_id" value="{{old('customer_id', $paymentReceiptHeader->customer_id)}}" />
                        @else
                        <livewire:parts.input-customer custom="customer_name"
                            type="payment-receipt-parent"
                            value="{{old('customer_id', $paymentReceiptHeader->customer_id)}}" >
                        @endif
                        <x-input.error item="customer_id" />
                        <x-input.error item="customer_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' || $mode=='edit')
                            <x-input.text readonly class="w-24" id="payment_date" name="payment_date"
                                value="{{old('payment_date', $paymentReceiptHeader->payment_date)}}" />
                            @else
                            <x-input.date id="payment_date" name="payment_date"
                                value="{{old('payment_date', $paymentReceiptHeader->payment_date)}}" />
                            @endif
                            <x-input.error item="payment_date" />
                        </div>
                    </div>
                    {{--
                    <div class="entry-item w-1/2">
                        <label>FB伝票番号</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly id="fb_slip_number" name="fb_slip_number" class="w-full"
                                value="{{old('fb_slip_number', $paymentReceiptHeader->fb_slip_number)}}"
                                 />
                            @else
                            <x-input.text id="fb_slip_number" name="fb_slip_number" class="w-full"
                                value="{{old('fb_slip_number', $paymentReceiptHeader->fb_slip_number)}}"
                                 />
                            @endif
                            <x-input.error item="fb_slip_number" />
                        </div>
                    </div>
                    --}}
                </div>
                <!-- line-04 -->
                <div>
                    <label>備考</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="note" class="w-full"
                            value="{{old('note', $paymentReceiptHeader->note)}}" />
                        @else
                        <x-input.text name="note" class="w-full"
                            value="{{old('note', $paymentReceiptHeader->note)}}" />
                        @endif
                        <x-input.error item="note" />
                    </div>
                </div>
                <!-- line-05 -->
                <div class="flex items-center gap-3">
                    <div>
                        <label>入金合計</label>
                        <div>
                            <x-input.text readonly class="w-full text-right" id="total_amount"
                                value="{{old('total_amount', num_format($paymentReceiptHeader->total_amount))}}" />
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </x-box.toggle>

    {{-- 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.accounts-receivable.entry-payment-receipt-detail mode="{{$mode}}"
                :details="$details" {{-- :detail="$detail" --}} :header="$paymentReceiptHeader" />
        </div>
    </div>
    </div>

    {{-- modal --}}
    <x-modal.search key="search" id="search" />
    <x-modal.frame key="frame" id="frame" />
    @include('user.payment-receipt.partials.modal-detail', ['mode' => $mode])
</div>

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

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

    /* Events */

    /* ｜得意先の選択時 */
    Livewire.on('parts.input-customer.send',
        (event) => selectedCustomer(event[0]));

    /* ｜入金日の変更時 */
    $('#payment_date').addEventListener('change',
        (event) => changePaymentDate());

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

    /* 得意先選択時の処理 */
    const selectedCustomer = (customer) =>
    {
        //｜明細一覧の得意先をリセットして請求データを取得する
        const pDate = $('#payment_date').value;
        const cId = getVal(customer,'id',null);
        const data = {customerId: cId, paymentDate: pDate};
        Livewire.dispatch('partials.user.accountsreceivables.entry-payment-receipt-detail.customer-selected', data);
    }

    /* 入金日変更時の処理 */
    const changePaymentDate = () =>
    {
        //｜明細一覧の得意先をリセットして請求データを取得する
        const pDate = $('#payment_date').value;
        const cId = $('#customer_id').value;
        const data = {customerId: cId, paymentDate: pDate};
        Livewire.dispatch('partials.user.accountsreceivables.entry-payment-receipt-detail.customer-selected', data);
    }

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

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


});
</script>