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

{% block content %}

<div class="container-fluid px-4 mt-4">
  
  <!-- Dashboard Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h3 class="mb-1 fw-bold">
        <i class="fas fa-chart-line text-primary me-2"></i>Dashboard
      </h3>
      <span class="badge bg-primary">{{ current_year }}</span>
    </div>
  </div>

  <!-- Card Grid Row 1 -->
  <div class="row g-4 mb-4">
    
    <!-- Card 1: Total Projects -->
    <div class="col-xl-4 col-md-6">
      <div class="dashboard-card card-gradient-projects">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Total Projects</p>
              <h2 class="card-value">{{ total_projects }}</h2>
              <div class="card-stats mt-2">
                <span class="text-white me-3">
                  <i class="fas fa-check-circle"></i> Active: {{ active_projects }}
                </span>
                <span class="text-white">
                  <i class="fas fa-ban"></i> Inactive: {{ inactive_projects }}
                </span>
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-project-diagram"></i>
            </div>
          </div>
          <hr class="text-white">
          <div class="text-white">
            <a href="{% url 'exams:project_list' %}" class="text-white">
              View All Projects <i class="fas fa-arrow-right ms-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Card 2: Students by Academic Level -->
    <div class="col-xl-4 col-md-6">
      <div class="dashboard-card card-gradient-students">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Total Students</p>
              <h2 class="card-value">{{ student_stats.total }}</h2>
              <div class="student-level-stats mt-2">
                <div class="d-flex flex-wrap gap-2">
                  <span class="level-badge level-a">
                    <i class="fas fa-graduation-cap"></i> A-Level: {{ student_stats.A_Level }}
                  </span>
                  <span class="level-badge level-o">
                    <i class="fas fa-book"></i> O-Level: {{ student_stats.O_Level }}
                  </span>
                  <span class="level-badge level-primary">
                    <i class="fas fa-child"></i> Primary: {{ student_stats.Primary }}
                  </span>
                </div>
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-users"></i>
            </div>
          </div>
          <hr class="my-3">
          <div class="progress-bar-custom mt-2">
            <div class="progress">
              <div class="progress-bar bg-info" style="width: {{ student_stats.A_Level_percent }}%">
                {{ student_stats.A_Level_percent }}%
              </div>
              <div class="progress-bar bg-success" style="width: {{ student_stats.O_Level_percent }}%">
                {{ student_stats.O_Level_percent }}%
              </div>
              <div class="progress-bar bg-warning" style="width: {{ student_stats.Primary_percent }}%">
                {{ student_stats.Primary_percent }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Card 3: Ongoing Projects -->
    <div class="col-xl-4 col-md-6">
      <div class="dashboard-card card-gradient-ongoing">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Ongoing Projects</p>
              <h2 class="card-value">{{ ongoing_projects }}</h2>
              <div class="card-stats mt-2">
                <span class="text-success">
                  <i class="fas fa-clock"></i> Currently Active
                </span>
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-play-circle"></i>
            </div>
          </div>
          <hr class="my-3">
          <div class="card-footer-link">
            <a href="{% url 'exams:project_list' %}?status=active" class="stretched-link">
              View Ongoing <i class="fas fa-arrow-right ms-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Card Grid Row 2 -->
  <div class="row g-4 mb-4">
    
    <!-- Card 4: Completed/Inactive Projects -->
    <div class="col-xl-3 col-md-6">
      <div class="dashboard-card card-gradient-completed">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Completed Projects</p>
              <h2 class="card-value">{{ completed_projects }}</h2>
              <div class="card-stats mt-2">
                <span class="text-muted">
                  <i class="fas fa-check-double"></i> Finished & Archived
                </span>
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <hr class="my-3">
          <div class="card-footer-link">
            <a href="{% url 'exams:project_list' %}?status=inactive" class="stretched-link">
              View Completed <i class="fas fa-arrow-right ms-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Card 5: Pass Division I-IV -->
    <div class="col-xl-6 col-md-12">
      <div class="dashboard-card card-gradient-pass">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Pass Rate (Div I-IV)</p>
              <h2 class="card-value">{{ division_stats.pass_total }} <small class="fs-6">students</small></h2>
              <div class="card-stats mt-2">
                <span class="text-success me-3">
                  <i class="fas fa-chart-line"></i> {{ division_stats.pass_percent }}% Pass Rate
                </span>
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-trophy"></i>
            </div>
          </div>
          <hr class="my-3">
          <div class="division-breakdown">
            <div class="row text-center">
              <div class="col-3">
                <div class="division-badge division-I">I</div>
                <small>{{ division_stats.I }} ({{ division_stats.I_percent }}%)</small>
              </div>
              <div class="col-3">
                <div class="division-badge division-II">II</div>
                <small>{{ division_stats.II }} ({{ division_stats.II_percent }}%)</small>
              </div>
              <div class="col-3">
                <div class="division-badge division-III">III</div>
                <small>{{ division_stats.III }} ({{ division_stats.III_percent }}%)</small>
              </div>
              <div class="col-3">
                <div class="division-badge division-IV">IV</div>
                <small>{{ division_stats.IV }} ({{ division_stats.IV_percent }}%)</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Card 6: Failed Division 0 -->
    <div class="col-xl-3 col-md-6">
      <div class="dashboard-card card-gradient-fail">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-start">
            <div>
              <p class="card-subtitle text-uppercase mb-2">Failed Students</p>
              <h2 class="card-value">{{ failed_stats.total }} <small class="fs-6">students</small></h2>
              <div class="card-stats mt-2">
                <span class="text-danger">
                  <i class="fas fa-exclamation-triangle"></i> {{ failed_stats.percentage }}% Fail Rate
                </span>
                {% if failed_stats.trend_direction == 'down' %}
                <span class="text-success ms-2">
                  <i class="fas fa-arrow-down"></i> {{ failed_stats.trend_value }}%
                </span>
                {% elif failed_stats.trend_direction == 'up' %}
                <span class="text-danger ms-2">
                  <i class="fas fa-arrow-up"></i> {{ failed_stats.trend_value }}%
                </span>
                {% endif %}
              </div>
            </div>
            <div class="card-icon">
              <i class="fas fa-exclamation-circle"></i>
            </div>
          </div>
          <hr class="my-3">
          <div class="card-footer-link">
            <a href="#" class="stretched-link">
              Intervention Needed <i class="fas fa-hand-holding-heart ms-1"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Additional Analytics Row -->
  <div class="row g-4">
    
    <!-- Top Performing Schools -->
    <div class="col-xl-6">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-medal text-warning me-2"></i>Top Performing Schools
          </h6>
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>#</th>
                  <th>School</th>
                  <th>GPA</th>
                  <th>Grade</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {% for school in top_schools %}
                <tr>
                  <td>{{ forloop.counter }}</td>
                  <td class="fw-semibold">{{ school.school.name|truncatechars:40 }}</td>
                  <td><span class="badge bg-primary">{{ school.sch_gpa|floatformat:4 }}</span></td>
                  <td><span class="badge bg-success">{{ school.sch_gpa_grade|default:"-" }}</span></td>
                  <<td><span class="badge bg-success">{{ school.sch_gpa_status|default:"-" }}</span></td>
                </tr>
                {% empty %}
                <tr>
                  <td colspan="5" class="text-center py-4 text-muted">
                    No data available
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Recent Projects -->
    <div class="col-xl-6">
      <div class="card shadow-sm border-0">
        <div class="card-header bg-white py-3 border-bottom">
          <h6 class="mb-0 fw-bold">
            <i class="fas fa-clock me-2 text-primary"></i>Recent Projects
          </h6>
        </div>
        <div class="card-body p-0">
          <div class="list-group list-group-flush">
            {% for project in recent_projects %}
            <div class="list-group-item d-flex justify-content-between align-items-center">
              <div>
                <h6 class="mb-1">{{ project.name }}</h6>
                <small class="text-muted">
                  <i class="fas fa-graduation-cap"></i> {{ project.academic_level.name }}
                  <span class="mx-2">•</span>
                  <i class="fas fa-calendar"></i> {{ project.year }}
                </small>
              </div>
              <div>
                {% if project.is_active %}
                <span class="badge bg-success">Active</span>
                {% else %}
                <span class="badge bg-secondary">Inactive</span>
                {% endif %}
              </div>
            </div>
            {% empty %}
            <div class="text-center py-4 text-muted">
              No recent projects
            </div>
            {% endfor %}
          </div>
        </div>
        <div class="card-footer bg-white">
          <a href="{% url 'exams:project_list' %}" class="text-decoration-none">
            View All Projects <i class="fas fa-arrow-right ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
  
</div>

<style>
/* Dashboard Card Styles */
.dashboard-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.dashboard-card .card-body {
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}

.card-subtitle {
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.card-value {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}

.card-icon {
  font-size: 3rem;
  opacity: 0.2;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.card-stats {
  font-size: 0.8rem;
}

.card-footer-link {
  position: relative;
  z-index: 2;
}

.card-footer-link a {
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Card Gradients */
.card-gradient-projects {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-gradient-students {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
}

.card-gradient-ongoing {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.card-gradient-completed {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.card-gradient-pass {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.card-gradient-fail {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

/* Level Badges */
.level-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
}

.level-a { background: rgba(255,255,255,0.25); }
.level-o { background: rgba(255,255,255,0.25); }
.level-primary { background: rgba(255,255,255,0.25); }

/* Progress Bar */
.progress {
  height: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.2);
}

.progress-bar {
  transition: width 0.6s ease;
}

/* Division Badges */
.division-breakdown .division-badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 5px;
  font-weight: bold;
  font-size: 1.2rem;
}

.division-I {
  background: #ffd700;
  color: #856404;
}

.division-II {
  background: #c0c0c0;
  color: #495057;
}

.division-III {
  background: #cd7f32;
  color: white;
}

.division-IV {
  background: #6c757d;
  color: white;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .card-value {
    font-size: 1.8rem;
  }
  
  .card-icon {
    font-size: 2rem;
  }
  
  .dashboard-card .card-body {
    padding: 1rem;
  }
  
  .student-level-stats .level-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-card {
  animation: fadeInUp 0.5s ease-out;
}

.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
.dashboard-card:nth-child(5) { animation-delay: 0.5s; }
.dashboard-card:nth-child(6) { animation-delay: 0.6s; }
</style>

{% endblock %}