@extends('mahasiswa.layout')

@section('content')

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

<div class="row">

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

            <div>
                <div class="title">Mahasiswa</div>
                <div class="stat">
                    {{ session('mahasiswa_nama') }}
                </div>
            </div>

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

        </div>
    </div>

    {{-- STATUS --}}
    <div class="col-md-4">
        <div class="dashboard-card card-status">

            <div>
                <div class="title">Status Akademik</div>
                <div class="stat">
                    Aktif
                </div>
            </div>

            <div class="icon-box">
                <i data-feather="check-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.05);

        transition: 0.3s ease;
    }

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

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

    .dashboard-card .stat {
        font-size: 22px;
        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: 28px;
        height: 28px;
    }

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

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

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


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