@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($allocationCount = ($mode === 'edit' && !empty($paymentReceiptHeader->customer_id)) ? app(\App\Repositories\CustomerRepository::class)->getCustomersByReceiptCustomer($paymentReceiptHeader->customer_id)->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" />

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

    {{-- 振分モーダル --}}
    <x-modal.base id="allocations-modal" title="振分情報" maxWidth="3xl">
        <div id="allocations-modal-content">
            {{-- モーダルコンテンツはLivewireから動的に挿入される --}}
        </div>
        <x-slot name="actions">
            <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>
        </x-slot>
    </x-modal.base>
</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;
        }
    }

});

/* 振分モーダルを開く（グローバル関数） */
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);
}
</script>