@php($clsRequired = ($mode!='show') ? 'required' : '')
<table class="list-table">
    <colgroup>
        <col class="w-12"> <!-- No. -->
        <col class="w-32"> <!-- 入金区分 -->
        <col class="w-24"> <!-- 金額 -->
        <col class="w-36"> <!-- 銀行名 -->
        <col class="w-36"> <!-- 支店名 -->
        <col class="w-36"> <!-- 手形期日 -->
        <col class="min-w-32"> <!-- 摘要 -->
        <col class="w-24"> <!-- 削除 -->
    </colgroup>
    <thead>
        <tr>
            <th>No.</th>
            <th class="{{ $clsRequired }}">入金区分</th>
            <th class="{{ $clsRequired }}">金額</th>
            <th>銀行名</th>
            <th>支店名</th>
            <th>手形期日</th>
            <th>摘要</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="breakdown_details">
        @foreach($breakdowns as $index => $breakdown)
            @include('user.payment-receipt.partials.entry-modal-detail-row',
                ['index'=>$loop->index, 'breakdown'=>$breakdown, 'mode'=>$mode ?? 'create'])
        @endforeach
    </tbody>
</table>

<script>

// Livewireイベントリスナー
document.addEventListener('DOMContentLoaded', function () {
    console.log('入金内訳モーダル DOMContentLoaded');
	/*
    // 明細一覧の更新時の処理
    document.addEventListener('livewire:updated', function (event) {
        console.log('入金内訳モーダル livewire:updated発火', event);
        // 数値フィールドのフォーマット再適用
        setTimeout(() => reapplyNumberFormatting(), 50);
    });

    document.addEventListener('livewire:init', function (event) {
        console.log('入金内訳モーダル livewire:init発火', event);
        setTimeout(() => reapplyNumberFormatting(), 500);
    });

    document.addEventListener('livewire:load', function (event) {
        console.log('入金内訳モーダル livewire:load発火', event);
        setTimeout(() => reapplyNumberFormatting(), 500);
    });

    // windowレベルでもリッスン
    window.addEventListener('livewire:updated', function (event) {
        console.log('入金内訳モーダル window livewire:updated発火', event);
        setTimeout(() => reapplyNumberFormatting(), 50);
    });

    // MutationObserverで DOM変更を監視（フォールバック）
    const observer = new MutationObserver(function(mutations) {
        console.log('入金内訳モーダル MutationObserver発火');
        setTimeout(() => reapplyNumberFormatting(), 50);
    });

    // 監視対象の要素が存在するまで待つ
    setTimeout(() => {
        const targetElement = document.querySelector('#breakdown_details');
        if (targetElement) {
            observer.observe(targetElement, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ['wire:model', 'value']
            });
        }
    }, 1000);

    // 初期化処理
    setTimeout(() => {
        // 数値フィールドのフォーマット適用
        reapplyNumberFormatting();
    }, 100);

    // 初回読み込み時も適用（遅延実行）
    setTimeout(() => {
        reapplyNumberFormatting();
    }, 2000);
	*/
});

/**
 * 数値フィールドのフォーマットを再適用する
 */
/*
function reapplyNumberFormatting() {
    console.log('入金内訳モーダル reapplyNumberFormatting実行');

    // 金額フィールドを取得
    const amountFields = document.querySelectorAll('input[name*="[amount]"][data-digit]');
    console.log('見つかった金額フィールド数:', amountFields.length);

    amountFields.forEach((field, index) => {
        if (field.value && field.value !== '0' && field.value !== '') {
            const digit = Number(field.dataset.digit) || 0;
            const originalValue = field.value;

            // Editor.numberFormatが利用可能な場合のみ実行
            if (typeof Editor !== 'undefined' && typeof Editor.numberFormat === 'function') {
                try {
                    // 既存の値からカンマを除去して数値として解析
                    const numericValue = parseFloat(field.value.replace(/,/g, ''));
                    if (!isNaN(numericValue)) {
                        field.value = Editor.numberFormat(numericValue.toString(), digit);
                        console.log(`フィールド${index}: ${originalValue} -> ${field.value}`);
                    }
                } catch (error) {
                    console.error(`フィールド${index}のフォーマット処理でエラー:`, error);
                }
            }
        }
    });

    // Alpine.jsコンポーネントの再初期化も試行
    if (typeof Alpine !== 'undefined') {
        try {
            const numberInputs = document.querySelectorAll('input[x-data*="inputNumber"]');
            numberInputs.forEach((input, index) => {
                if (input._x_dataStack && input._x_dataStack[0] && typeof input._x_dataStack[0].init === 'function') {
                    console.log(`Alpine.js数値入力${index}を再初期化`);
                    input._x_dataStack[0].init();
                }
            });
        } catch (error) {
            console.error('Alpine.js再初期化エラー:', error);
        }
    }
}
*/
</script>