{{-- 支払区分選択モーダル --}}
<x-modal id="disbursement-type" maxWidth="md">
    <main class="p-6">
        <h3 class="text-lg font-bold text-gray-700 mb-4 text-center">支払区分を選択してください</h3>
        <div class="flex gap-4 justify-center">
            {{-- 通常支払ボタン --}}
            <button type="button"
                    class="flex-1 max-w-48 p-6 border-2 border-gray-300 rounded-lg hover:border-blue-500 hover:bg-blue-50 text-center transition-colors cursor-pointer"
                    onclick="selectDisbursementType({{ App\Enums\DisbursementType::Normal->value }})">
                <div class="text-3xl mb-3 text-blue-600">
                    <i class="fa-solid fa-file-invoice"></i>
                </div>
                <div class="font-bold text-gray-800 mb-1">通常支払</div>
                <div class="text-xs text-gray-500">仕入データを選択して支払</div>
            </button>
            {{-- 前渡金ボタン --}}
            <button type="button"
                    class="flex-1 max-w-48 p-6 border-2 border-gray-300 rounded-lg hover:border-green-500 hover:bg-green-50 text-center transition-colors cursor-pointer"
                    onclick="selectDisbursementType({{ App\Enums\DisbursementType::Advance->value }})">
                <div class="text-3xl mb-3 text-green-600">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                </div>
                <div class="font-bold text-gray-800 mb-1">前渡金</div>
                <div class="text-xs text-gray-500">仕入前に支払（後で消込）</div>
            </button>
        </div>
    </main>
</x-modal>

{{-- script --}}
<script>
    window.addEventListener('load', () => {
        /**
         * 支払区分選択モーダルを開く
         */
        window.openDisbursementTypeModal = function() {
            MicroModal.show('disbursement-type', {
                disableScroll: true,
                disableFocus: true,
            });
        };

        /**
         * 支払区分を選択した時の処理
         * @param {number} type - 支払区分（1:通常支払, 2:前渡金）
         */
        window.selectDisbursementType = function(type) {
            // モーダルを閉じる
            MicroModal.close('disbursement-type');

            // hidden フィールドに値をセット
            const hiddenField = document.getElementById('disbursement_type');
            if (hiddenField) {
                hiddenField.value = type;
            }

            if (type === {{ App\Enums\DisbursementType::Normal->value }}) {
                // 通常支払: 仕入選択モーダルを開く
                if (typeof window.openPurchaseModal === 'function') {
                    window.openPurchaseModal();
                }
            } else {
                // 前渡金: 仕入先選択モーダルを開く
                if (typeof window.openSupplierModal === 'function') {
                    window.openSupplierModal();
                }
                // Livewireコンポーネントに前渡金モードを通知
                Livewire.dispatch('partials.user.accountspayables.entry-payment-disbursement-detail.set-advance-mode');
                // 勘定科目を前渡金にデフォルト設定
                setAdvanceAccountDefault();
            }
        };

        /**
         * 勘定科目を前渡金にデフォルト設定
         */
        window.setAdvanceAccountDefault = function() {
            const accountSelect = document.querySelector('select[name="account_id"]');
            if (!accountSelect) return;

            // 前渡金の勘定科目コード
            const advanceAccountCode = '{{ App\Enums\DisbursementType::getAdvanceAccountCode() }}';

            // セレクトボックスのオプションから前渡金を探す
            for (let option of accountSelect.options) {
                // optionのテキストまたはdata属性にコードが含まれているか確認
                if (option.text.includes(advanceAccountCode) || option.dataset.code === advanceAccountCode) {
                    accountSelect.value = option.value;
                    // changeイベントを発火
                    accountSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    break;
                }
            }
        };
    });
</script>