{% extends "exams/base.html" %}
{% load static %}

{% block content %}
<style>
    /* Data Management Dashboard Custom Styles */
    .small-box {
        border-radius: 10px;
        position: relative;
        display: block;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }
    
    .small-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }
    
    .small-box .inner {
        padding: 20px;
        position: relative;
        z-index: 1;
    }
    
    .small-box h3 {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0 0 10px 0;
        white-space: nowrap;
        padding: 0;
        color: #fff;
    }
    
    .small-box p {
        font-size: 1rem;
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .small-box .icon {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 0;
        font-size: 5rem;
        color: rgba(255, 255, 255, 0.2);
        transition: transform 0.3s ease;
    }
    
    .small-box:hover .icon {
        transform: scale(1.1);
    }
    
    .small-box-footer {
        position: relative;
        z-index: 1;
        display: block;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.1);
        color: #fff !important;
        text-align: center;
        text-decoration: none !important;
        font-weight: bold !important;
        font-size: 1rem !important;
        transition: background 0.3s ease;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .small-box-footer:hover {
        background: rgba(0, 0, 0, 0.2);
        color: #fff !important;
    }
    
    .small-box-footer i {
        margin-left: 5px;
        transition: transform 0.3s ease;
    }
    
    .small-box-footer:hover i {
        transform: translateX(5px);
    }
    
    /* Color variations */
    .bg-gradient-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    }
    
    .bg-gradient-success {
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
    }
    
    .bg-gradient-warning {
        background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    }
    
    .bg-gradient-danger {
        background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
    }
    
    .bg-gradient-primary {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    }
    
    .bg-gradient-secondary {
        background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
    }
    
    /* Card styles */
    .card {
        border-radius: 12px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: box-shadow 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 12px 12px 0 0 !important;
        padding: 15px 20px;
    }
    
    .card-header h3, .card-header h5 {
        margin: 0;
        color: white;
    }
    
    .card-header .card-title {
        font-weight: bold;
        color: white;
    }
    
    .btn-group-vertical .btn {
        border-radius: 8px !important;
        margin-bottom: 10px;
        padding: 12px;
        font-weight: bold;
        transition: transform 0.2s ease;
    }
    
    .btn-group-vertical .btn:hover {
        transform: translateX(5px);
    }
    
    /* List group styles */
    .list-group-item {
        border-left: none;
        border-right: none;
        transition: background 0.2s ease;
    }
    
    .list-group-item:hover {
        background: #f8f9fa;
    }
    
    /* Quick stats cards */
    .stat-card {
        background: white;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .small-box {
        animation: fadeInUp 0.5s ease forwards;
    }
    
    .small-box:nth-child(1) { animation-delay: 0.1s; }
    .small-box:nth-child(2) { animation-delay: 0.2s; }
    .small-box:nth-child(3) { animation-delay: 0.3s; }
    .small-box:nth-child(4) { animation-delay: 0.4s; }
    
    /* Badge styles */
    .badge {
        padding: 5px 10px;
        font-weight: 500;
        border-radius: 6px;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .small-box h3 {
            font-size: 1.8rem;
        }
        
        .small-box .icon {
            font-size: 3rem;
        }
        
        .card-header h3 {
            font-size: 1.3rem;
        }
    }
</style>

<div class="container-fluid">
    <!-- Welcome Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-gradient-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-2">
                                <i class="fas fa-database me-2"></i>
                                Data Management Dashboard
                            </h4>
                            <p class="mb-0 opacity-75">
                                Manage all data
                            </p>
                        </div>
                        <div>
                            <i class="fas fa-chart-line fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-info">
                <div class="inner">
                    <h3>{{ academic_levels_count }}</h3>
                    <p>Academic Levels</p>
                </div>
                <div class="icon">
                    <i class="fas fa-users-cog"></i>
                </div>
                <a href="{% url 'exams:academic_level_list' %}" class="small-box-footer">
                    Manage Academic Levels <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-success">
                <div class="inner">
                    <h3>{{ subjects_count }}</h3>
                    <p>Subjects</p>
                </div>
                <div class="icon">
                    <i class="fas fa-book"></i>
                </div>
                <a href="{% url 'exams:subject_list' %}" class="small-box-footer">
                    Manage Subjects <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-warning">
                <div class="inner">
                    <h3>{{ papers_count }}</h3>
                    <p>Papers</p>
                </div>
                <div class="icon">
                    <i class="fas fa-file-alt"></i>
                </div>
                <a href="{% url 'exams:subjectpaper_list' %}" class="small-box-footer">
                    Manage Papers <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-danger">
                <div class="inner">
                    <h3>{{ combinations_count }}</h3>
                    <p>Combinations</p>
                </div>
                <div class="icon">
                    <i class="fas fa-layer-group"></i>
                </div>
                <a href="{% url 'exams:combination_list' %}" class="small-box-footer">
                    Manage Combinations <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Additional Stats Row -->
    <div class="row mb-4">
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-secondary">
                <div class="inner">
                    <h3>{{ exam_types_count }}</h3>
                    <p>Exam Types</p>
                </div>
                <div class="icon">
                    <i class="fas fa-tag"></i>
                </div>
                <a href="#" class="small-box-footer">
                    *Not Active Now <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
<div class="col-lg-3 col-6">
    <div class="small-box bg-gradient-primary">
        <div class="inner">
            <h3>{{ total_rules_count|default:"0" }}</h3>
            <p>Total Rules</p>
            <small class="text-white-50">
                Grade: {{ grading_rules_count|default:"0" }} | 
                Divn: {{ division_rules_count|default:"0" }} | 
                GPA: {{ gpa_rules_count|default:"0" }}
            </small>
        </div>
        <div class="icon">
            <i class="fas fa-gavel"></i>
        </div>
        <a href="{% url 'exams:rules_management' %}" class="small-box-footer">
            Manage Rules <i class="fas fa-arrow-circle-right"></i>
        </a>
    </div>
</div>
        
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-info">
                <div class="inner">
                    <h3>{{ uploads_count|default:"0" }}</h3>
                    <p>Data Uploads</p>
                </div>
                <div class="icon">
                    <i class="fas fa-cloud-upload-alt"></i>
                </div>
                <a href="#" class="small-box-footer">
                    *Not Active<i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
        
        <div class="col-lg-3 col-6">
            <div class="small-box bg-gradient-success">
                <div class="inner">
                    <h3>{{ total_records|default:"0" }}</h3>
                    <p>Total Records</p>
                </div>
                <div class="icon">
                    <i class="fas fa-database"></i>
                </div>
                <a href="#" class="small-box-footer">
                    View All Data <i class="fas fa-arrow-circle-right"></i>
                </a>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions and Recent Activity -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bolt me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="btn-group-vertical w-100">

                        <a href="{% url 'exams:rules_management' %}" class="btn btn-info">
                            <i class="fas fa-gavel me-2"></i>Manage Grading Rules
                            <small class="d-block text-white-50">Set grading scales and GPA rules</small>
                        </a>
                        <a href="{% url 'exams:subject_list' %}" class="btn btn-success">
                            <i class="fas fa-book me-2"></i>Manage Subjects & Papers
                            <small class="d-block text-white-50">Add, edit, or remove subjects and papers</small>
                        </a>
                        <a href="{% url 'exams:combination_list' %}" class="btn btn-warning">
                            <i class="fas fa-layer-group me-2"></i>Manage Combinations
                            <small class="d-block text-white-50">Configure subject combinations for different levels</small>
                        </a>
                        <a href="#" class="btn btn-primary">
                            <i class="fas fa-upload me-2"></i>Bulk Data Upload
                            <small class="d-block text-white-50">Import students, scores, and results *Not Active</small>
                        </a>
                        <a href="#" class="btn btn-secondary">
                            <i class="fas fa-tag me-2"></i>Manage Exam Types
                            <small class="d-block text-white-50">Configure examination types and categories *Not Active</small>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock me-2"></i>Recent Activity
                    </h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-book text-warning me-3 fa-lg"></i>
                                <div class="flex-grow-1">
                                    <strong>Recently Added Subjects</strong>
                                    <span class="badge bg-info float-end">{{ recent_subjects|length }}</span>
                                </div>
                            </div>
                        </li>
                        {% for subject in recent_subjects %}
                        <li class="list-group-item">
                            <div class="ms-4">
                                <i class="fas fa-circle text-warning me-2" style="font-size: 8px;"></i>
                                <strong>{{ subject.subject_code }}</strong> - {{ subject.subject_name_eng }}
                                <small class="text-muted d-block">{{ subject.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center text-muted py-4">
                            <i class="fas fa-info-circle me-2"></i>No recent subjects added
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{% url 'exams:subject_list' %}" class="text-decoration-none">
                        View All Subjects <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            
            <!-- Recent Papers -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-alt me-2"></i>Recent Papers
                    </h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-file-alt text-info me-3 fa-lg"></i>
                                <div class="flex-grow-1">
                                    <strong>Recently Added Papers</strong>
                                    <span class="badge bg-info float-end">{{ recent_papers|length }}</span>
                                </div>
                            </div>
                        </li>
                        {% for paper in recent_papers %}
                        <li class="list-group-item">
                            <div class="ms-4">
                                <i class="fas fa-circle text-info me-2" style="font-size: 8px;"></i>
                                <strong>{{ paper.paper_code }}</strong> - {{ paper.subject.subject_name_eng }}
                                <small class="text-muted d-block">{{ paper.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center text-muted py-4">
                            <i class="fas fa-info-circle me-2"></i>No recent papers added
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{% url 'exams:subjectpaper_list' %}" class="text-decoration-none">
                        View All Papers <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer Note -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Tip:</strong> Use the Quick Actions buttons for fast access to common tasks. 
                All changes are automatically saved and reflected throughout the system.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
</div>
{% endblock %}