@extends('template.desktop.app')
@section('title', 'Manajemen Pengguna')

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --usr-primary: #4f46e5;
            --usr-primary-light: #eef2ff;
            --usr-primary-dark: #3730a3;
            --usr-success: #059669;
            --usr-success-light: #d1fae5;
            --usr-warning: #d97706;
            --usr-warning-light: #fef3c7;
            --usr-danger: #dc2626;
            --usr-danger-light: #fee2e2;
            --usr-bg: #f8fafc;
            --card-radius: 16px;
            --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            --card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }

        .users-page {
            background: var(--usr-bg);
            min-height: 100vh;
        }

        /* ── Header ── */
        .page-header {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
            border-radius: var(--card-radius);
            padding: 1.75rem 2rem;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
        }

        .page-header::after {
            content: '';
            position: absolute;
            bottom: -40%;
            left: 20%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.04);
        }

        /* ── Stat Cards ── */
        .stat-card {
            border: none;
            border-radius: 14px;
            box-shadow: var(--card-shadow);
            background: white;
            padding: 1.1rem;
            transition: all 0.2s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--card-shadow-lg);
        }

        .stat-card .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .stat-card .stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1;
        }

        .stat-card .stat-label {
            font-size: 0.7rem;
            color: #94a3b8;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        /* ── Role Filter Pills ── */
        .role-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 16px;
            border-radius: 100px;
            font-size: 0.78rem;
            font-weight: 600;
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .role-pill:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        .role-pill.active {
            background: var(--usr-primary);
            color: white;
            border-color: var(--usr-primary);
            box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
        }

        .role-pill .pill-count {
            font-size: 10px;
            padding: 1px 7px;
            border-radius: 100px;
            font-weight: 700;
            background: rgba(0, 0, 0, 0.08);
        }

        .role-pill.active .pill-count {
            background: rgba(255, 255, 255, 0.25);
            color: white;
        }

        /* ── Table ── */
        .users-card {
            border: none;
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            background: white;
            overflow: hidden;
        }

        .table-users thead th {
            border-bottom: 2px solid #f1f5f9;
            color: #475569;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.68rem;
            letter-spacing: 0.05em;
            padding: 1rem;
        }

        .table-users tbody tr {
            transition: all 0.15s ease;
            border-bottom: 1px solid #f8fafc;
        }

        .table-users tbody tr:hover {
            background: #f5f3ff;
        }

        .table-users td {
            padding: 0.8rem 1rem;
            vertical-align: middle;
            font-size: 0.82rem;
        }

        /* ── User Avatar ── */
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.75rem;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        /* ── Role Badge ── */
        .role-badge {
            font-size: 10px;
            padding: 4px 10px;
            border-radius: 100px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .role-badge.superadmin {
            background: #fef3c7;
            color: #b45309;
        }

        .role-badge.admin {
            background: #eef2ff;
            color: #4f46e5;
        }

        .role-badge.finance {
            background: #d1fae5;
            color: #059669;
        }

        .role-badge.warehouse {
            background: #fce7f3;
            color: #db2777;
        }

        .role-badge.mitra {
            background: #e0e7ff;
            color: #4338ca;
        }

        .role-badge.distributor {
            background: #f0f9ff;
            color: #0369a1;
        }

        /* ── Status Toggle ── */
        .status-switch {
            position: relative;
            width: 40px;
            height: 22px;
        }

        .status-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .status-switch .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #e2e8f0;
            border-radius: 22px;
            transition: 0.3s;
        }

        .status-switch .slider::before {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .status-switch input:checked+.slider {
            background: var(--usr-success);
        }

        .status-switch input:checked+.slider::before {
            transform: translateX(18px);
        }

        /* ── Action Buttons ── */
        .btn-act {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
            background: white;
            color: #64748b;
            font-size: 13px;
            transition: all 0.15s;
            cursor: pointer;
        }

        .btn-act.edit:hover {
            background: #fef3c7;
            color: #d97706;
            border-color: #fde68a;
        }

        .btn-act.delete:hover {
            background: #fee2e2;
            color: #dc2626;
            border-color: #fca5a5;
        }

        /* ── Search ── */
        .search-box {
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 0.5rem 1rem;
            background: white;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s;
        }

        .search-box:focus-within {
            border-color: var(--usr-primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        .search-box input {
            border: none;
            outline: none;
            font-size: 0.82rem;
            flex: 1;
            background: transparent;
        }

        /* ── Skeleton ── */
        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        .sk-block {
            height: 14px;
            border-radius: 6px;
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        /* ── Pagination ── */
        .pg-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-top: 1px solid #f1f5f9;
        }

        .pg-wrap .pg-info {
            font-size: 0.78rem;
            color: #64748b;
        }

        .pg-wrap .pg-btn {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 6px 14px;
            background: white;
            font-size: 0.78rem;
            font-weight: 600;
            color: #475569;
            cursor: pointer;
            transition: all 0.15s;
        }

        .pg-wrap .pg-btn:hover {
            background: #f1f5f9;
        }

        .pg-wrap .pg-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .pg-wrap .pg-btn.active {
            background: var(--usr-primary);
            color: white;
            border-color: var(--usr-primary);
        }

        /* ── Empty State ── */
        .empty-state {
            text-align: center;
            padding: 3rem 2rem;
        }

        .empty-state i {
            font-size: 2.5rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .empty-state h6 {
            color: #64748b;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .empty-state p {
            color: #94a3b8;
            font-size: 0.8rem;
        }
    </style>
@endpush

@section('content')
    <div class="users-page">
        <div class="container-fluid px-4 py-3">

            {{-- ── Header ── --}}
            <div class="page-header mb-4">
                <div class="d-flex justify-content-between align-items-center position-relative" style="z-index:1;">
                    <div>
                        <h4 class="fw-bold mb-1" style="font-size:1.2rem;color:white;">
                            <i class="fas fa-users-cog me-2" style="opacity:0.8;"></i>Manajemen Pengguna
                        </h4>
                        <p class="mb-0" style="font-size:0.8rem;opacity:0.8;">Kelola hak akses dan informasi seluruh
                            pengguna sistem.</p>
                    </div>
                    <a href="{{ route('management_users.create') }}"
                        class="btn btn-light btn-sm rounded-pill px-4 fw-bold shadow-sm" style="font-size:0.8rem;">
                        <i class="fas fa-plus me-2"></i>Tambah User
                    </a>
                </div>
            </div>

            {{-- ── Stat Cards ── --}}
            <div class="row g-3 mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#eef2ff;color:#4f46e5;"><i class="fas fa-users"></i>
                            </div>
                            <div>
                                <div class="stat-value" id="stat-total" style="color:#4f46e5;">0</div>
                                <div class="stat-label">Total Pengguna</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#d1fae5;color:#059669;"><i
                                    class="fas fa-user-check"></i></div>
                            <div>
                                <div class="stat-value" id="stat-active" style="color:#059669;">0</div>
                                <div class="stat-label">Aktif</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#fee2e2;color:#dc2626;"><i
                                    class="fas fa-user-slash"></i></div>
                            <div>
                                <div class="stat-value" id="stat-inactive" style="color:#dc2626;">0</div>
                                <div class="stat-label">Nonaktif</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="stat-card">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon" style="background:#fef3c7;color:#d97706;"><i
                                    class="fas fa-user-plus"></i></div>
                            <div>
                                <div class="stat-value" id="stat-new" style="color:#d97706;">0</div>
                                <div class="stat-label">Baru (30 Hari)</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Role Filter ── --}}
            <div class="d-flex flex-wrap gap-2 mb-3">
                <button class="role-pill active" data-role="all">
                    <i class="fas fa-th-list"></i> Semua <span class="pill-count" id="pill-all">0</span>
                </button>
                <button class="role-pill" data-role="superadmin">
                    <i class="fas fa-crown"></i> Superadmin <span class="pill-count" id="pill-superadmin">0</span>
                </button>
                <button class="role-pill" data-role="admin">
                    <i class="fas fa-user-shield"></i> Admin <span class="pill-count" id="pill-admin">0</span>
                </button>
                <button class="role-pill" data-role="finance">
                    <i class="fas fa-wallet"></i> Finance <span class="pill-count" id="pill-finance">0</span>
                </button>
                <button class="role-pill" data-role="warehouse">
                    <i class="fas fa-warehouse"></i> Warehouse <span class="pill-count" id="pill-warehouse">0</span>
                </button>
                <button class="role-pill" data-role="mitra">
                    <i class="fas fa-handshake"></i> Mitra <span class="pill-count" id="pill-mitra">0</span>
                </button>
                <button class="role-pill" data-role="distributor">
                    <i class="fas fa-truck"></i> Distributor <span class="pill-count" id="pill-distributor">0</span>
                </button>
            </div>

            {{-- ── Toolbar ── --}}
            <div class="d-flex flex-wrap gap-2 mb-3 align-items-center">
                <div class="search-box" style="min-width:280px;">
                    <i class="fas fa-search text-muted" style="font-size:13px;"></i>
                    <input type="text" id="search-input" placeholder="Cari username, email, telepon...">
                </div>
                <div class="ms-auto">
                    <select class="form-select form-select-sm" id="per-page"
                        style="width:auto;border-radius:10px;font-size:0.8rem;">
                        <option value="10" selected>10 / halaman</option>
                        <option value="25">25 / halaman</option>
                        <option value="50">50 / halaman</option>
                        <option value="100">100 / halaman</option>
                    </select>
                </div>
            </div>

            {{-- ── Data Table ── --}}
            <div class="users-card">
                <div class="table-responsive">
                    <table class="table table-users align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Pengguna</th>
                                <th>Email</th>
                                <th>No. HP</th>
                                <th>Role</th>
                                <th>Dibuat</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody id="table-body"></tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div class="pg-wrap">
                    <div class="pg-info" id="pg-info">Menampilkan 0 dari 0</div>
                    <div class="d-flex gap-1" id="pg-buttons"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const tableBody = document.getElementById('table-body');

            let currentPage = 1;
            let currentRole = 'all';
            let debounceTimer = null;

            const avatarColors = {
                superadmin: {
                    bg: '#fef3c7',
                    color: '#b45309'
                },
                admin: {
                    bg: '#eef2ff',
                    color: '#4f46e5'
                },
                finance: {
                    bg: '#d1fae5',
                    color: '#059669'
                },
                warehouse: {
                    bg: '#fce7f3',
                    color: '#db2777'
                },
                mitra: {
                    bg: '#e0e7ff',
                    color: '#4338ca'
                },
                distributor: {
                    bg: '#f0f9ff',
                    color: '#0369a1'
                },
            };

            const roleLabels = {
                superadmin: 'Superadmin',
                admin: 'Admin',
                finance: 'Finance',
                warehouse: 'Warehouse',
                mitra: 'Mitra',
                distributor: 'Distributor',
            };

            // ── Role Pills ──
            document.querySelectorAll('.role-pill').forEach(pill => {
                pill.addEventListener('click', () => {
                    document.querySelectorAll('.role-pill').forEach(p => p.classList.remove(
                        'active'));
                    pill.classList.add('active');
                    currentRole = pill.dataset.role;
                    currentPage = 1;
                    loadData();
                });
            });

            // ── Search ──
            document.getElementById('search-input').addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    currentPage = 1;
                    loadData();
                }, 400);
            });

            // ── Per Page ──
            document.getElementById('per-page').addEventListener('change', () => {
                currentPage = 1;
                loadData();
            });

            function renderSkeleton() {
                tableBody.innerHTML = Array(5).fill().map(() => `
                <tr>
                    <td><div class="d-flex align-items-center gap-3"><div class="sk-block" style="width:36px;height:36px;border-radius:10px;"></div><div><div class="sk-block" style="width:100px;"></div></div></div></td>
                    <td><div class="sk-block" style="width:130px;"></div></td>
                    <td><div class="sk-block" style="width:100px;"></div></td>
                    <td><div class="sk-block" style="width:70px;height:22px;border-radius:100px;"></div></td>
                    <td><div class="sk-block" style="width:80px;"></div></td>
                    <td class="text-center"><div class="sk-block mx-auto" style="width:40px;height:22px;border-radius:22px;"></div></td>
                    <td class="text-center"><div class="sk-block mx-auto" style="width:70px;"></div></td>
                </tr>
            `).join('');
            }

            async function loadData() {
                renderSkeleton();

                const params = new URLSearchParams({
                    search: document.getElementById('search-input').value,
                    length: document.getElementById('per-page').value,
                    page: currentPage,
                });

                if (currentRole !== 'all') {
                    params.append('role', currentRole);
                }

                try {
                    const res = await axios.get(`{{ route('management_users.data') }}?${params}`);
                    const items = res.data.data ?? [];
                    const total = res.data.total ?? 0;
                    const lastPage = res.data.last_page ?? 1;
                    const perPage = res.data.per_page ?? 10;

                    // Stats
                    updateStats(items, total);

                    if (!items.length) {
                        tableBody.innerHTML = `
                        <tr><td colspan="7">
                            <div class="empty-state">
                                <i class="fas fa-users-slash"></i>
                                <h6>Tidak ada pengguna ditemukan</h6>
                                <p>Coba ubah filter atau kata kunci pencarian.</p>
                            </div>
                        </td></tr>`;
                        document.getElementById('pg-info').textContent = 'Menampilkan 0 dari 0';
                        document.getElementById('pg-buttons').innerHTML = '';
                        return;
                    }

                    renderTable(items);
                    renderPagination(total, perPage, lastPage);

                } catch (e) {
                    console.error(e);
                    tableBody.innerHTML =
                        `<tr><td colspan="7" class="text-center py-4 text-danger fw-bold"><i class="fas fa-exclamation-triangle me-2"></i>Gagal memuat data</td></tr>`;
                }
            }

            function updateStats(items, total) {
                document.getElementById('stat-total').textContent = total;

                const activeCount = items.filter(u => u.status == 1).length;
                const inactiveCount = items.filter(u => u.status == 0).length;
                document.getElementById('stat-active').textContent = activeCount;
                document.getElementById('stat-inactive').textContent = inactiveCount;

                const thirtyDaysAgo = new Date();
                thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
                const newCount = items.filter(u => new Date(u.created_at) >= thirtyDaysAgo).length;
                document.getElementById('stat-new').textContent = newCount;

                // Role pill counts
                const roleCounts = {};
                items.forEach(u => {
                    roleCounts[u.role] = (roleCounts[u.role] || 0) + 1;
                });
                document.getElementById('pill-all').textContent = total;
                ['superadmin', 'admin', 'finance', 'warehouse', 'mitra', 'distributor'].forEach(r => {
                    const el = document.getElementById('pill-' + r);
                    if (el) el.textContent = roleCounts[r] || 0;
                });
            }

            function renderTable(items) {
                tableBody.innerHTML = items.map(user => {
                    const initials = (user.username || '??').substring(0, 2).toUpperCase();
                    const colors = avatarColors[user.role] || {
                        bg: '#f1f5f9',
                        color: '#64748b'
                    };
                    const roleName = roleLabels[user.role] || user.role;
                    const createdAt = user.created_at ? new Date(user.created_at).toLocaleDateString(
                        'id-ID', {
                            day: '2-digit',
                            month: 'short',
                            year: 'numeric'
                        }) : '-';

                    return `
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-3">
                            <div class="user-avatar" style="background:${colors.bg};color:${colors.color};">${initials}</div>
                            <div>
                                <div class="fw-bold text-dark" style="font-size:0.85rem;">${user.username}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="text-muted" style="font-size:0.82rem;">${user.email}</div>
                    </td>
                    <td>
                        <div style="font-size:0.82rem;">${user.phone_number || '<span class="text-muted">-</span>'}</div>
                    </td>
                    <td>
                        <span class="role-badge ${user.role}">${roleName}</span>
                    </td>
                    <td>
                        <div class="text-muted" style="font-size:0.8rem;">${createdAt}</div>
                    </td>
                    <td class="text-center">
                        <label class="status-switch">
                            <input type="checkbox" ${user.status == 1 ? 'checked' : ''} onchange="toggleStatus(${user.id}, this)">
                            <span class="slider"></span>
                        </label>
                    </td>
                    <td class="text-center">
                        <div class="d-flex gap-1 justify-content-center">
                            <a href="/management-users/${user.id}/edit" class="btn-act edit" title="Edit">
                                <i class="fas fa-pen" style="font-size:11px;"></i>
                            </a>
                            <button class="btn-act delete" title="Hapus" onclick="deleteUser(${user.id}, '${user.username}')">
                                <i class="fas fa-trash" style="font-size:11px;"></i>
                            </button>
                        </div>
                    </td>
                </tr>`;
                }).join('');
            }

            function renderPagination(total, perPage, lastPage) {
                const from = (currentPage - 1) * perPage + 1;
                const to = Math.min(currentPage * perPage, total);
                document.getElementById('pg-info').textContent = `Menampilkan ${from}-${to} dari ${total}`;

                let html =
                    `<button class="pg-btn" ${currentPage <= 1 ? 'disabled' : ''} onclick="goPage(${currentPage - 1})"><i class="fas fa-chevron-left"></i></button>`;

                const maxVisible = 5;
                let startP = Math.max(1, currentPage - Math.floor(maxVisible / 2));
                let endP = Math.min(lastPage, startP + maxVisible - 1);
                if (endP - startP < maxVisible - 1) startP = Math.max(1, endP - maxVisible + 1);

                if (startP > 1) html +=
                    `<button class="pg-btn" onclick="goPage(1)">1</button><span style="padding:0 4px;color:#94a3b8;">…</span>`;

                for (let i = startP; i <= endP; i++) {
                    html +=
                        `<button class="pg-btn ${i === currentPage ? 'active' : ''}" onclick="goPage(${i})">${i}</button>`;
                }

                if (endP < lastPage) html +=
                    `<span style="padding:0 4px;color:#94a3b8;">…</span><button class="pg-btn" onclick="goPage(${lastPage})">${lastPage}</button>`;

                html +=
                    `<button class="pg-btn" ${currentPage >= lastPage ? 'disabled' : ''} onclick="goPage(${currentPage + 1})"><i class="fas fa-chevron-right"></i></button>`;

                document.getElementById('pg-buttons').innerHTML = html;
            }

            // ── Global Functions ──
            window.goPage = function(page) {
                currentPage = page;
                loadData();
            };

            window.toggleStatus = async function(id, checkbox) {
                try {
                    await axios.patch(`/management-users/${id}/status`, {
                        status: checkbox.checked ? 1 : 0
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });
                    showToast('Status berhasil diperbarui', 'success');
                } catch (e) {
                    checkbox.checked = !checkbox.checked;
                    showToast('Gagal memperbarui status', 'error');
                }
            };

            window.deleteUser = async function(id, username) {
                if (!confirm(`Hapus user "${username}"? Aksi ini tidak bisa dibatalkan.`)) return;

                try {
                    await axios.delete(`/management-users/${id}/destroy`, {
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        }
                    });
                    showToast('User berhasil dihapus', 'success');
                    loadData();
                } catch (e) {
                    showToast('Gagal menghapus user', 'error');
                }
            };

            function showToast(text, type) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: type,
                        title: text,
                        showConfirmButton: false,
                        timer: 2500
                    });
                } else {
                    alert(text);
                }
            }

            // ── Init ──
            loadData();
        });
    </script>
@endpush