@php
    $isShow = ($mode ?? 'create') === 'show';
    $isEdit = ($mode ?? 'create') === 'edit';
    $isCreate = ($mode ?? 'create') === 'create';
@endphp

<div class="flex-col-gap">
{{-- ヘッダ部 --}}
<x-box.toggle class="entry-base-4 max-h">
    <div class="entry">
        <div>
            {{-- 入金日 --}}
            <div>
                <label>入金日 <span class="text-red-500">*</span></label>
                <div>
                    @if($isShow)
                        <x-input.text readonly class="w-full" id="payment_date" name="payment_date"
                            value="{{ $payment_date ?? '' }}" />
                    @else
                        <x-input.date id="payment_date" name="payment_date" class="w-full"
                            value="{{ old('payment_date', $payment_date ?? now()->format('Y-m-d')) }}" />
                    @endif
                </div>
            </div>
            {{-- 備考 --}}
            <div>
                <label>備考</label>
                <div>
                    @if($isShow)
                        <x-input.text readonly class="w-full" name="note"
                            value="{{ $note ?? '' }}" />
                    @else
                        <x-input.text name="note" class="w-full"
                            value="{{ old('note', $note ?? '') }}" />
                    @endif
                </div>
            </div>
        </div>
        <div>
            {{-- 合計金額表示 --}}
            <div>
                <label>合計金額</label>
                <div>
                    <x-input.text readonly class="w-full text-right font-semibold" id="total_amount_display"
                        value="0" />
                </div>
            </div>
        </div>
    </div>
</x-box.toggle>

{{-- エラー表示 --}}
<x-input.error item="payment_date" />
<x-input.error item="note" />
<x-input.error item="rows" />
@if($errors->any())
    @foreach($errors->all() as $error)
        @if(str_starts_with($error, '入金区分が') || str_starts_with($error, '請求締め'))
            <div class="text-red-600 text-sm mt-1">{{ $error }}</div>
        @endif
    @endforeach
@endif

{{-- 明細部 --}}
<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 overflow-x-auto" x-ref="wrap">
            <div class="min-w-[1000px]">
                <livewire:partials.user.payment-receipt-batch.entry-payment-receipt-batch-detail
                    :mode="$mode"
                    :details="$rows ?? []" />
            </div>
        </div>
    </div>
</div>

{{-- 得意先別小計表示 --}}
<div id="customer_subtotals" class="mt-2 p-3 bg-gray-50 rounded border" style="display:none;">
    <h4 class="text-sm font-bold text-gray-600 mb-2">得意先別小計</h4>
    <div id="customer_subtotals_list" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 text-sm">
    </div>
</div>

{{-- 銀行名サジェスト用 datalist（明細行の bank_name input から list="bank-names" で参照） --}}
<x-parts.bank-names-datalist />

</div>{{-- /flex-col-gap --}}

{{-- script --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Livewire morph後に数値inputのカンマ区切りを再適用（date_ym.blade.phpと同じパターン）
        Livewire.hook('morph.updated', ({ el }) => {
            if (el.tagName === 'INPUT' && el.dataset.digit !== undefined) {
                el.value = Editor.numberFormat(el.value, Number(el.dataset.digit));
            }
        });

        // Livewireからの合計・小計イベントをリッスン
        Livewire.on('parts.summary', (data) => {
            const payload = Array.isArray(data) ? data[0] : data;
            const totalAmount = payload.totalAmount || 0;
            const customerSubtotals = payload.customerSubtotals || [];

            // 合計金額を更新
            const displayTotal = document.getElementById('total_amount_display');
            if (displayTotal) {
                displayTotal.value = Number(totalAmount).toLocaleString();
            }

            // 得意先別小計を更新
            const subtotalsContainer = document.getElementById('customer_subtotals');
            const subtotalsList = document.getElementById('customer_subtotals_list');
            if (subtotalsContainer && subtotalsList) {
                if (customerSubtotals.length > 0) {
                    subtotalsContainer.style.display = 'block';
                    subtotalsList.innerHTML = customerSubtotals.map(item =>
                        `<div class="flex justify-between items-center px-2 py-1 bg-white rounded border">
                            <span class="text-gray-700">${item.customer_code || ''} ${item.customer_name || ''}</span>
                            <span class="font-bold">${Number(item.subtotal).toLocaleString()}</span>
                        </div>`
                    ).join('');
                } else {
                    subtotalsContainer.style.display = 'none';
                }
            }
        });
    });
</script>