@extends('layouts.master')

@section('title')
Dashboard
@endsection

@section('header')
<div class="page-header">
    <div>
        <h3>Dashboard</h3>
        <p>Selamat datang kembali di SIVADNA.</p>
    </div>
</div>
@endsection

@section('content')
<!-- Statistik -->
<div class="row g-4">

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="icon bg-primary">
                <i class="bi bi-people"></i>
            </div>

            <div class="info">
                <h4>1.256</h4>
                <span>Total Pasien</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="icon bg-success">
                <i class="bi bi-clipboard2-pulse"></i>
            </div>

            <div class="info">
                <h4>145</h4>
                <span>Skrining Hari Ini</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="icon bg-warning">
                <i class="bi bi-exclamation-circle"></i>
            </div>

            <div class="info">
                <h4>54</h4>
                <span>Positif</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="icon bg-danger">
                <i class="bi bi-check-circle"></i>
            </div>

            <div class="info">
                <h4>1.202</h4>
                <span>Negatif</span>
            </div>
        </div>
    </div>

</div>

<!-- Content -->
<div class="row mt-4">

    <div class="col-lg-8">
        <div class="content-card">
            <div class="card-header-custom">
                <h5>Grafik Skrining</h5>
            </div>

            <div class="card-body-custom">
                Area grafik (Chart.js)
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="content-card">
            <div class="card-header-custom">
                <h5>Aktivitas Terbaru</h5>
            </div>

            <div class="card-body-custom">
                Data aktivitas pengguna...
            </div>
        </div>
    </div>

</div>

@endsection