@php($isShow = ($mode ?? 'create') === 'show')
@php($hasAllocations = !empty($allocations))

<div>
    {{-- セクションヘッダー（ボタン類） --}}
    @if(!$isShow && $hasAllocations)
    <div class="flex items-center justify-end gap-2 mb-3">
        <button type="button"
            onclick="Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.suggest-allocations')"
            class="px-3 py-1 text-sm rounded bg-primary-100 text-primary-700 hover:bg-primary-200 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"
            title="入金合計を自動振分">
            <i class="fa-solid fa-wand-magic-sparkles mr-1" aria-hidden="true"></i>自動振分
        </button>
        <button type="button"
            onclick="Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.clear-allocations')"
            class="px-3 py-1 text-sm rounded bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500"
            title="振分をクリア">
            <i class="fa-solid fa-eraser mr-1" aria-hidden="true"></i>クリア
        </button>
    </div>
    @endif

    @if(!$hasAllocations)
    {{-- 得意先未選択時のメッセージ --}}
    <div class="p-4 bg-gray-50 rounded-lg text-center text-gray-500">
        <i class="fa-solid fa-circle-info mr-2" aria-hidden="true"></i>
        入金得意先を選択すると、振分候補が表示されます
    </div>
    @else
    {{-- 振分テーブル（ヘッダー/ボディ/フッター分離構造） --}}
    @php($colGroupHtml = '<col style="width:40px"><col style="width:80px"><col><col style="width:128px"><col style="width:128px">')
    @php($tableClass = 'w-full border-collapse text-sm')
    @php($thClass = 'px-2 py-1.5 text-left bg-secondary-50 border border-secondary-250 whitespace-nowrap')
    @php($tdClass = 'px-2 py-1 border border-secondary-250')

    {{-- ヘッダーテーブル（固定） --}}
    <table class="{{ $tableClass }}">
        <colgroup>{!! $colGroupHtml !!}</colgroup>
        <thead>
            <tr>
                <th class="{{ $thClass }} text-center">No</th>
                <th class="{{ $thClass }} text-center">コード</th>
                <th class="{{ $thClass }}">得意先名</th>
                <th class="{{ $thClass }} text-right">請求残高</th>
                <th class="{{ $thClass }} text-right"><span class="text-red-500">*</span>振分金額</th>
            </tr>
        </thead>
    </table>

    {{-- ボディテーブル（スクロール対応） --}}
    <div class="max-h-[45vh] overflow-y-auto thin-scroll border-x border-secondary-250">
        <table class="{{ $tableClass }}">
            <colgroup>{!! $colGroupHtml !!}</colgroup>
            <tbody>
                @foreach($allocations as $index => $row)
                    @php($rowKey = 'modal-alloc-' . $index . '-' . ($row['customer_id'] ?? '0'))
                    @php($totalRemaining = $row['total_remaining'] ?? 0)

                    <tr class="hover:bg-gray-50">
                        {{-- No --}}
                        <td class="{{ $tdClass }} text-center border-t-0">{{ $index + 1 }}</td>

                        {{-- 得意先コード --}}
                        <td class="{{ $tdClass }} text-center border-t-0">
                            <span>{{ $row['customer_code'] ?? '' }}</span>
                        </td>

                        {{-- 得意先名 --}}
                        <td class="{{ $tdClass }} border-t-0">
                            <span class="truncate block max-w-full" title="{{ $row['customer_name'] ?? '' }}">
                                {{ $row['customer_name'] ?? '' }}
                            </span>
                            <input type="hidden" name="allocations[{{ $index }}][customer_id]" value="{{ $row['customer_id'] ?? '' }}" />
                        </td>

                        {{-- 売掛残高 --}}
                        <td class="{{ $tdClass }} text-right border-t-0">
                            @if($totalRemaining > 0)
                            <span class="text-blue-600" title="未消込の請求残高">
                                {{ num_format($totalRemaining) }}
                            </span>
                            @else
                            <span class="text-gray-400">-</span>
                            @endif
                        </td>

                        {{-- 振分金額 --}}
                        <td class="{{ $tdClass }} border-t-0">
                            @if($isShow)
                            <x-input.row-item class="w-full text-right" value="{{ num_format($row['amount'] ?? 0) }}" />
                            @else
                            <input type="text"
                                class="input-text w-full text-right"
                                value="{{ num_format($row['amount'] ?? 0) }}"
                                onchange="updateAllocationAmount({{ $index }}, this.value)"
                                onblur="updateAllocationAmount({{ $index }}, this.value)" />
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- フッターテーブル（固定） --}}
    <table class="{{ $tableClass }}">
        <colgroup>{!! $colGroupHtml !!}</colgroup>
        <tfoot>
            <tr class="bg-gray-50 font-semibold">
                <td colspan="4" class="{{ $tdClass }} text-right">振分合計</td>
                <td class="{{ $tdClass }} text-right">
                    {{ num_format($allocationTotal) }}
                </td>
            </tr>
            <tr class="{{ $isBalanced ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700' }} font-semibold">
                <td colspan="4" class="{{ $tdClass }} text-right">
                    差額 (入金合計 - 振分合計)
                </td>
                <td class="{{ $tdClass }} text-right">
                    @if($isBalanced)
                    <span title="一致しています">
                        <i class="fa-solid fa-check-circle mr-1" aria-hidden="true"></i>
                        0
                    </span>
                    @else
                    <span title="差額があります">
                        <i class="fa-solid fa-exclamation-triangle mr-1" aria-hidden="true"></i>
                        {{ num_format($difference) }}
                    </span>
                    @endif
                </td>
            </tr>
        </tfoot>
    </table>
    @endif
</div>