{{-- contents --}}
    <div class="flex flex-col gap-3">
        <div class="text-right">
            @if($mode=='show')
            @else
            <x-button.linkage id="btn_addrow" text="新規追加" icon="fa-solid fa-plus text-xs" />
            @php($visible = true ? '' : 'hidden')
            <x-button.main-sub id="btn_save" onclick="saveBreakdownData()" data-type-action class="{{$visible}}" text="保存" />
            @endif
        </div>

        <div id="modal_root">
            <livewire:partials.user.accounts-receivable.entry-modal-payment-receipt-detail
                wire:key="breakdown-modal-{{ $rowIndex ?? 0 }}"
                :rowIndex="$rowIndex ?? 0"
                :existingBreakdowns="$breakdowns ?? []"
                :mode="$mode ?? 'create'" />
        </div>

        <div class="mt-4 flex justify-between items-center">
            <div>
                <label>入金合計金額：</label>
                <span id="total_amount" class="font-bold">0</span>
            </div>
        </div>
    </div>

    {{-- script --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentRowIndex = {{ $rowIndex ?? 0 }};

            // 新規追加ボタンのイベント
            const addButton = document.getElementById('btn_addrow');
            if (addButton) {
                addButton.addEventListener('click', function() {
                    Livewire.dispatch('partials.user.accountsreceivables.entry-modal-payment-receipt-detail.add');

                    // 少し遅延してからdatepickerを初期化
                    setTimeout(() => {
                        initializeDatepickers();
                    }, 200);
                });
            }

            // 保存処理
            window.saveBreakdownData = () => {
                console.log('saveBreakdownData called');
                // Livewireコンポーネントからデータを取得
                const livewireComponent = Livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id'));
                if (livewireComponent) {
                    console.log('Livewire component found');

                    // バリデーション用の個別呼び出し
                    livewireComponent.call('getBreakdownsForJs')
                        .then(breakdownData => {
                            console.log('getBreakdownsForJs returned:', breakdownData);

                            // nullが返された場合はバリデーションエラー
                            if (breakdownData === null) {
                                console.error('Validation failed - breakdown data is null');
                                console.log('Modal will remain open for error review');
                                return; // 処理を中断
                            }

                            console.log('Validation passed, breakdown data:', breakdownData);
                            // バリデーション成功時のみ合計金額を取得
                            return livewireComponent.call('getTotalAmount').then(totalAmount => {
                                console.log('Data retrieved:', { breakdownData, totalAmount, currentRowIndex });

                                // 親ウィンドウにデータを送信
                                if (window.parent && typeof window.parent.receiveBreakdownData === 'function') {
                                    console.log('Sending data to parent');
                                    window.parent.receiveBreakdownData({
                                        rowIndex: currentRowIndex,
                                        breakdowns: breakdownData,
                                        totalAmount: isNaN(totalAmount) ? 0 : totalAmount
                                    });
                                } else {
                                    console.error('Parent receiveBreakdownData function not found');
                                }
                                closeBreakdownModal();
                            });
                        })
                        .catch(error => {
                            // バリデーションエラー時の処理
                            console.error('Validation error caught:', error);
                            console.log('Modal will remain open for error review');
                            // エラーメッセージはLivewireが自動的に画面に表示する
                            // モーダルは開いたままにしてエラーを確認できるようにする
                        });
                } else {
                    console.error('Livewire component not found');
                }
            }

            // モーダルを閉じる
            window.closeBreakdownModal = () => {
                if (window.parent && typeof window.parent.closeBreakdownModal === 'function') {
                    window.parent.closeBreakdownModal();
                }
            }

            // Livewireイベントリスナー
            document.addEventListener('livewire:updated', function (event) {
                // Livewireコンポーネントが更新された後に合計を再計算
                updateTotalAmount();
                // 表示モードでは追加で確実に実行
                @if($mode == 'show')
                setTimeout(() => {
                    updateTotalAmount();
                }, 200);
                @endif

                // DOM更新が完了してからdatepickerを初期化
                setTimeout(() => {
                    initializeDatepickers();
                }, 100);
            });

            // より確実にLivewire更新を検知
            document.addEventListener('livewire:component-updated', function (event) {
                setTimeout(() => {
                    initializeDatepickers();
                }, 150);
            });

            // DOMの変更を監視
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                        setTimeout(() => {
                            initializeDatepickers();
                        }, 100);
                    }
                });
            });

            // モーダル内の変更を監視
            setTimeout(() => {
                const modalRoot = document.getElementById('modal_root');
                if (modalRoot) {
                    observer.observe(modalRoot, {
                        childList: true,
                        subtree: true
                    });
                }
            }, 500);

            // 合計金額を更新
            window.updateTotalAmount = () => {
                const livewireComponent = Livewire.find(document.querySelector('[wire\\:id]').getAttribute('wire:id'));
                if (livewireComponent) {
                    livewireComponent.call('getTotalAmount').then(total => {
                        const totalElement = document.getElementById('total_amount');
                        if (totalElement) {
                            const formattedTotal = isNaN(total) ? 0 : total;
                            totalElement.textContent = new Intl.NumberFormat().format(formattedTotal);
                        }
                    }).catch(error => {
                        console.error('Error getting total amount:', error);
                        const totalElement = document.getElementById('total_amount');
                        if (totalElement) {
                            totalElement.textContent = '0';
                        }
                    });
                }
            }

            // 削除ボタン用のグローバル関数
            window.removeBreakdownRow = (index) => {
                Livewire.dispatch('partials.user.accountsreceivables.entry-modal-payment-receipt-detail.delete', [index]);
            }

            // 金額変更時の合計計算用のグローバル関数
            window.calculateTotal = () => {
                updateTotalAmount();
            }

            // datepickerを初期化する関数
            window.initializeDatepickers = () => {
                // Flatpickrが利用可能か確認
                if (typeof flatpickr === 'undefined') {
                    return;
                }

                // 新しく追加されたdatepicker要素に対してFlatpickrを初期化
                const pickers = document.querySelectorAll('.datepicker:not([data-flatpickr])');

                pickers.forEach((picker) => {
                    const fp = flatpickr(picker, {
                        locale: 'ja',
                        allowInput: true,
                        clickOpens: false,
                        // 出力フォーマット
                        dateFormat: 'Y/m/d',
                        // 入力のパース
                        parseDate: (datestr, format) => {
                            // 形式１: MMDD
                            const abbrev = datestr.match(/^(\d{2})(\d{2})$/);
                            if (abbrev) {
                                const now = new Date();
                                const currentYear = now.getFullYear();
                                return new Date(
                                    parseInt(currentYear),   // 年
                                    parseInt(abbrev[1]) - 1, // 月
                                    parseInt(abbrev[2])      // 日
                                );
                            }
                            // 形式２: YYYYMMDD
                            const compact = datestr.match(/^(\d{4})(\d{2})(\d{2})$/);
                            if (compact) {
                                return new Date(
                                    parseInt(compact[1]),     // 年
                                    parseInt(compact[2]) - 1, // 月
                                    parseInt(compact[3])      // 日
                                );
                            }
                            // 形式３: YYYY/MM/DD（flatpickrのデフォルト）
                            return flatpickr.parseDate(datestr, "Y/m/d");
                        },
                        formatDate: (date, format) => {
                            const yyyy = date.getFullYear();
                            const mm = String(date.getMonth() + 1).padStart(2, '0');
                            const dd = String(date.getDate()).padStart(2, '0');
                            return `${yyyy}/${mm}/${dd}`;
                        }
                    });

                    // カレンダーボタンを探す（input-button-group内のbutton）
                    const parentDiv = picker.closest('.input-button-group');
                    if (parentDiv) {
                        const button = parentDiv.querySelector('button');

                        if (button) {
                            // 既存のイベントリスナーを削除してから新しく追加
                            button.removeEventListener('click', button._flatpickrHandler);
                            button._flatpickrHandler = (e) => {
                                e.preventDefault();
                                fp.open();
                            };
                            button.addEventListener('click', button._flatpickrHandler);
                        }
                    }
                });
            }

            // 初期化（Livewireコンポーネントの読み込み完了を待つ）
            setTimeout(() => {
                // コンポーネントが存在するかチェック
                const checkComponent = () => {
                    const wireElement = document.querySelector('[wire\\:id]');
                    if (wireElement) {
                        updateTotalAmount();

// 表示モードでも再度確実に合計を計算
                          @if($mode == 'show')
                          setTimeout(() => {
                              updateTotalAmount();
                          }, 500);
                          setTimeout(() => {
                              updateTotalAmount();
                          }, 1000);
                          @endif


                        // 初期のdatepickerも初期化
                        initializeDatepickers();
                    } else {
                        // まだコンポーネントが読み込まれていない場合は再試行
                        setTimeout(checkComponent, 50);
                    }
                };
                checkComponent();
            }, 100);
        });
    </script>