@php
    // 入金内訳（調整行）で選べる入金区分
    // 入金情報セクションの区分から「振込」を除いたもの（振込は銀行の入金額そのもののため）
    $adjustmentReceiptTypes = collect(\App\Services\Logic\User\FBImport\AllocationService::getSelectableReceiptTypeValues())
        ->map(fn ($value) => [
            'value' => $value,
            'label' => \App\Enums\PaymentReceiptType::from($value)->getName(),
        ])
        ->all();
@endphp
<x-app-layout>
    {{-- header --}}
    <x-slot name="header">
        @php($breadcrumbs = [
            'FBインポート' => route('payment-receipt.fb-import.index'),
            'CSVアップロード' => null
        ])
        <div class="w-full">
            <x-breadcrumbs :breadcrumbs="$breadcrumbs" />
            <div class="actions mt-1">
                <x-button.sub text="一覧に戻る" icon="fa-solid fa-arrow-left" @click="location.href='{{ route('payment-receipt.fb-import.index', ['action'=>'back']) }}'" />
            </div>
        </div>
    </x-slot>

    {{-- メインコンテンツ --}}
    <div x-data="fbConfirmData({{ json_encode(['batch' => $batch, 'details' => $details, 'summary' => $summary]) }})" x-init="init()">
        {{-- バッチ情報サマリーセクション --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fa-solid fa-file-invoice mr-2"></i>バッチ情報
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
                <div class="bg-gray-50 p-3 rounded">
                    <span class="text-gray-600">バッチID:</span>
                    <div class="font-medium">{{ $batch->id }}</div>
                </div>
                <div class="bg-gray-50 p-3 rounded">
                    <span class="text-gray-600">銀行:</span>
                    <div class="font-medium">{{ $batch->bank_name }}</div>
                </div>
                <div class="bg-gray-50 p-3 rounded">
                    <span class="text-gray-600">インポート日:</span>
                    <div class="font-medium">{{ $batch->import_date->format('Y/m/d') }}</div>
                </div>
                <div class="bg-gray-50 p-3 rounded">
                    <span class="text-gray-600">ファイル名:</span>
                    <div class="font-medium text-xs" title="{{ $batch->file_name }}">{{ Str::limit($batch->file_name, 20) }}</div>
                </div>
            </div>
        </div>

        {{-- 統計情報セクション --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fa-solid fa-chart-bar mr-2"></i>処理統計
            </h3>

            <div class="flex flex-col lg:flex-row gap-6 mb-6">
                <div class="flex-1 text-center p-6 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="text-4xl font-bold text-blue-600 mb-2">{{ $batch->total_rows }}</div>
                    <div class="text-blue-800 font-semibold text-lg">総件数</div>
                    <div class="text-blue-600 text-sm mt-1">全データ行数</div>
                </div>
                <div class="flex-1 text-center p-6 bg-purple-50 border border-purple-200 rounded-lg">
                    <div class="text-4xl font-bold text-purple-600 mb-2">{{ $batch->payment_rows }}</div>
                    <div class="text-purple-800 font-semibold text-lg">入金件数</div>
                    <div class="text-purple-600 text-sm mt-1">入金データのみ</div>
                </div>
                <div class="flex-1 text-center p-6 bg-green-50 border border-green-200 rounded-lg">
                    <div class="text-4xl font-bold text-green-600 mb-2">{{ $batch->matched_rows }}</div>
                    <div class="text-green-800 font-semibold text-lg">マッチング成功</div>
                    <div class="text-green-600 text-sm mt-1">自動確定済み</div>
                </div>
                {{--
                    明細一覧のバッジと色を揃える。
                    confidence=2（要確認・黄）は matchCustomers() の実装上そもそも保存されず
                    （getBestMatch() が confidence=1 のときしか得意先を返さないため、
                    2 のときは更新がスキップされ既定値の 3 のまま残る）、
                    一覧に黄色の行が現れることはない。
                    ここを黄色にしておくと「黄色の行はどれか」という誤解を招く。
                --}}
                <div class="flex-1 text-center p-6 bg-red-50 border border-red-200 rounded-lg">
                    <div class="text-4xl font-bold text-red-600 mb-2" x-text="getUnmatchedCount()"></div>
                    <div class="text-red-800 font-semibold text-lg">未マッチ</div>
                    <div class="text-red-600 text-sm mt-1">得意先の紐づけが必要</div>
                </div>
            </div>

            {{-- マッチング状況の詳細（非表示：上の統計と重複するため） --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4" style="display: none;">
                <div class="bg-green-50 p-3 rounded border border-green-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-green-800 font-medium text-sm">🟢 自動確定</div>
                            <div class="text-xs text-green-600 mt-1">信頼度: 高</div>
                        </div>
                        <div class="text-2xl font-bold text-green-600" x-text="getCountByConfidence(1)"></div>
                    </div>
                </div>
                <div class="bg-yellow-50 p-3 rounded border border-yellow-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-yellow-800 font-medium text-sm">🟡 要確認</div>
                            <div class="text-xs text-yellow-600 mt-1">信頼度: 中</div>
                        </div>
                        <div class="text-2xl font-bold text-yellow-600" x-text="getCountByConfidence(2)"></div>
                    </div>
                </div>
                <div class="bg-red-50 p-3 rounded border border-red-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-red-800 font-medium text-sm">🔴 未マッチ</div>
                            <div class="text-xs text-red-600 mt-1">信頼度: なし</div>
                        </div>
                        <div class="text-2xl font-bold text-red-600" x-text="getCountByConfidence(3)"></div>
                    </div>
                </div>
            </div>
        </div>

        @if(!$isRegistered)
        {{-- アクションボタン --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="max-w-2xl mx-auto">
                <div class="flex items-center gap-3">
                    <button type="button"
                            @click="reAllocateAll()"
                            class="flex-1 btn-base btn-sub btn-secondary-alt bg-secondary-50 border-secondary-300">
                        <i class="fa-solid fa-rotate mr-2"></i>
                        <span class="text-nowrap tracking-wider">再配分実行</span>
                    </button>

                    <form method="POST" action="{{ route('payment-receipt.fb-import.save', $batch->id) }}" class="flex-1">
                        @csrf
                        <button type="submit"
                                class="w-full btn-base btn-sub btn-secondary-alt bg-secondary-50 border-secondary-300">
                            <i class="fa-solid fa-floppy-disk mr-2"></i>
                            <span class="text-nowrap tracking-wider">途中保存して一覧に戻る</span>
                        </button>
                    </form>

                    <form method="POST" action="{{ route('payment-receipt.fb-import.register', $batch->id) }}" @submit="handleRegisterSubmit($event)" class="flex-1">
                        @csrf
                        <button type="submit"
                                :disabled="!canRegister"
                                :class="canRegister ? 'w-full btn-base btn-main btn-primary' : 'w-full btn-base btn-main bg-secondary-300 text-secondary-600 cursor-not-allowed border-secondary-300'">
                            <i class="fa-solid fa-check-circle mr-2"></i>
                            <span class="text-nowrap tracking-wider">すべて確定して本登録</span>
                        </button>
                    </form>
                </div>
            </div>

            {{--
                登録不可の警告。止めるのは未マッチ・配分超過・請求超過（赤）だけ。
                請求残（橙）・請求なし入金（黄）は止めない（請求なし入金は本登録で入金得意先への振込（消込なし）にする）
            --}}
            <div x-show="!canRegister" class="mt-4 bg-yellow-50 border border-yellow-200 rounded-md p-3" x-cloak>
                <div class="flex">
                    <svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                    </svg>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-yellow-800">本登録できない理由</h3>
                        <div class="mt-1 text-sm text-yellow-700">
                            <ul class="list-disc list-inside space-y-1">
                                <li x-show="getTargetCountByConfidence(3) > 0">
                                    未マッチの行が <span x-text="getTargetCountByConfidence(3)"></span> 件あります
                                </li>
                                <li x-show="getOverAllocatedCount() > 0">
                                    {{ \App\Enums\FbAllocationState::OverAllocated->label() }}の行が <span x-text="getOverAllocatedCount()"></span> 件あります
                                </li>
                                <li x-show="getBillingOverCount() > 0">
                                    {{ \App\Enums\FbAllocationState::BillingOver->label() }}の行が <span x-text="getBillingOverCount()"></span> 件あります
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- 明細一覧セクション --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-3">
                    <h3 class="text-lg font-semibold text-gray-900">
                        <i class="fa-solid fa-list mr-2"></i>明細一覧
                    </h3>
                    {{-- 画面に出ている行のとおりに出す（本登録対象外の表示・チップの絞り込みを渡す） --}}
                    <x-button.excel @click="downloadExcel()" />
                </div>

                {{--
                    本登録対象外（should_register=1）の明細は既定で非表示にする。
                    誤って対象外にした明細を戻せるよう、チェックで再表示できるようにしている。
                    隠れている明細があること自体に気づけるよう、件数を併記する。
                --}}
                <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer select-none">
                    <input type="checkbox" x-model="showExcluded">
                    <span>本登録対象外も表示する</span>
                    <span class="text-gray-500"
                          x-show="getExcludedCount() > 0"
                          x-text="'(' + getExcludedCount() + '件)'"></span>
                </label>
            </div>

            {{--
                確認が必要な行（チップ）。押すとその状態の行だけを下の一覧に出し、「絞込み解除」で戻す。
                「すべて表示」にしないのは、隣の「本登録対象外も表示する」と並ぶため、対象外の行まで出すと読まれないように。
                絞る相手の一覧のすぐ上に置く（処理統計の欄に置くと、一覧との間にボタンや本登録できない理由が挟まり、
                スクロールすると絞り込み中であることも見えなくなるため）。処理統計のカードは増やさない。
                件数は各明細の配分状況（サーバーで判定: AllocationStatusService）を数える。色は配分状況と同じ
                （赤＝直さないと本登録できない／橙＝判断する／黄＝確かめる）
            --}}
            <div class="flex flex-wrap items-center gap-2 text-sm mb-3">
                <span class="text-gray-600">確認が必要な行:</span>
                <button type="button"
                        @click="setStateFilter('{{ \App\Enums\FbAllocationState::FILTER_FIX }}')"
                        :disabled="isChipDisabled('{{ \App\Enums\FbAllocationState::FILTER_FIX }}')"
                        :class="getChipClass('{{ \App\Enums\FbAllocationState::FILTER_FIX }}')"
                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border">
                    要修正 <span class="font-mono" x-text="getStateFilterCount('{{ \App\Enums\FbAllocationState::FILTER_FIX }}')"></span>
                </button>
                <button type="button"
                        @click="setStateFilter('{{ \App\Enums\FbAllocationState::BillingResidual->value }}')"
                        :disabled="isChipDisabled('{{ \App\Enums\FbAllocationState::BillingResidual->value }}')"
                        :class="getChipClass('{{ \App\Enums\FbAllocationState::BillingResidual->value }}')"
                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border">
                    {{ \App\Enums\FbAllocationState::BillingResidual->label() }} <span class="font-mono" x-text="getStateFilterCount('{{ \App\Enums\FbAllocationState::BillingResidual->value }}')"></span>
                </button>
                <button type="button"
                        @click="setStateFilter('{{ \App\Enums\FbAllocationState::Unbilled->value }}')"
                        :disabled="isChipDisabled('{{ \App\Enums\FbAllocationState::Unbilled->value }}')"
                        :class="getChipClass('{{ \App\Enums\FbAllocationState::Unbilled->value }}')"
                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border">
                    {{ \App\Enums\FbAllocationState::Unbilled->label() }} <span class="font-mono" x-text="getStateFilterCount('{{ \App\Enums\FbAllocationState::Unbilled->value }}')"></span>
                </button>
                {{-- 絞り込んでいないときは外すものが無いので押せない --}}
                <button type="button"
                        @click="setStateFilter(null)"
                        :disabled="stateFilter === null"
                        :class="stateFilter === null ? 'bg-gray-50 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-white text-gray-700 border-gray-300 hover:opacity-80'"
                        class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border">
                    絞込み解除
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                No
                            </th>
                            <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                本登録
                            </th>
                            <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                取引日
                            </th>
                            <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                金額
                            </th>
                            <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                摘要
                            </th>
                            <th scope="col" class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                マッチング
                            </th>
                            <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                得意先
                            </th>
                            <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                配分状況
                            </th>
                            <th scope="col" class="px-3 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {{--
                            x-for は details 全件のまま維持する。
                            toggleShouldRegister / changeCustomer / openAllocationModal は
                            index で this.details[index] を引くため、配列を絞り込むと別の明細を操作してしまう。
                            表示の絞り込み（本登録対象外の表示・確認が必要な行のチップ）は行側の x-show で行う。
                        --}}
                        <template x-for="(detail, index) in details" :key="detail.id">
                            <tr :class="getRowClass(detail)"
                                x-show="(showExcluded || detail.should_register === 9) && (stateFilter === null || matchesStateFilter(detail, stateFilter))">
                                {{-- No --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-900" x-text="detail.row_number"></td>

                                {{-- 本登録対象トグル --}}
                                <td class="px-4 py-4 whitespace-nowrap text-center">
                                    <button
                                        type="button"
                                        @click="toggleShouldRegister(index)"
                                        :class="detail.should_register === 9 ? 'bg-green-600 border-green-600' : 'bg-gray-300 border-gray-300'"
                                        class="relative inline-flex h-6 w-11 items-center rounded-full border-2 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                        :title="detail.should_register === 9 ? '本登録対象（クリックで対象外に変更）' : '対象外（クリックで本登録対象に変更）'"
                                        @if($isRegistered) disabled class="opacity-50 cursor-not-allowed" @endif>
                                        <span
                                            :class="detail.should_register === 9 ? 'translate-x-6' : 'translate-x-1'"
                                            class="inline-block h-4 w-4 transform rounded-full bg-white shadow-lg transition-transform duration-200 ease-in-out"></span>
                                    </button>
                                </td>

                                {{-- 取引日 --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-900" x-text="formatDate(detail.transaction_date)"></td>

                                {{-- 金額 --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-900 text-right font-mono" x-text="formatAmount(detail.amount)"></td>

                                {{-- 摘要 --}}
                                <td class="px-3 py-4 text-sm text-gray-900">
                                    <div class="max-w-xs truncate" :title="detail.description" x-text="detail.description || '-'"></div>
                                </td>

                                {{--
                                    マッチングステータス
                                    confidence=2（要確認）は matchCustomers() の実装上保存されないが、
                                    万一保存されても行が空にならないよう「自動確定(1) 以外は未マッチ」で扱う。
                                    処理統計の未マッチ件数（getUnmatchedCount）が 2 と 3 を合算しているのと揃える。
                                --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-center">
                                    <span x-show="detail.match_confidence === 1"
                                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        🟢 自動確定
                                    </span>
                                    <span x-show="detail.match_confidence !== 1"
                                          class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        🔴 未マッチ
                                    </span>
                                </td>

                                {{-- 得意先選択 --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm">
                                    {{-- 自動確定(1)以外は未マッチ扱い。得意先を選べる導線を必ず出す --}}
                                    <template x-if="detail.match_confidence !== 1">
                                        <div>
                                            @if($isRegistered)
                                                <span class="text-gray-500 italic">未マッチ</span>
                                            @else
                                                <button type="button"
                                                        @click="changeCustomer(index)"
                                                        class="inline-flex items-center px-3 py-1.5 bg-white border border-gray-300 text-gray-700 text-xs font-medium rounded-md hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                                    <i class="fa-solid fa-user-plus mr-1"></i>
                                                    得意先選択
                                                </button>
                                            @endif
                                        </div>
                                    </template>
                                    <template x-if="detail.match_confidence === 1">
                                        <div class="flex items-center">
                                            <span x-text="detail.customer?.customer_name || '-'"></span>
                                            @if(!$isRegistered)
                                            <button type="button"
                                                    @click="changeCustomer(index)"
                                                    class="ml-2 text-xs text-blue-600 hover:text-blue-800">
                                                <i class="fa-solid fa-pencil"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </template>
                                </td>

                                {{--
                                    配分状況（判定はサーバー: AllocationStatusService。Excel 出力と同じ結果）
                                    状態と差の金額を1行で出す。上段の配分合計は出さない（入金額と見間違えるため）。
                                    得意先が無い行は「—」（照合欄の「未マッチ」と同じ赤を重ねない）、本登録対象外の行は「対象外」
                                --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-right">
                                    <span class="font-medium" :class="getStateClass(detail)" x-text="getStateText(detail)"></span>
                                </td>

                                {{-- 操作 --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-center">
                                    <button type="button"
                                            @click="openAllocationModal(index)"
                                            :disabled="!detail.customer_id"
                                            :class="detail.customer_id ? 'text-blue-600 hover:text-blue-800' : 'text-gray-400 cursor-not-allowed'"
                                            class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                        <i class="fa-solid fa-coins mr-1"></i>
                                        配分詳細@if($isRegistered)（参照）@endif
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

                {{-- データがない場合 --}}
                <div x-show="details.length === 0" class="text-center py-8 text-gray-500">
                    明細データがありません
                </div>
            </div>
        </div>

        {{-- 補足情報 --}}
        @if($isRegistered)
        <div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
            <div class="flex">
                <svg class="h-5 w-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-green-800">本登録完了</h3>
                    <div class="mt-1 text-sm text-green-700">
                        <p>このバッチは既に本登録が完了しています。内容は参照のみ可能です。</p>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6">
            <div class="flex">
                <svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">次のステップ</h3>
                    <div class="mt-1 text-sm text-blue-700">
                        <p>明細一覧で各行の得意先マッチングと配分を確認してください。</p>
                        <ul class="list-disc list-inside mt-2 space-y-1">
                            <li>🟢 自動確定: 配分内容を確認してください</li>
                            <li>🔴 未マッチ: 得意先を手動で選択してください</li>
                        </ul>
                        <p class="mt-2">すべての確認が完了したら「すべて確定して本登録」ボタンで本登録を実行できます。</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        {{-- 得意先変更モーダル --}}
        @include('user.payment-receipt.fb-import.partials.change-customer-modal')

        {{-- 配分詳細モーダル --}}
        <div x-show="showAllocationModal"
             x-cloak
             class="fixed inset-0 z-50 overflow-y-auto"
             @keydown.escape.window="closeAllocationModal()">
            {{-- 背景オーバーレイ --}}
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                 @click="closeAllocationModal()"></div>

            {{--
                モーダルコンテンツ
                請求の表に支払予定日・入金済み（内訳つき）・配分後残高の列があるので、横幅を広めにとる
                （4xl だと得意先グループの請求が並ぶ明細で配分額・配分後残高が横スクロールの外に出るため）
            --}}
            <div class="flex items-center justify-center min-h-screen p-4">
                <div class="relative bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden"
                     @click.stop>
                    {{-- ヘッダー --}}
                    <div class="bg-primary-700 text-white px-6 py-4 flex justify-between items-center">
                        <h3 class="text-lg font-semibold">
                            <i class="fa-solid fa-coins mr-2"></i>配分詳細
                        </h3>
                        <button type="button"
                                @click="closeAllocationModal()"
                                class="text-white hover:text-gray-200">
                            <i class="fa-solid fa-times text-xl"></i>
                        </button>
                    </div>

                    {{-- ボディ --}}
                    <div class="p-6 overflow-y-auto max-h-[70vh]">
                        <template x-if="currentDetail">
                            <div>
                                {{-- 明細情報 --}}
                                <div class="bg-gray-50 rounded-md p-4 mb-4">
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                                        <div>
                                            <span class="text-gray-600">取引日:</span>
                                            <div class="font-medium" x-text="formatDate(currentDetail.transaction_date)"></div>
                                        </div>
                                        <div>
                                            <span class="text-gray-600">入金額:</span>
                                            <div class="font-medium font-mono" x-text="formatAmount(currentDetail.amount)"></div>
                                        </div>
                                        <div>
                                            <span class="text-gray-600">得意先:</span>
                                            <div class="font-medium" x-text="currentDetail.customer?.customer_name || '-'"></div>
                                        </div>
                                        <div>
                                            <span class="text-gray-600">配分合計:</span>
                                            <div class="font-medium font-mono"
                                                 :class="getAllocationDifference(currentDetail) === 0 ? 'text-green-600' : 'text-red-600'"
                                                 x-text="formatAmount(getAllocationTotal(currentDetail))"></div>
                                        </div>
                                    </div>
                                </div>

                                {{--
                                    配分テーブル（請求の表）
                                    差が出るまでの引き算を左から右へ読めるように並べる: 請求額 − 入金済み − 配分額 ＝ 配分後残高。
                                    入金済み（締め日の翌日〜この入金の前日の入金・入金調整と、同じ取込の別の入金の配分）は
                                    サーバーの結果（AllocationStatusService。配分の billing_balance）をそのまま出し、
                                    配分後残高は入力中の配分額でその場で計算し直す（allocationBalance）。
                                    未消込残高の列は出さない（本番は消込が無く、いつも請求額と同じ値になるため。払い済みの繰越は入金済みで分かる）。
                                    請求の無い行（未請求）は、請求に関わる列を「-」にする
                                --}}
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    No
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    請求得意先
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    請求書No
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    支払予定日
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    請求額
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    入金済み
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    配分額
                                                </th>
                                                <th scope="col" class="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                                    配分後残高
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <template x-if="!currentDetail.allocations || currentDetail.allocations.length === 0">
                                                <tr>
                                                    <td colspan="8" class="px-3 py-8 text-center text-gray-500">
                                                        配分データがありません
                                                    </td>
                                                </tr>
                                            </template>
                                            <template x-for="(allocation, index) in currentDetail.allocations" :key="index">
                                                <tr class="hover:bg-gray-50">
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900" x-text="index + 1"></td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900">
                                                        <span x-text="allocation.customer?.customer_name || '-'"></span>
                                                    </td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900">
                                                        <span x-text="allocation.billing?.billing_number || '未請求'"></span>
                                                    </td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900">
                                                        <span x-text="allocation.billing?.payment_date || '-'"></span>
                                                    </td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-mono">
                                                        <span x-text="allocation.billing ? formatAmount(allocation.billing.billing_amount_total) : '-'"></span>
                                                    </td>
                                                    {{-- 入金済み。内訳（日付ごとの入金、同じ取込の別の入金）を小さく添える --}}
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900 text-right">
                                                        <template x-if="allocation.billing_balance">
                                                            <div>
                                                                <div class="font-mono" x-text="formatAmount(allocation.billing_balance.paid)"></div>
                                                                <template x-for="item in allocation.billing_balance.paid_after_items" :key="item.date">
                                                                    <div class="text-xs text-gray-500" x-text="`${formatMonthDay(item.date)} 入金 ${formatNumber(item.amount)}`"></div>
                                                                </template>
                                                                <template x-for="item in allocation.billing_balance.same_batch_items" :key="item.row_number">
                                                                    <div class="text-xs text-gray-500" x-text="`同じ取込の別の入金（行${item.row_number}） ${formatNumber(item.amount)}`"></div>
                                                                </template>
                                                            </div>
                                                        </template>
                                                        <template x-if="!allocation.billing_balance">
                                                            <span>-</span>
                                                        </template>
                                                    </td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900 text-right">
                                                        <input type="text"
                                                               x-data="Component.inputNumber()"
                                                               data-digit="0"
                                                               :value="formatAmountForInput(allocation.allocated_amount || 0)"
                                                               @change="allocation.allocated_amount = parseFloat($event.target.value.replace(/,/g, '')) || 0; onAllocationAmountChange()"
                                                               class="w-full input-text input-readonly text-right focus:ring-primary-500 focus:border-primary-500"
                                                               @if($isRegistered) readonly class="bg-gray-50 cursor-not-allowed" @endif />
                                                    </td>
                                                    {{--
                                                        配分後残高（請求額 − 入金済み − 配分額）。プラス＝請求残（橙）、マイナス＝請求超過（赤）、0＝緑。
                                                        配分0円の行（同じ得意先グループのほかの請求）は灰色（判定には使わない。配分を取り違えたときに正しい請求を見つける手がかり）
                                                    --}}
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-right font-mono"
                                                        :class="getRestClass(index)"
                                                        x-text="getRestText(index)"></td>
                                                </tr>
                                            </template>
                                        </tbody>
                                        <tfoot class="bg-gray-50">
                                            <tr>
                                                <td colspan="6" class="px-3 py-3 text-right font-semibold text-sm text-gray-900">
                                                    配分合計:
                                                </td>
                                                <td class="px-3 py-3 text-right font-semibold text-sm font-mono"
                                                    :class="getAllocationDifference(currentDetail) === 0 ? 'text-green-600' : 'text-red-600'"
                                                    x-text="formatAmount(getAllocationTotal(currentDetail))"></td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                {{--
                                    入金内訳（調整行）セクション
                                    リベート・センターフィー・各種手数料など、請求額と実際の入金額の差の内訳。
                                    通常の入金入力画面の「入金情報セクション」に相当し、入金得意先レベルの内訳になる。
                                --}}
                                <div class="mt-6">
                                    <div class="flex items-center justify-between mb-2">
                                        <h4 class="text-sm font-semibold text-gray-700">
                                            <i class="fa-solid fa-wallet mr-1"></i>入金内訳（調整）
                                        </h4>
                                        @if(!$isRegistered)
                                        <div class="flex items-center gap-2">
                                            {{--
                                                前月の入金伝票の調整行を写し、金額を請求残に合わせる（配分額も請求額に合わせる）。09 §3
                                                調整行で埋める額が無い明細（✓ 一致・請求なし入金など）では押せなくし、理由はマウスを乗せると出す
                                                （押しても何も変わらず、知らせを見落としやすいため。決定事項28）
                                            --}}
                                            <button type="button"
                                                    @click="copyPreviousAdjustments()"
                                                    :disabled="isCopyingPrevious || previousCopyTarget <= 0"
                                                    :class="previousCopyTarget <= 0 ? 'cursor-not-allowed' : ''"
                                                    :title="previousCopyTarget <= 0 ? '入金で請求を払い切れるので、調整行は要りません' : '前月の入金伝票の入金内訳（調整）を写す'"
                                                    class="px-3 py-1 text-sm rounded bg-primary-100 text-primary-700 disabled:opacity-50">
                                                <i class="fa-solid fa-copy mr-1"></i>前月からコピー
                                            </button>
                                            <button type="button"
                                                    @click="addReceiptTypeRow()"
                                                    class="px-3 py-1 text-sm rounded bg-primary-100 text-primary-700"
                                                    title="入金内訳の行を追加">
                                                <i class="fa-solid fa-plus mr-1"></i>行追加
                                            </button>
                                        </div>
                                        @endif
                                    </div>

                                    <table class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-50">
                                            <tr>
                                                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">
                                                    No
                                                </th>
                                                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40">
                                                    区分
                                                </th>
                                                <th scope="col" class="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-36">
                                                    金額
                                                </th>
                                                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    摘要
                                                </th>
                                                @if(!$isRegistered)
                                                <th scope="col" class="px-3 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-16">
                                                    削除
                                                </th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            {{--
                                                currentDetail はモーダルを閉じる際に null になる。
                                                x-if による要素の除去より先にこの式が評価されることがあるため、
                                                オプショナルチェーンで参照する。
                                            --}}
                                            <template x-if="!currentDetail?.receipt_types || currentDetail.receipt_types.length === 0">
                                                <tr>
                                                    <td colspan="5" class="px-3 py-4 text-center text-sm text-gray-500">
                                                        {{--
                                                            「差額がある場合は」だと、差額0（入金の差が無い）のときに「差は無い」と読めてしまう。
                                                            調整行を入れるのは請求残を手数料・リベート等として処理するときなので、そう書く
                                                        --}}
                                                        @if($isRegistered)
                                                            入金内訳（調整）はありません
                                                        @else
                                                            請求残を手数料・リベート等として処理する場合は「前月からコピー」か「行追加」で入力してください
                                                        @endif
                                                    </td>
                                                </tr>
                                            </template>
                                            <template x-for="(row, rowIndex) in (currentDetail?.receipt_types || [])" :key="rowIndex">
                                                <tr class="hover:bg-gray-50">
                                                    <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900" x-text="rowIndex + 1"></td>

                                                    {{-- 区分 --}}
                                                    <td class="px-3 py-2">
                                                        @if($isRegistered)
                                                        <span class="text-sm text-gray-900" x-text="getReceiptTypeLabel(row.receipt_type)"></span>
                                                        @else
                                                        {{--
                                                            既定値は空にする。
                                                            先頭の区分を初期選択にすると、選び忘れたまま
                                                            意図しない区分で保存されてしまうため。
                                                        --}}
                                                        <select x-model="row.receipt_type"
                                                                class="input-select w-full text-sm">
                                                            <option value="">選択してください</option>
                                                            @foreach($adjustmentReceiptTypes as $type)
                                                            <option value="{{ $type['value'] }}">{{ $type['label'] }}</option>
                                                            @endforeach
                                                        </select>
                                                        @endif
                                                    </td>

                                                    {{-- 金額（マイナス可） --}}
                                                    <td class="px-3 py-2 text-right">
                                                        @if($isRegistered)
                                                        <span class="text-sm text-gray-900 font-mono" x-text="formatAmount(row.amount)"></span>
                                                        @else
                                                        <input type="text"
                                                               :value="formatAmountForInput(row.amount || 0)"
                                                               @change="row.amount = parseFloat($event.target.value.replace(/,/g, '')) || 0; onReceiptTypeChange()"
                                                               class="w-full input-text text-right focus:ring-primary-500 focus:border-primary-500" />
                                                        @endif
                                                    </td>

                                                    {{-- 摘要 --}}
                                                    <td class="px-3 py-2">
                                                        @if($isRegistered)
                                                        <span class="text-sm text-gray-900" x-text="row.note || '-'"></span>
                                                        @else
                                                        <input type="text"
                                                               x-model="row.note"
                                                               maxlength="500"
                                                               placeholder="例）センターフィー 7月分"
                                                               class="w-full input-text focus:ring-primary-500 focus:border-primary-500" />
                                                        @endif
                                                    </td>

                                                    @if(!$isRegistered)
                                                    <td class="px-3 py-2 text-center">
                                                        <button type="button"
                                                                @click="removeReceiptTypeRow(rowIndex)"
                                                                class="p-1 text-red-500"
                                                                title="この行を削除">
                                                            <i class="fa-solid fa-trash-can"></i>
                                                        </button>
                                                    </td>
                                                    @endif
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                    {{-- 「前月からコピー」で写した元の伝票。配分詳細を閉じると消える（保存しない）。09 §3.7 --}}
                                    <template x-if="copyNotice">
                                        <p class="mt-2 text-sm text-gray-600" data-copy-notice>
                                            <i class="fa-solid fa-info-circle mr-1"></i><span x-text="copyNotice"></span>
                                        </p>
                                    </template>
                                </div>

                                {{--
                                    合計欄。FBの1件の入金にある2種類の差に合わせて、左右に分ける
                                      左「入金の配分」… 入金を請求に当てきったか（入金合計 − 配分合計）。
                                                         入金が多ければ請求なし入金（黄）、配分が多ければ配分超過（赤）、0 なら緑
                                      右「請求との突き合わせ」… 請求を払い切ったか。配分した請求の残高は、配分額が0より大きい行の（請求額 − 入金済み）の合計。
                                                         請求ごとの配分後残高のマイナス分を請求超過（赤）、プラス分を請求残（橙）として出し、どちらも無ければ「✓ 請求と一致」。
                                                         両方あるとき（別々の請求で、片方は残高を超え片方は残る）は2行とも出す。
                                                         片方だけだと、上の2行の差（＝ 請求残 − 請求超過）と引き算が合わないため
                                    値は allocationBalance（入力中の配分額・調整行でその場で計算し直す）
                                --}}
                                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="bg-gray-50 rounded-md p-4">
                                        <h4 class="text-sm font-semibold text-gray-700 mb-2">入金の配分</h4>
                                        <dl class="text-sm space-y-1">
                                            <div class="flex justify-between">
                                                <dt class="text-gray-600">入金額（振込）:</dt>
                                                <dd class="font-mono text-gray-900" x-text="formatUnit(allocationBalance.amount)"></dd>
                                            </div>
                                            <div class="flex justify-between">
                                                <dt class="text-gray-600">調整合計:</dt>
                                                <dd class="font-mono text-gray-900" x-text="formatUnit(allocationBalance.adjustment)"></dd>
                                            </div>
                                            <div class="flex justify-between border-t border-gray-300 pt-1">
                                                <dt class="text-gray-700 font-semibold">入金合計:</dt>
                                                <dd class="font-mono font-semibold text-gray-900" x-text="formatUnit(allocationBalance.receipt)"></dd>
                                            </div>
                                            <div class="flex justify-between">
                                                <dt class="text-gray-600">配分合計:</dt>
                                                <dd class="font-mono text-gray-900" x-text="formatUnit(allocationBalance.allocationTotal)"></dd>
                                            </div>
                                            <div class="flex justify-between border-t border-gray-300 pt-1 font-semibold"
                                                 :class="getReceiptDiffClass()">
                                                <dt x-text="allocationBalance.diff < 0 ? '{{ \App\Enums\FbAllocationState::OverAllocated->label() }}:' : '{{ \App\Enums\FbAllocationState::Unbilled->label() }}:'"></dt>
                                                <dd class="font-mono" x-text="formatUnit(Math.abs(allocationBalance.diff))"></dd>
                                            </div>
                                        </dl>
                                    </div>
                                    <div class="bg-gray-50 rounded-md p-4">
                                        <h4 class="text-sm font-semibold text-gray-700 mb-2">請求との突き合わせ</h4>
                                        <dl class="text-sm space-y-1">
                                            <div class="flex justify-between">
                                                <dt class="text-gray-600">配分した請求の残高:</dt>
                                                <dd class="font-mono text-gray-900" x-text="formatUnit(allocationBalance.billedBase)"></dd>
                                            </div>
                                            <div class="flex justify-between">
                                                <dt class="text-gray-600">配分合計:</dt>
                                                <dd class="font-mono text-gray-900" x-text="formatUnit(allocationBalance.billed)"></dd>
                                            </div>
                                            <div x-show="allocationBalance.over > 0"
                                                 class="flex justify-between border-t border-gray-300 pt-1 font-semibold text-red-600">
                                                <dt>{{ \App\Enums\FbAllocationState::BillingOver->label() }}:</dt>
                                                <dd class="font-mono" x-text="formatUnit(allocationBalance.over)"></dd>
                                            </div>
                                            {{-- 請求超過の行があるときは、その下に続けて出す（区切り線は最初の行だけ） --}}
                                            <div x-show="allocationBalance.residual > 0"
                                                 class="flex justify-between pt-1 font-semibold text-orange-600"
                                                 :class="allocationBalance.over > 0 ? '' : 'border-t border-gray-300'">
                                                <dt>{{ \App\Enums\FbAllocationState::BillingResidual->label() }}:</dt>
                                                <dd class="font-mono" x-text="formatUnit(allocationBalance.residual)"></dd>
                                            </div>
                                            <div x-show="allocationBalance.over === 0 && allocationBalance.residual === 0"
                                                 class="flex justify-between border-t border-gray-300 pt-1 font-semibold text-green-600">
                                                <dt>✓ 請求と一致</dt>
                                                <dd></dd>
                                            </div>
                                        </dl>
                                    </div>
                                </div>

                                {{--
                                    案内。差の種類ごとに、何をすればよいかを出す。当たるものを上から全部出す（例: 請求超過と請求なし入金）。
                                    枠の色は配分状況の色と同じ（赤＝直さないと本登録できない／橙＝判断する／黄＝確かめる）
                                --}}
                                {{-- 配分超過（赤） --}}
                                <div x-show="allocationBalance.diff < 0"
                                     class="mt-3 bg-red-50 border border-red-200 rounded-md p-3">
                                    <div class="flex">
                                        <svg class="h-5 w-5 flex-shrink-0 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                        </svg>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-red-800">{{ \App\Enums\FbAllocationState::OverAllocated->label() }}</h3>
                                            <div class="mt-1 text-sm text-red-700">
                                                入金合計より <span x-text="formatUnit(-allocationBalance.diff)"></span> 多く配分しています。配分額を減らすか、差の内訳（手数料・リベート等）を「入金内訳（調整）」に追加してください。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- 請求超過（赤） --}}
                                <div x-show="allocationBalance.over > 0"
                                     class="mt-3 bg-red-50 border border-red-200 rounded-md p-3">
                                    <div class="flex">
                                        <svg class="h-5 w-5 flex-shrink-0 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                        </svg>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-red-800">{{ \App\Enums\FbAllocationState::BillingOver->label() }}</h3>
                                            <div class="mt-1 text-sm text-red-700">
                                                請求 <span x-text="allocationBalance.overBillingNumbers.join('、')"></span> に、残高を超えて <span x-text="formatUnit(allocationBalance.over)"></span> 配分しています。払い済みの請求や、別の請求・別の会社の入金ではないか確かめ、配分を移すか外すか、得意先を変更してください。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- 請求残（橙） --}}
                                <div x-show="allocationBalance.residual > 0"
                                     class="mt-3 bg-orange-50 border border-orange-200 rounded-md p-3">
                                    <div class="flex">
                                        <svg class="h-5 w-5 flex-shrink-0 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                        </svg>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-orange-800">{{ \App\Enums\FbAllocationState::BillingResidual->label() }}</h3>
                                            <div class="mt-1 text-sm text-orange-700">
                                                請求に <span x-text="formatUnit(allocationBalance.residual)"></span> が残ります。手数料・リベート等として処理する場合は、「前月からコピー」か「請求額に合わせる」を押してください。残高として残す場合は、このまま保存できます。
                                            </div>
                                            @if(!$isRegistered)
                                            {{-- 配分額を「請求額 − 入金済み」にし、入金で足りない分を調整行で埋める。09 §4 --}}
                                            <div class="mt-2">
                                                <button type="button"
                                                        @click="alignToBilling()"
                                                        class="px-3 py-1 text-sm rounded border border-orange-200 bg-white text-orange-800 hover:opacity-80"
                                                        title="配分額を請求額に合わせ、足りない分を入金内訳（調整）に入れる">
                                                    請求額に合わせる
                                                </button>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                {{-- 請求なし入金（黄）。配分超過のときは出さない（配分を減らすのが先） --}}
                                <div x-show="allocationBalance.unbilled > 0 && allocationBalance.diff >= 0"
                                     class="mt-3 bg-yellow-50 border border-yellow-200 rounded-md p-3">
                                    <div class="flex">
                                        <svg class="h-5 w-5 flex-shrink-0 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                                        </svg>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-yellow-800">{{ \App\Enums\FbAllocationState::Unbilled->label() }}</h3>
                                            <div class="mt-1 text-sm text-yellow-700">
                                                入金のうち <span x-text="formatUnit(allocationBalance.unbilled)"></span> は、どの請求にも当てずに入金として登録します（先入金・過入金など）。請求に当てる場合は、配分額を入力してください。
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    {{-- フッター --}}
                    <div class="bg-gray-50 px-6 py-4 flex justify-end gap-3">
                        <button type="button"
                                @click="closeAllocationModal()"
                                class="btn-base btn-sub btn-secondary-alt bg-secondary-50 border-secondary-300">
                            <span class="text-nowrap tracking-wider">@if($isRegistered)閉じる@else キャンセル @endif</span>
                        </button>
                        @if(!$isRegistered)
                        {{-- 保存できないのは配分超過（配分合計 ＞ 入金合計）のときだけ。請求なし入金・請求残・請求超過は保存できる --}}
                        <button type="button"
                                @click="saveAllocation()"
                                :disabled="allocationBalance.diff < 0"
                                :class="allocationBalance.diff >= 0 ? 'btn-base btn-main btn-primary' : 'btn-base btn-main bg-secondary-300 text-secondary-600 cursor-not-allowed border-secondary-300'">
                            <i class="fa-solid fa-save mr-2"></i>
                            <span class="text-nowrap tracking-wider">保存</span>
                        </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function fbConfirmData(data) {
            return {
                batch: data.batch,
                details: data.details,
                // バッチの件数と合計（サーバー: AllocationStatusService の summary）。本登録の確認ダイアログの請求残・請求に当てない入金に使う
                summary: data.summary,
                showAllocationModal: false,
                currentDetail: null,
                currentDetailIndex: -1,
                // 「前月からコピー」で写した元の伝票の表示。配分詳細を開き直すと消える
                copyNotice: null,
                // 「前月からコピー」で前月の伝票を問い合わせている間は、ボタンを押せないようにする
                isCopyingPrevious: false,
                // 得意先変更モーダル用
                showChangeCustomerModal: false,
                selectedCustomerId: null,
                isSubmitting: false,
                // 口座名義人の書き戻し用
                // holderMode: none=チェックボックス非表示 / register=登録(既定ON)
                //             / overwrite=上書き(既定OFF) / registered=登録済み
                holderMode: 'none',
                registerHolderName: false,
                selectedCustomerHolder: null,
                isLoadingHolder: false,
                // 本登録対象外の明細も表示するか
                // 本登録済みバッチは参照専用のため、登録されなかった明細も初めから見せる
                showExcluded: @json($isRegistered),
                // 確認が必要な行のチップの絞り込み（null＝絞り込みなし、fix＝要修正、それ以外は配分状況の値）
                stateFilter: null,
                // 配分状況の文字色（赤＝直さないと本登録できない／橙＝判断する／黄＝確かめる／緑＝何もしない）
                // Tailwind がクラスを拾えるよう、クラス名は省略せずに書く
                stateClasses: {
                    excluded: 'text-gray-500',
                    unmatched: 'text-gray-400',
                    over_allocated: 'text-red-600',
                    billing_over: 'text-red-600',
                    billing_residual: 'text-orange-600',
                    unbilled: 'text-yellow-600',
                    matched: 'text-green-600',
                },
                // チップの色（配分状況の色と同じ）。active は絞り込み中
                chipClasses: {
                    @json(\App\Enums\FbAllocationState::FILTER_FIX): { normal: 'bg-red-50 text-red-700 border-red-200', active: 'bg-red-600 text-white border-transparent' },
                    billing_residual: { normal: 'bg-orange-50 text-orange-700 border-orange-200', active: 'bg-orange-500 text-white border-transparent' },
                    unbilled: { normal: 'bg-yellow-50 text-yellow-800 border-yellow-200', active: 'bg-yellow-500 text-yellow-900 border-transparent' },
                },

                init() {
                    // 初期化処理
                    console.log('Batch ID:', this.batch.id);
                    console.log('Total Details:', this.details.length);
                },

                getCountByConfidence(confidence) {
                    return this.details.filter(d => d.match_confidence === confidence).length;
                },

                // 本登録対象行（should_register=9）のうち、指定したconfidenceの件数を取得
                getTargetCountByConfidence(confidence) {
                    return this.details.filter(d => d.should_register === 9 && d.match_confidence === confidence).length;
                },

                // 本登録対象外（should_register=1）の明細件数（一覧で隠れている件数）
                getExcludedCount() {
                    return this.details.filter(d => d.should_register !== 9).length;
                },

                getUnmatchedCount() {
                    // 本登録対象行のみを数える。
                    // 対象外行は toggleShouldRegister() で confidence=3 になるが対応不要のため除外する。
                    // 対象外行を一覧から隠すため、除外しないと
                    // 「赤い行が無いのに未マッチが残る」表示になってしまう。
                    return this.details.filter(d => d.should_register === 9
                        && (d.match_confidence === 2 || d.match_confidence === 3)).length;
                },

                get canRegister() {
                    // 本登録対象行（should_register=9）に、未マッチ・配分超過・請求超過の行がないこと
                    // 取込対象外（should_register!=9）の行は無視する。
                    // 請求残・請求なし入金は止めない（請求なし入金は本登録で入金得意先への振込（消込なし）にする）
                    if (this.getTargetCountByConfidence(3) > 0) {
                        return false;
                    }
                    if (this.getOverAllocatedCount() > 0) {
                        return false;
                    }
                    if (this.getBillingOverCount() > 0) {
                        return false;
                    }

                    return true;
                },

                // 本登録対象行のうち、配分超過（配分合計 ＞ 入金合計）の行数。判定はサーバー（AllocationStatusService）。
                // 配分行が1件も無い明細は、今までどおり配分超過の判定の対象外
                getOverAllocatedCount() {
                    return this.details.filter(d => d.should_register === 9
                        && d.allocations && d.allocations.length > 0
                        && d.allocation_status?.state === @json(\App\Enums\FbAllocationState::OverAllocated->value)).length;
                },

                // 本登録対象行のうち、請求超過（請求の残高を超えて配分している）の行数。判定はサーバー（AllocationStatusService）
                getBillingOverCount() {
                    return this.details.filter(d => d.should_register === 9
                        && d.allocation_status?.state === @json(\App\Enums\FbAllocationState::BillingOver->value)).length;
                },

                // 配分の保存・対象外の切り替えの応答（保存後のバッチ全体の明細と件数・合計）で、一覧の明細と件数・合計を置き換える。
                // 1つの明細を変えると、同じ請求を見るほかの明細の配分状況も変わるため（判定はサーバーで行い、画面ではしない）
                applyBatchStatus(responseData) {
                    if (Array.isArray(responseData.details)) {
                        this.details = responseData.details;
                    }
                    if (responseData.summary) {
                        this.summary = responseData.summary;
                    }
                },

                // テーブル用メソッド
                formatAmount(amount) {
                    if (!amount) return '0円';
                    return Math.round(Number(amount)).toLocaleString() + '円';
                },

                // input用フォーマット（「円」なし、カンマ付き）
                formatAmountForInput(amount) {
                    if (!amount) return '0';
                    return Math.round(Number(amount)).toLocaleString();
                },

                formatDate(dateStr) {
                    if (!dateStr) return '-';

                    // ISO 8601形式に対応（例: 2025-07-09T15:00:00.000000Z）
                    if (dateStr.includes('T')) {
                        dateStr = dateStr.split('T')[0];
                    }

                    // YYYY-MM-DD形式をYYYY/MM/DDに変換
                    const parts = dateStr.split('-');
                    if (parts.length === 3) {
                        return `${parts[0]}/${parts[1]}/${parts[2]}`;
                    }
                    return dateStr;
                },

                getRowClass(detail) {
                    const baseClass = 'transition-colors duration-200';
                    // 本登録対象外はマッチング状態にかかわらずグレー（対応不要であることを示す）
                    // 判定しないと未マッチ行が赤（要対応）のまま表示されてしまう。
                    // 文字色は td 側の text-gray-900 が優先されるため、opacity で行ごと落とす
                    // （マッチングバッジの赤・緑も一緒に落ちるので「対応不要」が伝わる）
                    if (detail.should_register !== 9) {
                        return baseClass + ' bg-gray-100 opacity-70';
                    }
                    if (detail.match_confidence === 1) {
                        return baseClass + ' bg-green-50 hover:bg-green-100';
                    }
                    // 自動確定(1)以外は未マッチ扱い（confidence=2 は保存されない）
                    if (detail.match_confidence === 2 || detail.match_confidence === 3) {
                        return baseClass + ' bg-red-50 hover:bg-red-100';
                    }
                    return baseClass;
                },

                // 一覧の配分状況の文言（例「請求残 440円」「✓ 一致」「—」）
                getStateText(detail) {
                    const status = detail.allocation_status;
                    if (!status) {
                        return '';
                    }
                    return status.amount ? `${status.label} ${this.formatAmount(status.amount)}` : status.label;
                },

                getStateClass(detail) {
                    return this.stateClasses[detail.allocation_status?.state] || '';
                },

                // 明細がチップの絞り込みに当たるか（FbAllocationState::matchesFilter と同じ判定。Excel 出力も同じ）
                matchesStateFilter(detail, filter) {
                    const status = detail.allocation_status;
                    if (!status) {
                        return false;
                    }
                    return filter === @json(\App\Enums\FbAllocationState::FILTER_FIX) ? status.needs_fix : status.state === filter;
                },

                // チップの件数（本登録対象外の行は配分状況が「対象外」なので、どのチップにも数えない）
                getStateFilterCount(filter) {
                    return this.details.filter(d => this.matchesStateFilter(d, filter)).length;
                },

                // 同じチップをもう一度押すと絞り込みを外す
                setStateFilter(filter) {
                    this.stateFilter = (filter === null || this.stateFilter === filter) ? null : filter;
                },

                // 0件のチップは押せない（絞り込み中のチップは、0件になっても外せるよう押せるままにする）
                isChipDisabled(filter) {
                    return this.stateFilter !== filter && this.getStateFilterCount(filter) === 0;
                },

                getChipClass(filter) {
                    if (this.stateFilter === filter) {
                        return this.chipClasses[filter].active;
                    }
                    if (this.getStateFilterCount(filter) === 0) {
                        return 'bg-gray-50 text-gray-400 border-gray-200 cursor-not-allowed';
                    }
                    return this.chipClasses[filter].normal + ' hover:opacity-80';
                },

                // 明細一覧を Excel に出す。画面の絞り込み（本登録対象外の表示・チップ）をそのまま渡す
                downloadExcel() {
                    const params = new URLSearchParams();
                    if (this.showExcluded) {
                        params.set('show_excluded', '1');
                    }
                    if (this.stateFilter !== null) {
                        params.set('state', this.stateFilter);
                    }
                    const query = params.toString();
                    linkTo('{{ route('payment-receipt.fb-import.excel', $batch->id) }}' + (query ? '?' + query : ''));
                },

                getAllocationTotal(detail) {
                    if (!detail || !detail.allocations || detail.allocations.length === 0) {
                        return 0;
                    }
                    return detail.allocations.reduce((sum, a) => sum + parseFloat(a.allocated_amount || 0), 0);
                },

                // 調整行（手数料・リベート等）の合計
                getReceiptTypeTotal(detail) {
                    if (!detail || !detail.receipt_types || detail.receipt_types.length === 0) {
                        return 0;
                    }
                    return detail.receipt_types.reduce((sum, r) => sum + parseFloat(r.amount || 0), 0);
                },

                // 入金合計 = 銀行の入金額 + 調整行の合計
                // 通常の入金入力画面と同じ定義（内訳の合計＝伝票の入金金額）
                getReceiptTotal(detail) {
                    if (!detail) {
                        return 0;
                    }
                    return parseFloat(detail.amount || 0) + this.getReceiptTypeTotal(detail);
                },

                getAllocationDifference(detail) {
                    if (!detail || !detail.amount) {
                        return 0;
                    }
                    // 配分合計 − 入金合計（調整行を含む）
                    const totalAllocated = this.getAllocationTotal(detail);
                    return totalAllocated - this.getReceiptTotal(detail);
                },

                // 配分詳細の請求の表（配分後残高）・合計欄・案内の値。開いている明細（currentDetail）で計算する
                get allocationBalance() {
                    return this.calcAllocationBalance(this.currentDetail);
                },

                /**
                 * 配分詳細の入力中の、その場の再計算（03 §7 の「ブラウザ側に残す計算」）
                 *
                 * サーバーが渡した入金済み（締め後の入金＋同じ取込の別の入金。配分の billing_balance.paid）と、
                 * 入力中の配分額・調整行から計算する。式と判定は AllocationStatusService と同じで、
                 * 開いた直後（入力前）はサーバーの結果と同じ値になる。保存して読み直すと、サーバーの結果に置き換わる。
                 * 金額は1万倍の整数で返す（浮動小数の誤差で判定がずれないように。表示は formatUnit）。
                 *
                 *   rows            … 配分の行ごとの { allocated: 配分額が0より大きいか, rest: 配分後残高 }。請求の無い行は null
                 *   diff            … 入金合計 − 配分合計（プラス＝請求なし入金、マイナス＝配分超過）
                 *   billedBase      … 配分した請求の残高（配分額が0より大きい行の 請求額 − 入金済み）
                 *   billed          … 請求に当てた額（配分額が0より大きい、請求のある行の配分額）
                 *   over / residual … 請求超過・請求残（請求ごとの配分後残高のマイナス分・プラス分の合計）
                 *   unbilled        … 入金合計 − 請求に当てた額（請求に当てない入金）
                 */
                calcAllocationBalance(detail) {
                    const unit = (value) => Math.round(Number(value || 0) * 10000);
                    const balance = {
                        rows: [], amount: 0, adjustment: 0, receipt: 0, allocationTotal: 0, diff: 0,
                        billedBase: 0, billed: 0, over: 0, overBillingNumbers: [], residual: 0, unbilled: 0,
                    };
                    if (!detail) {
                        return balance;
                    }

                    balance.amount = unit(detail.amount);
                    balance.adjustment = (detail.receipt_types || []).reduce((sum, r) => sum + unit(r.amount), 0);
                    balance.receipt = balance.amount + balance.adjustment;

                    // 請求ごとの配分後残高（同じ請求に2行配分していても1回だけ数える）
                    const bills = {};
                    for (const allocation of (detail.allocations || [])) {
                        const amount = unit(allocation.allocated_amount);
                        balance.allocationTotal += amount;
                        const billingBalance = allocation.billing_balance;
                        if (!billingBalance) {
                            balance.rows.push(null);
                            continue;
                        }
                        const allocated = amount > 0;
                        const total = unit(billingBalance.billing_total);
                        const paid = unit(billingBalance.paid);
                        const rest = total - paid - (allocated ? amount : 0);
                        balance.rows.push({ allocated, rest });
                        if (allocated) {
                            balance.billed += amount;
                            balance.billedBase += total - paid;
                            bills[allocation.billing_id] = { number: allocation.billing?.billing_number, rest };
                        }
                    }
                    for (const bill of Object.values(bills)) {
                        if (bill.rest < 0) {
                            balance.over += -bill.rest;
                            balance.overBillingNumbers.push(bill.number);
                        } else {
                            balance.residual += bill.rest;
                        }
                    }

                    balance.diff = balance.receipt - balance.allocationTotal;
                    balance.unbilled = balance.receipt - balance.billed;
                    return balance;
                },

                // calcAllocationBalance の金額（1万倍の整数）を「1,234円」の形にする
                formatUnit(value) {
                    return this.formatAmount(value / 10000);
                },

                // 金額（「円」なし、カンマ付き）。入金済みの内訳に使う
                formatNumber(amount) {
                    return Math.round(Number(amount || 0)).toLocaleString();
                },

                // 月/日（例: 2026-07-27 → 7/27）。入金済みの内訳に使う
                formatMonthDay(dateStr) {
                    const parts = String(dateStr || '').split(/[-/]/);
                    return parts.length === 3 ? `${Number(parts[1])}/${Number(parts[2])}` : (dateStr || '-');
                },

                // 配分後残高（請求の無い行は「-」）
                getRestText(index) {
                    const row = this.allocationBalance.rows[index];
                    return row ? this.formatUnit(row.rest) : '-';
                },

                // 配分後残高の色。プラス＝請求残（橙）、マイナス＝請求超過（赤）、0＝緑。配分0円の行は灰色
                getRestClass(index) {
                    const row = this.allocationBalance.rows[index];
                    if (!row) {
                        return 'text-gray-900';
                    }
                    if (!row.allocated) {
                        return 'text-gray-400';
                    }
                    return row.rest > 0 ? 'text-orange-600' : (row.rest < 0 ? 'text-red-600' : 'text-green-600');
                },

                // 合計欄の左の最後の行の色（請求なし入金＝黄、配分超過＝赤、0＝緑）
                getReceiptDiffClass() {
                    const diff = this.allocationBalance.diff;
                    return diff > 0 ? 'text-yellow-600' : (diff < 0 ? 'text-red-600' : 'text-green-600');
                },

                // 入金内訳（調整行）の操作
                addReceiptTypeRow() {
                    if (!this.currentDetail.receipt_types) {
                        this.currentDetail.receipt_types = [];
                    }
                    this.currentDetail.receipt_types.push({
                        id: null,
                        receipt_type: '',  // 区分は必ず選ばせる
                        amount: 0,
                        note: '',
                    });
                },

                removeReceiptTypeRow(index) {
                    this.currentDetail.receipt_types.splice(index, 1);
                },

                onReceiptTypeChange() {
                    // リアクティブな再計算のためのトリガー（Alpine.jsが自動的に再計算する）
                },

                getReceiptTypeLabel(value) {
                    const labels = @json(collect($adjustmentReceiptTypes)->pluck('label', 'value'));
                    return labels[value] || '';
                },

                /*
                 * 「請求額に合わせる」「前月からコピー」（09 §3・§4）
                 * どちらも配分詳細の入力欄を書き換えるだけで、保存は今までどおり「保存」ボタンで行う。
                 * 金額は calcAllocationBalance と同じく1万倍の整数で計算する
                 */

                // 配分額を請求額に合わせた値（配分の行ごと。1万倍の整数）。
                // 対象は、請求があり、配分額が0より大きく、配分後残高がプラスの行。配分額を「請求額 − 入金済み」にする（配分後残高0）。
                // 請求超過の行（配分先や得意先の取り違えが多いので作業者が直す）・配分0円の候補の行・未請求の行は今の配分額のまま
                alignedAllocationUnits(detail) {
                    const unit = (value) => Math.round(Number(value || 0) * 10000);
                    return (detail.allocations || []).map(allocation => {
                        const amount = unit(allocation.allocated_amount);
                        const billingBalance = allocation.billing_balance;
                        if (!billingBalance || amount <= 0) {
                            return amount;
                        }
                        const target = unit(billingBalance.billing_total) - unit(billingBalance.paid);
                        return target > amount ? target : amount;
                    });
                },

                // alignedAllocationUnits の値を配分額の入力欄に入れる
                applyAlignedAllocations(detail, units) {
                    (detail.allocations || []).forEach((allocation, index) => {
                        if (Math.round(Number(allocation.allocated_amount || 0) * 10000) !== units[index]) {
                            allocation.allocated_amount = units[index] / 10000;
                        }
                    });
                },

                // 差を受ける調整行の位置。支払手数料以外の行のうち金額がいちばん大きい行、無ければいちばん大きい支払手数料の行。
                // 同じ額なら先の行。rows は { receipt_type, units }（units は1万倍の整数）
                pickAbsorbingRow(rows) {
                    const fee = String(@json(\App\Enums\PaymentReceiptType::PaymentFee->value));
                    let pick = -1;
                    rows.forEach((row, index) => {
                        if (String(row.receipt_type) !== fee && (pick < 0 || row.units > rows[pick].units)) {
                            pick = index;
                        }
                    });
                    if (pick < 0) {
                        rows.forEach((row, index) => {
                            if (pick < 0 || row.units > rows[pick].units) {
                                pick = index;
                            }
                        });
                    }
                    return pick;
                },

                // 「請求額に合わせる」: 配分額を請求額に合わせ、入金で足りない分（配分合計 − 入金合計）を調整行で埋める。
                // 調整行があれば差を受ける行に足し、無ければ区分を空にした行を足す（区分は作業者が選ぶ）。
                // 足りない分が無い（請求に当てていない入金が残っていた）ときは、調整行は変えない
                alignToBilling() {
                    const detail = this.currentDetail;
                    if (!detail) {
                        return;
                    }
                    const unit = (value) => Math.round(Number(value || 0) * 10000);
                    const aligned = this.alignedAllocationUnits(detail);
                    this.applyAlignedAllocations(detail, aligned);

                    if (!Array.isArray(detail.receipt_types)) {
                        detail.receipt_types = [];
                    }
                    const rows = detail.receipt_types;
                    const allocationTotal = aligned.reduce((sum, value) => sum + value, 0);
                    const receipt = unit(detail.amount) + rows.reduce((sum, row) => sum + unit(row.amount), 0);
                    const shortfall = allocationTotal - receipt;
                    if (shortfall <= 0) {
                        return;
                    }
                    if (rows.length > 0) {
                        const index = this.pickAbsorbingRow(rows.map(row => ({ receipt_type: row.receipt_type, units: unit(row.amount) })));
                        rows[index].amount = (unit(rows[index].amount) + shortfall) / 10000;
                    } else {
                        rows.push({ id: null, receipt_type: '', amount: shortfall / 10000, note: '' });
                    }
                },

                // 「前月からコピー」で調整行に入れる額 T（＝ 配分額を請求額に合わせたあとの配分合計 − 入金額。1万倍の整数）。
                // 0以下（入金で請求を払い切れる。✓ 一致・請求なし入金など）なら調整行は要らないので、ボタンを押せなくする
                get previousCopyTarget() {
                    const detail = this.currentDetail;
                    if (!detail) {
                        return 0;
                    }
                    const total = this.alignedAllocationUnits(detail).reduce((sum, value) => sum + value, 0);
                    return total - Math.round(Number(detail.amount || 0) * 10000);
                },

                // 「前月からコピー」: 前月の入金伝票の調整行（区分・摘要）を写し、配分額を請求額に合わせ、
                // 調整行の合計が T（previousCopyTarget）になるように金額を決める（R2p）:
                //   差を受ける行以外（支払手数料の行を含む）は前月の金額のまま、差を受ける行 ＝ T − ほかの行の合計（マイナスなら0）
                // 押しても何も変わらないとき（前月の伝票が見つからない）は、見落とさないようトーストで知らせる（決定事項28）
                async copyPreviousAdjustments() {
                    const detail = this.currentDetail;
                    if (!detail || this.isCopyingPrevious) {
                        return;
                    }
                    const unit = (value) => Math.round(Number(value || 0) * 10000);

                    const aligned = this.alignedAllocationUnits(detail);
                    const target = this.previousCopyTarget;
                    if (target <= 0) {
                        // ボタンを押せなくしているので、ふつうはここに来ない
                        toast('info', '入金で請求を払い切れるので、調整行は要りません');
                        return;
                    }

                    let result = null;
                    this.isCopyingPrevious = true;
                    try {
                        const response = await fetch(`/payment-receipt/fb-import/${this.batch.id}/previous-adjustments/${detail.id}`, {
                            headers: { 'Accept': 'application/json' }
                        });
                        const data = await response.json();
                        if (!response.ok || data.status !== 'OK') {
                            toast('error', data.message || '前月の入金伝票の取得に失敗しました');
                            return;
                        }
                        result = data.data;
                    } catch (error) {
                        console.error('Previous adjustments error:', error);
                        toast('error', '通信エラーが発生しました');
                        return;
                    } finally {
                        this.isCopyingPrevious = false;
                    }

                    // 問い合わせている間に配分詳細を閉じた・ほかの明細を開いたときは何もしない
                    if (this.currentDetail !== detail) {
                        return;
                    }
                    if (!result.found || result.rows.length === 0) {
                        toast('info', result.reason === 'no_customer'
                            ? '得意先が決まっていません'
                            : '前月の伝票が見つかりません。「請求額に合わせる」か「行追加」で入力してください');
                        return;
                    }
                    if ((detail.receipt_types || []).length > 0
                        && !confirm('入金内訳（調整）を前月の伝票の行に置き換えます。よろしいですか？')) {
                        return;
                    }

                    // 金額の決め方（R2p）
                    const rows = result.rows.map(row => ({ receipt_type: row.receipt_type, units: unit(row.amount), note: row.note || '' }));
                    const absorbing = this.pickAbsorbingRow(rows);
                    const others = rows.reduce((sum, row, index) => index === absorbing ? sum : sum + row.units, 0);
                    rows[absorbing].units = Math.max(target - others, 0);

                    this.applyAlignedAllocations(detail, aligned);
                    detail.receipt_types = rows.map(row => ({
                        id: null,
                        receipt_type: String(row.receipt_type),
                        amount: row.units / 10000,
                        note: row.note,
                    }));
                    this.copyNotice = this.copySourceText(result);
                },

                // 写した元の表示（例「2026/07/10 の入金伝票（00017193）から2行写しました」）
                copySourceText(result) {
                    const source = result.source;
                    let text = `${this.formatDate(source.payment_date)} の入金伝票（${source.slip_number}）から${result.rows.length}行写しました`;
                    if (source.input_type !== @json(\App\Enums\PaymentReceiptInputType::Input->value) && source.input_type_label) {
                        text += `（${source.input_type_label}）`;
                    }
                    if (result.skipped.length > 0) {
                        text += '（' + result.skipped.map(item => `${item.label}の${item.count}行`).join('・') + 'は写していません）';
                    }
                    return text;
                },


                /**
                 * 得意先変更モーダルを開く
                 */
                async changeCustomer(index) {
                    this.currentDetailIndex = index;
                    // Deep copy to avoid direct mutation
                    this.currentDetail = JSON.parse(JSON.stringify(this.details[index]));
                    this.selectedCustomerId = this.currentDetail.customer_id;
                    this.resetHolderState();
                    this.showChangeCustomerModal = true;
                },

                /**
                 * 得意先変更モーダルを閉じる
                 */
                closeChangeCustomerModal() {
                    this.showChangeCustomerModal = false;
                    this.currentDetail = null;
                    this.currentDetailIndex = -1;
                    this.selectedCustomerId = null;
                    this.isSubmitting = false;
                    this.resetHolderState();
                },

                /**
                 * 口座名義人の書き戻し状態を初期化
                 *
                 * 得意先を選び直すたびに呼ぶ。既定はOFF（サイレント上書きを行わない）。
                 */
                resetHolderState() {
                    this.holderMode = 'none';
                    this.registerHolderName = false;
                    this.selectedCustomerHolder = null;
                    this.isLoadingHolder = false;
                },

                /**
                 * 得意先が選択されたときの処理
                 *
                 * 選択された得意先の現在の名義人を取得し、チェックボックスの
                 * 表示内容と既定値を出し分ける。
                 *  - 現在値が空       → 「登録する」  既定ON
                 *  - 正準形が明細と一致 → 「登録済み」  チェックボックスなし
                 *  - それ以外          → 「上書きする」既定OFF（現在値を併記）
                 */
                async onCustomerSelected(customerId) {
                    this.selectedCustomerId = customerId;
                    this.resetHolderState();

                    if (!customerId) {
                        return;
                    }

                    // 明細側の名義人が空（正準形が作れない）行は書き戻し対象外
                    const detailNormalized = this.currentDetail?.account_holder_name_normalized || '';
                    if (!detailNormalized) {
                        return;
                    }

                    this.isLoadingHolder = true;

                    try {
                        const response = await fetch(
                            `/payment-receipt/fb-import/customers/${customerId}/holder-name`,
                            { headers: { 'Accept': 'application/json' } }
                        );
                        const json = await response.json();

                        if (json.status !== 'OK') {
                            throw new Error(json.message || '得意先の口座名義人を取得できませんでした');
                        }

                        const holder = json.data;
                        this.selectedCustomerHolder = holder;

                        const currentName = (holder.bank_account_holder_name || '').trim();
                        const currentNormalized = holder.bank_account_holder_name_normalized || '';

                        if (currentName === '') {
                            this.holderMode = 'register';
                            this.registerHolderName = true;
                        } else if (currentNormalized === detailNormalized) {
                            this.holderMode = 'registered';
                        } else {
                            this.holderMode = 'overwrite';
                        }
                    } catch (error) {
                        console.error('Holder name fetch error:', error);
                        // 取得できないときは書き戻しUIを出さない（誤ってマスタを触らせない）
                        this.resetHolderState();
                    } finally {
                        this.isLoadingHolder = false;
                    }
                },

                /**
                 * 得意先変更を保存
                 */
                async saveCustomerChange() {
                    if (!this.selectedCustomerId) {
                        toast('error', '得意先を選択してください');
                        return;
                    }

                    if (this.isSubmitting) {
                        return;
                    }

                    this.isSubmitting = true;

                    try {
                        const requestBody = {
                            customer_id: this.selectedCustomerId,
                            // チェックボックスがONのときだけ得意先マスタへ書き戻す
                            register_holder_name: this.registerHolderName,
                        };

                        const response = await fetch(
                            `/payment-receipt/fb-import/${this.batch.id}/matching/${this.currentDetail.id}`,
                            {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                },
                                body: JSON.stringify(requestBody),
                            }
                        );

                        const data = await response.json();

                        if (data.status === 'OK') {
                            // 成功: 画面をリロードして最新データを取得
                            toast('success', data.message || '得意先を変更しました');

                            // モーダルを閉じてからリロード
                            this.closeChangeCustomerModal();

                            // 短い遅延の後にリロード（トーストを表示するため）
                            setTimeout(() => {
                                location.reload();
                            }, 500);
                        } else {
                            throw new Error(data.message || '得意先の変更に失敗しました');
                        }
                    } catch (error) {
                        console.error('Customer change error:', error);
                        toast('error', error.message || '得意先の変更に失敗しました');
                        this.isSubmitting = false;
                    }
                },

                async toggleShouldRegister(index) {
                    const detail = this.details[index];
                    const batchId = this.batch.id;

                    try {
                        const response = await fetch(`/payment-receipt/fb-import/${batchId}/toggle/${detail.id}`, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            }
                        });

                        const data = await response.json();

                        if (data.status === 'OK' || data.success) {
                            // toJsonのレスポンス構造に対応（data.dataにアクセス）
                            const responseData = data.data || data;

                            // 切り替え後のバッチ全体の明細で一覧を置き換える。
                            // 対象外に切り替えた行は、サーバ側で得意先・配分・調整行がクリアされ、照合も未マッチに戻って「対象外」になる
                            // （対象に戻すと得意先が無いので未マッチの「—」になり、得意先を選ぶまで本登録を止める）。
                            // 配分が消えると、同じ請求を見るほかの行の配分状況も変わる（例: 極東商会の行23を対象外にすると行22が請求超過→請求残）
                            this.applyBatchStatus(responseData);

                            toast('success', responseData.message || '本登録対象を変更しました');
                        } else {
                            toast('error', data.message || '本登録対象の変更に失敗しました');
                        }
                    } catch (error) {
                        console.error('Toggle should register error:', error);
                        toast('error', '通信エラーが発生しました');
                    }
                },

                // 配分詳細モーダル関連
                openAllocationModal(index) {
                    this.currentDetailIndex = index;
                    // Deep copy to avoid direct mutation
                    this.currentDetail = JSON.parse(JSON.stringify(this.details[index]));

                    // 調整行は自動生成されないため、無い明細では未定義になる
                    if (!Array.isArray(this.currentDetail.receipt_types)) {
                        this.currentDetail.receipt_types = [];
                    }

                    this.copyNotice = null;
                    this.showAllocationModal = true;
                },

                closeAllocationModal() {
                    this.showAllocationModal = false;
                    this.currentDetail = null;
                    this.currentDetailIndex = -1;
                    this.copyNotice = null;
                },

                onAllocationAmountChange() {
                    // リアクティブな再計算のためにトリガー
                    // Alpine.jsが自動的に再計算する
                },

                async saveAllocation() {
                    // 止めるのは配分超過（配分合計 ＞ 入金合計）のときだけ。
                    // 配分合計が少ない（請求に当てない残りがある）のは保存できる。残りは本登録で入金得意先への振込（消込なし）になる
                    if (this.allocationBalance.diff < 0) {
                        alert('配分合計が入金合計（入金額＋調整）を超えています（{{ \App\Enums\FbAllocationState::OverAllocated->label() }}）。');
                        return;
                    }

                    const detail = this.currentDetail;
                    const batchId = this.batch.id;

                    try {
                        // 配分データの準備
                        // customer_id（請求得意先ID）を必ず送る。
                        // 送らないとサーバ側で入金得意先IDに上書きされ、
                        // 子得意先の請求への配分が親（入金得意先）の配分として保存されてしまう。
                        // unpaid_amount は「配分額が未払額を超えていないか」のサーバ側チェック用。
                        const allocations = detail.allocations.map(a => ({
                            customer_id: a.customer_id,
                            billing_id: a.billing_id,
                            allocated_amount: parseFloat(a.allocated_amount),
                            unpaid_amount: a.billing ? parseFloat(a.billing.unpaid_amount || 0) : null
                        }));

                        // 調整行（手数料・リベート等）
                        // id を付けて送ることでサーバ側が差分更新でき、変更履歴が audits に残る
                        const receiptTypes = (detail.receipt_types || []).map(r => ({
                            id: r.id ?? null,
                            // 未選択（空）はそのまま送り、サーバ側で「入金区分が指定されていません」にする
                            receipt_type: r.receipt_type === '' || r.receipt_type === null
                                ? '' : parseInt(r.receipt_type, 10),
                            amount: parseFloat(r.amount) || 0,
                            note: r.note || ''
                        }));

                        const response = await fetch(`/payment-receipt/fb-import/${batchId}/allocation/${detail.id}`, {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                allocations: allocations,
                                receipt_types: receiptTypes
                            })
                        });

                        const data = await response.json();

                        if (data.status === 'OK' || data.success) {
                            const responseData = data.data || data;
                            toast('success', responseData.message || '配分を更新しました');

                            // 保存後のバッチ全体の明細で一覧を置き換える（同じ請求を見るほかの明細の配分状況も変わるため）。
                            // 置き換えた明細の配分・調整行はサーバーで採番済みのIDを持つので、
                            // 続けて開いて保存しても、同じ調整行がもう一度作られることはない
                            this.applyBatchStatus(responseData);

                            this.closeAllocationModal();
                        } else {
                            // 検証エラーの内訳もトーストに出す（どの行の何が悪いか分かるように）
                            let message = data.message || '配分の更新に失敗しました';
                            if (Array.isArray(data.errors) && data.errors.length > 0) {
                                message += '\n' + data.errors.slice(0, 5).join('\n');
                            }
                            toast('error', message);
                        }
                    } catch (error) {
                        console.error('Allocation update error:', error);
                        toast('error', '通信エラーが発生しました');
                    }
                },

                async reAllocateAll() {
                    if (!confirm('マッチング済みのすべての明細に対して配分を再計算します。既存の配分データは上書きされます。実行しますか？')) {
                        return;
                    }

                    try {
                        Action.onLoading();

                        const batchId = this.batch.id;
                        const response = await fetch(`/payment-receipt/fb-import/${batchId}/reallocate`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            }
                        });

                        const data = await response.json();

                        if (data.status === 'OK' || data.success) {
                            toast('success', data.message || '再配分が完了しました');
                            // 画面をリロードして最新の配分データを表示
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            Action.onLoading(false);
                            toast('error', data.message || '再配分に失敗しました');
                        }
                    } catch (error) {
                        Action.onLoading(false);
                        console.error('再配分エラー:', error);
                        toast('error', '通信エラーが発生しました');
                    }
                },

                handleRegisterSubmit(event) {
                    if (!this.canRegister) {
                        event.preventDefault();

                        let message = '本登録できません:\n';
                        // 本登録対象行のうち、未マッチ・配分超過・請求超過の件数を表示（本登録できない理由と同じ）
                        if (this.getTargetCountByConfidence(3) > 0) {
                            message += `\n・未マッチの行が ${this.getTargetCountByConfidence(3)} 件あります`;
                        }
                        if (this.getOverAllocatedCount() > 0) {
                            message += `\n・{{ \App\Enums\FbAllocationState::OverAllocated->label() }}の行が ${this.getOverAllocatedCount()} 件あります`;
                        }
                        if (this.getBillingOverCount() > 0) {
                            message += `\n・{{ \App\Enums\FbAllocationState::BillingOver->label() }}の行が ${this.getBillingOverCount()} 件あります`;
                        }

                        alert(message);
                        return false;
                    }

                    if (!confirm(this.getRegisterConfirmMessage())) {
                        event.preventDefault();
                        return false;
                    }

                    return true;
                },

                /**
                 * 本登録の確認ダイアログの文
                 *
                 * 請求残・請求に当てない入金があるときだけ、件数と合計を続けて出す（件数と合計はサーバー: summary）。
                 * 請求残の合計は請求ごとに1回だけ数える（同じ請求に2つの明細が配分していても二重に足さない）。
                 * 1つの明細に請求残と請求に当てない入金の両方があれば、両方に数える
                 */
                getRegisterConfirmMessage() {
                    const lines = [];
                    const summary = this.summary || {};
                    if (summary.residual_detail_count > 0) {
                        lines.push(`請求残のある明細が ${summary.residual_detail_count}件（計 ${this.formatAmount(summary.residual_total)}）あります。この金額は請求の残高として残ります。`);
                    }
                    if (summary.unbilled_detail_count > 0) {
                        lines.push(`請求に当てない入金が ${summary.unbilled_detail_count}件（計 ${this.formatAmount(summary.unbilled_total)}）あります。請求なしの入金として登録します。`);
                    }

                    const message = 'すべての明細を確定して本登録します。よろしいですか？';
                    return lines.length > 0 ? message + '\n\n' + lines.join('\n') : message;
                }
            }
        }
    </script>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</x-app-layout>