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

{% block content %}
<section class="hero-section">
  <div class="container text-center">
    <h1 class="display-4 mb-3">Selamat Datang di SIMSBI</h1>
    <p class="lead opacity-75">Sistem Informasi Manajemen Surat & Buku Induk Siswa Digital Terintegrasi</p>
  </div>
</section>

<div class="container">
  <div class="row g-4 mb-5">
    <div class="col-md-3">
      <div class="card stat-card p-4 text-center">
        <h3 class="h1 mb-0">{{ total_letters }}</h3>
        <p class="text-muted mb-0">Total Surat</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card stat-card p-4 text-center border-start border-success border-4">
        <h3 class="h1 mb-0 text-success">{{ letters_in }}</h3>
        <p class="text-muted mb-0">Surat Masuk</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card stat-card p-4 text-center border-start border-danger border-4">
        <h3 class="h1 mb-0 text-danger">{{ letters_out }}</h3>
        <p class="text-muted mb-0">Surat Keluar</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card stat-card p-4 text-center border-start border-primary border-4">
        <h3 class="h1 mb-0 text-primary">{{ total_students }}</h3>
        <p class="text-muted mb-0">Total Siswa</p>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h3 class="h4 mb-0">Surat Terbaru</h3>
          <a href="/admin/core/letter/add/" class="btn btn-primary btn-sm">+ Input Surat</a>
        </div>
        <div class="table-responsive">
          <table class="table align-middle">
            <thead>
              <tr>
                <th>No. Surat</th>
                <th>Perihal</th>
                <th>Tipe</th>
                <th>Tanggal</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              {% for letter in recent_letters %}
              <tr>
                <td><strong>{{ letter.letter_number }}</strong></td>
                <td>{{ letter.subject }}</td>
                <td>
                  <span class="badge {% if letter.type == 'IN' %}badge-in{% else %}badge-out{% endif %}">
                    {{ letter.get_type_display }}
                  </span>
                </td>
                <td>{{ letter.date|date:"d M Y" }}</td>
                <td>
                  <a href="/admin/core/letter/{{ letter.id }}/change/" class="btn btn-outline-secondary btn-sm">Detail</a>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="5" class="text-center py-4 text-muted">Belum ada data surat.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card p-4 h-100">
        <h3 class="h4 mb-4">Akses Cepat</h3>
        <div class="list-group list-group-flush">
          <a href="/admin/core/letter/" class="list-group-item list-group-item-action py-3 border-0 rounded mb-2 bg-light">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 h6">Kelola Surat</h5>
            </div>
            <p class="mb-1 small text-muted">Arsip surat masuk & keluar.</p>
          </a>
          <a href="/admin/core/student/" class="list-group-item list-group-item-action py-3 border-0 rounded mb-2 bg-light">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 h6">Buku Induk</h5>
            </div>
            <p class="mb-1 small text-muted">Data induk siswa lengkap.</p>
          </a>
          <a href="/admin/core/letter/add/" class="list-group-item list-group-item-action py-3 border-0 rounded mb-2 bg-light">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 h6">Input Surat Baru</h5>
            </div>
            <p class="mb-1 small text-muted">Catat administrasi persuratan.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
