@extends('layouts.app')
@section('title', 'Surat Keterangan Kerja')

@section('content')
<div class="space-y-6">

    {{-- ===== HEADER ===== --}}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center">
                <i class="fas fa-file-contract text-white"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900">Surat Keterangan Kerja</h1>
                <p class="text-sm text-gray-500">Generate surat paklaring & surat aktif kerja</p>
            </div>
        </div>
        <div class="hidden md:flex items-center gap-3">
            <div class="bg-white border border-gray-100 rounded-xl px-4 py-2 flex items-center gap-2 shadow-sm">
                <div class="w-7 h-7 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <i class="fas fa-calendar text-emerald-500 text-xs"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-400">Bulan Ini</p>
                    <p class="text-sm font-bold text-emerald-600">{{ ($stats ?? [])['bulan_ini'] ?? 0 }} Surat</p>
                </div>
            </div>
            <div class="bg-white border border-gray-100 rounded-xl px-4 py-2 flex items-center gap-2 shadow-sm">
                <div class="w-7 h-7 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <i class="fas fa-archive text-emerald-500 text-xs"></i>
                </div>
                <div>
                    <p class="text-xs text-gray-400">Total</p>
                    <p class="text-sm font-bold text-emerald-600">{{ ($stats ?? [])['total'] ?? 0 }} Surat</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== STEP INDICATOR ===== --}}
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
        <div class="flex items-center justify-center gap-2">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-emerald-600 text-white" id="step1Circle">1</div>
                <span class="text-sm font-semibold text-gray-700" id="step1Label">Generate Nomor Surat</span>
            </div>
            <div class="flex-1 max-w-[60px] h-1 rounded-full mx-2 bg-gray-200" id="stepLine"></div>
            <div class="flex items-center gap-2 opacity-40" id="stepIndicator2">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-emerald-300 text-gray-500" id="step2Circle">2</div>
                <span class="text-sm font-semibold text-gray-500" id="step2Label">Pilih Karyawan & Generate</span>
            </div>
        </div>
    </div>

    {{-- ===== STEP 1 ===== --}}
    <div id="panelStep1" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-2">
            <div class="flex items-center justify-center">
            </div>
            <div>
                <h2 class="font-bold text-gray-800 text-sm">1. Generate Nomor Surat</h2>
                <p class="text-xs text-gray-500">Nomor akan otomatis teregister di arsip surat</p>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Nama Pembuat Surat </label>
                <input type="text" id="pembuatSurat" 
                    class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition ">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1.5">Keterangan </label>
                <textarea id="keterangan" rows="2"
                    class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition resize-none"></textarea>
            </div>
            <button type="button" id="btnGenerateNomor" onclick="generateNomor()"
                class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2">
                <i class="fas fa"></i> Generate Nomor Surat
            </button>
        </div>
    </div>

    {{-- ===== STEP 2 (hidden) ===== --}}
    <div id="panelStep2" class="hidden space-y-4">

        {{-- Nomor result --}}
        <div class="bg-gradient-to-r from-emerald-50 to-emerald-50 rounded-xl border border-emerald-200 p-5">
            <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-full bg-emerald-600 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-check text-white"></i>
                </div>
                <div class="flex-1">
                    <p class="text-xs text-emerald-600 font-semibold mb-1">Nomor Surat Berhasil Digenerate</p>
                    <p class="text-xl font-bold font-mono text-emerald-800" id="displayNomor">—</p>
                    <div class="mt-2 flex flex-wrap gap-3">
                        <span class="text-xs text-emerald-600"><i class="fas fa-user mr-1"></i><span id="displayPembuat">—</span></span>
                        <span class="text-xs text-emerald-600"><i class="fas fa-building mr-1"></i><span id="displayDivisi">—</span></span>
                    </div>
                </div>
                <button onclick="resetToStep1()" class="text-xs text-emerald-500 hover:text-blue-700 font-semibold flex items-center gap-1 transition">
                    <i class="fas fa-redo text-xs"></i> Ulang
                </button>
            </div>
        </div>

        {{-- Form step 2 --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <i class="fas fa-users text-indigo-600 text-sm"></i>
                </div>
                <div>
                    <h2 class="font-bold text-gray-800 text-sm">2. Pilih Jenis Surat & Karyawan</h2>
                    <p class="text-xs text-gray-500">Pilih jenis surat lalu cari karyawan yang dituju</p>
                </div>
            </div>
            <div class="p-6 space-y-5">

                {{-- Jenis Surat --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-2">Jenis Surat <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 gap-3">
                        <button type="button" onclick="selectJenis('paklaring')" id="card_paklaring"
                            class="jenis-card relative p-4 rounded-xl border-2 border-gray-200 text-left hover:border-emerald-300 transition group">
                            <div class="flex items-start gap-3">
                                <div class="w-9 h-9 rounded-lg bg-red-50 group-hover:bg-red-100 flex items-center justify-center transition flex-shrink-0">
                                    <i class="fas fa-file-alt text-red-500 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-gray-700">Surat Paklaring</p>
                                    <p class="text-xs text-gray-400 mt-0.5">Karyawan resign / keluar</p>
                                </div>
                            </div>
                            <div class="jenis-radio absolute top-3 right-3 w-5 h-5 rounded-full border-2 border-gray-300 hidden items-center justify-center">
                                <div class="w-2.5 h-2.5 rounded-full bg-emerald-600"></div>
                            </div>
                        </button>
                        <button type="button" onclick="selectJenis('aktif_kerja')" id="card_aktif_kerja"
                            class="jenis-card relative p-4 rounded-xl border-2 border-gray-200 text-left hover:border-emerald-300 transition group">
                            <div class="flex items-start gap-3">
                                <div class="w-9 h-9 rounded-lg bg-emerald-50 group-hover:bg-emerald-100 flex items-center justify-center transition flex-shrink-0">
                                    <i class="fas fa-file-contract text-emerald-500 text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-gray-700">Surat Aktif Kerja</p>
                                    <p class="text-xs text-gray-400 mt-0.5">Karyawan masih aktif</p>
                                </div>
                            </div>
                            <div class="jenis-radio absolute top-3 right-3 w-5 h-5 rounded-full border-2 border-gray-300 hidden items-center justify-center">
                                <div class="w-2.5 h-2.5 rounded-full bg-emerald-600"></div>
                            </div>
                        </button>
                    </div>
                    <input type="hidden" id="selectedJenis" value="">
                </div>

                {{-- Keperluan (aktif_kerja only) --}}
                <div id="keperluanSection" class="hidden">
                    <div class="bg-emerald-50 border border-emerald-100 rounded-xl p-4">
                        <label class="block text-xs font-semibold text-emerald-700 mb-1.5">
                            <i class="fas fa-info-circle mr-1"></i>Keperluan Surat <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="keperluanSurat"
                            placeholder="Contoh: administrasi pengambilan saldo JHT 10% di BPJS Ketenagakerjaan"
                            class="w-full px-3 py-2 border border-emerald-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition bg-white">
                        <p class="text-xs text-emerald-500 mt-1.5">
                            <i class="fas fa-lightbulb mr-1"></i>Teks ini masuk ke surat: "...sebagai syarat: <strong id="previewKeperluan">—</strong>"
                        </p>
                    </div>
                </div>

                {{-- Cari karyawan --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Cari Karyawan <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="text" id="searchKaryawan" placeholder="Ketik nama, NIK, atau departemen..." autocomplete="off"
                            class="w-full pl-9 pr-9 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                        <button type="button" id="clearKaryawan" onclick="clearKaryawan()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-300 hover:text-gray-500 hidden">
                            <i class="fas fa-times text-xs"></i>
                        </button>
                    </div>
                    <input type="hidden" id="selectedKaryawanId" value="">
                    <div id="searchDropdown" class="hidden relative z-50">
                        <div class="absolute top-1 left-0 right-0 bg-white border border-gray-200 rounded-xl shadow-xl max-h-64 overflow-y-auto">
                            <div id="searchResults"></div>
                        </div>
                    </div>
                </div>

                {{-- Preview karyawan --}}
                <div id="karyawanPreview" class="hidden bg-gray-50 border border-gray-200 rounded-xl p-4">
                    <div class="flex items-center justify-between mb-3">
                        <p class="text-xs font-semibold text-gray-600"><i class="fas fa-id-card mr-1"></i>Data Karyawan</p>
                        <button type="button" onclick="clearKaryawan()" class="text-xs text-gray-400 hover:text-gray-600">
                            <i class="fas fa-times"></i> Ganti
                        </button>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">NIK</p>
                            <p class="font-semibold text-gray-800 text-sm" id="pvNik">—</p>
                        </div>
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">Nama</p>
                            <p class="font-semibold text-gray-800 text-sm" id="pvNama">—</p>
                        </div>
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">Departemen</p>
                            <p class="font-semibold text-gray-800 text-sm" id="pvDept">—</p>
                        </div>
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">Jabatan</p>
                            <p class="font-semibold text-gray-800 text-sm" id="pvJabatan">—</p>
                        </div>
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">Tgl Masuk</p>
                            <p class="font-semibold text-gray-800 text-sm" id="pvJoin">—</p>
                        </div>
                        <div class="bg-white rounded-lg p-2.5">
                            <p class="text-xs text-gray-400">Status</p>
                            <p class="text-sm" id="pvStatus">—</p>
                        </div>
                    </div>
                </div>

                {{-- Tombol --}}
                <div class="flex gap-3 pt-1">
                    <button type="button" onclick="resetToStep1()"
                        class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition flex items-center gap-2">
                        <i class="fas fa-arrow-left text-xs"></i> Kembali
                    </button>
                    <button type="button" id="btnGenerateSurat" onclick="generateSurat()" disabled
                        class="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2">
                        <i class="fas fa-download"></i> Generate & Download Surat
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Toast container --}}
<div id="toastContainer" class="fixed top-5 right-5 z-[9999] flex flex-col gap-3 pointer-events-none"></div>

<style>
.jenis-card.selected { border-color: #3b82f6 !important; background: #eff6ff; }
.jenis-card.selected .jenis-radio { display: flex !important; border-color: #3b82f6; }
.toast-item { animation: toastSlide 0.4s cubic-bezier(0.34,1.4,0.64,1); pointer-events:all; }
.toast-item.toast-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastSlide { from{opacity:0;transform:translateX(100px) scale(0.8)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0) scale(1)} to{opacity:0;transform:translateX(80px) scale(0.9)} }
.toast-progress { height:3px; border-radius:0 0 8px 8px; animation:progress linear forwards; }
@keyframes progress { from{width:100%} to{width:0%} }
</style>

<script>
const karyawanData = @json($karyawanList ?? []);
let selectedKaryawan = null;
let nomorSurat = '';

// ── TOAST ──────────────────────────────────────────────────────────────────
const toastCfg = {
    success: { icon:'fas fa-check-circle', iconColor:'#10b981', bg:'#f0fdf4', border:'#bbf7d0', titleColor:'#065f46', msgColor:'#047857', progressColor:'#10b981', title:'Berhasil!' },
    error:   { icon:'fas fa-times-circle', iconColor:'#ef4444', bg:'#fef2f2', border:'#fecaca', titleColor:'#7f1d1d', msgColor:'#b91c1c', progressColor:'#ef4444', title:'Gagal!' },
    warning: { icon:'fas fa-exclamation-triangle', iconColor:'#f59e0b', bg:'#fffbeb', border:'#fde68a', titleColor:'#78350f', msgColor:'#b45309', progressColor:'#f59e0b', title:'Perhatian!' },
    info:    { icon:'fas fa-info-circle', iconColor:'#3b82f6', bg:'#eff6ff', border:'#bfdbfe', titleColor:'#1e3a8a', msgColor:'#1d4ed8', progressColor:'#3b82f6', title:'Info' }
};
function showToast(type, msg, duration = 4000) {
    const c = toastCfg[type] || toastCfg.info;
    const el = document.createElement('div');
    el.className = 'toast-item';
    el.style.cssText = `background:${c.bg};border:1.5px solid ${c.border};border-radius:14px;padding:12px 14px 8px;min-width:280px;max-width:340px;box-shadow:0 8px 32px rgba(0,0,0,0.12);cursor:pointer;`;
    el.innerHTML = `
        <div style="display:flex;align-items:flex-start;gap:10px;">
            <i class="${c.icon}" style="color:${c.iconColor};font-size:1.25rem;margin-top:1px;flex-shrink:0;"></i>
            <div style="flex:1;min-width:0;">
                <div style="font-weight:700;font-size:0.8rem;color:${c.titleColor};">${c.title}</div>
                <div style="font-size:0.78rem;color:${c.msgColor};margin-top:2px;line-height:1.4;">${msg}</div>
            </div>
            <button onclick="dismissToast(this.closest('.toast-item'))" style="color:${c.msgColor};opacity:0.5;font-size:0.85rem;margin-left:4px;background:none;border:none;cursor:pointer;padding:0;"><i class="fas fa-times"></i></button>
        </div>
        <div style="margin-top:8px;background:${c.border};border-radius:4px;overflow:hidden;">
            <div class="toast-progress" style="background:${c.progressColor};animation-duration:${duration}ms;"></div>
        </div>`;
    document.getElementById('toastContainer').appendChild(el);
    el.addEventListener('click', () => dismissToast(el));
    setTimeout(() => dismissToast(el), duration);
}
function dismissToast(el) {
    if (!el || el.classList.contains('toast-out')) return;
    el.classList.add('toast-out');
    setTimeout(() => el.remove(), 300);
}

// ── STEP 1: Generate nomor ────────────────────────────────────────────────
async function generateNomor() {
    const pembuat = document.getElementById('pembuatSurat').value.trim();
    const ket     = document.getElementById('keterangan').value.trim();
    if (!pembuat) { showToast('warning', 'Nama pembuat surat wajib diisi.'); return; }
    if (!ket)     { showToast('warning', 'Keterangan wajib diisi.'); return; }

    const btn = document.getElementById('btnGenerateNomor');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Generating...';

    try {
        const resp = await fetch('{{ route("surat.generate.store") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ type: 'sket-kerja', pembuat_surat: pembuat, keterangan: ket })
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message || 'Gagal generate nomor');

        nomorSurat = data.nomorSurat;
        document.getElementById('displayNomor').textContent   = data.nomorSurat;
        document.getElementById('displayPembuat').textContent = data.pembuat_surat;
        document.getElementById('displayDivisi').textContent  = data.division;
        goToStep2();
        showToast('success', `Nomor ${data.nomorSurat} berhasil digenerate!`);
    } catch (err) {
        showToast('error', err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-hashtag mr-2"></i>Generate Nomor Surat';
    }
}

// ── STEP TRANSITIONS ──────────────────────────────────────────────────────
function goToStep2() {
    document.getElementById('panelStep1').classList.add('hidden');
    document.getElementById('panelStep2').classList.remove('hidden');
    document.getElementById('step1Circle').className = 'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-emerald-500 text-white';
    document.getElementById('step1Circle').innerHTML = '<i class="fas fa-check text-xs"></i>';
    document.getElementById('step1Label').className  = 'text-sm font-semibold text-emerald-600';
    document.getElementById('stepLine').className    = 'flex-1 max-w-[60px] h-1 rounded-full mx-2 bg-emerald-400';
    document.getElementById('stepIndicator2').classList.remove('opacity-40');
    document.getElementById('step2Circle').className = 'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-blue-600 text-white';
    document.getElementById('step2Label').className  = 'text-sm font-semibold text-blue-700';
}

function resetToStep1() {
    nomorSurat = ''; selectedKaryawan = null;
    document.getElementById('selectedJenis').value = '';
    clearKaryawan();
    document.querySelectorAll('.jenis-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('keperluanSection').classList.add('hidden');
    document.getElementById('keperluanSurat') && (document.getElementById('keperluanSurat').value = '');
    document.getElementById('panelStep2').classList.add('hidden');
    document.getElementById('panelStep1').classList.remove('hidden');
    document.getElementById('step1Circle').className = 'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-blue-600 text-white';
    document.getElementById('step1Circle').innerHTML = '1';
    document.getElementById('step1Label').className  = 'text-sm font-semibold text-blue-700';
    document.getElementById('stepLine').className    = 'flex-1 max-w-[60px] h-1 rounded-full mx-2 bg-gray-200';
    document.getElementById('stepIndicator2').classList.add('opacity-40');
    document.getElementById('step2Circle').className = 'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gray-300 text-gray-500';
    document.getElementById('step2Label').className  = 'text-sm font-semibold text-gray-500';
    updateBtn();
}

// ── JENIS SURAT ───────────────────────────────────────────────────────────
function selectJenis(jenis) {
    document.getElementById('selectedJenis').value = jenis;
    document.querySelectorAll('.jenis-card').forEach(c => c.classList.remove('selected'));
    document.getElementById(`card_${jenis}`).classList.add('selected');
    const ks = document.getElementById('keperluanSection');
    jenis === 'aktif_kerja' ? ks.classList.remove('hidden') : ks.classList.add('hidden');
    if (jenis !== 'aktif_kerja') document.getElementById('keperluanSurat').value = '';
    updateBtn();
}

document.getElementById('keperluanSurat')?.addEventListener('input', function() {
    document.getElementById('previewKeperluan').textContent = this.value || '—';
    updateBtn();
});

// ── SEARCH KARYAWAN ───────────────────────────────────────────────────────
let _st;
document.getElementById('searchKaryawan').addEventListener('input', function() {
    clearTimeout(_st);
    _st = setTimeout(() => doSearch(this.value), 200);
});
document.getElementById('searchKaryawan').addEventListener('focus', function() {
    if (this.value.trim() && !selectedKaryawan) doSearch(this.value);
});
document.addEventListener('click', function(e) {
    if (!e.target.closest('#searchKaryawan') && !e.target.closest('#searchDropdown'))
        document.getElementById('searchDropdown').classList.add('hidden');
});

function doSearch(q) {
    if (!q.trim()) { document.getElementById('searchDropdown').classList.add('hidden'); return; }
    const ql = q.toLowerCase();
    const res = karyawanData.filter(k =>
        k.nama.toLowerCase().includes(ql) ||
        k.nik.toLowerCase().includes(ql) ||
        (k.departemen && k.departemen.toLowerCase().includes(ql))
    ).slice(0, 15);

    const container = document.getElementById('searchResults');
    container.innerHTML = res.length === 0
        ? `<div class="p-4 text-center text-gray-400 text-sm"><i class="fas fa-search mb-1 block text-lg opacity-30"></i>Tidak ditemukan</div>`
        : `<div class="px-3 py-2 bg-gray-50 text-xs text-gray-400 sticky top-0 border-b border-gray-100">${res.length} dari ${karyawanData.length} karyawan</div>`
          + res.map(k => `
            <button type="button" onclick='pickKaryawan(${JSON.stringify(k)})'
                class="w-full px-4 py-3 text-left hover:bg-blue-50 transition flex items-center justify-between gap-3">
                <div class="min-w-0">
                    <p class="font-semibold text-gray-800 text-sm truncate">${k.nama}</p>
                    <div class="flex gap-3 mt-0.5">
                        <span class="text-xs text-gray-400">NIK: ${k.nik}</span>
                        ${k.departemen ? `<span class="text-xs text-blue-500 font-medium">${k.departemen}</span>` : ''}
                    </div>
                </div>
                <span class="text-xs px-2 py-0.5 rounded-full flex-shrink-0 ${k.status_karyawan === 'Aktif' ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}">${k.status_karyawan || 'Aktif'}</span>
            </button>`).join('');

    document.getElementById('searchDropdown').classList.remove('hidden');
}

function pickKaryawan(k) {
    selectedKaryawan = k;
    document.getElementById('selectedKaryawanId').value = k.id;
    document.getElementById('searchKaryawan').value = `${k.nama} (${k.nik})`;
    document.getElementById('searchDropdown').classList.add('hidden');
    document.getElementById('clearKaryawan').classList.remove('hidden');
    document.getElementById('karyawanPreview').classList.remove('hidden');
    document.getElementById('pvNik').textContent     = k.nik;
    document.getElementById('pvNama').textContent    = k.nama;
    document.getElementById('pvDept').textContent    = k.departemen || '-';
    document.getElementById('pvJabatan').textContent = k.jabatan    || '-';
    document.getElementById('pvJoin').textContent    = k.join_company
        ? new Date(k.join_company).toLocaleDateString('id-ID', {day:'2-digit', month:'long', year:'numeric'})
        : '-';
    const s = document.getElementById('pvStatus');
    s.textContent = k.status_karyawan || 'Aktif';
    s.className = `text-sm font-semibold px-2 py-0.5 rounded-full inline-block ${k.status_karyawan === 'Aktif' ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}`;
    updateBtn();
}

function clearKaryawan() {
    selectedKaryawan = null;
    document.getElementById('selectedKaryawanId').value = '';
    document.getElementById('searchKaryawan').value = '';
    document.getElementById('clearKaryawan').classList.add('hidden');
    document.getElementById('karyawanPreview').classList.add('hidden');
    document.getElementById('searchDropdown').classList.add('hidden');
    updateBtn();
}

// ── VALIDASI TOMBOL ───────────────────────────────────────────────────────
function updateBtn() {
    const jenis    = document.getElementById('selectedJenis').value;
    const karId    = document.getElementById('selectedKaryawanId').value;
    const keperluan = document.getElementById('keperluanSurat')?.value?.trim();
    const valid = jenis && karId && (jenis !== 'aktif_kerja' || keperluan);
    document.getElementById('btnGenerateSurat').disabled = !valid;
}

// ── GENERATE SURAT ────────────────────────────────────────────────────────
async function generateSurat() {
    const jenis     = document.getElementById('selectedJenis').value;
    const keperluan = document.getElementById('keperluanSurat')?.value?.trim() || '';

    if (!nomorSurat || !selectedKaryawan || !jenis) { showToast('warning', 'Lengkapi semua field.'); return; }
    if (jenis === 'aktif_kerja' && !keperluan) { showToast('warning', 'Keperluan surat wajib diisi.'); return; }

    const btn = document.getElementById('btnGenerateSurat');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Generating...';
    showToast('info', 'Sedang membuat surat, mohon tunggu...', 6000);

    try {
        const resp = await fetch('{{ route("surat.generate-sket-kerja") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({
                nomor_surat:     nomorSurat,
                karyawan_id:     selectedKaryawan.id,
                jenis_surat:     jenis,
                keperluan_surat: keperluan
            })
        });

        if (!resp.ok) {
            const err = await resp.json().catch(() => ({ message: 'Gagal generate surat' }));
            throw new Error(err.message);
        }

        const blob     = await resp.blob();
        const jenisLbl = jenis === 'paklaring' ? 'Paklaring' : 'Aktif_Kerja';
        const filename = `Surat_${jenisLbl}_${selectedKaryawan.nama.replace(/\s+/g,'_')}.docx`;
        const url      = URL.createObjectURL(blob);
        const a        = document.createElement('a');
        a.href = url; a.download = filename;
        document.body.appendChild(a); a.click(); a.remove();
        URL.revokeObjectURL(url);

        showToast('success', `Surat ${jenisLbl.replace('_',' ')} untuk ${selectedKaryawan.nama} berhasil didownload!`, 5000);
        resetToStep1();
    } catch (err) {
        showToast('error', err.message || 'Gagal generate surat');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-download mr-2"></i>Generate & Download Surat';
    }
}

document.getElementById('pembuatSurat')?.focus();
</script>
@endsection