{{--
    품의서 5종 통합 폼 (Alpine.js)
    Types: pr_expense(지출), pr_contract(계약체결), pr_purchase(구매), pr_trip(출장), pr_settlement(비용정산)
    Props:
        $initialData (array|null) - 기존 content JSON (edit 시)
        $initialFiles (array|null) - 기존 첨부파일 [{id, name, size, mime_type}] (edit 시)
--}}
@php
    $initialData = $initialData ?? [];
    $initialFiles = $initialFiles ?? [];
    $userName = auth()->user()->name ?? '';
@endphp

<div id="purchase-request-form-container" style="display: none;"
     x-data="purchaseRequestForm({{ json_encode($initialData) }}, '{{ $userName }}', {{ json_encode($initialFiles) }})"
     x-cloak>

    {{-- 품의서 유형 표시 --}}
    <div class="mb-4 px-3 py-2 rounded-lg text-sm font-medium" :class="{
        'bg-orange-50 text-orange-700 border border-orange-200': prType === 'pr_expense',
        'bg-purple-50 text-purple-700 border border-purple-200': prType === 'pr_contract',
        'bg-blue-50 text-blue-700 border border-blue-200': prType === 'pr_purchase',
        'bg-green-50 text-green-700 border border-green-200': prType === 'pr_trip',
        'bg-teal-50 text-teal-700 border border-teal-200': prType === 'pr_settlement',
    }" x-text="prTypeLabels[prType] || '품의서'"></div>

    {{-- 공통: 기본 정보 --}}
    <div class="grid gap-4 mb-4" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">작성일자</label>
            <input type="date" x-model="formData.write_date"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">요청부서</label>
            <input type="text" x-model="formData.department" placeholder="부서명"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">요청자</label>
            <input type="text" x-model="formData.writer_name" placeholder="작성자 이름"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
    </div>

    {{-- ═══════════════════════════════════════════ --}}
    {{-- 지출품의서 (pr_expense)                      --}}
    {{-- ═══════════════════════════════════════════ --}}
    <template x-if="prType === 'pr_expense'">
        <div>
            <div class="grid gap-4 mb-4" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">지출항목</label>
                    <input type="text" x-model="formData.expense_category" placeholder="예: 사무용품, 소모품 등"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">지출일자</label>
                    <input type="date" x-model="formData.usage_date"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">사용목적 <span class="text-red-500">*</span></label>
                <textarea x-model="formData.purpose" rows="2" placeholder="지출 사유를 상세히 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            {{-- 항목 테이블: 항목/금액/비고 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">지출 내역</label>
                <div class="overflow-x-auto border border-gray-200 rounded-lg">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 200px;">항목</th>
                                <th class="px-2 py-2 text-right text-xs font-medium text-gray-600" style="min-width: 120px;">금액</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 140px;">비고</th>
                                <th class="px-2 py-2" style="width: 40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in formData.items" :key="item._key">
                                <tr class="border-t border-gray-100">
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.description" placeholder="지출 항목명"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" inputmode="numeric"
                                               :value="formatMoney(item.amount)"
                                               @input="item.amount = parseMoney($event.target.value); $event.target.value = formatMoney(item.amount)"
                                               @focus="if(item.amount === 0) $event.target.value = ''"
                                               @blur="if($event.target.value.trim() === '') { item.amount = 0; $event.target.value = '0'; }"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.remark" placeholder="비고"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1 text-center">
                                        <button type="button" @click="removeItem(index)" class="text-red-400 hover:text-red-600 transition" x-show="formData.items.length > 1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="bg-gray-50 border-t border-gray-200">
                            <tr>
                                <td class="px-2 py-2 text-xs font-semibold text-gray-700 text-right">합계</td>
                                <td class="px-2 py-2 text-xs font-bold text-blue-700 text-right" x-text="formatMoney(totalAmount)"></td>
                                <td colspan="2" class="px-2 py-2">
                                    <button type="button" @click="addItem()" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ 행 추가</button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </template>

    {{-- ═══════════════════════════════════════════ --}}
    {{-- 계약체결품의서 (pr_contract)                  --}}
    {{-- ═══════════════════════════════════════════ --}}
    <template x-if="prType === 'pr_contract'">
        <div>
            <div class="grid gap-4 mb-4" style="grid-template-columns: 1fr 1fr;">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">계약상대방 <span class="text-red-500">*</span></label>
                    <div x-data="prVendorSearch(formData, 'contract_party')">
                        <input type="text" x-ref="vinput" :value="formData.contract_party"
                               @input="onInput($event.target.value)"
                               @focus="onFocus()" @keydown.escape="close()"
                               @keydown.arrow-down.prevent="moveDown()" @keydown.arrow-up.prevent="moveUp()"
                               @keydown.enter.prevent="selectHighlighted()"
                               @blur="setTimeout(() => close(), 200)"
                               placeholder="거래처명 검색"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">계약금액</label>
                    <input type="text" inputmode="numeric"
                           :value="formatMoney(formData.contract_amount)"
                           @input="formData.contract_amount = parseMoney($event.target.value); $event.target.value = formatMoney(formData.contract_amount)"
                           @focus="if(formData.contract_amount === 0) $event.target.value = ''"
                           @blur="if($event.target.value.trim() === '') { formData.contract_amount = 0; $event.target.value = '0'; }"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm text-right focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="grid gap-4 mb-4" style="grid-template-columns: 1fr 1fr;">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">계약기간 시작</label>
                    <input type="date" x-model="formData.contract_start"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">계약기간 종료</label>
                    <input type="date" x-model="formData.contract_end"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">계약내용 <span class="text-red-500">*</span></label>
                <textarea x-model="formData.contract_content" rows="3" placeholder="계약의 주요 내용을 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">계약범위</label>
                <textarea x-model="formData.contract_scope" rows="2" placeholder="계약의 범위를 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">납품/서비스 내용</label>
                <textarea x-model="formData.delivery_service" rows="2" placeholder="납품 또는 서비스 내용을 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">대금지급조건</label>
                <textarea x-model="formData.payment_terms" rows="2" placeholder="대금 지급 조건을 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">기타 특약사항</label>
                <textarea x-model="formData.special_terms" rows="2" placeholder="기타 특약사항을 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
        </div>
    </template>

    {{-- ═══════════════════════════════════════════ --}}
    {{-- 구매품의서 (pr_purchase)                      --}}
    {{-- ═══════════════════════════════════════════ --}}
    <template x-if="prType === 'pr_purchase'">
        <div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">구매 목적 <span class="text-red-500">*</span></label>
                <textarea x-model="formData.purpose" rows="2" placeholder="어떤 목적으로 구매하려는지 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            {{-- 구매 내역 테이블: 품목/수량/단가/금액/비고 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">구매 내역</label>
                <div class="overflow-x-auto border border-gray-200 rounded-lg">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 160px;">품목</th>
                                <th class="px-2 py-2 text-right text-xs font-medium text-gray-600" style="min-width: 60px;">수량</th>
                                <th class="px-2 py-2 text-right text-xs font-medium text-gray-600" style="min-width: 100px;">단가</th>
                                <th class="px-2 py-2 text-right text-xs font-medium text-gray-600" style="min-width: 120px;">금액</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 100px;">비고</th>
                                <th class="px-2 py-2" style="width: 40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in formData.items" :key="item._key">
                                <tr class="border-t border-gray-100">
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.description" placeholder="품명/규격"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" inputmode="numeric"
                                               :value="item.quantity || ''"
                                               @input="item.quantity = parseInt($event.target.value.replace(/[^0-9]/g,'')) || 0; recalcAmount(item)"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" inputmode="numeric"
                                               :value="formatMoney(item.unit_price)"
                                               @input="item.unit_price = parseMoney($event.target.value); $event.target.value = formatMoney(item.unit_price); recalcAmount(item)"
                                               @focus="if(item.unit_price === 0) $event.target.value = ''"
                                               @blur="if($event.target.value.trim() === '') { item.unit_price = 0; $event.target.value = '0'; }"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" inputmode="numeric"
                                               :value="formatMoney(item.amount)"
                                               @input="item.amount = parseMoney($event.target.value); $event.target.value = formatMoney(item.amount)"
                                               @focus="if(item.amount === 0) $event.target.value = ''"
                                               @blur="if($event.target.value.trim() === '') { item.amount = 0; $event.target.value = '0'; }"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.remark" placeholder="비고"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1 text-center">
                                        <button type="button" @click="removeItem(index)" class="text-red-400 hover:text-red-600 transition" x-show="formData.items.length > 1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="bg-gray-50 border-t border-gray-200">
                            <tr>
                                <td class="px-2 py-2 text-xs font-semibold text-gray-700 text-right" colspan="3">합계</td>
                                <td class="px-2 py-2 text-xs font-bold text-blue-700 text-right" x-text="formatMoney(totalAmount)"></td>
                                <td colspan="2" class="px-2 py-2">
                                    <button type="button" @click="addItem()" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ 행 추가</button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- 납품 정보 --}}
            <div class="grid gap-4 mb-4" style="grid-template-columns: 1fr 1fr 1fr;">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">납품업체</label>
                    <div x-data="prVendorSearch(formData, 'vendor')">
                        <input type="text" x-ref="vinput" :value="formData.vendor"
                               @input="onInput($event.target.value)"
                               @focus="onFocus()" @keydown.escape="close()"
                               @keydown.arrow-down.prevent="moveDown()" @keydown.arrow-up.prevent="moveUp()"
                               @keydown.enter.prevent="selectHighlighted()"
                               @blur="setTimeout(() => close(), 200)"
                               placeholder="거래처 검색"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">납품예정일</label>
                    <input type="date" x-model="formData.delivery_date"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">납품장소</label>
                    <input type="text" x-model="formData.delivery_place" placeholder="납품 장소"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            {{-- 지급방법 --}}
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-2">지급방법</label>
                <div class="flex gap-4">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="formData.payment_method" value="corporate_card"
                               class="rounded-full border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700">법인카드</span>
                    </label>
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="formData.payment_method" value="bank_transfer"
                               class="rounded-full border-gray-300 text-blue-600 focus:ring-blue-500">
                        <span class="text-sm text-gray-700">계좌이체</span>
                    </label>
                </div>
            </div>
        </div>
    </template>

    {{-- ═══════════════════════════════════════════ --}}
    {{-- 출장품의서 (pr_trip)                          --}}
    {{-- ═══════════════════════════════════════════ --}}
    <template x-if="prType === 'pr_trip'">
        <div>
            <div class="grid gap-4 mb-4" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));">
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">출장자 <span class="text-red-500">*</span></label>
                    <input type="text" x-model="formData.traveler" placeholder="출장자 성명"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">출장지 <span class="text-red-500">*</span></label>
                    <input type="text" x-model="formData.destination" placeholder="출장 목적지"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">출장 시작일</label>
                    <input type="date" x-model="formData.trip_start"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 mb-1">출장 종료일</label>
                    <input type="date" x-model="formData.trip_end"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">업무내용</label>
                <textarea x-model="formData.purpose" rows="2" placeholder="출장 업무 내용을 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            {{-- 출장 일정표 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">출장 일정</label>
                <div class="overflow-x-auto border border-gray-200 rounded-lg">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 110px;">일자</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 140px;">행선지</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 200px;">업무내용</th>
                                <th class="px-2 py-2" style="width: 40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(sch, idx) in formData.schedules" :key="sch._key">
                                <tr class="border-t border-gray-100">
                                    <td class="px-1 py-1">
                                        <input type="date" x-model="sch.date"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="sch.destination" placeholder="행선지"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="sch.task" placeholder="업무 내용"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1 text-center">
                                        <button type="button" @click="removeSchedule(idx)" class="text-red-400 hover:text-red-600 transition" x-show="formData.schedules.length > 1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="bg-gray-50 border-t border-gray-200">
                            <tr>
                                <td colspan="4" class="px-2 py-2">
                                    <button type="button" @click="addSchedule()" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ 일정 추가</button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {{-- 출장 경비 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">출장 경비</label>
                <div class="grid gap-3" style="grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));">
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">교통비</label>
                        <input type="text" inputmode="numeric"
                               :value="formatMoney(formData.trip_expenses.transport)"
                               @input="formData.trip_expenses.transport = parseMoney($event.target.value); $event.target.value = formatMoney(formData.trip_expenses.transport)"
                               @focus="if(formData.trip_expenses.transport === 0) $event.target.value = ''"
                               @blur="if($event.target.value.trim() === '') { formData.trip_expenses.transport = 0; $event.target.value = '0'; }"
                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-sm text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">숙박비</label>
                        <input type="text" inputmode="numeric"
                               :value="formatMoney(formData.trip_expenses.accommodation)"
                               @input="formData.trip_expenses.accommodation = parseMoney($event.target.value); $event.target.value = formatMoney(formData.trip_expenses.accommodation)"
                               @focus="if(formData.trip_expenses.accommodation === 0) $event.target.value = ''"
                               @blur="if($event.target.value.trim() === '') { formData.trip_expenses.accommodation = 0; $event.target.value = '0'; }"
                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-sm text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">식비</label>
                        <input type="text" inputmode="numeric"
                               :value="formatMoney(formData.trip_expenses.meal)"
                               @input="formData.trip_expenses.meal = parseMoney($event.target.value); $event.target.value = formatMoney(formData.trip_expenses.meal)"
                               @focus="if(formData.trip_expenses.meal === 0) $event.target.value = ''"
                               @blur="if($event.target.value.trim() === '') { formData.trip_expenses.meal = 0; $event.target.value = '0'; }"
                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-sm text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1">기타</label>
                        <input type="text" inputmode="numeric"
                               :value="formatMoney(formData.trip_expenses.other)"
                               @input="formData.trip_expenses.other = parseMoney($event.target.value); $event.target.value = formatMoney(formData.trip_expenses.other)"
                               @focus="if(formData.trip_expenses.other === 0) $event.target.value = ''"
                               @blur="if($event.target.value.trim() === '') { formData.trip_expenses.other = 0; $event.target.value = '0'; }"
                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-sm text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500 mb-1 font-semibold">합계</label>
                        <div class="px-2 py-1.5 bg-blue-50 border border-blue-200 rounded text-sm text-right font-bold text-blue-700" x-text="formatMoney(tripExpenseTotal)"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    {{-- ═══════════════════════════════════════════ --}}
    {{-- 비용정산품의서 (pr_settlement)                --}}
    {{-- ═══════════════════════════════════════════ --}}
    <template x-if="prType === 'pr_settlement'">
        <div>
            <div class="mb-4">
                <label class="block text-xs font-medium text-gray-600 mb-1">정산 사유</label>
                <textarea x-model="formData.purpose" rows="2" placeholder="비용 정산 사유를 기재해 주세요."
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            {{-- 비용 내역 테이블: 사용일자/항목/금액/비고 --}}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">비용 내역</label>
                <div class="overflow-x-auto border border-gray-200 rounded-lg">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 110px;">사용일자</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 180px;">항목</th>
                                <th class="px-2 py-2 text-right text-xs font-medium text-gray-600" style="min-width: 120px;">금액</th>
                                <th class="px-2 py-2 text-center text-xs font-medium text-gray-600" style="min-width: 130px;">지급방법</th>
                                <th class="px-2 py-2 text-left text-xs font-medium text-gray-600" style="min-width: 100px;">비고</th>
                                <th class="px-2 py-2" style="width: 40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in formData.items" :key="item._key">
                                <tr class="border-t border-gray-100">
                                    <td class="px-1 py-1">
                                        <input type="date" x-model="item.date"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.description" placeholder="비용 항목"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" inputmode="numeric"
                                               :value="formatMoney(item.amount)"
                                               @input="item.amount = parseMoney($event.target.value); $event.target.value = formatMoney(item.amount)"
                                               @focus="if(item.amount === 0) $event.target.value = ''"
                                               @blur="if($event.target.value.trim() === '') { item.amount = 0; $event.target.value = '0'; }"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs text-right focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1">
                                        <select x-model="item.payment_method"
                                                class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                            <option value="">선택</option>
                                            <option value="corporate_card">법인카드</option>
                                            <option value="personal_advance">개인선지출</option>
                                        </select>
                                    </td>
                                    <td class="px-1 py-1">
                                        <input type="text" x-model="item.remark" placeholder="비고"
                                               class="w-full px-2 py-1.5 border border-gray-200 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500">
                                    </td>
                                    <td class="px-1 py-1 text-center">
                                        <button type="button" @click="removeItem(index)" class="text-red-400 hover:text-red-600 transition" x-show="formData.items.length > 1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="bg-gray-50 border-t border-gray-200">
                            <tr>
                                <td class="px-2 py-2 text-xs font-semibold text-gray-700 text-right" colspan="2">합계</td>
                                <td class="px-2 py-2 text-xs font-bold text-blue-700 text-right" x-text="formatMoney(totalAmount)"></td>
                                <td colspan="3" class="px-2 py-2">
                                    <button type="button" @click="addItem()" class="text-xs text-blue-600 hover:text-blue-800 font-medium">+ 행 추가</button>
                                </td>
                            </tr>
                            <tr class="border-t border-gray-200">
                                <td colspan="2" class="px-2 py-2 text-xs font-semibold text-gray-700 text-right">법인카드</td>
                                <td class="px-2 py-2 text-xs font-medium text-gray-700 text-right" x-text="formatMoney(corporateCardTotal)"></td>
                                <td colspan="3"></td>
                            </tr>
                            <tr class="border-t border-gray-100">
                                <td colspan="2" class="px-2 py-2 text-xs font-semibold text-gray-700 text-right">개인선지출</td>
                                <td class="px-2 py-2 text-xs font-medium text-gray-700 text-right" x-text="formatMoney(personalAdvanceTotal)"></td>
                                <td colspan="3"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </template>

    {{-- 공통: 첨부서류 메모 --}}
    <div class="mb-4">
        <label class="block text-xs font-medium text-gray-600 mb-1">첨부서류</label>
        <textarea x-model="formData.attachment_memo" rows="2" placeholder="첨부서류 내역을 입력하세요 (견적서, 카탈로그 등)"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
    </div>

    {{-- 공통: 첨부파일 업로드 --}}
    <div class="mb-2">
        <label class="block text-xs font-medium text-gray-600 mb-1">첨부파일</label>
        <div @dragover.prevent="isDragging = true"
             @dragleave.prevent="isDragging = false"
             @drop.prevent="isDragging = false; handleDrop($event)"
             :class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-gray-50'"
             class="border-2 border-dashed rounded-lg p-4 text-center transition-colors cursor-pointer"
             @click="$refs.prFileInput.click()">
            <input type="file" x-ref="prFileInput" @change="handleFileSelect($event)" multiple class="hidden"
                   accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.jpg,.jpeg,.png,.gif,.zip,.rar">
            <div class="flex items-center justify-center gap-2 text-sm text-gray-500">
                <svg class="w-5 h-5" :class="isDragging ? 'text-blue-500' : 'text-gray-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                </svg>
                <span>파일을 드래그하거나 <span class="text-blue-600 font-medium">클릭하여 선택</span> (최대 20MB)</span>
            </div>
        </div>

        <div x-show="fileUploading" class="mt-2">
            <div class="flex items-center gap-2">
                <div class="flex-1 bg-gray-200 rounded-full h-1.5">
                    <div class="h-full bg-blue-600 rounded-full transition-all" :style="'width:' + fileProgress + '%'"></div>
                </div>
                <span class="text-xs text-gray-500 whitespace-nowrap" x-text="fileUploadStatus"></span>
            </div>
        </div>

        <div x-show="uploadedFiles.length > 0" class="mt-2 space-y-1">
            <template x-for="(f, idx) in uploadedFiles" :key="f.id">
                <div class="flex items-center gap-2 px-3 py-2 bg-gray-50 rounded-lg border border-gray-200 text-xs">
                    <svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                    </svg>
                    <span class="flex-1 truncate text-gray-700" x-text="f.name"></span>
                    <span class="text-gray-400 shrink-0" x-text="formatFileSize(f.size)"></span>
                    <button type="button" @click="removeFile(idx)" class="text-red-400 hover:text-red-600 shrink-0" title="삭제">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </template>
        </div>
    </div>
</div>

<script>
function purchaseRequestForm(initialData, authUserName, initialFiles) {
    let _keyCounter = 0;

    function makeItem(data) {
        return {
            _key: ++_keyCounter,
            date: data?.date || '',
            description: data?.description || '',
            quantity: parseInt(data?.quantity) || 0,
            unit_price: parseInt(data?.unit_price) || 0,
            amount: parseInt(data?.amount) || 0,
            remark: data?.remark || '',
            payment_method: data?.payment_method || '',
        };
    }

    function makeSchedule(data) {
        return {
            _key: ++_keyCounter,
            date: data?.date || '',
            destination: data?.destination || '',
            task: data?.task || '',
        };
    }

    const items = (initialData?.items && initialData.items.length > 0)
        ? initialData.items.map(makeItem)
        : [makeItem({})];

    const schedules = (initialData?.schedules && initialData.schedules.length > 0)
        ? initialData.schedules.map(makeSchedule)
        : [makeSchedule({})];

    const today = new Date().toISOString().slice(0, 10);

    return {
        prType: initialData?.pr_type || 'pr_purchase',

        prTypeLabels: {
            pr_expense: '지출품의서',
            pr_contract: '계약체결품의서',
            pr_purchase: '구매품의서',
            pr_trip: '출장품의서',
            pr_settlement: '비용정산품의서',
        },

        formData: {
            write_date: initialData?.write_date || today,
            department: initialData?.department || '',
            writer_name: initialData?.writer_name || authUserName,
            purpose: initialData?.purpose || '',
            attachment_memo: initialData?.attachment_memo || '',

            // pr_expense
            expense_category: initialData?.expense_category || '',
            usage_date: initialData?.usage_date || '',

            // pr_contract
            contract_party: initialData?.contract_party || '',
            contract_party_id: initialData?.contract_party_id || null,
            contract_party_biz_no: initialData?.contract_party_biz_no || '',
            contract_content: initialData?.contract_content || '',
            contract_start: initialData?.contract_start || '',
            contract_end: initialData?.contract_end || '',
            contract_amount: parseInt(initialData?.contract_amount) || 0,
            contract_scope: initialData?.contract_scope || '',
            delivery_service: initialData?.delivery_service || '',
            payment_terms: initialData?.payment_terms || '',
            special_terms: initialData?.special_terms || '',

            // pr_purchase
            vendor: initialData?.vendor || '',
            vendor_id: initialData?.vendor_id || null,
            vendor_biz_no: initialData?.vendor_biz_no || '',
            delivery_date: initialData?.delivery_date || '',
            delivery_place: initialData?.delivery_place || '',
            payment_method: initialData?.payment_method || '',

            // pr_trip
            traveler: initialData?.traveler || authUserName,
            destination: initialData?.destination || '',
            trip_start: initialData?.trip_start || '',
            trip_end: initialData?.trip_end || '',
            schedules: schedules,
            trip_expenses: {
                transport: parseInt(initialData?.trip_expenses?.transport) || 0,
                accommodation: parseInt(initialData?.trip_expenses?.accommodation) || 0,
                meal: parseInt(initialData?.trip_expenses?.meal) || 0,
                other: parseInt(initialData?.trip_expenses?.other) || 0,
            },

            // shared items
            items: items,
        },

        isDragging: false,
        fileUploading: false,
        fileProgress: 0,
        fileUploadStatus: '',
        uploadedFiles: initialFiles || [],

        get totalAmount() {
            return this.formData.items.reduce((sum, item) => sum + (parseInt(item.amount) || 0), 0);
        },

        get corporateCardTotal() {
            return this.formData.items.filter(i => i.payment_method === 'corporate_card').reduce((sum, i) => sum + (parseInt(i.amount) || 0), 0);
        },

        get personalAdvanceTotal() {
            return this.formData.items.filter(i => i.payment_method === 'personal_advance').reduce((sum, i) => sum + (parseInt(i.amount) || 0), 0);
        },

        get tripExpenseTotal() {
            const e = this.formData.trip_expenses;
            return (parseInt(e.transport) || 0) + (parseInt(e.accommodation) || 0) + (parseInt(e.meal) || 0) + (parseInt(e.other) || 0);
        },

        setPrType(type) {
            this.prType = type;
            // 타입 변경 시 items/schedules 초기화 (신규 작성 시만)
            if (!initialData?.pr_type) {
                this.formData.items = [makeItem({})];
                this.formData.schedules = [makeSchedule({})];
            }
        },

        addItem() {
            this.formData.items.push(makeItem({}));
        },

        removeItem(index) {
            if (this.formData.items.length > 1) {
                this.formData.items.splice(index, 1);
            }
        },

        addSchedule() {
            this.formData.schedules.push(makeSchedule({}));
        },

        removeSchedule(index) {
            if (this.formData.schedules.length > 1) {
                this.formData.schedules.splice(index, 1);
            }
        },

        recalcAmount(item) {
            const qty = parseInt(item.quantity) || 0;
            const price = parseInt(item.unit_price) || 0;
            if (qty > 0 && price > 0) {
                item.amount = qty * price;
            }
        },

        formatMoney(value) {
            const num = parseInt(value) || 0;
            return num === 0 ? '0' : num.toLocaleString('ko-KR');
        },

        parseMoney(str) {
            return parseInt(String(str).replace(/[^0-9-]/g, '')) || 0;
        },

        formatFileSize(bytes) {
            if (!bytes) return '';
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / 1048576).toFixed(1) + ' MB';
        },

        handleDrop(event) {
            this.uploadFiles(Array.from(event.dataTransfer.files));
        },

        handleFileSelect(event) {
            this.uploadFiles(Array.from(event.target.files));
            event.target.value = '';
        },

        async uploadFiles(files) {
            if (this.fileUploading || files.length === 0) return;
            const maxSize = 20 * 1024 * 1024;
            const valid = files.filter(f => {
                if (f.size > maxSize) { showToast(`${f.name}: 20MB를 초과합니다.`, 'warning'); return false; }
                return true;
            });
            if (valid.length === 0) return;

            this.fileUploading = true;
            this.fileProgress = 0;
            let completed = 0;
            for (const file of valid) {
                this.fileUploadStatus = `${completed + 1}/${valid.length} 업로드 중...`;
                try {
                    const result = await this.uploadSingle(file, (p) => {
                        this.fileProgress = Math.round(((completed + p / 100) / valid.length) * 100);
                    });
                    this.uploadedFiles.push(result);
                    completed++;
                } catch (e) { showToast(`${file.name} 업로드 실패`, 'error'); }
            }
            this.fileProgress = 100;
            this.fileUploadStatus = '완료';
            setTimeout(() => { this.fileUploading = false; this.fileProgress = 0; }, 800);
        },

        uploadSingle(file, onProgress) {
            return new Promise((resolve, reject) => {
                const fd = new FormData();
                fd.append('file', file);
                const xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', (e) => {
                    if (e.lengthComputable) onProgress(Math.round(e.loaded / e.total * 100));
                });
                xhr.onload = () => {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        const res = JSON.parse(xhr.responseText);
                        if (res.success) resolve(res.data); else reject(new Error(res.message));
                    } else { reject(new Error('업로드 실패')); }
                };
                xhr.onerror = () => reject(new Error('네트워크 오류'));
                xhr.open('POST', '/api/admin/approvals/upload-file');
                xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
                xhr.setRequestHeader('Accept', 'application/json');
                xhr.send(fd);
            });
        },

        async removeFile(index) {
            const file = this.uploadedFiles[index];
            try {
                await fetch(`/api/admin/approvals/files/${file.id}`, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, 'Accept': 'application/json' },
                });
            } catch (e) {}
            this.uploadedFiles.splice(index, 1);
        },

        getFormData() {
            const base = {
                pr_type: this.prType,
                write_date: this.formData.write_date,
                department: this.formData.department,
                writer_name: this.formData.writer_name,
                purpose: this.formData.purpose,
                attachment_memo: this.formData.attachment_memo,
            };

            const cleanItems = () => this.formData.items.map(item => ({
                date: item.date || '',
                description: item.description,
                quantity: parseInt(item.quantity) || 0,
                unit_price: parseInt(item.unit_price) || 0,
                amount: parseInt(item.amount) || 0,
                remark: item.remark,
            }));

            if (this.prType === 'pr_expense') {
                return { ...base, expense_category: this.formData.expense_category, usage_date: this.formData.usage_date, items: cleanItems(), total_amount: this.totalAmount };
            }
            if (this.prType === 'pr_contract') {
                return { ...base, contract_party: this.formData.contract_party, contract_party_id: this.formData.contract_party_id, contract_party_biz_no: this.formData.contract_party_biz_no, contract_content: this.formData.contract_content, contract_start: this.formData.contract_start, contract_end: this.formData.contract_end, contract_amount: parseInt(this.formData.contract_amount) || 0, contract_scope: this.formData.contract_scope, delivery_service: this.formData.delivery_service, payment_terms: this.formData.payment_terms, special_terms: this.formData.special_terms };
            }
            if (this.prType === 'pr_purchase') {
                return { ...base, items: cleanItems(), total_amount: this.totalAmount, vendor: this.formData.vendor, vendor_id: this.formData.vendor_id, vendor_biz_no: this.formData.vendor_biz_no, delivery_date: this.formData.delivery_date, delivery_place: this.formData.delivery_place, payment_method: this.formData.payment_method };
            }
            if (this.prType === 'pr_trip') {
                return { ...base, traveler: this.formData.traveler, destination: this.formData.destination, trip_start: this.formData.trip_start, trip_end: this.formData.trip_end, schedules: this.formData.schedules.map(s => ({ date: s.date, destination: s.destination, task: s.task })), trip_expenses: { ...this.formData.trip_expenses }, trip_expense_total: this.tripExpenseTotal };
            }
            if (this.prType === 'pr_settlement') {
                const settlementItems = this.formData.items.map(item => ({
                    date: item.date,
                    description: item.description,
                    amount: parseInt(item.amount) || 0,
                    payment_method: item.payment_method,
                    remark: item.remark,
                }));
                return { ...base, items: settlementItems, total_amount: this.totalAmount, corporate_card_total: this.corporateCardTotal, personal_advance_total: this.personalAdvanceTotal };
            }
            return base;
        },

        getFileIds() {
            return this.uploadedFiles.map(f => f.id);
        },
    };
}

function prVendorSearch(target, fieldName) {
    let debounceTimer = null;
    let dropdown = null;
    let results = [];
    let highlighted = -1;
    let selected = false;

    function removeDropdown() {
        if (dropdown) { dropdown.remove(); dropdown = null; }
        results = [];
        highlighted = -1;
    }

    function renderDropdown(inputEl) {
        if (!dropdown) {
            dropdown = document.createElement('div');
            dropdown.style.cssText = 'position:fixed;z-index:99999;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,0.15);max-height:220px;overflow-y:auto;min-width:220px;';
            document.body.appendChild(dropdown);
        }
        const rect = inputEl.getBoundingClientRect();
        dropdown.style.top = rect.bottom + 2 + 'px';
        dropdown.style.left = rect.left + 'px';
        dropdown.style.width = rect.width + 'px';

        if (results.length === 0) {
            dropdown.innerHTML = '<div style="padding:8px 12px;font-size:12px;color:#9ca3af;">검색 결과 없음</div>';
            return;
        }
        dropdown.innerHTML = results.map((p, i) => {
            const bg = i === highlighted ? 'background:#eff6ff;' : '';
            const d = document.createElement('div');
            d.textContent = p.name;
            const safeName = d.innerHTML;
            const bizInfo = [p.biz_no, p.ceo ? '대표: ' + p.ceo : ''].filter(Boolean).join('  ');
            d.textContent = bizInfo;
            const safeBiz = d.innerHTML;
            return `<div data-idx="${i}" style="padding:6px 8px;cursor:pointer;border-bottom:1px solid #f9fafb;${bg}" onmouseenter="this.style.background='#eff6ff'" onmouseleave="this.style.background=''">
                <div style="font-size:12px;font-weight:500;color:#1f2937;">${safeName}</div>
                ${safeBiz ? '<div style="font-size:11px;color:#9ca3af;margin-top:1px;">' + safeBiz + '</div>' : ''}
            </div>`;
        }).join('');

        dropdown.querySelectorAll('[data-idx]').forEach(el => {
            el.addEventListener('mousedown', (e) => {
                e.preventDefault();
                const idx = parseInt(el.dataset.idx);
                if (results[idx]) {
                    target[fieldName] = results[idx].name;
                    target[fieldName + '_id'] = results[idx].id;
                    target[fieldName + '_biz_no'] = results[idx].biz_no || '';
                    inputEl.value = results[idx].name;
                    selected = true;
                }
                removeDropdown();
                inputEl.blur();
            });
        });
    }

    return {
        onInput(value) {
            if (selected) { selected = false; return; }
            target[fieldName] = value;
            target[fieldName + '_id'] = null;
            target[fieldName + '_biz_no'] = '';
            highlighted = -1;
            clearTimeout(debounceTimer);
            if (value.length < 1) { removeDropdown(); return; }
            debounceTimer = setTimeout(() => this.search(value), 250);
        },
        onFocus() {
            if (selected) return;
            const val = target[fieldName];
            if (val && val.length >= 1 && !dropdown) this.search(val);
        },
        async search(keyword) {
            try {
                const res = await fetch(`/barobill/tax-invoice/search-partners?keyword=${encodeURIComponent(keyword)}`);
                results = await res.json();
                highlighted = -1;
                renderDropdown(this.$refs.vinput);
            } catch (e) { results = []; removeDropdown(); }
        },
        close() { removeDropdown(); },
        moveDown() {
            if (!dropdown || results.length === 0) return;
            clearTimeout(debounceTimer);
            highlighted = (highlighted + 1) % results.length;
            renderDropdown(this.$refs.vinput);
        },
        moveUp() {
            if (!dropdown || results.length === 0) return;
            clearTimeout(debounceTimer);
            highlighted = highlighted <= 0 ? results.length - 1 : highlighted - 1;
            renderDropdown(this.$refs.vinput);
        },
        selectHighlighted() {
            if (highlighted >= 0 && highlighted < results.length) {
                const p = results[highlighted];
                target[fieldName] = p.name;
                target[fieldName + '_id'] = p.id;
                target[fieldName + '_biz_no'] = p.biz_no || '';
                this.$refs.vinput.value = p.name;
                selected = true;
                removeDropdown();
                this.$refs.vinput.blur();
            }
        },
    };
}
</script>