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

@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-green-500 to-emerald-600 flex items-center justify-center shadow-md">
                <i class="fas fa-users text-white"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900">Data Peserta Magang</h1>
                <p class="text-sm text-gray-500">PT Putra Taro Paloma</p>
            </div>
        </div>
        <button onclick="openModal('modalTambah')"
            class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold text-sm transition shadow-sm">
            <i class="fas fa-plus"></i> Tambah Peserta
        </button>
    </div>

    {{-- TABLE --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gray-50 text-xs font-semibold text-gray-500 uppercase">
                        <th class="px-4 py-3 text-left">No</th>
                        <th class="px-4 py-3 text-left">NIM</th>
                        <th class="px-4 py-3 text-left">Nama</th>
                        <th class="px-4 py-3 text-left">Prodi</th>
                        <th class="px-4 py-3 text-left">Asal</th>
                        <th class="px-4 py-3 text-left">Periode</th>
                        <th class="px-4 py-3 text-center">Status</th>
                        <th class="px-4 py-3 text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pesertaList as $i => $peserta)
                    <tr class="border-b hover:bg-gray-50 transition">
                        <td class="px-4 py-3 text-gray-500">{{ $pesertaList->firstItem() + $i }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $peserta->nim }}</td>
                        <td class="px-4 py-3 font-semibold text-gray-800">{{ $peserta->nama }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $peserta->program_studi }}</td>
                        <td class="px-4 py-3 text-gray-600">{{ $peserta->asal_instansi }}</td>
                        <td class="px-4 py-3 text-xs text-gray-500">
                            {{ $peserta->periode_mulai?->format('d M Y') }} –
                            {{ $peserta->periode_selesai?->format('d M Y') }}
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if($peserta->status == 'aktif')
                                <span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">Aktif</span>
                            @else
                                <span class="px-2 py-1 bg-gray-100 text-gray-500 rounded-full text-xs font-medium">Selesai</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center space-x-2">
                            {{-- Tombol Edit --}}
                            <button onclick='openEditModal({{ $peserta->id }}, @json($peserta))'
                                class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-blue-50 text-blue-500 hover:bg-blue-100 transition">
                                <i class="fas fa-edit text-xs"></i>
                            </button>

                            {{-- Tombol Hapus --}}
                            <button type="button"
                                onclick="confirmHapus('deleteForm{{ $peserta->id }}', '{{ addslashes($peserta->nama) }}')"
                                class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 transition">
                                <i class="fas fa-trash text-xs"></i>
                            </button>

                            {{-- Hidden form hapus (WAJIB di luar tombol, punya id unik) --}}
                            <form id="deleteForm{{ $peserta->id }}"
                                  method="POST"
                                  action="{{ route('magang.peserta.destroy', $peserta->id) }}"
                                  class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-12 text-gray-400">
                            <i class="fas fa-users text-3xl mb-2 block text-gray-200"></i>
                            Belum ada data peserta magang
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-gray-100">
            {{ $pesertaList->links() }}
        </div>
    </div>
</div>

{{-- ================= MODAL TAMBAH ================= --}}
<div id="modalTambah" class="modal-overlay hidden fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="modal-backdrop absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onclick="closeModal('modalTambah')"></div>
    <div class="modal-card relative bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden">
        <div class="bg-gradient-to-r from-green-600 to-emerald-500 px-6 py-5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center">
                        <i class="fas fa-user-plus text-white text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-white font-bold text-base">Tambah Peserta Magang</h3>
                        <p class="text-green-100 text-xs">Isi data peserta dengan lengkap</p>
                    </div>
                </div>
                <button onclick="closeModal('modalTambah')" class="w-8 h-8 rounded-lg bg-white/20 hover:bg-white/30 flex items-center justify-center transition">
                    <i class="fas fa-times text-white text-sm"></i>
                </button>
            </div>
        </div>

        {{-- Form Tambah --}}
        <form id="formTambah" method="POST" action="{{ route('magang.peserta.store') }}" class="p-6">
            @csrf
            <div class="mb-5">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs">1</span>
                    Identitas Peserta
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group">
                        <label class="form-label">NIM / NIS</label>
                        <input type="text" name="nim" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Nama Lengkap <span class="text-red-400">*</span></label>
                        <input type="text" name="nama" required class="form-input">
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">Program Studi</label>
                        <input type="text" name="program_studi" class="form-input">
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">Asal Instansi <span class="text-red-400">*</span></label>
                        <input type="text" name="asal_instansi" required class="form-input">
                    </div>
                </div>
            </div>
            <div class="mb-5">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs">2</span>
                    Penempatan & Periode
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group">
                        <label class="form-label">No HP</label>
                        <input type="text" name="no_hp" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Departemen</label>
                        <input type="text" name="posisi_dept" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Periode Mulai</label>
                        <input type="date" name="periode_mulai" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Periode Selesai</label>
                        <input type="date" name="periode_selesai" class="form-input">
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs">3</span>
                    Informasi Tambahan
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group col-span-2">
                        <label class="form-label">Alamat</label>
                        <textarea name="alamat" rows="2" class="form-input resize-none"></textarea>
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">PIC Sekolah / Kampus</label>
                        <input type="text" name="pic_sekolah" class="form-input">
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
                <button type="button" onclick="closeModal('modalTambah')"
                    class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg text-sm font-medium transition">
                    Batal
                </button>
                {{-- type="button" + showConfirm, bukan type="submit" --}}
                <button type="button"
                    onclick="showConfirm('save', 'Pastikan semua data peserta sudah diisi dengan benar.', () => document.getElementById('formTambah').submit())"
                    class="px-5 py-2.5 bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white rounded-lg text-sm font-semibold transition shadow-sm flex items-center gap-2">
                    <i class="fas fa-save"></i> Simpan Data
                </button>
            </div>
        </form>
    </div>
</div>

{{-- ================= MODAL EDIT ================= --}}
<div id="modalEdit" class="modal-overlay hidden fixed inset-0 z-50 flex items-center justify-center p-4">
    <div class="modal-backdrop absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onclick="closeModal('modalEdit')"></div>
    <div class="modal-card relative bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden">
        <div class="bg-gradient-to-r from-blue-600 to-indigo-500 px-6 py-5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center">
                        <i class="fas fa-user-edit text-white text-sm"></i>
                    </div>
                    <div>
                        <h3 class="text-white font-bold text-base">Edit Peserta Magang</h3>
                        <p class="text-blue-100 text-xs" id="edit_subtitle">Perbarui data peserta</p>
                    </div>
                </div>
                <button onclick="closeModal('modalEdit')" class="w-8 h-8 rounded-lg bg-white/20 hover:bg-white/30 flex items-center justify-center transition">
                    <i class="fas fa-times text-white text-sm"></i>
                </button>
            </div>
        </div>

        <form id="formEdit" method="POST" class="p-6">
            @csrf @method('PUT')
            <div class="mb-5">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs">1</span>
                    Identitas Peserta
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group">
                        <label class="form-label">NIM / NIS</label>
                        <input type="text" name="nim" id="edit_nim" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Nama Lengkap <span class="text-red-400">*</span></label>
                        <input type="text" name="nama" id="edit_nama" required class="form-input">
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">Program Studi</label>
                        <input type="text" name="program_studi" id="edit_program_studi" class="form-input">
                    </div>
                    <div class="form-group col-span-2">
                        <label class="form-label">Asal Instansi</label>
                        <input type="text" name="asal_instansi" id="edit_asal_instansi" class="form-input">
                    </div>
                </div>
            </div>
            <div class="mb-5">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs">2</span>
                    Penempatan & Periode
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group">
                        <label class="form-label">No HP</label>
                        <input type="text" name="no_hp" id="edit_no_hp" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Departemen</label>
                        <input type="text" name="posisi_dept" id="edit_posisi_dept" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Periode Mulai</label>
                        <input type="date" name="periode_mulai" id="edit_periode_mulai" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Periode Selesai</label>
                        <input type="date" name="periode_selesai" id="edit_periode_selesai" class="form-input">
                    </div>
                </div>
            </div>
            <div class="mb-6">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                    <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-xs">3</span>
                    Informasi Tambahan
                </p>
                <div class="grid grid-cols-2 gap-3">
                    <div class="form-group col-span-2">
                        <label class="form-label">Alamat</label>
                        <textarea name="alamat" id="edit_alamat" rows="2" class="form-input resize-none"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">PIC Sekolah / Kampus</label>
                        <input type="text" name="pic_sekolah" id="edit_pic_sekolah" class="form-input">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <select name="status" id="edit_status" class="form-input">
                            <option value="aktif">✅ Aktif</option>
                            <option value="selesai">🏁 Selesai</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
                <button type="button" onclick="closeModal('modalEdit')"
                    class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg text-sm font-medium transition">
                    Batal
                </button>
                {{-- type="button" + showConfirm, bukan type="submit" --}}
                <button type="button"
                    onclick="showConfirm('update', 'Perubahan data peserta akan langsung tersimpan ke sistem.', () => document.getElementById('formEdit').submit())"
                    class="px-5 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-500 hover:from-blue-700 hover:to-indigo-600 text-white rounded-lg text-sm font-semibold transition shadow-sm flex items-center gap-2">
                    <i class="fas fa-check"></i> Update Data
                </button>
            </div>
        </form>
    </div>
</div>

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

{{-- ================= CONFIRM DIALOG ================= --}}
<div id="confirmOverlay" class="hidden fixed inset-0 z-[9998] flex items-center justify-center p-4">
    <div class="confirm-backdrop absolute inset-0 bg-gray-900/70 backdrop-blur-sm"></div>
    <div id="confirmBox" class="confirm-box relative bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden">
        <div id="confirmIconArea" class="flex flex-col items-center pt-8 pb-5 px-6">
            <div id="confirmIconWrap" class="w-16 h-16 rounded-full flex items-center justify-center mb-4">
                <i id="confirmIcon" class="text-3xl"></i>
            </div>
            <h3 id="confirmTitle" class="text-lg font-bold text-gray-800 text-center"></h3>
            <p id="confirmMessage" class="text-sm text-gray-500 text-center mt-1 leading-relaxed"></p>
        </div>
        <div class="flex border-t border-gray-100">
            <button id="confirmCancel"
                class="flex-1 py-3.5 text-sm font-semibold text-gray-500 hover:bg-gray-50 transition rounded-bl-2xl border-r border-gray-100">
                Batal
            </button>
            <button id="confirmOk"
                class="flex-1 py-3.5 text-sm font-bold text-white transition rounded-br-2xl">
                Konfirmasi
            </button>
        </div>
    </div>
</div>

{{-- ================= AUTO TOAST dari session ================= --}}
@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        showToast('success', @json(session('success')));
    });
</script>
@endif
@if(session('error'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        showToast('error', @json(session('error')));
    });
</script>
@endif

<style>
.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.35rem;
}
.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
    background: #f9fafb;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
}
.form-input:focus {
    border-color: #10b981;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}
#formEdit .form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.form-group { display: flex; flex-direction: column; }
.col-span-2 { grid-column: span 2; }
.modal-card {
    animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 90vh;
    overflow-y: auto;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-box {
    animation: confirmPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes confirmPop {
    from { opacity: 0; transform: scale(0.7) translateY(30px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.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); }
}
.icon-pulse {
    animation: iconPulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes iconPulse {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.confirm-backdrop, .modal-backdrop {
    animation: fadeIn 0.2s ease;
}
.toast-progress {
    height: 3px;
    border-radius: 0 0 8px 8px;
    animation: progress linear forwards;
}
@keyframes progress {
    from { width: 100%; }
    to   { width: 0%; }
}
</style>

<script>
// ─── MODAL ───────────────────────────────────────────
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.style.overflow = '';
}

function openEditModal(id, peserta) {
    const form = document.getElementById('formEdit');
    form.action = `/magang/peserta/${id}`;
    document.getElementById('edit_subtitle').textContent      = `Editing: ${peserta.nama ?? ''}`;
    document.getElementById('edit_nim').value                 = peserta.nim ?? '';
    document.getElementById('edit_nama').value                = peserta.nama ?? '';
    document.getElementById('edit_program_studi').value       = peserta.jurusan ?? '';
    document.getElementById('edit_asal_instansi').value       = peserta.asal_instansi ?? '';
    document.getElementById('edit_no_hp').value               = peserta.no_hp ?? '';
    document.getElementById('edit_posisi_dept').value         = peserta.divisi_penempatan ?? '';
    document.getElementById('edit_periode_mulai').value       = peserta.periode_mulai ? peserta.periode_mulai.split('T')[0] : '';
    document.getElementById('edit_periode_selesai').value     = peserta.periode_selesai ? peserta.periode_selesai.split('T')[0] : '';
    document.getElementById('edit_alamat').value              = peserta.alamat ?? '';
    document.getElementById('edit_pic_sekolah').value         = peserta.pic_sekolah ?? '';
    document.getElementById('edit_status').value              = peserta.status ?? 'aktif';
    openModal('modalEdit');
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeModal('modalTambah');
        closeModal('modalEdit');
        closeConfirm();
    }
});

// ─── TOAST ───────────────────────────────────────────
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:340px;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);
}

// ─── CONFIRM DIALOG ──────────────────────────────────
let confirmCallback = null;

const confirmPresets = {
    delete: { iconClass:'fas fa-trash-alt', iconBg:'#fef2f2', iconColor:'#ef4444', title:'Hapus Data?', message:'Data yang dihapus tidak dapat dikembalikan.', okText:'Ya, Hapus', okBg:'linear-gradient(135deg,#ef4444,#dc2626)' },
    save:   { iconClass:'fas fa-save',      iconBg:'#f0fdf4', iconColor:'#10b981', title:'Simpan Data?', message:'Pastikan semua data sudah benar sebelum disimpan.', okText:'Ya, Simpan', okBg:'linear-gradient(135deg,#10b981,#059669)' },
    update: { iconClass:'fas fa-edit',      iconBg:'#eff6ff', iconColor:'#3b82f6', title:'Update Data?', message:'Perubahan akan langsung tersimpan ke sistem.', okText:'Ya, Update', okBg:'linear-gradient(135deg,#3b82f6,#2563eb)' },
};

function showConfirm(type, customMessage, callback) {
    const cfg = confirmPresets[type] || confirmPresets.delete;
    document.getElementById('confirmIconWrap').style.background = cfg.iconBg;
    const icon = document.getElementById('confirmIcon');
    icon.className = cfg.iconClass + ' text-3xl icon-pulse';
    icon.style.color = cfg.iconColor;
    document.getElementById('confirmTitle').textContent   = cfg.title;
    document.getElementById('confirmMessage').textContent = customMessage || cfg.message;
    const okBtn = document.getElementById('confirmOk');
    okBtn.textContent   = cfg.okText;
    okBtn.style.background = cfg.okBg;
    confirmCallback = callback;
    document.getElementById('confirmOverlay').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    setTimeout(() => icon.classList.remove('icon-pulse'), 600);
}

function closeConfirm() {
    document.getElementById('confirmOverlay').classList.add('hidden');
    document.body.style.overflow = '';
    confirmCallback = null;
}

document.getElementById('confirmCancel').addEventListener('click', closeConfirm);
document.getElementById('confirmOk').addEventListener('click', function() {
    if (typeof confirmCallback === 'function') confirmCallback();
    closeConfirm();
});
document.getElementById('confirmOverlay').addEventListener('click', function(e) {
    if (e.target === this || e.target.classList.contains('confirm-backdrop')) closeConfirm();
});

// ─── HAPUS ───────────────────────────────────────────
function confirmHapus(formId, namaPeserta) {
    showConfirm(
        'delete',
        'Yakin ingin menghapus data "' + namaPeserta + '"? Tindakan ini tidak bisa dibatalkan.',
        function() { document.getElementById(formId).submit(); }
    );
}
</script>

@endsection