@php($clsRequired = ($mode!='show') ? 'required' : '')
@php($assist = App\Services\Logic\Assist::class)
<div class="flex-col-gap"
    x-data="{
        selectedBreakdownIndex: null,
        sidePanelOpen: false,
        selectBreakdown(index) {
            this.selectedBreakdownIndex = index;
            this.sidePanelOpen = true;
            // サイドパネルをスクロールトップに戻す
            this.$nextTick(() => {
                const panelBody = document.getElementById('side-panel-body');
                if (panelBody) {
                    panelBody.scrollTop = 0;
                }
            });
        },
        closeSidePanel() {
            this.sidePanelOpen = false;
            this.selectedBreakdownIndex = null;
        }
    }"
    @breakdown-selected.window="selectBreakdown($event.detail.index)"
    @matching-panel-close.window="closeSidePanel()"
    @keydown.escape.window="if(sidePanelOpen) closeSidePanel()">
    {{-- header --}}
    <x-box.toggle class="entry-base-4 max-h">
        <div class="entry">
            <!-- box-1 -->
            <div>
                <!-- line-01: 伝票No + 入金日 -->
                <div class="flex items-center gap-3">
                    <div class="entry-item w-1/2">
                        <label>伝票No.</label>
                        <div>
                            <x-input.text readonly class="w-full" value="{{$paymentReceiptHeader->slip_number ?? ''}}" />
                        </div>
                    </div>
                    <div class="entry-item w-1/2">
                        <label class="{{ $clsRequired }}">入金日</label>
                        <div>
                            @if($mode=='show')
                            <x-input.text readonly class="w-full" id="payment_date" name="payment_date"
                                value="{{old('payment_date', $paymentReceiptHeader->payment_date)}}" />
                            @endif
                            @if($mode!='show')
                            <x-input.date id="payment_date" name="payment_date" class="w-full"
                                value="{{old('payment_date', $paymentReceiptHeader->payment_date)}}" />
                            @endif
                            <x-input.error item="payment_date" />
                        </div>
                    </div>
                </div>

                <!-- line-02: 得意先 -->
                <div>
                    <label class="{{ $clsRequired }}">入金得意先</label>
                    <div>
                        @if($mode=='show')
                        <x-input.code-name size="w-20" class="w-full"
                            code="{{$paymentReceiptHeader->customer->customer_code ?? ''}}"
                            name="{{$paymentReceiptHeader->customer->customer_name ?? ''}}" />
                        @endif
                        @if($mode!='show')
                        <livewire:parts.input-customer custom="customer_name"
                            type="payment-receipt-parent"
                            value="{{old('customer_id', $paymentReceiptHeader->customer_id ?? '')}}" >
                        {{-- 従来モード用: 2段階入力モードではLivewire内のhiddenフィールドが優先される --}}
                        <input type="hidden" id="customer_id_legacy" name="customer_id"
                            value="{{old('customer_id', $paymentReceiptHeader->customer_id ?? '')}}" />
                        @endif
                        <x-input.error item="customer_id" />
                    </div>
                </div>

                <!-- line-03: 入金合計 + 振分ボタン -->
                <div class="flex items-center gap-3">
                    <div class="entry-item w-1/2">
                        <label>入金合計</label>
                        <div>
                            <x-input.text readonly class="w-full text-right font-semibold" id="total_amount_display"
                                value="{{num_format(old('total_amount', $paymentReceiptHeader->total_amount ?? 0))}}" />
                            <input type="hidden" name="total_amount" id="total_amount_hidden"
                                value="{{old('total_amount', $paymentReceiptHeader->total_amount ?? 0)}}" />
                        </div>
                    </div>
                    <div class="entry-item w-1/2">
                        <label>&nbsp;</label>
                        @php($allocationCustomerId = old('customer_id', $paymentReceiptHeader->customer_id ?? null))
                        @php($allocationCount = (in_array($mode, ['edit', 'create']) && !empty($allocationCustomerId)) ? app(\App\Repositories\CustomerRepository::class)->getCustomersByReceiptCustomer($allocationCustomerId)->count() : collect($breakdowns ?? [])->where('receipt_type', 9)->where('amount', '>', 0)->pluck('customer_id')->unique()->count())
                        <div id="allocation-button-container">
                            {{-- 初期表示用ボタン（JavaScriptで動的更新される） --}}
                            @if($allocationCount >= 2)
                            <button type="button"
                                onclick="openAllocationsModal()"
                                class="px-4 py-2 text-sm rounded bg-primary-100 text-primary-700 hover:bg-primary-200 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <i class="fa-solid fa-shuffle mr-2" aria-hidden="true"></i>振分 ({{ $allocationCount }}件)
                            </button>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- line-04: 備考 -->
                <div>
                    <label>備考</label>
                    <div>
                        @if($mode=='show')
                        <x-input.text readonly name="note" class="w-full"
                            value="{{old('note', $paymentReceiptHeader->note ?? '')}}" />
                        @endif
                        @if($mode!='show')
                        <x-input.text name="note" class="w-full"
                            value="{{old('note', $paymentReceiptHeader->note ?? '')}}" />
                        @endif
                        <x-input.error item="note" />
                    </div>
                </div>

            </div>
        </div>
    </x-box.toggle>

    {{-- detail --}}
    <div x-ref="box" class="entry-slip-detail-box">
        <div @load.window="fixed()" @resize.window="fixed()" @toggle-open.window="fix()">
            {{-- 横スクロール対応 --}}
            <div class="scroll-wrap thin-scroll overflow-x-auto" x-ref="wrap">
                <div class="min-w-[800px]">
                    <livewire:partials.user.payment-receipt-new.entry-payment-receipt-new-detail
                        mode="{{$mode}}"
                        :details="$breakdowns"
                        :header="$paymentReceiptHeader" />
                </div>
            </div>
        </div>
    </div>

    @if(false) {{-- 消込機能一時非表示 --}}
    {{-- サイドパネル（消込パネル）- fixedポジションで画面右端にオーバーレイ表示 --}}
    {{-- visibility制御でLivewireイベントを正常動作させる（x-showはdisplay:noneでwire:clickが動作しない） --}}
    @if($mode != 'show')
    <div x-cloak
        :class="sidePanelOpen ? 'visible' : 'invisible pointer-events-none'"
        class="fixed inset-0 z-50"
        @click.self="closeSidePanel()">
        {{-- 背景オーバーレイ --}}
        <div :class="sidePanelOpen ? 'opacity-100' : 'opacity-0'"
            class="absolute inset-0 bg-black/30 transition-opacity duration-200"></div>

        {{-- サイドパネル本体 --}}
        <div :class="sidePanelOpen ? 'translate-x-0' : 'translate-x-full'"
            class="absolute right-0 top-0 h-full w-96 max-w-[90vw] transition-transform duration-200 ease-out">
            @include('user.payment-receipt-new.partials.matching-side-panel')
        </div>
    </div>
    @endif
    @endif

    {{-- エラー表示 --}}
    <x-input.error item="breakdowns" />
    <x-input.error item="receipt_types" />
    <x-input.error item="allocations" />
    <x-input.error item="allocation_balance" />

    {{-- 銀行名サジェスト用 datalist（明細行の bank_name input から list="bank-names" で参照） --}}
    <x-parts.bank-names-datalist />

    {{-- modal --}}
    <x-modal.search key="search" id="search" />

    {{-- 振分モーダル（専用構造：高さ制限+スクロール対応） --}}
    <div class="modal micromodal-slide" id="allocations-modal" aria-hidden="true">
        <div class="modal-overlay fixed inset-0 py-6 bg-black/60 z-50" tabindex="-1" data-micromodal-close>
            <div class="modal-container bg-white rounded-lg overflow-hidden max-h-[90vh] flex flex-col sm:max-w-3xl sm:w-full sm:mx-auto"
                role="dialog" aria-modal="true" aria-labelledby="allocations-modal-title">
                {{-- ヘッダー --}}
                <header class="bg-secondary-200 rounded-t-lg text-end px-2 py-1">
                    <button aria-label="Close modal" data-micromodal-close class="modal-close">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </header>
                <header class="py-3 px-4 border-b">
                    <h3 id="allocations-modal-title" class="text-lg font-medium text-gray-900">振分情報</h3>
                </header>
                {{-- コンテンツ（スクロール対応） --}}
                <main class="px-4 py-4 flex-1 overflow-y-auto thin-scroll">
                    <div id="allocations-modal-content">
                        {{-- モーダルコンテンツはLivewireから動的に挿入される --}}
                    </div>
                </main>
                {{-- フッター --}}
                <footer class="py-3 px-4 flex gap-3 items-center justify-end border-t">
                    <button type="button"
                        onclick="MicroModal.close('allocations-modal')"
                        class="px-4 py-2 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors">
                        閉じる
                    </button>
                </footer>
            </div>
        </div>
    </div>
</div>

<script>
window.addEventListener('load', () => {

    /* Alpine.js */
    const xroot = Alpine.$data($('#root'));

    /* Events */

    /* ｜得意先の選択時 */
    Livewire.on('parts.input-customer.send',
        (event) => selectedCustomer(event[0]));

    /* ｜入金日の変更時 */
    const paymentDateEl = $('#payment_date');
    if (paymentDateEl) {
        paymentDateEl.addEventListener('change', () => changePaymentDate());
    }

    /* Actions */
    const getVal = Editor.getValueInObject;

    /* 得意先選択時の処理 */
    const selectedCustomer = (customer) =>
    {
        const pDate = $('#payment_date')?.value ?? '';
        const cId = getVal(customer,'id',null);

        // hidden フィールドを更新（従来モード用）
        const customerIdField = $('#customer_id_legacy');
        if (customerIdField) {
            customerIdField.value = cId ?? '';
        }

        const data = {customerId: cId, paymentDate: pDate};
        Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.customer-selected', data);
    }

    /* 入金日変更時の処理 */
    const changePaymentDate = () =>
    {
        const pDate = $('#payment_date')?.value ?? '';
        const cId = $('#customer_id_legacy')?.value ?? '';
        const data = {customerId: cId, paymentDate: pDate};
        Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.customer-selected', data);
    }

    /* ｜明細行サマリーの変更時 */
    Livewire.on('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.summary',
        (event) => changeSummary(event[0]));

    /* 明細行サマリーの変更時の処理 */
    const changeSummary = (summary) =>
    {
        // 入金合計のhiddenフィールドと表示フィールドを更新
        const totalAmountHidden = $('#total_amount_hidden');
        const totalAmountDisplay = $('#total_amount_display');
        if (totalAmountHidden) {
            totalAmountHidden.value = summary.total_amount;
        }
        if (totalAmountDisplay) {
            totalAmountDisplay.value = Number(summary.total_amount).toLocaleString('ja-JP');
        }

        // 振分ボタンの表示/非表示を更新
        updateAllocationButton(summary.allocation_count ?? 0, summary.allocation_html ?? '');
    }

    /* 振分ボタンの更新 */
    const updateAllocationButton = (allocationCount, allocationHtml) =>
    {
        const container = $('#allocation-button-container');
        if (!container) return;

        // 振分候補が2件以上の場合のみボタンを表示
        if (allocationCount >= 2) {
            container.innerHTML = `
                <button type="button"
                    onclick="openAllocationsModal()"
                    class="px-4 py-2 text-sm rounded bg-primary-100 text-primary-700 hover:bg-primary-200 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <i class="fa-solid fa-shuffle mr-2" aria-hidden="true"></i>振分 (${allocationCount}件)
                </button>
            `;
        } else {
            container.innerHTML = '';
        }

        // モーダルコンテンツを更新
        const modalContent = document.getElementById('allocations-modal-content');
        if (modalContent && allocationHtml) {
            modalContent.innerHTML = allocationHtml;
        }
    }

    /* ｜振分情報変更時 */
    Livewire.on('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.allocations-updated',
        (event) => onAllocationsUpdated(event[0]));

    /* 振分情報変更時の処理 */
    const onAllocationsUpdated = (data) =>
    {
        updateAllocationButton(data.allocation_count ?? 0, data.allocation_html ?? '');
    }

    /* ｜明細行挿入時 */
    Livewire.on('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.row-inserted',
        (event) => onRowInserted(event[0]));

    /* 明細行挿入時の処理（フォーカス制御） */
    const onRowInserted = (data) =>
    {
        const newIndex = data?.newIndex ?? 0;
        // DOM更新を待ってから新しい行の金額欄にフォーカス
        setTimeout(() => {
            const newAmountField = document.getElementById('amount_' + newIndex);
            if (newAmountField) {
                newAmountField.focus();
                newAmountField.select();
            }
            // レイアウト再計算
            if (xroot && typeof xroot.fixed === 'function') {
                xroot.fixed();
            }
        }, 100);
    }

    /* ｜サイドパネル消込更新時 */
    Livewire.on('side-panel-matchings-updated',
        (event) => onMatchingsUpdated(event[0]));

    /* 消込更新時の処理 */
    const onMatchingsUpdated = (data) =>
    {
        // 消込が更新されたら選択中の行のステータス表示を更新
        // Livewireが自動的に再レンダリングするため、特別な処理は不要
        // 必要に応じて追加のUI更新をここに記述
    }

    /* ｜サイドパネル閉じる時 */
    Livewire.on('matching-panel-close',
        () => onSidePanelClose());

    /* サイドパネル閉じる時の処理 */
    const onSidePanelClose = () =>
    {
        // Alpine.jsの状態も更新
        if (xroot) {
            xroot.sidePanelOpen = false;
            xroot.selectedBreakdownIndex = null;
        }
    }

    /* 初期化: Livewire mount中に発火されたイベントの受信漏れ対策 */
    /* PHP描画で振分ボタンが存在する場合、Livewireに振分データの再送を要求 */
    const allocBtnContainer = document.getElementById('allocation-button-container');
    if (allocBtnContainer && allocBtnContainer.querySelector('button')) {
        Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.refresh-allocations-modal');
    }

});

/* 振分モーダルを開く（グローバル関数） */
function openAllocationsModal() {
    // モーダルコンテンツを更新
    Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.refresh-allocations-modal');

    // 少し待ってからモーダルを開く（コンテンツ更新を待つ）
    setTimeout(() => {
        MicroModal.show('allocations-modal', {
            disableScroll: true,
            awaitCloseAnimation: true
        });
    }, 100);
}

/* 振分金額更新（グローバル関数） */
function updateAllocationAmount(index, value) {
    // カンマを除去して数値に変換
    const numValue = parseFloat(value.replace(/,/g, '')) || 0;
    Livewire.dispatch('partials.user.payment-receipt-new.entry-payment-receipt-new-detail.update-allocation-amount', {
        index: index,
        amount: numValue
    });
}
</script>