{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}

<!-- Welcome Banner -->
<div class="dashboard-banner" style="background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);border-radius:var(--radius-xl);padding:28px 32px;margin-bottom:28px;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;position:relative;">
  <div style="position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(255,255,255,.07);border-radius:50%;"></div>
  <div style="position:absolute;bottom:-60px;right:120px;width:160px;height:160px;background:rgba(255,255,255,.05);border-radius:50%;"></div>
  <div>
    <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Good morning! 👋</h1>
    <p style="opacity:.85;font-size:14px;">Here's what's happening at your school today.</p>
  </div>
  <div style="display:flex;gap:10px;flex-shrink:0;">
    <a href="{% url 'student_add' %}" class="btn" style="background:rgba(255,255,255,.2);color:white;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);">
      <i data-lucide="user-plus" style="width:15px;height:15px;"></i>
      Add Student
    </a>
    <a href="{% url 'notice_add' %}" class="btn" style="background:white;color:var(--primary);">
      <i data-lucide="bell-plus" style="width:15px;height:15px;"></i>
      New Notice
    </a>
  </div>
</div>

<!-- Stat Cards -->
<div class="stat-grid">
  <div class="stat-card" style="--stat-color:#4f46e5;--stat-soft:#eef2ff;">
    <div class="stat-icon">👨‍🎓</div>
    <div class="stat-info">
      <div class="stat-value" data-count="{{ total_students }}">{{ total_students }}</div>
      <div class="stat-label">Total Students</div>
      <div class="stat-change up">↑ Active enrollment</div>
    </div>
  </div>
  <div class="stat-card" style="--stat-color:#06b6d4;--stat-soft:#ecfeff;">
    <div class="stat-icon">👩‍🏫</div>
    <div class="stat-info">
      <div class="stat-value" data-count="{{ total_teachers }}">{{ total_teachers }}</div>
      <div class="stat-label">Teachers</div>
      <div class="stat-change up">↑ On staff</div>
    </div>
  </div>
  <div class="stat-card" style="--stat-color:#10b981;--stat-soft:#d1fae5;">
    <div class="stat-icon">🏫</div>
    <div class="stat-info">
      <div class="stat-value" data-count="{{ total_classes }}">{{ total_classes }}</div>
      <div class="stat-label">Classes</div>
      <div class="stat-change up">↑ This year</div>
    </div>
  </div>
  <div class="stat-card" style="--stat-color:#f59e0b;--stat-soft:#fef3c7;">
    <div class="stat-icon">✅</div>
    <div class="stat-info">
      <div class="stat-value" data-count="{{ today_attendance }}">{{ today_attendance }}</div>
      <div class="stat-label">Today's Attendance</div>
      <div class="stat-change">Records today</div>
    </div>
  </div>
</div>

<!-- Content Grid -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">

  <!-- Recent Notices -->
  <div class="card">
    <div class="card-header">
      <span class="card-title">📢 Recent Notices</span>
      <a href="{% url 'notice_add' %}" class="btn btn-primary btn-sm">
        <i data-lucide="plus" style="width:13px;height:13px;"></i> New
      </a>
    </div>
    <div class="card-body" style="padding:0;">
      {% if recent_notices %}
        {% for notice in recent_notices %}
        <a href="{% url 'notice_detail' notice.pk %}" class="notice-card" style="display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border-light);text-decoration:none;transition:background var(--transition);" onmouseover="this.style.background='var(--surface-2)'" onmouseout="this.style.background=''">
          <div style="width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:{% if notice.priority == 'urgent' %}#7c3aed{% elif notice.priority == 'high' %}var(--danger){% elif notice.priority == 'medium' %}var(--warning){% else %}var(--success){% endif %};"></div>
          <div style="flex:1;min-width:0;">
            <div style="font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ notice.title }}</div>
            <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ notice.created_at|date:"M d, Y" }} &middot; {{ notice.get_audience_display }}</div>
          </div>
          <span class="badge {% if notice.priority == 'urgent' %}badge-primary{% elif notice.priority == 'high' %}badge-danger{% elif notice.priority == 'medium' %}badge-warning{% else %}badge-success{% endif %}">
            {{ notice.get_priority_display }}
          </span>
        </a>
        {% endfor %}
      {% else %}
        <div class="empty-state">
          <div class="empty-state-icon">📭</div>
          <div class="empty-state-title">No notices yet</div>
          <div class="empty-state-text">Post your first announcement</div>
        </div>
      {% endif %}
    </div>
    <div class="card-footer">
      <a href="{% url 'notice_list' %}" style="font-size:13px;color:var(--primary);text-decoration:none;font-weight:500;">View all notices →</a>
    </div>
  </div>

  <!-- Recent Grades -->
  <div class="card">
    <div class="card-header">
      <span class="card-title">📊 Recent Grades</span>
      <a href="{% url 'grade_add' %}" class="btn btn-primary btn-sm">
        <i data-lucide="plus" style="width:13px;height:13px;"></i> Add
      </a>
    </div>
    <div class="card-body" style="padding:0;">
      {% if recent_grades %}
        <table style="width:100%;">
          <thead>
            <tr>
              <th>Student</th>
              <th>Subject</th>
              <th>Score</th>
              <th>Grade</th>
            </tr>
          </thead>
          <tbody>
            {% for grade in recent_grades %}
            <tr>
              <td>
                <div style="display:flex;align-items:center;gap:8px;">
                  <div class="avatar-sm">{{ grade.student.first_name|first }}</div>
                  <span style="font-size:13px;">{{ grade.student.full_name }}</span>
                </div>
              </td>
              <td><span class="badge badge-secondary">{{ grade.subject.name }}</span></td>
              <td style="font-weight:600;">{{ grade.score }}/{{ grade.max_score }}</td>
              <td>
                <span class="grade-{% if grade.letter_grade == 'A+' %}a-plus{% elif grade.letter_grade == 'A' %}a{% elif grade.letter_grade == 'B' %}b{% elif grade.letter_grade == 'C' %}c{% elif grade.letter_grade == 'D' %}d{% else %}f{% endif %}">
                  {{ grade.letter_grade }}
                </span>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <div class="empty-state">
          <div class="empty-state-icon">📝</div>
          <div class="empty-state-title">No grades recorded</div>
        </div>
      {% endif %}
    </div>
    <div class="card-footer">
      <a href="{% url 'grade_list' %}" style="font-size:13px;color:var(--primary);text-decoration:none;font-weight:500;">View all grades →</a>
    </div>
  </div>

</div>

<!-- Quick Actions -->
<div class="card" style="margin-top:20px;">
  <div class="card-header">
    <span class="card-title">⚡ Quick Actions</span>
  </div>
  <div class="card-body">
    <div style="display:flex;flex-wrap:wrap;gap:10px;">
      <a href="{% url 'student_add' %}" class="btn btn-outline"><i data-lucide="user-plus" style="width:15px;height:15px;"></i> Add Student</a>
      <a href="{% url 'teacher_add' %}" class="btn btn-outline"><i data-lucide="user-check" style="width:15px;height:15px;"></i> Add Teacher</a>
      <a href="{% url 'class_add' %}" class="btn btn-outline"><i data-lucide="book-open" style="width:15px;height:15px;"></i> New Class</a>
      <a href="{% url 'mark_attendance' %}" class="btn btn-outline"><i data-lucide="calendar-check" style="width:15px;height:15px;"></i> Mark Attendance</a>
      <a href="{% url 'grade_add' %}" class="btn btn-outline"><i data-lucide="bar-chart-2" style="width:15px;height:15px;"></i> Record Grade</a>
      <a href="{% url 'notice_add' %}" class="btn btn-outline"><i data-lucide="bell" style="width:15px;height:15px;"></i> Post Notice</a>
      <a href="{% url 'subject_add' %}" class="btn btn-outline"><i data-lucide="library" style="width:15px;height:15px;"></i> Add Subject</a>
      <a href="{% url 'attendance_report' %}" class="btn btn-outline"><i data-lucide="file-bar-chart" style="width:15px;height:15px;"></i> Attendance Report</a>
    </div>
  </div>
</div>

{% endblock %}