<?= $this->extend('v_template/layout') ?>

<?= $this->section('content') ?>

<div class="row mb-4">
    <div class="col-12">
        <h4 class="fw-bold text-success"><i class="fa-solid fa-chart-pie me-2"></i> Dashboard Utama</h4>
        <p class="text-muted">Ringkasan informasi Kesatuan Pengelolaan Hutan (KPH) Wilayah III Asahan.</p>
    </div>
</div>

<!-- Deretan Card Statistik -->
<div class="row g-3 mb-4">
    <!-- Card 1 -->
    <div class="col-6 col-md-3">
        <div class="card h-100 bg-success text-white shadow-sm border-0">
            <div class="card-body">
                <i class="fa-solid fa-file-pdf fa-2x mb-3 opacity-75"></i>
                <h3 class="fw-bold mb-0"><?= $total_dokumen ?></h3>
                <small>Total Arsip Dokumen</small>
            </div>
        </div>
    </div>
    
    <!-- Card 2 -->
    <div class="col-6 col-md-3">
        <div class="card h-100 bg-primary text-white shadow-sm border-0">
            <div class="card-body">
                <i class="fa-solid fa-users fa-2x mb-3 opacity-75"></i>
                <h3 class="fw-bold mb-0"><?= $total_pegawai ?></h3>
                <small>Total Pegawai & Polhut</small>
            </div>
        </div>
    </div>

    <!-- Card 3 -->
    <div class="col-6 col-md-3">
        <div class="card h-100 bg-warning text-dark shadow-sm border-0">
            <div class="card-body">
                <i class="fa-solid fa-map-location-dot fa-2x mb-3 opacity-75"></i>
                <h3 class="fw-bold mb-0">5</h3>
                <small>Peta Spasial Tersedia</small>
            </div>
        </div>
    </div>

    <!-- Card 4 -->
    <div class="col-6 col-md-3">
        <div class="card h-100 bg-info text-dark shadow-sm border-0">
            <div class="card-body">
                <i class="fa-solid fa-cloud-arrow-down fa-2x mb-3 opacity-75"></i>
                <h3 class="fw-bold mb-0">100%</h3>
                <small>Status Sinkronisasi</small>
            </div>
        </div>
    </div>
</div>

<!-- Area Pengumuman & Pintasan Cepat -->
<div class="row g-3">
    <div class="col-md-8">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="mb-0 fw-bold text-success"><i class="fa-solid fa-bullhorn me-2"></i> Papan Pengumuman</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-success border-0 bg-success bg-opacity-10 text-success">
                    <strong>Informasi:</strong> Pembaruan data spasial wilayah Kisaran telah selesai diunggah. Silakan lakukan sinkronisasi offline sebelum menuju lapangan.
                </div>
                <p class="text-muted small mb-0">Diperbarui pada: 8 Agustus 2026</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white border-bottom py-3">
                <h6 class="mb-0 fw-bold text-success"><i class="fa-solid fa-bolt me-2"></i> Aksi Cepat</h6>
            </div>
            <div class="card-body d-grid gap-2">
                <button class="btn btn-outline-success text-start"><i class="fa-solid fa-upload me-2"></i> Unggah Dokumen Baru</button>
                <button class="btn btn-outline-success text-start"><i class="fa-solid fa-download me-2"></i> Unduh Peta Offline</button>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>