@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
    {{-- 振分テーブル --}}
    <table class="entry-slip-detail-table-row w-full">
        <colgroup>
            <col class="w-10">      {{-- No --}}
            <col class="w-20">      {{-- コード --}}
            <col>                   {{-- 得意先名（残りスペース使用） --}}
            <col class="w-32">      {{-- 請求残高（億単位対応） --}}
            <col class="w-32">      {{-- 振分金額 --}}
        </colgroup>
        <thead>
            <tr>
                <th class="whitespace-nowrap">No</th>
                <th class="whitespace-nowrap">コード</th>
                <th class="whitespace-nowrap">得意先名</th>
                <th class="whitespace-nowrap">請求残高</th>
                <th class="required whitespace-nowrap">振分金額</th>
            </tr>
        </thead>
        <tbody>
            @foreach($allocations as $index => $row)
                @php($rowKey = 'modal-alloc-' . $index . '-' . ($row['customer_id'] ?? '0'))
                @php($totalRemaining = $row['total_remaining'] ?? 0)

                <tr>
                    {{-- No --}}
                    <td class="text-center">{{ $index + 1 }}</td>

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

                    {{-- 得意先名 --}}
                    <td>
                        <span class="text-sm 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="text-right pr-2">
                        @if($totalRemaining > 0)
                        <span class="text-blue-600" title="未消込の請求残高">
                            {{ num_format($totalRemaining) }}
                        </span>
                        @else
                        <span class="text-gray-400">-</span>
                        @endif
                    </td>

                    {{-- 振分金額 --}}
                    <td>
                        @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>
        <tfoot>
            <tr class="bg-gray-50 font-semibold">
                <td colspan="4" class="text-right pr-2">振分合計</td>
                <td class="text-right pr-2">
                    {{ 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="text-right pr-2">
                    差額 (入金合計 - 振分合計)
                </td>
                <td class="text-right pr-2">
                    @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>

<script>
function updateAllocationAmount(index, value) {
    // カンマを除去して数値に変換
    const numValue = parseFloat(value.replace(/,/g, '')) || 0;
    Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.update-allocation-amount', {
        index: index,
        amount: numValue
    });
}
</script>