@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]) }})" 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="hasAllocationMismatch()">
                                    配分合計が入金額と一致しない行があります
                                </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">
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fa-solid fa-list mr-2"></i>明細一覧
                </h3>

                {{--
                    本登録対象外（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>

            <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">
                                {{-- 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>

                                {{-- 配分状況 --}}
                                <td class="px-3 py-4 whitespace-nowrap text-sm text-right">
                                    <template x-if="detail.allocations && detail.allocations.length > 0">
                                        <div>
                                            <div class="font-mono" x-text="formatAmount(getAllocationTotal(detail))"></div>
                                            <div class="text-xs"
                                                 :class="getAllocationDifference(detail) === 0 ? 'text-green-600' : 'text-red-600'">
                                                <template x-if="getAllocationDifference(detail) === 0">
                                                    <span>✓ 一致</span>
                                                </template>
                                                <template x-if="getAllocationDifference(detail) !== 0">
                                                    <span>差額: <span x-text="formatAmount(getAllocationDifference(detail))"></span></span>
                                                </template>
                                            </div>
                                        </div>
                                    </template>
                                    <template x-if="!detail.allocations || detail.allocations.length === 0">
                                        <div>
                                            <template x-if="detail.customer_id">
                                                <span class="text-yellow-600 font-medium">請求なし</span>
                                            </template>
                                            <template x-if="!detail.customer_id">
                                                <span class="text-red-500">未配分</span>
                                            </template>
                                        </div>
                                    </template>
                                </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>

            {{-- モーダルコンテンツ --}}
            <div class="flex items-center justify-center min-h-screen p-4">
                <div class="relative bg-white rounded-lg shadow-xl max-w-4xl 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>

                                {{-- 配分テーブル --}}
                                <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-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-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                    請求書No
                                                </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-right 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>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200">
                                            <template x-if="!currentDetail.allocations || currentDetail.allocations.length === 0">
                                                <tr>
                                                    <td colspan="6" 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 text-right font-mono">
                                                        <span x-text="formatAmount(allocation.billing?.billing_amount_total || 0)"></span>
                                                    </td>
                                                    <td class="px-3 py-3 whitespace-nowrap text-sm text-gray-900 text-right font-mono">
                                                        <span x-text="formatAmount(allocation.billing?.unpaid_amount || 0)"></span>
                                                    </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>
                                                </tr>
                                            </template>
                                        </tbody>
                                        <tfoot class="bg-gray-50">
                                            <tr>
                                                <td colspan="5" 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>
                                            </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)
                                        <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>
                                        @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">
                                                        @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>
                                </div>

                                {{-- 合計 --}}
                                <div class="mt-4 bg-gray-50 rounded-md p-4 flex justify-end">
                                    <dl class="text-sm space-y-1 w-full max-w-md">
                                        <div class="flex justify-between">
                                            <dt class="text-gray-600">入金額（振込）:</dt>
                                            <dd class="font-mono text-gray-900" x-text="formatAmount(currentDetail?.amount)"></dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-gray-600">調整合計:</dt>
                                            <dd class="font-mono text-gray-900" x-text="formatAmount(getReceiptTypeTotal(currentDetail))"></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="formatAmount(getReceiptTotal(currentDetail))"></dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-gray-600">配分合計:</dt>
                                            <dd class="font-mono text-gray-900" x-text="formatAmount(getAllocationTotal(currentDetail))"></dd>
                                        </div>
                                        <div class="flex justify-between border-t border-gray-300 pt-1">
                                            <dt class="font-semibold"
                                                :class="getAllocationDifference(currentDetail) === 0 ? 'text-green-600' : 'text-red-600'">差額:</dt>
                                            <dd class="font-mono font-semibold"
                                                :class="getAllocationDifference(currentDetail) === 0 ? 'text-green-600' : 'text-red-600'"
                                                x-text="formatAmount(getAllocationDifference(currentDetail))"></dd>
                                        </div>
                                    </dl>
                                </div>

                                {{-- 警告メッセージ --}}
                                <div x-show="getAllocationDifference(currentDetail) !== 0"
                                     class="mt-4 bg-yellow-50 border border-yellow-200 rounded-md p-3">
                                    <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">
                                                配分額を修正するか、差額の内訳（手数料・リベート等）を
                                                「入金内訳（調整）」に追加してください。
                                            </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="getAllocationDifference(currentDetail) !== 0"
                                :class="getAllocationDifference(currentDetail) === 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,
                showAllocationModal: false,
                currentDetail: null,
                currentDetailIndex: -1,
                // 得意先変更モーダル用
                showChangeCustomerModal: false,
                selectedCustomerId: null,
                isSubmitting: false,
                // 口座名義人の書き戻し用
                // holderMode: none=チェックボックス非表示 / register=登録(既定ON)
                //             / overwrite=上書き(既定OFF) / registered=登録済み
                holderMode: 'none',
                registerHolderName: false,
                selectedCustomerHolder: null,
                isLoadingHolder: false,
                // 本登録対象外の明細も表示するか
                // 本登録済みバッチは参照専用のため、登録されなかった明細も初めから見せる
                showExcluded: @json($isRegistered),

                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）のうち、未マッチ（confidence=3）の行がないこと
                    // 取込対象外（should_register!=9）の行は無視する
                    if (this.getTargetCountByConfidence(3) > 0) {
                        return false;
                    }

                    // 配分合計が入金額と一致すること（本登録対象行のみチェック）
                    if (this.hasAllocationMismatch()) {
                        return false;
                    }

                    return true;
                },

                hasAllocationMismatch() {
                    // 本登録対象行（should_register=9）のうち、配分合計が入金額と一致しない行があるかチェック
                    // 取込対象外（should_register!=9）の行は無視する
                    for (const detail of this.details) {
                        // 本登録対象外の行はスキップ
                        if (detail.should_register !== 9) {
                            continue;
                        }

                        // 配分行が1件も無い明細（請求なし入金）は差額チェックの対象外
                        if (!detail.allocations || detail.allocations.length === 0) {
                            continue;
                        }

                        // 配分合計と入金合計（入金額＋調整行）の差
                        const difference = Math.abs(this.getAllocationDifference(detail));

                        // 1円以上の差があればミスマッチ
                        if (difference > 0.01) {
                            return true;
                        }
                    }

                    return false;
                },

                // テーブル用メソッド
                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;
                },

                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);
                },

                // 入金内訳（調整行）の操作
                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] || '';
                },


                /**
                 * 得意先変更モーダルを開く
                 */
                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;

                            // 本登録対象フラグを更新（Alpine.jsのリアクティビティを確実にトリガー）
                            if (responseData.should_register === 1) {
                                // 対象外に切り替えた場合は、得意先と配分・調整行もクリア
                                // （サーバ側でも同じものを削除している）
                                this.details[index] = {
                                    ...this.details[index],
                                    should_register: responseData.should_register,
                                    customer_id: null,
                                    customer: null,
                                    match_confidence: 3,
                                    allocations: [],
                                    receipt_types: []
                                };
                            } else {
                                // 本登録対象に切り替えた場合
                                this.details[index] = {
                                    ...this.details[index],
                                    should_register: responseData.should_register
                                };
                            }

                            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.showAllocationModal = true;
                },

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

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

                async saveAllocation() {
                    if (this.getAllocationDifference(this.currentDetail) !== 0) {
                        alert('配分合計が入金合計（入金額＋調整）と一致していません。');
                        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 が null のままなので、返ってきたIDに入れ替えないと
                            // 続けて保存したときに同じ行がもう一度作られてしまう。
                            if (Array.isArray(responseData.receipt_types)) {
                                this.currentDetail.receipt_types = responseData.receipt_types;
                            }

                            // 元のデータを更新
                            this.details[this.currentDetailIndex] = JSON.parse(JSON.stringify(this.currentDetail));

                            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.hasAllocationMismatch()) {
                            message += '\n・配分合計が入金額と一致しない行があります';
                        }

                        alert(message);
                        return false;
                    }

                    if (!confirm('すべての明細を確定して本登録します。よろしいですか？')) {
                        event.preventDefault();
                        return false;
                    }

                    return true;
                }
            }
        }
    </script>

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