@php($assist = App\Services\Logic\Assist::class)
@php($receiptTypeEnums = App\Enums\PaymentReceiptType::getReceiptSectionTypes())
@php($isShow = ($mode ?? 'create') === 'show')

<div class="mb-4">
    {{-- セクションヘッダー --}}
    <div class="flex items-center justify-between mb-2 pr-1 pt-1">
        <h3 class="text-lg font-semibold text-gray-700">
            <i class="fa-solid fa-wallet mr-2" aria-hidden="true"></i>入金情報
        </h3>
        @if(!$isShow)
        <button type="button"
            wire:click="addReceiptTypeRow"
            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-plus mr-1" aria-hidden="true"></i>行追加
        </button>
        @endif
    </div>

    {{-- 入金情報テーブル --}}
    <table class="entry-slip-detail-table-2rows w-full">
        <colgroup>
            @if(!$isShow)
            <col class="w-10">   {{-- アクション --}}
            @endif
            <col class="w-12">   {{-- No --}}
            <col class="w-36">   {{-- 入金区分 --}}
            <col class="w-32">   {{-- 金額 --}}
            <col class="w-32">   {{-- 銀行名 --}}
            <col class="w-32">   {{-- 支店名 --}}
        </colgroup>
        <thead>
            {{-- 1行目ヘッダ --}}
            <tr>
                @if(!$isShow)
                <th rowspan="2"></th>
                @endif
                <th rowspan="2">No</th>
                <th class="required">入金区分</th>
                <th class="required">金額</th>
                <th>銀行名</th>
                <th>支店名</th>
            </tr>
            {{-- 2行目ヘッダ --}}
            <tr>
                <th class="required">手形期日</th>
                <th colspan="3" class="text-left pl-1.5">摘要</th>
            </tr>
        </thead>
        <tbody>
            @foreach($this->receiptTypes as $index => $row)
                @php($receiptTypeValue = (int)($row['receipt_type'] ?? 1))
                @php($receiptType = App\Enums\PaymentReceiptType::tryFrom($receiptTypeValue))
                @php($isBankVisible = $receiptType && $receiptType->requiresBankName())
                @php($isBillDateVisible = in_array($receiptTypeValue, [4, 5]))
                {{-- 行のキー。
                     uniqid()を毎回採番すると描画のたびにキーが変わり、Livewireのmorphが
                     行DOMを作り直して入力中のフォーカスを失う。
                     一方で「常に同じキー」にもできない。この行のDOMは
                       ・wire:model="receiptTypes.{index}.xxx"（インデックス埋め込み）
                       ・x-data="{ receiptType: N }"（要素生成時にしか評価されない初期値）
                     を持つため、インデックスや入金区分が変わった行は作り直す必要がある。
                     ＝「そのノードを再利用してよい条件」を3つともキーに含める。 --}}
                @php($rowKey = ($row['_wire_key'] ?? 'idx') . '-' . $index . '-' . $receiptTypeValue)

                {{-- 上段 --}}
                <tr wire:key="receipt-row-1-{{ $rowKey }}"
                    x-data="{ receiptType: {{ $receiptTypeValue }} }">

                    {{-- アクション --}}
                    @if(!$isShow)
                    <td rowspan="2" class="text-center">
                        <button type="button"
                            wire:click="duplicateReceiptTypeRow({{ $index }})"
                            class="p-1 text-blue-500 hover:text-blue-700 hover:bg-blue-50 rounded transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
                            title="この行を複製">
                            <i class="fa-solid fa-copy" aria-hidden="true"></i>
                        </button>
                        @if(count($this->receiptTypes) > 1)
                        <button type="button"
                            wire:click="deleteReceiptTypeRow({{ $index }})"
                            class="p-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded transition-colors focus:outline-none focus:ring-2 focus:ring-red-500"
                            title="この行を削除">
                            <i class="fa-solid fa-trash-can" aria-hidden="true"></i>
                        </button>
                        @endif
                    </td>
                    @endif

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

                    {{-- 入金区分 --}}
                    <td>
                        @if($isShow)
                        <x-input.row-item
                            value="{{ $receiptType?->getName() ?? '' }}" />
                        @else
                        <select
                            wire:model.change="receiptTypes.{{ $index }}.receipt_type"
                            wire:change="onReceiptTypeRowChange({{ $index }})"
                            x-on:change="receiptType = parseInt($event.target.value)"
                            class="input-select w-full text-sm">
                            @foreach($receiptTypeEnums as $type)
                            <option value="{{ $type->value }}" {{ $receiptTypeValue == $type->value ? 'selected' : '' }}>
                                {{ $type->getName() }}
                            </option>
                            @endforeach
                        </select>
                        <x-input.error item="receipt_types.{{ $index }}.receipt_type" />
                        @endif
                    </td>

                    {{-- 金額 --}}
                    <td>
                        @if($isShow)
                        <x-input.row-item class="text-right" value="{{ num_format($row['amount'] ?? 0) }}" />
                        @else
                        <x-input.number
                            wire:model.blur="receiptTypes.{{ $index }}.amount"
                            wire:change="onReceiptTypeAmountChange({{ $index }})"
                            class="w-full text-right"
                            value="{{ num_format($row['amount'] ?? 0) }}" />
                        <x-input.error item="receipt_types.{{ $index }}.amount" />
                        @endif
                    </td>

                    {{-- 銀行名 --}}
                    <td>
                        <div x-show="[1, 4, 5].includes(receiptType)" x-cloak>
                            @if($isShow)
                            <x-input.row-item class="w-full" value="{{ $row['bank_name'] ?? '' }}" />
                            @else
                            <x-input.text
                                wire:model="receiptTypes.{{ $index }}.bank_name"
                                class="w-full"
                                list="bank-names"
                                value="{{ $row['bank_name'] ?? '' }}" />
                            @endif
                        </div>
                        <div x-show="![1, 4, 5].includes(receiptType)" x-cloak>
                            <span class="text-gray-400">-</span>
                        </div>
                    </td>

                    {{-- 支店名 --}}
                    <td>
                        <div x-show="[1, 4, 5].includes(receiptType)" x-cloak>
                            @if($isShow)
                            <x-input.row-item class="w-full" value="{{ $row['bank_branch_name'] ?? '' }}" />
                            @else
                            <x-input.text
                                wire:model="receiptTypes.{{ $index }}.bank_branch_name"
                                class="w-full"
                                value="{{ $row['bank_branch_name'] ?? '' }}" />
                            @endif
                        </div>
                        <div x-show="![1, 4, 5].includes(receiptType)" x-cloak>
                            <span class="text-gray-400">-</span>
                        </div>
                    </td>
                </tr>

                {{-- 下段 --}}
                <tr wire:key="receipt-row-2-{{ $rowKey }}"
                    x-data="{ receiptType: {{ $receiptTypeValue }} }">

                    {{-- 手形期日 --}}
                    <td>
                        <div x-show="[4, 5].includes(receiptType)" x-cloak>
                            @if($isShow)
                            <x-input.row-item value="{{ $row['bill_due_date'] ?? '' }}" />
                            @else
                            <x-input.date
                                wire:model="receiptTypes.{{ $index }}.bill_due_date"
                                class="w-full"
                                value="{{ $row['bill_due_date'] ?? '' }}" />
                            <x-input.error item="receipt_types.{{ $index }}.bill_due_date" />
                            @endif
                        </div>
                        <div x-show="![4, 5].includes(receiptType)" x-cloak>
                            <span class="text-gray-400">-</span>
                        </div>
                    </td>

                    {{-- 摘要 --}}
                    <td colspan="3">
                        @if($isShow)
                        <x-input.row-item class="w-full" value="{{ $row['note'] ?? '' }}" />
                        @else
                        <x-input.text
                            wire:model="receiptTypes.{{ $index }}.note"
                            class="w-full"
                            value="{{ $row['note'] ?? '' }}" />
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
        <tfoot>
            <tr class="bg-gray-50 font-semibold">
                @if(!$isShow)
                <td></td>
                @endif
                <td colspan="2" class="text-right pr-2">入金合計</td>
                <td class="text-right pr-2">
                    {{ num_format($this->receiptTotal) }}
                </td>
                <td colspan="2" class="text-right">
                    @if(!$isShow)
                    <button type="button"
                        wire:click="addReceiptTypeRow"
                        class="px-3 py-1 text-sm font-normal 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-plus mr-1" aria-hidden="true"></i>行追加
                    </button>
                    @endif
                </td>
            </tr>
        </tfoot>
    </table>
</div>