@extends('layouts.app')
@section('title', 'Surat Penyelesaian Magang')

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

    <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-check-circle text-white"></i>
        </div>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Generate Surat Penyelesaian Magang</h1>
            <p class="text-sm text-gray-500">Buat surat keterangan selesai magang. Status peserta otomatis berubah ke <strong>Selesai</strong>.</p>
        </div>
    </div>

    @if(session('success'))
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 flex items-center gap-2 text-green-700 text-sm">
        <i class="fas fa-check-circle text-green-500"></i> {{ session('success') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

        {{-- FORM SURAT (kiri) --}}
        <div class="lg:col-span-2 space-y-4">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <h2 class="font-bold text-gray-800 mb-4"><i class="fas fa-file-alt text-emarld-500 mr-2"></i>Informasi Surat</h2>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Nomor Surat </label>
                        <input type="text" id="nomor_surat" placeholder="Contoh: 002/PTP-HR/EXT/XII/2025"
                            class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 transition">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">Tanggal Surat</label>
                        <input type="date" id="tanggal_surat" value="{{ now()->toDateString() }}"
                            class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 transition">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1">
                            Nomor Surat Permohonan
                            <span class="text-gray-400 font-normal">(auto-fill)</span>
                        </label>
                        <input type="text" id="nomor_surat_permohonan" readonly
                            placeholder="Pilih peserta untuk auto-fill..."
                            class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm bg-gray-50 text-gray-600 cursor-not-allowed">
                    </div>
                </div>

                {{-- Preview peserta terpilih --}}
                <div id="previewPeserta" class="hidden mt-4 p-3 bg-purple-50 border border-emerald-100 rounded-lg text-xs space-y-1">
                    <p class="font-semibold text-emerald-800 mb-1">Peserta Dipilih:</p>
                    <p class="text-gray-700">Nama: <strong id="pv_nama">-</strong></p>
                    <p class="text-gray-700">NIM: <strong id="pv_nim">-</strong></p>
                    <p class="text-gray-700">Program Studi: <strong id="pv_prodi">-</strong></p>
                    <p class="text-gray-700">Durasi: <strong id="pv_durasi">-</strong> bulan</p>
                    <p class="text-gray-700">Periode: <strong id="pv_periode">-</strong></p>
                    <div id="pv_noSuratPenerimaan" class="hidden text-green-emerald">
                        <i class="fas fa-check-circle mr-1"></i> Surat penerimaan ditemukan
                    </div>
                    <div id="pv_noSuratWarning" class="hidden text-yellow-700">
                        <i class="fas fa-exclamation-triangle mr-1"></i> Belum ada surat penerimaan, data periode dari peserta
                    </div>
                </div>
            </div>

            <button onclick="showPreview()"
                class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-semibold text-sm transition flex items-center justify-center gap-2">
                <i class="fas fa-eye"></i> Preview Surat
            </button>
        </div>

        {{-- PILIH PESERTA (kanan) --}}
        <div class="lg:col-span-3">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100">
                    <h2 class="font-bold text-gray-800">Pilih 1 Peserta Magang</h2>
                    <p class="text-xs text-gray-400 mt-0.5">{{ $pesertaList->count() }} peserta aktif tersedia</p>
                </div>

                <div class="px-5 py-3 border-b border-gray-50">
                    <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="searchPeserta" onkeyup="filterPeserta()" placeholder="Cari peserta..."
                            class="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 transition">
                    </div>
                </div>

                <div class="overflow-y-auto max-h-96">
                    @forelse($pesertaList as $peserta)
                    <label class="peserta-row flex items-center gap-3 px-5 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-50 transition"
                           data-nama="{{ strtolower($peserta->nama) }}"
                           data-nim="{{ strtolower($peserta->nim ?? '') }}"
                           data-instansi="{{ strtolower($peserta->asal_instansi ?? '') }}">
                        <input type="radio" name="selectedPeserta" class="w-4 h-4 accent-purple-600 flex-shrink-0"
                            value="{{ $peserta->id }}"
                            data-nama="{{ $peserta->nama }}"
                            data-nim="{{ $peserta->nim ?? '-' }}"
                            data-prodi="{{ $peserta->jurusan ?? '-' }}"
                            data-instansi="{{ $peserta->asal_instansi }}"
                            data-mulai="{{ $peserta->periode_mulai?->format('d M Y') ?? '' }}"
                            data-selesai="{{ $peserta->periode_selesai?->format('d M Y') ?? '' }}"
                            onchange="onPesertaSelected(this)">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-800 truncate">{{ $peserta->nama }}</p>
                            <p class="text-xs text-gray-400">{{ $peserta->nim ?? '-' }} &middot; {{ $peserta->jurusan ?? '-' }}</p>
                            <p class="text-xs text-gray-400 truncate">{{ $peserta->asal_instansi }}</p>
                        </div>
                    </label>
                    @empty
                    <div class="px-5 py-10 text-center text-gray-400">
                        <i class="fas fa-user text-2xl block mb-2 opacity-30"></i>
                        Belum ada peserta aktif
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ================== PREVIEW SURAT ================== --}}
<div id="pagePreview" class="hidden space-y-6">
    <div class="flex items-center gap-3">
        <button onclick="backToForm()" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Preview Surat Penyelesaian</h1>
            <p class="text-sm text-gray-500">Periksa sebelum download</p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 max-w-3xl mx-auto">
        <div class="w-full h-20 bg-gray-100 flex items-center justify-center text-gray-400 rounded mb-6 text-sm">
            [Kop Surat PT Putra Taro Paloma]
        </div>

        <div class="text-right text-sm mb-6">
            <p>Bogor, <span id="prev_tanggal">-</span></p>
        </div>

        <div class="text-sm mb-4">
            <table>
                <tr><td class="w-24 pb-1">Nomor</td><td class="w-4 pb-1">:</td><td class="pb-1 font-bold" id="prev_nomor">-</td></tr>
                <tr><td class="pb-1">Lamp</td><td class="pb-1">:</td><td class="pb-1">-</td></tr>
                <tr><td class="pb-1">Hal</td><td class="pb-1">:</td><td class="pb-1 font-bold">Surat Pernyataan Selesai Magang</td></tr>
            </table>
        </div>

        <div class="text-sm mb-4">
            <p>Kepada Yth,</p>
            <p class="font-bold" id="prev_kepada">-</p>
            <p class="font-bold" id="prev_instansi">-</p>
            <p>Di Tempat</p>
        </div>

        <div class="text-sm mb-4 leading-relaxed">
            <p class="mb-2">Dengan Hormat,</p>
            <p style="text-indent:2rem">Sehubungan dengan surat permohonan nomor <strong id="prev_no_permohonan">-</strong> perihal permohonan magang, maka melalui surat ini kami menerangkan bahwa:</p>
        </div>

        <div class="text-sm mb-4 ml-8">
            <table>
                <tr><td class="w-40 pb-1">Nama</td><td class="w-4 pb-1">:</td><td class="pb-1 font-bold" id="prev_nama_peserta">-</td></tr>
                <tr><td class="pb-1">NIM</td><td class="pb-1">:</td><td class="pb-1 font-bold" id="prev_nim_peserta">-</td></tr>
                <tr><td class="pb-1">Program Studi</td><td class="pb-1">:</td><td class="pb-1 font-bold" id="prev_prodi_peserta">-</td></tr>
            </table>
        </div>

        <div class="text-sm mb-6 leading-relaxed">
            <p class="mb-2">Adalah mahasiswa/i <strong id="prev_instansi_body">-</strong> yang telah melaksanakan magang industri selama
                <strong id="prev_durasi">-</strong> bulan pada periode <strong id="prev_periode">-</strong> yang bertempat di PT Putra Taro Paloma.</p>
            <p class="mb-2">Kami berharap melalui kegiatan magang ini dapat memberikan pengalaman dan pembelajaran yang bermanfaat.</p>
            <p>Demikian surat keterangan ini diberikan untuk dapat digunakan sebagaimana mestinya.</p>
        </div>

        <div class="text-sm">
            <p class="mb-16">Hormat Kami,</p>
            <p class="font-bold underline">Indra Gunawan</p>
            <p>Dept. Head HR&GA</p>
        </div>
    </div>

    <div class="flex justify-end gap-3 max-w-3xl mx-auto">
        <button onclick="backToForm()" class="px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg font-semibold text-sm transition">
            <i class="fas fa-arrow-left mr-1"></i> Kembali
        </button>
        <button onclick="downloadSurat()" id="btnDownload"
            class="px-8 py-2.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-semibold text-sm transition flex items-center gap-2">
            <i class="fas fa-download"></i> Download Surat (.docx)
        </button>
    </div>
</div>

<script>
let selectedPeserta = null;
let suratPenerimaanData = null;

function filterPeserta() {
    const q = document.getElementById('searchPeserta').value.toLowerCase();
    document.querySelectorAll('.peserta-row').forEach(row => {
        const match = row.dataset.nama.includes(q) || row.dataset.nim.includes(q) || row.dataset.instansi.includes(q);
        row.style.display = match ? '' : 'none';
    });
}

async function onPesertaSelected(radio) {
    selectedPeserta = {
        id:       parseInt(radio.value),
        nama:     radio.dataset.nama,
        nim:      radio.dataset.nim,
        prodi:    radio.dataset.prodi,
        instansi: radio.dataset.instansi,
        mulai:    radio.dataset.mulai,
        selesai:  radio.dataset.selesai,
    };

    // Auto-fill durasi sementara dari periode peserta
    const mulaiDate   = new Date(radio.dataset.mulai);
    const selesaiDate = new Date(radio.dataset.selesai);
    let durasi = 6;
    if (!isNaN(mulaiDate) && !isNaN(selesaiDate)) {
        durasi = Math.round((selesaiDate - mulaiDate) / (1000*60*60*24*30)) || 6;
    }

    document.getElementById('pv_nama').textContent   = selectedPeserta.nama;
    document.getElementById('pv_nim').textContent    = selectedPeserta.nim;
    document.getElementById('pv_prodi').textContent  = selectedPeserta.prodi;
    document.getElementById('pv_durasi').textContent = durasi;
    document.getElementById('pv_periode').textContent = (selectedPeserta.mulai && selectedPeserta.selesai)
        ? `${selectedPeserta.mulai} - ${selectedPeserta.selesai}` : '-';
    document.getElementById('previewPeserta').classList.remove('hidden');

    // Fetch surat penerimaan untuk auto-fill no permohonan dan periode
    try {
        const resp = await fetch(`/magang/api/surat-penerimaan/${selectedPeserta.id}`);
        const data = await resp.json();

        if (data.success && data.data) {
            suratPenerimaanData = data.data;
            document.getElementById('nomor_surat_permohonan').value = data.data.nomor_surat_permohonan || '';

            // Update durasi dari surat penerimaan
            const periodeStr = data.data.periode_magang || '';
            const matchBulan = periodeStr.match(/(\d+)\s*Bulan/i);
            const matchPeriode = periodeStr.match(/\(([^)]+)\)/);
            if (matchBulan) document.getElementById('pv_durasi').textContent = matchBulan[1];
            if (matchPeriode) document.getElementById('pv_periode').textContent = matchPeriode[1];

            document.getElementById('pv_noSuratPenerimaan').classList.remove('hidden');
            document.getElementById('pv_noSuratWarning').classList.add('hidden');
        } else {
            suratPenerimaanData = null;
            document.getElementById('nomor_surat_permohonan').value = '';
            document.getElementById('pv_noSuratPenerimaan').classList.add('hidden');
            document.getElementById('pv_noSuratWarning').classList.remove('hidden');
        }
    } catch (e) {
        console.error(e);
    }
}

function getDurasi() {
    if (suratPenerimaanData?.periode_magang) {
        const m = suratPenerimaanData.periode_magang.match(/(\d+)\s*Bulan/i);
        if (m) return m[1];
    }
    const d = document.getElementById('pv_durasi').textContent;
    return d || '6';
}

function getPeriode() {
    if (suratPenerimaanData?.periode_magang) {
        const m = suratPenerimaanData.periode_magang.match(/\(([^)]+)\)/);
        if (m) return m[1];
    }
    return document.getElementById('pv_periode').textContent || '-';
}

function showPreview() {
    if (!selectedPeserta) {
        showToast('warning', 'Pilih 1 peserta terlebih dahulu!');
        return;
    }
    const nomor = document.getElementById('nomor_surat').value.trim();
    if (!nomor) {
        showToast('warning', 'Nomor surat harus diisi!');
        return;
    }

    const tanggal      = document.getElementById('tanggal_surat').value;
    const noPermohonan = document.getElementById('nomor_surat_permohonan').value;
    const fmt = (d) => new Date(d + 'T00:00:00').toLocaleDateString('id-ID', {day:'2-digit', month:'long', year:'numeric'});

    document.getElementById('prev_tanggal').textContent       = fmt(tanggal);
    document.getElementById('prev_nomor').textContent         = nomor;
    document.getElementById('prev_kepada').textContent        = 'Ketua Program Studi ' + selectedPeserta.prodi;
    document.getElementById('prev_instansi').textContent      = selectedPeserta.instansi;
    document.getElementById('prev_no_permohonan').textContent = noPermohonan || '[Nomor Surat Permohonan]';
    document.getElementById('prev_nama_peserta').textContent  = selectedPeserta.nama;
    document.getElementById('prev_nim_peserta').textContent   = selectedPeserta.nim;
    document.getElementById('prev_prodi_peserta').textContent = selectedPeserta.prodi;
    document.getElementById('prev_instansi_body').textContent = selectedPeserta.instansi;
    document.getElementById('prev_durasi').textContent        = getDurasi();
    document.getElementById('prev_periode').textContent       = getPeriode();

    document.getElementById('pageForm').classList.add('hidden');
    document.getElementById('pagePreview').classList.remove('hidden');
    window.scrollTo(0, 0);
}

function backToForm() {
    document.getElementById('pagePreview').classList.add('hidden');
    document.getElementById('pageForm').classList.remove('hidden');
}

async function downloadSurat() {
    const btn = document.getElementById('btnDownload');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Generating...';

    try {
        const formData = new FormData();
        formData.append('_token',                 '{{ csrf_token() }}');
        formData.append('nomor_surat',            document.getElementById('nomor_surat').value);
        formData.append('tanggal_surat',          document.getElementById('tanggal_surat').value);
        formData.append('nomor_surat_permohonan', document.getElementById('nomor_surat_permohonan').value);

        console.log('Sending request for peserta ID:', selectedPeserta.id);
        console.log('nomor_surat:', document.getElementById('nomor_surat').value);
        console.log('tanggal_surat:', document.getElementById('tanggal_surat').value);

        const resp = await fetch(`/magang/penyelesaian/${selectedPeserta.id}/pdf`, {
            method: 'POST',
            body: formData,
        });

        const contentType = resp.headers.get('content-type') || '';
        console.log('Response status:', resp.status);
        console.log('Response content-type:', contentType);

        // JSON response = error/warning dari controller
        if (contentType.includes('application/json')) {
            const json = await resp.json();
            console.error('Server JSON response:', json);

            if (json.warning) {
                showToast('warning', json.message);
            } else {
                // Tampilkan error detail di toast
                const errMsg = json.error || 'Unknown error';
                const errLine = json.file ? ` (${json.file}:${json.line})` : '';
                showToast('error', `Error: ${errMsg}${errLine}`);
            }
            return;
        }

        // HTML response = Laravel error page (APP_DEBUG=true)
        if (contentType.includes('text/html')) {
            const html = await resp.text();
            // Coba extract pesan error dari HTML Laravel
            const matchMsg = html.match(/<div class="exception-message[^"]*"[^>]*>\s*([^<]+)/);
            const matchErr = html.match(/class="title"[^>]*>\s*([^<]+)/);
            const errMsg = (matchMsg && matchMsg[1].trim()) || (matchErr && matchErr[1].trim()) || `HTTP ${resp.status} - Cek APP_DEBUG=true di .env untuk detail`;
            console.error('Server HTML error (first 3000 chars):', html.substring(0, 3000));
            showToast('error', `Server Error: ${errMsg}`);
            return;
        }

        if (!resp.ok) {
            showToast('error', `HTTP Error ${resp.status}`);
            return;
        }

        // Sukses - download file
        const blob = await resp.blob();
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href     = url;
        a.download = `Surat-Penyelesaian-Magang-${selectedPeserta.nama.replace(/ /g, '-')}.docx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);

        showToast('success', `Surat berhasil di-download! Status ${selectedPeserta.nama} otomatis berubah ke Selesai.`);

        setTimeout(() => {
            backToForm();
            document.querySelectorAll('input[name="selectedPeserta"]').forEach(r => r.checked = false);
            selectedPeserta     = null;
            suratPenerimaanData = null;
            document.getElementById('previewPeserta').classList.add('hidden');
            document.getElementById('nomor_surat_permohonan').value = '';
        }, 1500);

    } catch (err) {
        console.error('JS fetch error:', err);
        showToast('error', 'Error: ' + err.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-download mr-1"></i> Download Surat (.docx)';
    }
}
</script>

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

<style>
.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 toastConfig = {
    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, message, duration = 4000) {
    const cfg = toastConfig[type] || toastConfig.info;
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.className = 'toast-item';
    toast.style.cssText = `background:${cfg.bg};border:1.5px solid ${cfg.border};border-radius:14px;padding:12px 14px 8px;min-width:280px;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.12);cursor:pointer;`;
    toast.innerHTML = `
        <div style="display:flex;align-items:flex-start;gap:10px;">
            <i class="${cfg.icon}" style="color:${cfg.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:${cfg.titleColor};">${cfg.title}</div>
                <div style="font-size:0.78rem;color:${cfg.msgColor};margin-top:2px;line-height:1.4;">${message}</div>
            </div>
            <button onclick="dismissToast(this.closest('.toast-item'))" style="color:${cfg.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:${cfg.border};border-radius:4px;overflow:hidden;">
            <div class="toast-progress" style="background:${cfg.progressColor};animation-duration:${duration}ms;"></div>
        </div>`;
    container.appendChild(toast);
    toast.addEventListener('click', () => dismissToast(toast));
    setTimeout(() => dismissToast(toast), duration);
}
function dismissToast(toast) {
    if (!toast || toast.classList.contains('toast-out')) return;
    toast.classList.add('toast-out');
    setTimeout(() => toast.remove(), 300);
}
</script>
@endsection