@extends('layouts.app')
@section('title', 'Format Nomor Surat')

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

    {{-- HEADER --}}
    <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-sliders-h text-white text-sm"></i>
        </div>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Format Nomor Surat</h1>
            <p class="text-sm text-gray-500">Kelola format penomoran surat perusahaan</p>
        </div>
    </div>

    {{-- INFO BOX --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 flex gap-3">
        <i class="fas fa-info-circle text-blue-500 mt-0.5 flex-shrink-0"></i>
        <div class="text-sm text-blue-700 space-y-1">
            <p class="font-semibold">Petunjuk Penggunaan</p>
            <p><span class="font-medium">Company Prefix</span> — Kode perusahaan, contoh: <code class="bg-blue-100 px-1 rounded">PTP</code></p>
            <p><span class="font-medium">Division Format</span> — Gunakan <code class="bg-blue-100 px-1 rounded">{division}</code> untuk mengikuti divisi user, atau tulis fixed seperti <code class="bg-blue-100 px-1 rounded">HR&GA</code></p>
            <p><span class="font-medium">Type Code</span> — Kode jenis surat, contoh: <code class="bg-blue-100 px-1 rounded">In</code>, <code class="bg-blue-100 px-1 rounded">Eks</code>, <code class="bg-blue-100 px-1 rounded">SKK</code></p>
        </div>
    </div>

    {{-- FORMAT CARDS --}}
    <div id="formatContainer">
        <div class="flex items-center justify-center py-16">
            <div class="text-center">
                <i class="fas fa-spinner fa-spin text-violet-500 text-2xl mb-3 block"></i>
                <p class="text-gray-500 text-sm">Memuat format...</p>
            </div>
        </div>
    </div>

    {{-- WARNING --}}
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
        <i class="fas fa-exclamation-triangle text-amber-500 mt-0.5 flex-shrink-0"></i>
        <div class="text-sm text-amber-700">
            <p class="font-semibold">Perhatian</p>
            <p>Perubahan format hanya berlaku untuk <strong>nomor surat baru</strong>. Nomor yang sudah dibuat tidak akan berubah.</p>
        </div>
    </div>

</div>

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

<style>
@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)} }
@keyframes progress   { from{width:100%} to{width:0%} }
</style>

<script>
const CSRF = '{{ csrf_token() }}';
let formatsData = [];

const TYPE_CFG = {
    'internal':   {
        label:'Surat Internal',
        icon:'fa-file-alt',
        colorBg:'bg-emerald-50', colorBorder:'border-emerald-200',
        colorText:'text-emerald-700', colorBadge:'bg-emerald-100 text-emerald-700',
        colorBtn:'bg-emerald-600 hover:bg-emerald-700', colorRing:'focus:ring-emerald-500'
    },
    'eksternal':  {
        label:'Surat Eksternal',
        icon:'fa-paper-plane',
        colorBg:'bg-emerald-50', colorBorder:'border-emerald-200',
        colorText:'text-emerald-700', colorBadge:'bg-emerald-100 text-emerald-700',
        colorBtn:'bg-emerald-600 hover:bg-emerald-700', colorRing:'focus:ring-emerald-500'
    },
    'sket-kerja': {
        label:'Surat Keterangan Kerja',
        icon:'fa-file-contract',
        colorBg:'bg-emerald-50', colorBorder:'border-emerald-200',
        colorText:'text-emerald-700', colorBadge:'bg-emerald-100 text-emerald-700',
        colorBtn:'bg-emerald-600 hover:bg-emerald-700', colorRing:'focus:ring-emerald-500'
    },
};

// ── Toast ──────────────────────────────────────────────────────────────────
function showToast(type, msg) {
    const c = type === 'success'
        ? {icon:'fas fa-check-circle',iconColor:'#10b981',bg:'#f0fdf4',border:'#bbf7d0',titleColor:'#065f46',msgColor:'#047857',progressColor:'#10b981',title:'Berhasil!'}
        : {icon:'fas fa-times-circle',iconColor:'#ef4444',bg:'#fef2f2',border:'#fecaca',titleColor:'#7f1d1d',msgColor:'#b91c1c',progressColor:'#ef4444',title:'Gagal!'};
    const el = document.createElement('div');
    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;animation:toastSlide 0.4s cubic-bezier(0.34,1.4,0.64,1);pointer-events:all;`;
    el.innerHTML = `
        <div style="display:flex;align-items:flex-start;gap:10px;">
            <i class="${c.icon}" style="color:${c.iconColor};font-size:1.2rem;margin-top:1px;flex-shrink:0;"></i>
            <div style="flex:1;">
                <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>
        </div>
        <div style="margin-top:8px;background:${c.border};border-radius:4px;overflow:hidden;">
            <div style="height:3px;background:${c.progressColor};animation:progress 4s linear forwards;"></div>
        </div>`;
    document.getElementById('toastContainer').appendChild(el);
    el.addEventListener('click', () => { el.style.animation='toastOut 0.3s ease forwards'; setTimeout(()=>el.remove(),300); });
    setTimeout(() => { el.style.animation='toastOut 0.3s ease forwards'; setTimeout(()=>el.remove(),300); }, 4000);
}

// ── Preview ────────────────────────────────────────────────────────────────
function buildPreview(fmt, cp, df, tc) {
    const division = (df === '{division}') ? 'HR&GA' : (df || 'HR&GA');
    const template = fmt.format_template || '{nomor}/{company_prefix}-{division}/{type_code}/{month_roman}/{year}';
    return template
        .replace('{nomor}', '001')
        .replace('{company_prefix}', cp || 'PTP')
        .replace('{division}', division)
        .replace('{type_code}', tc || 'XX')
        .replace('{month_roman}', 'I')
        .replace('{year}', new Date().getFullYear());
}

function updatePreview(type) {
    const fmt = formatsData.find(f => f.type === type);
    if (!fmt) return;
    const cp = document.getElementById(`cp_${type}`)?.value || '';
    const df = document.getElementById(`df_${type}`)?.value || '';
    const tc = document.getElementById(`tc_${type}`)?.value || '';
    document.getElementById(`preview_${type}`).textContent = buildPreview(fmt, cp, df, tc);
}

// ── Render Cards ───────────────────────────────────────────────────────────
function renderCards(formats) {
    formatsData = formats;
    const html = formats.map(fmt => {
        const cfg = TYPE_CFG[fmt.type] || TYPE_CFG['internal'];
        const preview = buildPreview(fmt, fmt.company_prefix, fmt.division_format, fmt.type_code);
        const isExt = fmt.type === 'eksternal';

        return `
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-5">
            <div class="px-6 py-4 border-b ${cfg.colorBg} border-b flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg ${cfg.colorBg} border ${cfg.colorBorder} flex items-center justify-center">
                        <i class="fas ${cfg.icon} ${cfg.colorText} text-sm"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 text-sm">${cfg.label}</h3>
                        <p class="text-xs text-gray-500">Tipe: <code class="bg-gray-100 px-1 rounded">${fmt.type}</code></p>
                    </div>
                </div>
                <span class="text-xs px-2.5 py-1 rounded-full font-semibold ${fmt.is_active ? cfg.colorBadge : 'bg-gray-100 text-gray-500'}">
                    ${fmt.is_active ? '✓ Aktif' : 'Nonaktif'}
                </span>
            </div>

            <div class="p-6 space-y-5">
                <div class="${cfg.colorBg} border ${cfg.colorBorder} rounded-xl p-4">
                    <p class="text-xs font-semibold ${cfg.colorText} mb-1.5"><i class="fas fa-eye mr-1"></i>Preview Format</p>
                    <p class="text-xl font-mono font-bold text-gray-800" id="preview_${fmt.type}">${preview}</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Company Prefix <span class="text-red-500">*</span></label>
                        <input type="text" id="cp_${fmt.type}" value="${fmt.company_prefix || ''}"
                            oninput="updatePreview('${fmt.type}')"
                            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm font-mono uppercase focus:outline-none focus:ring-2 ${cfg.colorRing} transition"
                            placeholder="PTP" maxlength="10">
                        <p class="text-xs text-gray-400 mt-1">Contoh: PTP, PTPP</p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Division Format <span class="text-red-500">*</span></label>
                        <input type="text" id="df_${fmt.type}" value="${fmt.division_format || ''}"
                            oninput="updatePreview('${fmt.type}')"
                            ${isExt ? 'disabled' : ''}
                            class="w-full px-3 py-2.5 border ${isExt ? 'border-gray-100 bg-gray-50 text-gray-400 cursor-not-allowed' : 'border-gray-200'} rounded-lg text-sm font-mono focus:outline-none focus:ring-2 ${cfg.colorRing} transition"
                            placeholder="{division}">
                        <p class="text-xs text-gray-400 mt-1">${isExt ? 'Fixed: HR&GA' : '{division} = ikuti divisi user'}</p>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Type Code <span class="text-red-500">*</span></label>
                        <input type="text" id="tc_${fmt.type}" value="${fmt.type_code || ''}"
                            oninput="updatePreview('${fmt.type}')"
                            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm font-mono uppercase focus:outline-none focus:ring-2 ${cfg.colorRing} transition"
                            placeholder="In" maxlength="10">
                        <p class="text-xs text-gray-400 mt-1">Contoh: In, Eks, SKK</p>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">Keterangan (Opsional)</label>
                    <textarea id="desc_${fmt.type}" rows="2"
                        class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 ${cfg.colorRing} transition resize-none"
                        placeholder="Catatan tentang format ini...">${fmt.description || ''}</textarea>
                </div>

                <div class="flex gap-3 pt-1 border-t border-gray-100">
                    <button onclick="resetFormat('${fmt.type}')"
                        class="px-4 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-undo text-xs"></i> Reset Default
                    </button>
                    <button onclick="saveFormat('${fmt.type}')" id="btn_${fmt.type}"
                        class="flex-1 py-2.5 ${cfg.colorBtn} text-white rounded-lg text-sm font-semibold transition flex items-center justify-center gap-2">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>`;
    }).join('');
    document.getElementById('formatContainer').innerHTML = html;
}

// ── Save ───────────────────────────────────────────────────────────────────
async function saveFormat(type) {
    const btn  = document.getElementById(`btn_${type}`);
    const cp   = document.getElementById(`cp_${type}`)?.value?.trim();
    const tc   = document.getElementById(`tc_${type}`)?.value?.trim();
    const df   = document.getElementById(`df_${type}`)?.value?.trim() || '{division}';
    const desc = document.getElementById(`desc_${type}`)?.value?.trim() || '';

    if (!cp || !tc) { showToast('error', 'Company Prefix dan Type Code wajib diisi.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Menyimpan...';

    try {
        const resp = await fetch(`/surat/format-settings/${type}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({ company_prefix: cp, division_format: df, type_code: tc, description: desc })
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message);
        showToast('success', `Format disimpan! Preview: <span class="font-mono">${data.preview}</span>`);
        loadFormats();
    } catch (err) {
        showToast('error', err.message || 'Gagal menyimpan format.');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-save mr-2"></i>Simpan Perubahan';
    }
}

// ── Reset ──────────────────────────────────────────────────────────────────
async function resetFormat(type) {
    if (!confirm(`Reset format "${type}" ke default?`)) return;
    try {
        const resp = await fetch(`/surat/format-settings/${type}/reset`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }
        });
        const data = await resp.json();
        if (!data.success) throw new Error(data.message);
        showToast('success', 'Format berhasil direset ke default!');
        loadFormats();
    } catch (err) {
        showToast('error', err.message || 'Gagal reset format.');
    }
}

// ── Load ───────────────────────────────────────────────────────────────────
async function loadFormats() {
    try {
        const resp = await fetch('/surat/format-settings', {
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' }
        });
        const data = await resp.json();
        if (data.success) renderCards(data.formats);
        else throw new Error(data.message);
    } catch (err) {
        document.getElementById('formatContainer').innerHTML = `
            <div class="bg-red-50 border border-red-200 rounded-xl p-6 text-center">
                <i class="fas fa-exclamation-circle text-red-400 text-2xl mb-2 block"></i>
                <p class="text-red-600 font-medium text-sm">Gagal memuat format: ${err.message}</p>
            </div>`;
    }
}

loadFormats();
</script>
@endsection