{{--
    연차유급휴가 사용촉진 통지서 (2차) 전용 폼
    Props:
        $tenantInfo (array) - 테넌트(회사) 정보
        $employees (Collection) - 직원 목록
--}}
@php
    $tenantInfo = $tenantInfo ?? [];
    $employees = $employees ?? collect();
@endphp

<div id="leave-promotion-2nd-form-container" style="display: none;" class="mb-4"
     x-data="{
        dates: [{ date: '' }],
        addDate() { this.dates.push({ date: '' }); },
        removeDate(i) { if (this.dates.length > 1) this.dates.splice(i, 1); },
     }">
    <input type="hidden" id="lp2-company-name" value="{{ $tenantInfo['company_name'] ?? '' }}">
    <input type="hidden" id="lp2-ceo-name" value="{{ $tenantInfo['ceo_name'] ?? '' }}">

    <div class="space-y-4">
        {{-- 1. 수신자 정보 --}}
        <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 300px; max-width: 400px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">대상 직원 <span class="text-red-500">*</span></label>
                        <select id="lp2-user-id" onchange="loadLp2EmployeeInfo(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">
                            <option value="">-- 직원 선택 --</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->user_id }}"
                                        data-department="{{ $emp->department?->name ?? '' }}"
                                        data-position="{{ $emp->position_key ?? '' }}">
                                    {{ $emp->display_name }} {{ $emp->department?->name ? '('.$emp->department->name.')' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="flex gap-4 flex-wrap">
                    <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="lp2-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 150px; max-width: 200px;">
                        <label class="block text-xs font-medium text-gray-500 mb-1">직급</label>
                        <input type="text" id="lp2-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>
            </div>
        </div>

        {{-- 2. 잔여 연차 --}}
        <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">
                <div style="max-width: 150px;">
                    <label class="block text-xs font-medium text-gray-500 mb-1">잔여연차 <span class="text-red-500">*</span></label>
                    <input type="number" id="lp2-remaining-days" min="0" step="0.5" value="10"
                           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 text-center font-semibold text-amber-800 bg-amber-50">
                </div>
            </div>
        </div>

        {{-- 3. 회사 지정 휴가일 --}}
        <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. 회사 지정 휴가일 <span class="text-red-500">*</span></h3>
            </div>
            <div class="p-4">
                <template x-for="(item, index) in dates" :key="index">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="text-xs text-gray-400 shrink-0" style="width: 24px;" x-text="(index+1) + '.'"></span>
                        <input type="date" x-model="item.date"
                               class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                               style="width: 200px;">
                        <button type="button" @click="removeDate(index)" x-show="dates.length > 1"
                                class="p-1 text-red-400 hover:text-red-600 transition">
                            <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>
                    </div>
                </template>
                <button type="button" @click="addDate()"
                        class="mt-1 text-xs text-blue-600 hover:text-blue-800 font-medium inline-flex items-center gap-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    휴가일 추가
                </button>
                <p class="text-xs text-gray-400 mt-2">* 잔여연차 일수만큼 지정해주세요.</p>
            </div>
        </div>

        {{-- 4. 통지 내용 (법적 문구) --}}
        <div class="border border-red-200 rounded-lg overflow-hidden">
            <div class="bg-red-50 px-4 py-2 border-b border-red-200">
                <h3 class="text-sm font-semibold text-red-700">4. 법적 통지 문구</h3>
            </div>
            <div class="p-4">
                <div class="text-xs text-gray-600 leading-relaxed space-y-2 bg-gray-50 p-3 rounded border border-gray-200">
                    <p>귀하는 연차 사용촉진 1차 통보 이후에도 연차 사용 시기를 제출하지 않아 근로기준법 제61조에 따라 회사가 다음과 같이 휴가 사용일을 지정합니다.</p>
                    <p>위 지정된 날짜에 연차휴가를 사용하여 주시기 바랍니다.</p>
                    <p class="text-red-600 font-medium">본 통지서는 근로기준법 제61조에 따른 연차 사용촉진 절차에 의한 통보입니다.</p>
                </div>
            </div>
        </div>

        {{-- 미리보기 버튼 --}}
        <div class="flex justify-end">
            <button type="button" onclick="openLp2Preview()"
                    class="px-3 py-2 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 border border-indigo-200 rounded-lg text-sm font-medium transition inline-flex items-center gap-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                </svg>
                미리보기
            </button>
        </div>
    </div>
</div>

{{-- 2차 통지서 미리보기 모달 --}}
<div id="lp2-preview-modal" style="display: none;" class="fixed inset-0 z-50">
    <div class="absolute inset-0 bg-black/50" onclick="closeLp2Preview()"></div>
    <div class="relative flex items-center justify-center min-h-full p-4">
        <div class="bg-white rounded-xl shadow-2xl w-full overflow-hidden relative" style="max-width: 780px;">
            <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200 bg-gray-50">
                <h3 class="text-base font-semibold text-gray-800">2차 통지서 미리보기</h3>
                <div class="flex items-center gap-2">
                    <button type="button" onclick="printLp2Preview()"
                            class="px-3 py-1.5 bg-white border border-gray-300 hover:bg-gray-50 rounded-lg text-xs font-medium transition inline-flex items-center gap-1">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                        </svg>
                        인쇄
                    </button>
                    <button type="button" onclick="closeLp2Preview()"
                            class="p-1 text-gray-400 hover:text-gray-600 transition">
                        <svg class="w-5 h-5" 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>
            </div>
            <div class="overflow-y-auto" style="max-height: 80vh;">
                <div id="lp2-preview-content" style="padding: 40px 48px; font-family: 'Pretendard', 'Malgun Gothic', sans-serif;"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function loadLp2EmployeeInfo(userId) {
    const sel = document.getElementById('lp2-user-id');
    const opt = sel.options[sel.selectedIndex];
    document.getElementById('lp2-department').value = opt?.dataset?.department || '';
    document.getElementById('lp2-position').value = opt?.dataset?.position || '';
}

function getLp2Dates() {
    const container = document.getElementById('leave-promotion-2nd-form-container');
    const alpine = container._x_dataStack?.[0];
    if (!alpine) return [];
    return alpine.dates.filter(d => d.date).map(d => d.date);
}

function buildLp2PreviewHtml(data) {
    let datesHtml = '';
    if (data.designated_dates && data.designated_dates.length > 0) {
        datesHtml = '<table style="width:100%;border-collapse:collapse;font-size:13px;">';
        datesHtml += '<tr><th style="padding:6px 12px;border:1px solid #ddd;background:#f8f9fa;width:60px;">순번</th>' +
            '<th style="padding:6px 12px;border:1px solid #ddd;background:#f8f9fa;">지정 휴가일</th></tr>';
        data.designated_dates.forEach((d, i) => {
            datesHtml += '<tr><td style="padding:6px 12px;border:1px solid #ddd;text-align:center;">' + (i + 1) + '</td>' +
                '<td style="padding:6px 12px;border:1px solid #ddd;text-align:center;">' + d + '</td></tr>';
        });
        datesHtml += '</table>';
    }

    return '<div style="text-align:center;margin-bottom:32px;">' +
        '<h1 style="font-size:20px;font-weight:800;margin:0;letter-spacing:4px;">연차유급휴가 사용촉진 통지서 (2차)</h1>' +
        '</div>' +
        '<div style="border-bottom:2px solid #333;padding-bottom:12px;margin-bottom:24px;font-size:13px;line-height:2;">' +
        '<div><span style="display:inline-block;width:60px;font-weight:600;">수신</span> : ' + (data.employee_name || '') + '</div>' +
        '<div><span style="display:inline-block;width:60px;font-weight:600;">부서</span> : ' + (data.department || '') + '</div>' +
        '<div><span style="display:inline-block;width:60px;font-weight:600;">직급</span> : ' + (data.position || '') + '</div>' +
        '</div>' +
        '<div style="font-size:13px;line-height:1.8;margin-bottom:24px;">' +
        '<p>귀하는 연차 사용촉진 1차 통보 이후에도 연차 사용 시기를 제출하지 않아 근로기준법 제61조에 따라 회사가 다음과 같이 휴가 사용일을 지정합니다.</p>' +
        '</div>' +
        '<div style="margin:24px 0;padding:16px 20px;border:1px solid #ddd;border-radius:4px;">' +
        '<div style="font-size:13px;font-weight:700;margin-bottom:8px;">■ 연차 현황 : 잔여 연차 <span style="color:#dc2626;">' + (data.remaining_days || 0) + '</span>일</div>' +
        '</div>' +
        '<div style="margin:24px 0;padding:16px 20px;border:1px solid #dc2626;border-radius:4px;background:#fef2f2;">' +
        '<div style="font-size:13px;font-weight:700;margin-bottom:12px;">■ 회사 지정 휴가일</div>' +
        datesHtml +
        '</div>' +
        '<div style="font-size:13px;line-height:1.8;margin-bottom:16px;">' +
        '<p>위 지정된 날짜에 연차휴가를 사용하여 주시기 바랍니다.</p>' +
        '</div>' +
        '<div style="font-size:12px;line-height:1.8;margin:24px 0;padding:12px 16px;background:#f8f9fa;border-radius:4px;color:#666;">' +
        '<p>본 통지서는 근로기준법 제61조에 따른 연차 사용촉진 절차에 의한 통보입니다.</p>' +
        '</div>' +
        '<div style="text-align:center;margin:40px 0 16px;font-size:14px;">' +
        '<span>' + (data.company_name || '') + '</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
        '<span>대표이사&nbsp;&nbsp;&nbsp;' + (data.ceo_name || '') + '</span>&nbsp;&nbsp;' +
        '<span style="color:#999;">[직인날인]</span>' +
        '</div>' +
        '<div style="border-top:2px solid #333;padding-top:12px;margin-top:24px;">' +
        '<div style="font-size:12px;color:#666;text-align:center;">□ 본인은 위 내용을 확인하였습니다.</div>' +
        '<div style="text-align:right;margin-top:12px;font-size:12px;color:#999;">서명: ________________________&nbsp;&nbsp;&nbsp;일자: ____년 ____월 ____일</div>' +
        '</div>';
}

function getLp2Data() {
    const sel = document.getElementById('lp2-user-id');
    const opt = sel.options[sel.selectedIndex];
    return {
        employee_name: opt?.text?.replace(/\s*\(.*\)/, '') || '',
        employee_id: sel.value,
        department: document.getElementById('lp2-department').value,
        position: document.getElementById('lp2-position').value,
        remaining_days: parseFloat(document.getElementById('lp2-remaining-days').value) || 0,
        designated_dates: getLp2Dates(),
        company_name: document.getElementById('lp2-company-name').value,
        ceo_name: document.getElementById('lp2-ceo-name').value,
    };
}

function openLp2Preview() {
    document.getElementById('lp2-preview-content').innerHTML = buildLp2PreviewHtml(getLp2Data());
    document.getElementById('lp2-preview-modal').style.display = '';
}
function closeLp2Preview() { document.getElementById('lp2-preview-modal').style.display = 'none'; }
function printLp2Preview() {
    const content = document.getElementById('lp2-preview-content').innerHTML;
    const win = window.open('', '_blank');
    win.document.write('<html><head><title>연차사용촉진 2차 통지서</title><style>body{font-family:"Pretendard","Malgun Gothic",sans-serif;padding:40px 48px;}@media print{body{padding:20px 30px;}}</style></head><body>' + content + '</body></html>');
    win.document.close();
    win.print();
}
</script>
@endpush
