{% extends 'base.html' %}
{% load static %}

{% block title %}Daftar Siswa & RMIB - PRESTISIA{% endblock %}

{% block extra_css %}
<style>
/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideInRight {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

@keyframes shimmer {
    0% { 
        background-position: -1000px 0; 
    }
    100% { 
        background-position: 1000px 0; 
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

.animate-fadeInUp { 
    animation: fadeInUp 0.6s ease-out forwards; 
    opacity: 0; 
}

.animate-slideInRight { 
    animation: slideInRight 0.5s ease-out forwards; 
    opacity: 0; 
}

.animate-slideInDown {
    animation: slideInDown 0.5s ease-out forwards;
    opacity: 0;
}

.animate-scaleIn { 
    animation: scaleIn 0.4s ease-out forwards; 
    opacity: 0; 
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ==================== CARD ==================== */
.card-modern {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==================== GRADIENT ==================== */
.gradient-primary { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
}

.gradient-success { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
}

.gradient-warning { 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
}

.gradient-info { 
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); 
}

.gradient-danger { 
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); 
}

.gradient-pink {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.gradient-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.gradient-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

/* ==================== STATS CARD ==================== */
.stats-card {
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stats-card:hover::before {
    opacity: 1;
}

.stats-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.stats-card:hover .stats-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ==================== TABLE ==================== */
.table-modern {
    border-spacing: 0 12px;
    border-collapse: separate;
    width: 100%;
}

.table-modern thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 16px 20px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    border: none;
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 12px;
}

.table-modern tbody tr {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.table-modern tbody tr:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
    z-index: 1;
}

.table-modern tbody td {
    padding: 16px 20px;
    border: none;
    vertical-align: middle;
    color: #334155;
    font-size: 14px;
}

.table-modern tbody tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table-modern tbody tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ==================== AVATAR ==================== */
.avatar-modern {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: white;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.avatar-modern:hover {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==================== BADGE ==================== */
.badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.badge-pending { 
    background: #fef3c7; 
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-pending:hover {
    background: #fcd34d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(253, 224, 71, 0.4);
}

.badge-completed { 
    background: #d1fae5; 
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.badge-completed:hover {
    background: #6ee7b7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(110, 231, 183, 0.4);
}

.badge-in-progress { 
    background: #dbeafe; 
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.badge-in-progress:hover {
    background: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(147, 197, 253, 0.4);
}

/* ==================== BUTTON ==================== */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.btn-modern:active { 
    transform: scale(0.98); 
}

.btn-modern:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.btn-success { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-success:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover {
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.6);
}

.btn-outline { 
    background: white; 
    border: 2px solid #e2e8f0; 
    color: #475569;
    box-shadow: none;
}

.btn-outline:hover { 
    border-color: #667eea; 
    color: #667eea;
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* ==================== SEARCH ==================== */
.search-box {
    position: relative;
}

.search-box input {
    padding-left: 48px;
    padding-right: 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.search-box input:focus {
    border-color: #667eea;
    outline: none;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.search-box input::placeholder {
    color: #cbd5e1;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}

/* ==================== FILTER TAG ==================== */
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
    border: 1px solid #cbd5e1;
}

.filter-tag button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #475569;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.filter-tag button:hover {
    background: #94a3b8;
    color: white;
    transform: scale(1.1);
}

/* ==================== PROGRESS BAR ==================== */
.progress-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== TOOLTIP ==================== */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #1e293b;
    color: white;
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
    position: absolute;
    z-index: 100;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center;
    padding: 100px 20px;
}

.empty-state-icon {
    width: 140px;
    height: 140px;
    margin: 0 auto 32px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: #94a3b8;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 24px;
}

/* ==================== PAGINATION ==================== */
.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    background: white;
    color: #475569;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.pagination-item:hover {
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.pagination-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.pagination-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #e2e8f0;
}

/* ==================== MODAL ==================== */
.modal-overlay {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    backdrop-filter: blur(4px) !important;
}

.modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

.modal-content {
    background: white !important;
    border-radius: 20px !important;
    max-width: 500px !important;
    width: 90% !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
    z-index: 10000 !important;
    padding: 32px !important;
}


.modal-overlay.active .modal-content {
    transform: scale(1);
}

/* ==================== SPINNER ==================== */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

/* ==================== BULK ACTIONS BAR ==================== */
#bulkActionsBar {
    animation: slideInDown 0.3s ease-out;
}

/* ==================== NOTIFICATIONS ==================== */
.notification-toast {
    animation: slideInRight 0.3s ease-out;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .table-modern {
        border-spacing: 0 8px;
    }

    .table-modern thead th {
        padding: 12px 12px;
        font-size: 10px;
    }

    .table-modern tbody td {
        padding: 12px;
        font-size: 13px;
    }

    .stats-card {
        grid-column: span 1;
    }

    .btn-modern {
        padding: 10px 16px;
        font-size: 13px;
    }

    .pagination {
        gap: 4px;
    }

    .pagination-item {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
    }

    .empty-state {
        padding: 60px 20px;
    }

    .empty-state-icon {
        width: 100px;
        height: 100px;
        font-size: 42px;
        margin-bottom: 20px;
    }

    .empty-state h3 {
        font-size: 18px;
    }

    .empty-state p {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .card-modern {
        border-radius: 12px;
    }

    .btn-modern {
        width: 100%;
        justify-content: center;
    }

    .grid {
        grid-template-columns: 1fr !important;
    }
}

@media print {
    .no-print { 
        display: none !important; 
    }

    .table-modern tbody tr { 
        box-shadow: none; 
        border: 1px solid #e2e8f0;
        page-break-inside: avoid;
    }

    .card-modern {
        box-shadow: none;
        border: 1px solid #e2e8f0;
    }
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { 
    width: 10px; 
}

::-webkit-scrollbar-track { 
    background: #f1f5f9; 
    border-radius: 10px; 
}

::-webkit-scrollbar-thumb { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover { 
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* ==================== UTILITY ==================== */
.no-print {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-muted {
    color: #94a3b8;
}

.cursor-pointer {
    cursor: pointer;
}
</style>
{% endblock %}

{% block content %}
<!-- HEADER -->
<header class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white shadow-2xl relative overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-72 h-72 bg-white rounded-full blur-3xl"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
        <div class="animate-fadeInUp">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg border border-white/30">
                        <i class="fas fa-users-class text-3xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl lg:text-4xl font-bold tracking-tight">Daftar Siswa</h1>
                        <p class="text-indigo-100 mt-1">Manajemen data siswa dan tes RMIB</p>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3 no-print">
                    <a href="{% url 'students:export_csv' %}" class="btn-modern btn-outline bg-white/10 backdrop-blur-lg text-white border-white/30 hover:bg-white/20 hover:border-white/50 shadow-lg">
                        <i class="fas fa-file-export"></i>
                        <span>Export CSV</span>
                    </a>
                    {% if request.user.is_staff %}
                    <a href="{% url 'students:batch_import' %}" class="btn-modern btn-outline bg-white/10 backdrop-blur-lg text-white border-white/30 hover:bg-white/20 hover:border-white/50 shadow-lg">
                        <i class="fas fa-file-import"></i>
                        <span>Import Batch</span>
                    </a>
                    <a href="{% url 'students:rmib_batch_import' %}" class="btn-modern btn-outline bg-white/10 backdrop-blur-lg text-white border-white/30 hover:bg-white/20 hover:border-white/50 shadow-lg">
                        <i class="fas fa-cloud-upload-alt"></i>
                        <span>Import Batch RMIB</span>
                    </a>
                    <a href="{% url 'students:export_page' %}" class="btn-modern btn-outline bg-white/10 backdrop-blur-lg text-white border-white/30 hover:bg-white/20 hover:border-white/50 shadow-lg">
                        <i class="fas fa-file-export"></i>
                        <span>Export Data</span>
                    </a>
                    {% endif %}
                    <a href="{% url 'students:create' %}" class="btn-modern btn-success shadow-lg hover:shadow-xl">
                        <i class="fas fa-user-plus"></i>
                        <span>Tambah Siswa</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>


<!-- STATS CARDS -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10 pb-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Students -->
        <div class="card-modern stats-card animate-scaleIn delay-100">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="stats-icon gradient-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <span class="text-xs font-bold text-indigo-600 bg-indigo-100 px-3 py-1 rounded-full">Total</span>
                </div>
                <h3 class="text-4xl font-bold text-gray-900 mb-1">{{ total_students }}</h3>
                <p class="text-sm text-gray-600 font-medium">Total Siswa</p>
                <div class="mt-4 progress-bar">
                    <div class="progress-bar-fill" style="width: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);"></div>
                </div>
            </div>
        </div>

        <!-- Completed Tests -->
        <div class="card-modern stats-card animate-scaleIn delay-200">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="stats-icon gradient-success">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <span class="text-xs font-bold text-green-600 bg-green-100 px-3 py-1 rounded-full">
                        {% if total_students > 0 %}{% widthratio completed_tests total_students 100 %}%{% else %}0%{% endif %}
                    </span>
                </div>
                <h3 class="text-4xl font-bold text-gray-900 mb-1">{{ completed_tests }}</h3>
                <p class="text-sm text-gray-600 font-medium">Tes Selesai</p>
                <div class="mt-4 progress-bar">
                    <div class="progress-bar-fill" style="width: {% if total_students > 0 %}{% widthratio completed_tests total_students 100 %}{% else %}0{% endif %}%; background: linear-gradient(90deg, #10b981 0%, #059669 100%);"></div>
                </div>
            </div>
        </div>

        <!-- In Progress Tests -->
        <div class="card-modern stats-card animate-scaleIn delay-300">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="stats-icon gradient-info">
                        <i class="fas fa-spinner"></i>
                    </div>
                    <span class="text-xs font-bold text-blue-600 bg-blue-100 px-3 py-1 rounded-full">
                        {% if total_students > 0 %}{% widthratio in_progress_tests total_students 100 %}%{% else %}0%{% endif %}
                    </span>
                </div>
                <h3 class="text-4xl font-bold text-gray-900 mb-1">{{ in_progress_tests }}</h3>
                <p class="text-sm text-gray-600 font-medium">Sedang Tes</p>
                <div class="mt-4 progress-bar">
                    <div class="progress-bar-fill" style="width: {% if total_students > 0 %}{% widthratio in_progress_tests total_students 100 %}{% else %}0{% endif %}%; background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);"></div>
                </div>
            </div>
        </div>

        <!-- Pending Tests -->
        <div class="card-modern stats-card animate-scaleIn delay-400">
            <div class="p-6">
                <div class="flex items-center justify-between mb-4">
                    <div class="stats-icon gradient-warning">
                        <i class="fas fa-clock"></i>
                    </div>
                    <span class="text-xs font-bold text-amber-600 bg-amber-100 px-3 py-1 rounded-full">
                        {% if total_students > 0 %}{% widthratio pending_tests total_students 100 %}%{% else %}0%{% endif %}
                    </span>
                </div>
                <h3 class="text-4xl font-bold text-gray-900 mb-1">{{ pending_tests }}</h3>
                <p class="text-sm text-gray-600 font-medium">Belum Tes</p>
                <div class="mt-4 progress-bar">
                    <div class="progress-bar-fill" style="width: {% if total_students > 0 %}{% widthratio pending_tests total_students 100 %}{% else %}0{% endif %}%; background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- SEARCH & FILTER -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
    <div class="card-modern p-6 animate-fadeInUp">
        <form method="get" action="{% url 'students:list' %}" class="space-y-6">
            <!-- Search Input -->
            <div class="search-box">
                <i class="search-icon fas fa-search"></i>
                <input type="text" name="search" value="{{ search }}" placeholder="Cari nama, NISN, kelas, atau tempat lahir..." class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all">
            </div>

            <!-- Filter Dropdowns -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <!-- Class Filter -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2"><i class="fas fa-chalkboard-teacher text-indigo-600 mr-2"></i>Kelas</label>
                    <select name="class" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all bg-white font-medium">
                        <option value="">Semua Kelas</option>
                        {% for class in available_classes %}<option value="{{ class }}" {% if class_filter == class %}selected{% endif %}>Kelas {{ class }}</option>{% endfor %}
                    </select>
                </div>

                <!-- Status Filter -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2"><i class="fas fa-tasks text-green-600 mr-2"></i>Status Tes</label>
                    <select name="status" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all bg-white font-medium">
                        <option value="">Semua Status</option>
                        {% for status_value, status_label in status_choices %}<option value="{{ status_value }}" {% if status_filter == status_value %}selected{% endif %}>{{ status_label }}</option>{% endfor %}
                    </select>
                </div>

                <!-- Gender Filter -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2"><i class="fas fa-venus-mars text-purple-600 mr-2"></i>Jenis Kelamin</label>
                    <select name="gender" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all bg-white font-medium">
                        <option value="">Semua</option>
                        {% for gender_value, gender_label in gender_choices %}<option value="{{ gender_value }}" {% if gender_filter == gender_value %}selected{% endif %}>{{ gender_label }}</option>{% endfor %}
                    </select>
                </div>

                <!-- Year Filter -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2"><i class="fas fa-calendar text-blue-600 mr-2"></i>Tahun Masuk</label>
                    <select name="year" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all bg-white font-medium">
                        <option value="">Semua Tahun</option>
                        {% for year in available_years %}<option value="{{ year }}" {% if year_filter == year|stringformat:"s" %}selected{% endif %}>{{ year }}</option>{% endfor %}
                    </select>
                </div>

                <!-- Sort Filter -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2"><i class="fas fa-sort text-gray-600 mr-2"></i>Urutkan</label>
                    <select name="sort" class="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:outline-none transition-all bg-white font-medium">
                        <option value="">Default</option>
                        <option value="name" {% if sort == 'name' %}selected{% endif %}>Nama A-Z</option>
                        <option value="nisn" {% if sort == 'nisn' %}selected{% endif %}>NISN</option>
                        <option value="class" {% if sort == 'class' %}selected{% endif %}>Kelas</option>
                        <option value="status" {% if sort == 'status' %}selected{% endif %}>Status</option>
                        <option value="date" {% if sort == 'date' %}selected{% endif %}>Terbaru</option>
                    </select>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-wrap gap-3">
                <button type="submit" class="btn-modern btn-primary"><i class="fas fa-filter"></i><span>Terapkan Filter</span></button>
                <a href="{% url 'students:list' %}" class="btn-modern btn-outline"><i class="fas fa-redo"></i><span>Reset</span></a>
            </div>

            <!-- Active Filters Display -->
            {% if search or class_filter or status_filter or gender_filter or year_filter %}
            <div class="flex flex-wrap items-center gap-3 pt-4 border-t-2 border-gray-200">
                <span class="text-sm font-bold text-gray-700">Filter Aktif:</span>
                {% if search %}<div class="filter-tag"><i class="fas fa-search text-xs"></i><span>{{ search }}</span><button type="button" onclick="removeFilter('search')" class="hover:scale-125"><i class="fas fa-times text-xs"></i></button></div>{% endif %}
                {% if class_filter %}<div class="filter-tag"><i class="fas fa-chalkboard-teacher text-xs"></i><span>Kelas {{ class_filter }}</span><button type="button" onclick="removeFilter('class')" class="hover:scale-125"><i class="fas fa-times text-xs"></i></button></div>{% endif %}
                {% if status_filter %}<div class="filter-tag"><i class="fas fa-tasks text-xs"></i><span>{{ status_filter|capfirst }}</span><button type="button" onclick="removeFilter('status')" class="hover:scale-125"><i class="fas fa-times text-xs"></i></button></div>{% endif %}
                {% if gender_filter %}<div class="filter-tag"><i class="fas fa-venus-mars text-xs"></i><span>{% for g_val, g_label in gender_choices %}{% if g_val == gender_filter %}{{ g_label }}{% endif %}{% endfor %}</span><button type="button" onclick="removeFilter('gender')" class="hover:scale-125"><i class="fas fa-times text-xs"></i></button></div>{% endif %}
                {% if year_filter %}<div class="filter-tag"><i class="fas fa-calendar text-xs"></i><span>{{ year_filter }}</span><button type="button" onclick="removeFilter('year')" class="hover:scale-125"><i class="fas fa-times text-xs"></i></button></div>{% endif %}
            </div>
            {% endif %}
        </form>
    </div>
</section>

<!-- BULK ACTIONS BAR -->
{% if request.user.is_staff %}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6 no-print">
    <div class="card-modern p-4 bg-gradient-to-r from-purple-50 via-indigo-50 to-blue-50 border-2 border-purple-300" id="bulkActionsBar" style="display: none;">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-purple-600 to-indigo-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg">
                    <span id="selectedCount">0</span>
                </div>
                <div>
                    <p class="text-sm font-bold text-gray-900">Siswa Terpilih</p>
                    <p class="text-xs text-gray-600">Pilih aksi untuk mengelola data</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-2">
                <button type="button" onclick="clearSelection()" class="btn-modern btn-outline text-sm">
                    <i class="fas fa-times"></i><span>Batal</span>
                </button>
                <button type="button" onclick="confirmBulkDelete()" class="btn-modern btn-danger text-sm">
                    <i class="fas fa-trash-alt"></i><span>Hapus Terpilih</span>
                </button>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- TABLE SECTION -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12">
    <div class="card-modern p-6">
        <!-- Table Header -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900"><i class="fas fa-table text-indigo-600 mr-3"></i>Data Siswa</h2>
                <p class="text-sm text-gray-600 mt-2">
                    Menampilkan <span class="font-bold text-indigo-600">{{ page_obj.start_index }}-{{ page_obj.end_index }}</span> 
                    dari <span class="font-bold text-indigo-600">{{ page_obj.paginator.count }}</span> siswa
                </p>
            </div>
            {% if request.user.is_staff %}
            <div class="flex items-center gap-2 no-print">
                <label class="inline-flex items-center gap-2 cursor-pointer text-sm font-bold text-gray-700 px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition">
                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll(this)" class="w-5 h-5 rounded border-2 border-gray-300 text-indigo-600 cursor-pointer">
                    <span>Pilih Semua</span>
                </label>
            </div>
            {% endif %}
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            {% if students %}
            <table class="table-modern">
                <thead>
                    <tr>
                        {% if request.user.is_staff %}<th class="no-print" style="width: 50px;"><input type="checkbox" id="selectAllHeader" onchange="toggleSelectAll(this)" class="w-5 h-5 rounded border-2 border-gray-300 text-indigo-600 cursor-pointer"></th>{% endif %}
                        <th style="width: 80px;"><i class="fas fa-image text-purple-600 mr-2"></i>Avatar</th>
                        <th><i class="fas fa-user text-blue-600 mr-2"></i>Siswa</th>
                        <th><i class="fas fa-id-card text-green-600 mr-2"></i>NISN</th>
                        <th><i class="fas fa-chalkboard text-indigo-600 mr-2"></i>Kelas</th>
                        <th><i class="fas fa-venus-mars text-pink-600 mr-2"></i>Jenis Kelamin</th>
                        <th><i class="fas fa-clipboard-check text-orange-600 mr-2"></i>Status Tes</th>
                        <th><i class="fas fa-trophy text-amber-600 mr-2"></i>Prestasi</th>
                        <th class="no-print"><i class="fas fa-cog text-gray-600 mr-2"></i>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for student in students %}
                    <tr class="animate-fadeInUp" style="animation-delay: {{ forloop.counter|add:'-1'|stringformat:'d'}}00ms;">
                        <!-- Checkbox -->
                        {% if request.user.is_staff %}
                        <td class="no-print">
                            <input type="checkbox" value="{{ student.pk }}" onchange="updateBulkActions()" class="student-checkbox w-5 h-5 rounded border-2 border-gray-300 text-indigo-600 cursor-pointer">
                        </td>
                        {% endif %}

                        <!-- Avatar -->
                        <td>
                            <div class="avatar-modern {% cycle 'gradient-primary' 'gradient-success' 'gradient-info' 'gradient-warning' 'gradient-danger' 'gradient-pink' 'gradient-cyan' 'gradient-orange' 'gradient-teal' %}">
                                {{ student.name|first|upper }}
                            </div>
                        </td>

                        <!-- Student Info -->
                        <td>
                            <div>
                                <div class="font-bold text-gray-900">{{ student.name }}</div>
                                <div class="text-xs text-gray-500 mt-1.5 space-y-1">
                                    <div><i class="fas fa-map-marker-alt mr-1.5 text-red-500"></i>{{ student.birth_place|default:"—" }}</div>
                                    <div><i class="fas fa-birthday-cake mr-1.5 text-orange-500"></i>{{ student.birth_date|date:"d M Y" }}</div>
                                </div>
                            </div>
                        </td>

                        <!-- NISN -->
                        <td>
                            <div class="flex items-center gap-2">
                                <span class="font-mono text-sm font-bold text-gray-800">{{ student.nisn }}</span>
                                <button onclick="copyToClipboard('{{ student.nisn }}')" class="tooltip text-gray-400 hover:text-indigo-600 transition-colors">
                                    <i class="fas fa-copy text-sm"></i>
                                    <span class="tooltiptext">Copy NISN</span>
                                </button>
                            </div>
                        </td>

                        <!-- Class -->
                        <td>
                            <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-indigo-100 text-indigo-700 rounded-lg font-bold text-sm">
                                <i class="fas fa-chalkboard-teacher"></i>{{ student.student_class }}
                            </span>
                        </td>

                        <!-- Gender -->
                        <td>
                            {% if student.gender == 'L' %}
                            <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg font-bold text-sm">
                                <i class="fas fa-mars"></i>Laki-laki
                            </span>
                            {% else %}
                            <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-pink-100 text-pink-700 rounded-lg font-bold text-sm">
                                <i class="fas fa-venus"></i>Perempuan
                            </span>
                            {% endif %}
                        </td>

                        <!-- Test Status -->
                        <td>
                            {% if student.test_status == 'completed' %}
                            <span class="badge-modern badge-completed">
                                <i class="fas fa-check-circle"></i>Selesai
                            </span>
                            {% elif student.test_status == 'in_progress' %}
                            <span class="badge-modern badge-in-progress">
                                <i class="fas fa-spinner fa-spin"></i>Sedang Tes
                            </span>
                            {% else %}
                            <span class="badge-modern badge-pending">
                                <i class="fas fa-clock"></i>Belum Tes
                            </span>
                            {% endif %}
                        </td>

                        <!-- Achievements -->
                        <td>
                            {% if student.achievements.count > 0 %}
                            <div class="tooltip">
                                <span class="inline-flex items-center gap-2 px-3 py-1.5 bg-amber-100 text-amber-700 rounded-lg font-bold text-sm cursor-help">
                                    <i class="fas fa-trophy"></i>{{ student.achievements.count }}
                                </span>
                                <span class="tooltiptext">{{ student.achievements.count }} Prestasi</span>
                            </div>
                            {% else %}
                            <span class="text-sm text-gray-400 font-medium">—</span>
                            {% endif %}
                        </td>

                        <!-- Actions -->
                        <td class="no-print">
                            <div class="flex flex-wrap gap-2">
                                <!-- View Detail -->
                                <a href="{% url 'students:detail' student.pk %}" class="tooltip inline-flex items-center justify-center w-10 h-10 rounded-lg bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white transition-all duration-200 shadow-md hover:shadow-lg hover:scale-110">
                                    <i class="fas fa-eye"></i>
                                    <span class="tooltiptext">Lihat Detail</span>
                                </a>

                                <!-- Edit -->
                                {% if request.user.is_staff %}
                                <a href="{% url 'students:update' student.pk %}" class="tooltip inline-flex items-center justify-center w-10 h-10 rounded-lg bg-amber-100 text-amber-600 hover:bg-amber-600 hover:text-white transition-all duration-200 shadow-md hover:shadow-lg hover:scale-110">
                                    <i class="fas fa-edit"></i>
                                    <span class="tooltiptext">Edit Data</span>
                                </a>

                                <!-- Delete -->
                                <button type="button" class="tooltip inline-flex items-center justify-center w-10 h-10 rounded-lg bg-red-100 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-200 shadow-md hover:shadow-lg hover:scale-110" onclick="console.log('Delete clicked'); deleteStudent({{ student.pk }}, '{{ student.name|escapejs }}'); return false;">
                                    <i class="fas fa-trash-alt"></i>
                                    <span class="tooltiptext">Hapus Siswa</span>
                                </button>
                                {% endif %}

                                <!-- Test or Result -->
                                {% if student.test_status != 'completed' %}
                                <a href="{% url 'students:rmib_test' student.pk %}" class="tooltip inline-flex items-center justify-center w-10 h-10 rounded-lg bg-purple-100 text-purple-600 hover:bg-purple-600 hover:text-white transition-all duration-200 shadow-md hover:shadow-lg hover:scale-110">
                                    <i class="fas fa-clipboard-list"></i>
                                    <span class="tooltiptext">Mulai Tes</span>
                                </a>
                                {% else %}
                                <a href="{% url 'students:rmib_result' student.pk %}" class="tooltip inline-flex items-center justify-center w-10 h-10 rounded-lg bg-green-100 text-green-600 hover:bg-green-600 hover:text-white transition-all duration-200 shadow-md hover:shadow-lg hover:scale-110">
                                    <i class="fas fa-chart-bar"></i>
                                    <span class="tooltiptext">Lihat Hasil</span>
                                </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <!-- Empty State -->
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="fas fa-users-slash"></i>
                </div>
                <h3>Tidak Ada Data</h3>
                <p>
                    {% if search or class_filter or status_filter or gender_filter or year_filter %}
                    Tidak ada siswa sesuai dengan filter yang Anda terapkan.
                    {% else %}
                    Belum ada data siswa dalam sistem. Silakan tambahkan data siswa terlebih dahulu.
                    {% endif %}
                </p>
                <div class="flex flex-wrap gap-3 justify-center">
                    {% if search or class_filter or status_filter or gender_filter or year_filter %}
                    <a href="{% url 'students:list' %}" class="btn-modern btn-primary">
                        <i class="fas fa-redo"></i><span>Reset Filter</span>
                    </a>
                    {% else %}
                    <a href="{% url 'students:create' %}" class="btn-modern btn-primary">
                        <i class="fas fa-user-plus"></i><span>Tambah Siswa</span>
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Pagination -->
        {% if page_obj.paginator.num_pages > 1 %}
        <div class="mt-8 pt-6 border-t-2 border-gray-200">
            <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="text-sm font-medium text-gray-700">
                    Halaman <span class="font-bold text-indigo-600">{{ page_obj.number }}</span> 
                    dari <span class="font-bold text-indigo-600">{{ page_obj.paginator.num_pages }}</span>
                    <span class="text-gray-500 ml-2">(Total: {{ page_obj.paginator.count }} siswa)</span>
                </div>
                <nav class="pagination">
                    {% if page_obj.has_previous %}
                    <a href="?page=1{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman Pertama">
                        <i class="fas fa-angle-double-left"></i>
                    </a>
                    <a href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman Sebelumnya">
                        <i class="fas fa-angle-left"></i>
                    </a>
                    {% else %}
                    <span class="pagination-item disabled" title="Tidak ada halaman sebelumnya"><i class="fas fa-angle-double-left"></i></span>
                    <span class="pagination-item disabled" title="Tidak ada halaman sebelumnya"><i class="fas fa-angle-left"></i></span>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <span class="pagination-item active" title="Halaman {{ num }} (Saat ini)">{{ num }}</span>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman {{ num }}">{{ num }}</a>
                        {% elif num == 1 or num == page_obj.paginator.num_pages %}
                        <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman {{ num }}">{{ num }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman Selanjutnya">
                        <i class="fas fa-angle-right"></i>
                    </a>
                    <a href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if class_filter %}&class={{ class_filter }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if gender_filter %}&gender={{ gender_filter }}{% endif %}{% if year_filter %}&year={{ year_filter }}{% endif %}{% if sort %}&sort={{ sort }}{% endif %}" class="pagination-item" title="Halaman Terakhir">
                        <i class="fas fa-angle-double-right"></i>
                    </a>
                    {% else %}
                    <span class="pagination-item disabled" title="Tidak ada halaman selanjutnya"><i class="fas fa-angle-right"></i></span>
                    <span class="pagination-item disabled" title="Tidak ada halaman selanjutnya"><i class="fas fa-angle-double-right"></i></span>
                    {% endif %}
                </nav>
            </div>
        </div>
        {% endif %}
    </div>
</section>

<!-- DELETE MODAL -->
<div id="deleteModal" class="modal-overlay" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="p-8">
            <div class="flex items-center justify-center w-20 h-20 mx-auto mb-6 rounded-full bg-red-100 shadow-lg">
                <i class="fas fa-exclamation-triangle text-4xl text-red-600"></i>
            </div>
            <h3 class="text-3xl font-bold text-center text-gray-900 mb-3">Konfirmasi Hapus</h3>
            <p class="text-center text-gray-600 mb-8 leading-relaxed">
                Anda yakin ingin menghapus <strong class="text-gray-900" id="studentName">Siswa</strong>?
                <br>
                <span class="text-red-600 font-semibold">Tindakan ini tidak dapat dibatalkan dan akan menghapus semua data terkait.</span>
            </p>
            <div class="flex gap-3">
                <button type="button" onclick="closeDeleteModal()" class="flex-1 btn-modern btn-outline"><i class="fas fa-times"></i><span>Batal</span></button>
                <button type="button" onclick="confirmDelete()" class="flex-1 btn-modern btn-danger"><i class="fas fa-trash-alt"></i><span>Ya, Hapus</span></button>
            </div>
        </div>
    </div>
</div>

<!-- BULK DELETE MODAL -->
<div id="bulkDeleteModal" class="modal-overlay" onclick="closeModal(event)">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div class="p-8">
            <div class="flex items-center justify-center w-20 h-20 mx-auto mb-6 rounded-full bg-red-100 shadow-lg">
                <i class="fas fa-exclamation-triangle text-4xl text-red-600"></i>
            </div>
            <h3 class="text-3xl font-bold text-center text-gray-900 mb-3">Konfirmasi Hapus Massal</h3>
            <p class="text-center text-gray-600 mb-8 leading-relaxed">
                Anda yakin ingin menghapus <strong class="text-red-600 text-xl" id="bulkCount">0</strong> siswa?
                <br>
                <span class="text-red-600 font-semibold">Tindakan ini tidak dapat dibatalkan dan akan menghapus semua data terkait dari masing-masing siswa.</span>
            </p>
            <div class="flex gap-3">
                <button type="button" onclick="closeBulkDeleteModal()" class="flex-1 btn-modern btn-outline"><i class="fas fa-times"></i><span>Batal</span></button>
                <button type="button" onclick="confirmBulkDelete()" class="flex-1 btn-modern btn-danger"><i class="fas fa-trash-alt"></i><span>Ya, Hapus Semua</span></button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// ==================== UTILITIES ====================
console.log('CSRF Token:', getCookie('csrftoken'));
console.log('Bulk bar:', document.getElementById('bulkActionsBar'));
console.log('Delete modal:', document.getElementById('deleteModal'));

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

const csrftoken = getCookie('csrftoken');

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showNotification('✅ NISN berhasil disalin!', 'success', 3000);
    }).catch(() => {
        showNotification('❌ Gagal menyalin NISN', 'error', 3000);
    });
}

function removeFilter(filterName) {
    const url = new URL(window.location.href);
    url.searchParams.delete(filterName);
    window.location.href = url.toString();
}

// ==================== BULK ACTIONS ====================
let selectedStudents = new Set();

function updateBulkActions() {
    const checkboxes = document.querySelectorAll('.student-checkbox:checked');
    selectedStudents = new Set(Array.from(checkboxes).map(cb => cb.value));
    const count = selectedStudents.size;
    const bulkBar = document.getElementById('bulkActionsBar');
    const countElement = document.getElementById('selectedCount');
    
    if (count > 0) {
        bulkBar.style.display = 'block';
        if (countElement) countElement.textContent = count;
    } else {
        bulkBar.style.display = 'none';
    }
    
    // Update select all checkbox state
    const selectAllCheckboxes = document.querySelectorAll('#selectAll, #selectAllHeader');
    const totalCheckboxes = document.querySelectorAll('.student-checkbox').length;
    selectAllCheckboxes.forEach(cb => {
        cb.checked = count === totalCheckboxes && count > 0;
        cb.indeterminate = count > 0 && count < totalCheckboxes;
    });
}

function toggleSelectAll(checkbox) {
    const checkboxes = document.querySelectorAll('.student-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateBulkActions();
}

function clearSelection() {
    const checkboxes = document.querySelectorAll('.student-checkbox, #selectAll, #selectAllHeader');
    checkboxes.forEach(cb => {
        cb.checked = false;
        cb.indeterminate = false;
    });
    selectedStudents.clear();
    document.getElementById('bulkActionsBar').style.display = 'none';
}

function bulkDelete() {
    if (selectedStudents.size === 0) {
        showNotification('❌ Tidak ada siswa yang dipilih', 'warning', 3000);
        return;
    }
    
    document.getElementById('bulkCount').textContent = selectedStudents.size;
    const modal = document.getElementById('bulkDeleteModal');
    modal.classList.add('active');
}
console.log('Selected students:', selectedStudents);
console.log('Array:', Array.from(selectedStudents));

function confirmBulkDelete() {
    const deleteBtn = event.target.closest('button');
    const originalContent = deleteBtn.innerHTML;
    
    deleteBtn.disabled = true;
    deleteBtn.innerHTML = '<span class="spinner"></span> Menghapus...';
    
    const studentIdArray = Array.from(selectedStudents);
    console.log('Bulk delete IDs:', studentIdArray);
    console.log('Request body:', {student_ids: studentIdArray});
    
    fetch('/students/bulk-delete/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
            student_ids: studentIdArray
        })
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
    })
    .then(data => {
        console.log('Bulk delete response:', data);
        if (data.success) {
            showNotification(`✅ ${data.deleted_count} siswa berhasil dihapus!`, 'success', 2000);
            closeBulkDeleteModal();
            clearSelection();
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            throw new Error(data.message || 'Gagal menghapus');
        }
    })
    .catch(error => {
        console.error('Bulk delete error:', error);
        showNotification('❌ ' + error.message, 'error', 4000);
        deleteBtn.disabled = false;
        deleteBtn.innerHTML = originalContent;
    });
}

function closeBulkDeleteModal() {
    const modal = document.getElementById('bulkDeleteModal');
    modal.classList.remove('active');
}

// ==================== SINGLE DELETE ====================
let deleteStudentId = null;

function deleteStudent(studentId, studentName) {
    deleteStudentId = studentId;
    document.getElementById('studentName').textContent = studentName;
    
    const modal = document.getElementById('deleteModal');
    modal.classList.add('active');
    modal.style.display = 'flex';
    modal.style.visibility = 'visible';
    console.log('Modal:', modal);
    console.log('Modal classes:', modal.className);
}

function confirmDelete() {
    if (!deleteStudentId) return;
    
    const deleteBtn = event.target.closest('button');
    const originalContent = deleteBtn.innerHTML;
    
    deleteBtn.disabled = true;
    deleteBtn.innerHTML = '<span class="spinner"></span> Menghapus...';
    
    console.log('Deleting student ID:', deleteStudentId);
    
    // ✅ GANTI KE delete-ajax ENDPOINT
    fetch(`/students/${deleteStudentId}/delete-ajax/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({})
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
    })
    .then(data => {
        console.log('Delete response:', data);
        if (data.success) {
            showNotification('✅ Siswa berhasil dihapus!', 'success', 2000);
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            throw new Error(data.message || 'Terjadi kesalahan');
        }
    })
    .catch(error => {
        console.error('Delete error:', error);
        showNotification('❌ ' + error.message, 'error', 4000);
        deleteBtn.disabled = false;
        deleteBtn.innerHTML = originalContent;
    });
}

function closeDeleteModal() {
    const modal = document.getElementById('deleteModal');
    modal.classList.remove('active');
    deleteStudentId = null;
}

function closeModal(event) {
    if (event.target.classList.contains('modal-overlay')) {
        closeDeleteModal();
        closeBulkDeleteModal();
    }
}

// ==================== NOTIFICATION SYSTEM ====================
function showNotification(message, type = 'info', duration = 5000) {
    // Remove existing notifications
    const existingNotifs = document.querySelectorAll('.notification-toast');
    existingNotifs.forEach(n => n.remove());
    
    const colors = {
        success: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
        error: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
        warning: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
        info: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)'
    };
    
    const icons = {
        success: 'fa-check-circle',
        error: 'fa-times-circle',
        warning: 'fa-exclamation-triangle',
        info: 'fa-info-circle'
    };
    
    const notification = document.createElement('div');
    notification.className = 'notification-toast';
    notification.style.cssText = `
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 9999;
        background: ${colors[type]};
        color: white;
        padding: 16px 24px;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        max-width: 400px;
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    `;
    
    notification.innerHTML = `
        <i class="fas ${icons[type]} text-xl flex-shrink-0"></i>
        <span class="flex-1">${message}</span>
        <button onclick="this.parentElement.remove()" style="margin-left: auto; background: rgba(255,255,255,0.2); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 16px;" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
            <i class="fas fa-times"></i>
        </button>
    `;
    
    document.body.appendChild(notification);
    
    if (duration > 0) {
        setTimeout(() => {
            notification.style.animation = 'fadeOut 0.3s ease-out';
            setTimeout(() => notification.remove(), 300);
        }, duration);
    }
}

// ==================== KEYBOARD SHORTCUTS ====================
document.addEventListener('keydown', function(e) {
    // Escape key closes modals
    if (e.key === 'Escape') {
        closeDeleteModal();
        closeBulkDeleteModal();
    }
    
    // Ctrl/Cmd + K focuses search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        document.querySelector('input[name="search"]')?.focus();
    }
});

// ==================== PAGE LOAD ====================
document.addEventListener('DOMContentLoaded', function() {
    // Initialize with any Django messages
    {% if messages %}
    {% for message in messages %}
    showNotification('{{ message }}', '{{ message.tags }}', 5000);
    {% endfor %}
    {% endif %}
    
    // Initialize tooltips for touch devices
    if ('ontouchstart' in window) {
        document.querySelectorAll('.tooltip').forEach(el => {
            el.addEventListener('touchstart', function() {
                this.querySelector('.tooltiptext')?.classList.add('visible');
            });
            el.addEventListener('touchend', function() {
                setTimeout(() => {
                    this.querySelector('.tooltiptext')?.classList.remove('visible');
                }, 2000);
            });
        });
    }
});
</script>
{% endblock %}