@extends('admin.layout')

@section('content')

<h5 class="mb-4">👋 Selamat Datang, {{ session('admin_nama') }}</h5>

<div class="row">

    {{-- TOTAL MAHASISWA --}}
    <div class="col-md-4">
        <div class="dashboard-card card-student">

            <div>
                <div class="title">Total Mahasiswa</div>
                <div class="stat">
                    {{ $totalMahasiswa }}
                </div>
            </div>

            <div class="icon-box">
                <i data-feather="users"></i>
            </div>

        </div>
    </div>

    {{-- TAHUN AKADEMIK --}}
    <div class="col-md-4">
        <div class="dashboard-card card-year">

            <div>
                <div class="title">Tahun Akademik Aktif</div>
                <div class="stat">
                    {{ $tahunAktif->tahun ?? '-' }}
                </div>
            </div>

            <div class="icon-box">
                <i data-feather="calendar"></i>
            </div>

        </div>
    </div>

    {{-- PESAN MASUK --}}
    <div class="col-md-4">
        <div class="dashboard-card card-chat">

            <div>
                <div class="title">Pesan Masuk</div>
                <div class="stat">
                    {{ $pesanMasuk }}
                </div>
            </div>

            <div class="icon-box">
                <i data-feather="message-circle"></i>
            </div>

        </div>
    </div>

</div>

@endsection


{{-- ================= STYLE ================= --}}
<style>
    .dashboard-card {
        background: white;
        border-radius: 20px;
        padding: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);

        transition: 0.3s ease;
    }

    .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .dashboard-card .title {
        font-size: 15px;
        color: #777;
        margin-bottom: 10px;
    }

    .dashboard-card .stat {
        font-size: 34px;
        font-weight: bold;
        color: #222;
    }

    .icon-box {
        width: 65px;
        height: 65px;
        border-radius: 18px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-box svg {
        width: 30px;
        height: 30px;
    }

    /* warna tiap card */
    .card-student .icon-box {
        background: rgba(67, 97, 238, 0.12);
        color: #4361ee;
    }

    .card-year .icon-box {
        background: rgba(6, 214, 160, 0.12);
        color: #06d6a0;
    }

    .card-chat .icon-box {
        background: rgba(255, 159, 28, 0.12);
        color: #ff9f1c;
    }
</style>


{{-- ================= SCRIPT ================= --}}
<script>
    feather.replace();
</script>