sam-manage/resources/views/approvals/partials/_certificate-form.blade.php

{{--
    재직증명서 전용 폼
    Props:
        $employees (Collection) - 활성 사원 목록
--}}
@php
    $employees = $employees ?? collect();
    $currentUserId = auth()->id();
@endphp

<div id="cert-form-container" style="display: none;" class="mb-4">
    <div class="space-y-4">
        {{-- 대상 사원 --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">대상 사원 <span class="text-red-500">*</span></label>
            <select id="cert-user-id" onchange="loadCertInfo(this.value)"
                    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"
                    style="max-width: 300px;">
                @foreach($employees as $emp)
                    <option value="{{ $emp->user_id }}" {{ $emp->user_id == $currentUserId ? 'selected' : '' }}>
                        {{ $emp->display_name }}
                    </option>
                @endforeach
            </select>
        </div>

        {{-- 인적사항 --}}
        <div class="border border-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
                <h3 class="text-sm font-semibold text-gray-700">1. 인적사항</h3>
            </div>
            <div class="p-4 space-y-3">
                <div class="flex gap-4 flex-wrap">
                    <div style="flex: 1 1 200px; max-width: 300px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">성명</label>
                        <input type="text" id="cert-name" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                    <div style="flex: 1 1 200px; max-width: 300px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">주민등록번호</label>
                        <input type="text" id="cert-resident" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">주소 <span class="text-blue-500 text-xs">(수정 가능)</span></label>
                    <input type="text" id="cert-address"
                           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>

        {{-- 재직사항 --}}
        <div class="border border-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
                <h3 class="text-sm font-semibold text-gray-700">2. 재직사항</h3>
            </div>
            <div class="p-4 space-y-3">
                <div class="flex gap-4 flex-wrap">
                    <div style="flex: 1 1 250px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">회사명</label>
                        <input type="text" id="cert-company" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                    <div style="flex: 1 1 200px; max-width: 250px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">사업자번호</label>
                        <input type="text" id="cert-business-num" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                </div>
                <div class="flex gap-4 flex-wrap">
                    <div style="flex: 1 1 200px; max-width: 200px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">근무부서</label>
                        <input type="text" id="cert-department" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                    <div style="flex: 1 1 200px; max-width: 200px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">직급</label>
                        <input type="text" id="cert-position" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                    <div style="flex: 1 1 200px; max-width: 200px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">재직기간</label>
                        <input type="text" id="cert-hire-date" readonly
                               class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700">
                    </div>
                </div>
            </div>
        </div>

        {{-- 발급정보 --}}
        <div class="border border-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
                <h3 class="text-sm font-semibold text-gray-700">3. 발급정보</h3>
            </div>
            <div class="p-4 space-y-3">
                <div class="flex gap-4 flex-wrap">
                    <div style="flex: 1 1 250px; max-width: 300px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">사용용도 <span class="text-red-500">*</span></label>
                        <select id="cert-purpose-select" onchange="onCertPurposeChange()"
                                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">
                            <option value="은행 제출용">은행 제출용</option>
                            <option value="관공서 제출용">관공서 제출용</option>
                            <option value="비자 신청용">비자 신청용</option>
                            <option value="대출 신청용">대출 신청용</option>
                            <option value="__custom__">기타 (직접입력)</option>
                        </select>
                    </div>
                    <div id="cert-purpose-custom-wrap" style="flex: 1 1 250px; max-width: 300px; display: none;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">직접입력</label>
                        <input type="text" id="cert-purpose-custom" 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 style="max-width: 200px;">
                    <label class="block text-xs font-medium text-gray-500 mb-1">발급일</label>
                    <input type="text" id="cert-issue-date" readonly
                           class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-700"
                           value="{{ now()->format('Y-m-d') }}">
                </div>
            </div>
        </div>
    </div>
</div>