{{-- 得意先変更モーダル --}}
<div x-show="showChangeCustomerModal"
     x-cloak
     class="fixed inset-0 z-50 overflow-y-auto"
     @keydown.escape.window="closeChangeCustomerModal()"
     x-init="
         $watch('showChangeCustomerModal', (isOpen) => {
             if (isOpen) {
                 // モーダルが開いた時にイベントリスナーを登録
                 const handleCustomerSelected = (e) => {
                     // e.detailが配列の場合は最初の要素を、オブジェクトの場合はそのまま使用
                     const eventData = Array.isArray(e.detail) ? e.detail[0] : e.detail;
                     const customerId = eventData?.id || eventData?.value || null;
                     $data.selectedCustomerId = customerId;
                 };
                 window.addEventListener('parts.input-customer.send', handleCustomerSelected);

                 // クリーンアップ: モーダルが閉じる時にリスナーを削除
                 $watch('showChangeCustomerModal', (stillOpen) => {
                     if (!stillOpen) {
                         window.removeEventListener('parts.input-customer.send', handleCustomerSelected);
                     }
                 });
             }
         });
     ">
    {{-- 背景オーバーレイ --}}
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
         @click="closeChangeCustomerModal()"></div>

    {{-- モーダルコンテンツ --}}
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="relative bg-white rounded-lg shadow-xl max-w-2xl 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-pencil mr-2"></i>得意先変更
                </h3>
                <button type="button"
                        @click="closeChangeCustomerModal()"
                        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-[calc(90vh-140px)]">
                {{-- FB明細情報 --}}
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                    <h4 class="font-semibold text-gray-900 mb-3">
                        <i class="fa-solid fa-file-invoice mr-2"></i>入金明細情報
                    </h4>
                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-600">取引日:</span>
                            <span class="font-medium ml-2" x-text="currentDetail?.transaction_date || '-'"></span>
                        </div>
                        <div>
                            <span class="text-gray-600">金額:</span>
                            <span class="font-medium ml-2" x-text="currentDetail?.amount ? Number(currentDetail.amount).toLocaleString() + '円' : '-'"></span>
                        </div>
                        <div class="col-span-2">
                            <span class="text-gray-600">口座名義人:</span>
                            <span class="font-medium ml-2" x-text="currentDetail?.account_holder_name || '-'"></span>
                        </div>
                    </div>
                </div>

                {{-- 現在の得意先 --}}
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        現在の得意先
                    </label>
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                        <template x-if="currentDetail?.customer">
                            <div class="flex items-center">
                                <i class="fa-solid fa-building text-yellow-600 mr-2"></i>
                                <span class="font-medium" x-text="currentDetail.customer.customer_name"></span>
                                <span class="text-xs text-gray-500 ml-2" x-text="'(ID: ' + currentDetail.customer.id + ')'"></span>
                            </div>
                        </template>
                        <template x-if="!currentDetail?.customer">
                            <div class="text-gray-500 italic">
                                <i class="fa-solid fa-circle-xmark text-red-500 mr-2"></i>
                                未マッチ
                            </div>
                        </template>
                    </div>
                </div>

                {{-- 新しい得意先選択 --}}
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        新しい得意先を選択 <span class="text-red-500">*</span>
                    </label>
                    <div class="border-2 border-blue-200 rounded-lg p-4 bg-blue-50">
                        <livewire:parts.input-customer
                            wire:key="change-customer-modal-input" />
                    </div>
                    <p class="text-xs text-gray-500 mt-2">
                        <i class="fa-solid fa-info-circle mr-1"></i>
                        得意先を変更すると、配分データが自動的に再計算されます。
                    </p>
                </div>

                {{-- 選択された得意先のプレビュー --}}
                <template x-if="selectedCustomerId">
                    <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
                        <div class="flex items-center text-green-800">
                            <i class="fa-solid fa-check-circle mr-2"></i>
                            <span class="text-sm">得意先が選択されました（ID: <span x-text="selectedCustomerId"></span>）</span>
                        </div>
                    </div>
                </template>
            </div>

            {{-- フッター --}}
            <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3 border-t border-gray-200">
                <button type="button"
                        @click="closeChangeCustomerModal()"
                        class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition-colors">
                    <i class="fa-solid fa-times mr-2"></i>
                    キャンセル
                </button>
                <button type="button"
                        @click="saveCustomerChange()"
                        :disabled="!selectedCustomerId || isSubmitting"
                        :class="selectedCustomerId && !isSubmitting ? 'bg-primary-600 hover:bg-primary-700' : 'bg-gray-400 cursor-not-allowed'"
                        class="px-4 py-2 text-white rounded-lg transition-colors flex items-center">
                    <template x-if="isSubmitting">
                        <i class="fa-solid fa-spinner fa-spin mr-2"></i>
                    </template>
                    <template x-if="!isSubmitting">
                        <i class="fa-solid fa-save mr-2"></i>
                    </template>
                    <span x-text="isSubmitting ? '保存中...' : '保存'"></span>
                </button>
            </div>
        </div>
    </div>
</div>