{{-- resources/views/admin/menu-utama/topbar.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('content')
<section id="dashboard" class="content-section active">
        <div class="row g-3">
            <div class="col-xl-3 col-md-6">
              <div class="card stat-card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <div class="stat-label">Total Siswa</div>
                      <div class="stat-value">1,524</div>
                      <div class="mt-2"><span class="badge bg-success-subtle text-success-emphasis rounded-pill"><i class="bi bi-arrow-up-short"></i> 3.2%</span></div>
                    </div>
                    <div class="icon-circle bg-blue-soft"><i class="bi bi-people-fill"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card stat-card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <div class="stat-label">Guru & Staff</div>
                      <div class="stat-value">156</div>
                      <div class="mt-2"><span class="badge bg-success-subtle text-success-emphasis rounded-pill"><i class="bi bi-arrow-up-short"></i> 1.1%</span></div>
                    </div>
                    <div class="icon-circle bg-green-soft"><i class="bi bi-person-badge"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card stat-card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <div class="stat-label">Pendaftar PPDB</div>
                      <div class="stat-value">89</div>
                      <div class="mt-2"><span class="badge bg-success-subtle text-success-emphasis rounded-pill"><i class="bi bi-arrow-up-short"></i> 12.5%</span></div>
                    </div>
                    <div class="icon-circle bg-yellow-soft"><i class="bi bi-clipboard-check"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 col-md-6">
              <div class="card stat-card">
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start">
                    <div>
                      <div class="stat-label">Pengunjung Web</div>
                      <div class="stat-value">8,652</div>
                      <div class="mt-2"><span class="badge bg-success-subtle text-success-emphasis rounded-pill"><i class="bi bi-arrow-up-short"></i> 2.97%</span></div>
                    </div>
                    <div class="icon-circle bg-lightblue-soft"><i class="bi bi-graph-up"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <span>Statistik Kunjungan Mingguan</span>
                  <div class="btn-group btn-group-sm">
                    <button class="btn btn-light active">Minggu</button>
                    <button class="btn btn-light">Bulan</button>
                  </div>
                </div>
                <div class="card-body">
                  <div style="height:320px; background:linear-gradient(180deg, rgba(30,136,229,0.12) 0%, rgba(30,136,229,0.02) 100%); border-radius:12px; display:flex; align-items:center; justify-content:center;">
                    <div class="text-center">
                      <i class="bi bi-bar-chart-line" style="font-size:56px; color:var(--primary-blue); opacity:.4"></i>
                      <p class="mt-2 mb-0 fw-medium" style="color:var(--primary-blue)">Chart.js area akan tampil di sini</p>
                      <small class="text-muted">Integrasikan dengan Chart.js untuk visualisasi</small>
                    </div>
                  </div>
                  <div class="row text-center mt-4 g-3">
                    <div class="col-6 col-md-3">
                      <h5 class="mb-1 fw-bold">1,240</h5>
                      <small class="text-muted">Minggu Ini</small>
                    </div>
                    <div class="col-6 col-md-3">
                      <h5 class="mb-1 fw-bold">980</h5>
                      <small class="text-muted">Minggu Lalu</small>
                    </div>
                    <div class="col-6 col-md-3 mt-3 mt-md-0">
                      <h5 class="mb-1 fw-bold text-success">+26.5%</h5>
                      <small class="text-muted">Pertumbuhan</small>
                    </div>
                    <div class="col-6 col-md-3 mt-3 mt-md-0">
                      <h5 class="mb-1 fw-bold">3.2k</h5>
                      <small class="text-muted">Total Pengguna</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-4">
            <div class="col-12">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <span>Aktivitas Terbaru</span>
                  <a href="#" class="btn btn-sm btn-link text-decoration-none">Lihat Semua</a>
                </div>
                <div class="card-body p-0">
                  <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                      <thead>
                        <tr>
                          <th style="width:50px;">NO</th>
                          <th>KEGIATAN</th>
                          <th style="width:130px;">TANGGAL</th>
                          <th style="width:110px;">STATUS</th>
                          <th style="width:140px;">PIC</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr><td>1</td><td class="fw-medium">PPDB 2024 Gelombang 2</td><td>10 Jan 2024</td><td><span class="badge bg-primary-subtle text-primary">Proses</span></td><td>Panitia PPDB</td></tr>
                        <tr><td>2</td><td class="fw-medium">Rapat Guru Bulanan</td><td>08 Jan 2024</td><td><span class="badge bg-success-subtle text-success">Selesai</span></td><td>Wakasek</td></tr>
                        <tr><td>3</td><td class="fw-medium">Wisuda Tahfidz Juz 30</td><td>15 Jan 2024</td><td><span class="badge bg-warning-subtle text-warning">Pending</span></td><td>Bag. Tahfidz</td></tr>
                        <tr><td>4</td><td class="fw-medium">Ekstrakurikuler Pramuka</td><td>05 Jan 2024</td><td><span class="badge bg-success-subtle text-success">Selesai</span></td><td>Pembina</td></tr>
                        <tr><td>5</td><td class="fw-medium">Maintenance Website</td><td>03 Jan 2024</td><td><span class="badge bg-success-subtle text-success">Selesai</span></td><td>IT Support</td></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row mt-4">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <span>Pesan Masuk</span>
                </div>
                <div class="card-body p-0">
                  <div class="list-group list-group-flush">
                    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                      <div class="avatar-sm bg-primary text-white">AF</div>
                      <div class="flex-grow-1">
                        <div class="d-flex justify-content-between"><h6 class="mb-0">Ahmad Fauzi</h6><small class="text-muted">10m</small></div>
                        <small class="text-muted">Assalamualaikum, info pendaftaran...</small>
                      </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                      <div class="avatar-sm" style="background:#81C784;">SN</div>
                      <div class="flex-grow-1">
                        <div class="d-flex justify-content-between"><h6 class="mb-0">Siti Nurhaliza</h6><small class="text-muted">1j</small></div>
                        <small class="text-muted">Jadwal tes PPDB kapan ya Bu?</small>
                      </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                      <div class="avatar-sm" style="background:#FFD600; color:#333;">BR</div>
                      <div class="flex-grow-1">
                        <div class="d-flex justify-content-between"><h6 class="mb-0">Budi Raharjo</h6><small class="text-muted">3j</small></div>
                        <small class="text-muted">Biaya SPP bulan ini...</small>
                      </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                      <div class="avatar-sm bg-primary">DR</div>
                      <div class="flex-grow-1">
                        <div class="d-flex justify-content-between"><h6 class="mb-0">Dewi Ratna</h6><small class="text-muted">5j</small></div>
                        <small class="text-muted">Terima kasih informasinya...</small>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

  
@endsection