@extends('layouts.app')

@section('title', 'Dashboard | PELANGI BERSINAR')
@section('page-title', 'Dashboard PELANGI BERSINAR')

@push('styles')
<style>

    .welcome {
        position: relative;
        overflow: hidden;

        padding: 30px;

        border-radius: 22px;

        color: white;

        background:
            radial-gradient(
                circle at 95% 10%,
                rgba(255,229,0,.18),
                transparent 25%
            ),
            linear-gradient(
                120deg,
                #711866 0%,
                #A6248F 58%,
                #C437A8 100%
            );

        box-shadow:
            0 14px 35px rgba(166,36,143,.18);
    }

    .welcome::after {
        content: "";

        position: absolute;

        width: 220px;
        height: 220px;

        border-radius: 50%;

        right: -90px;
        bottom: -120px;

        background:
            rgba(8,169,214,.17);
    }

    .welcome h1 {
        margin: 0 0 9px;

        font-size: 28px;
        font-weight: 900;
    }

    .welcome p {
        margin: 0;

        max-width: 650px;

        color:
            rgba(255,255,255,.85);

        font-size: 14px;
        line-height: 1.6;
    }

    .role-badge {
        display: inline-block;

        margin-top: 17px;

        padding: 7px 13px;

        border-radius: 50px;

        background:
            rgba(255,255,255,.14);

        border:
            1px solid
            rgba(255,255,255,.20);

        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }


    .stats {
        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 17px;

        margin-top: 22px;
    }

    .stat-card {
        background: white;

        border:
            1px solid #E9E0E9;

        border-radius: 17px;

        padding: 21px;

        position: relative;

        overflow: hidden;

        box-shadow:
            0 6px 22px rgba(46,31,47,.05);
    }

    .stat-card::after {
        content: "";

        position: absolute;

        width: 80px;
        height: 80px;

        border-radius: 50%;

        right: -30px;
        top: -30px;

        opacity: .11;
    }

    .stat-card.purple::after {
        background: #A6248F;
    }

    .stat-card.cyan::after {
        background: #08A9D6;
    }

    .stat-card.green::after {
        background: #66B43D;
    }

    .stat-card.yellow::after {
        background: #FFE500;
    }

    .stat-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;

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

        font-size: 21px;

        margin-bottom: 15px;
    }

    .purple .stat-icon {
        background: #F8E8F5;
    }

    .cyan .stat-icon {
        background: #E5F7FB;
    }

    .green .stat-icon {
        background: #EEF8E9;
    }

    .yellow .stat-icon {
        background: #FFF9CF;
    }

    .stat-number {
        font-size: 27px;
        font-weight: 900;

        color: #2B2030;
    }

    .stat-label {
        margin-top: 5px;

        color: #7D7180;

        font-size: 12px;
        font-weight: 600;
    }


    .dashboard-grid {
        display: grid;

        grid-template-columns:
            1.35fr .65fr;

        gap: 18px;

        margin-top: 22px;
    }

    .panel {
        background: white;

        border:
            1px solid #E9E0E9;

        border-radius: 18px;

        padding: 22px;

        box-shadow:
            0 6px 22px rgba(46,31,47,.05);
    }

    .panel-title {
        margin-bottom: 18px;

        font-size: 16px;
        font-weight: 900;

        color: #6F1767;
    }

    .quick-menu {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

    .quick-item {
        padding: 17px;

        border-radius: 14px;

        border:
            1px solid #ECE4EC;

        background: #FCFAFC;
    }

    .quick-item strong {
        display: block;

        margin-bottom: 6px;

        color: #49334A;

        font-size: 13px;
    }

    .quick-item span {
        color: #8A7E8C;

        font-size: 11px;
        line-height: 1.5;
    }


    .activity {
        display: grid;
        gap: 14px;
    }

    .activity-item {
        display: flex;

        gap: 11px;

        padding-bottom: 13px;

        border-bottom:
            1px solid #F0EAF0;
    }

    .activity-icon {
        width: 35px;
        height: 35px;

        flex-shrink: 0;

        border-radius: 10px;

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

        background: #F8E8F5;
    }

    .activity-text strong {
        display: block;

        margin-bottom: 4px;

        font-size: 12px;

        color: #49334A;
    }

    .activity-text span {
        font-size: 11px;

        color: #968A98;
    }


    @media (max-width: 1000px) {

        .stats {
            grid-template-columns:
                repeat(2, 1fr);
        }

        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 560px) {

        .welcome {
            padding: 24px 20px;
        }

        .welcome h1 {
            font-size: 22px;
        }

        .stats {
            grid-template-columns: 1fr 1fr;
            gap: 11px;
        }

        .stat-card {
            padding: 17px;
        }

        .stat-number {
            font-size: 22px;
        }

        .quick-menu {
            grid-template-columns: 1fr;
        }
    }

</style>
@endpush


@section('content')

<section class="welcome">

    <h1>
        Selamat Datang,
        {{ auth()->user()->name }} 👋
    </h1>

    <p>
        Selamat datang di PELANGI BERSINAR,
        platform Pelayanan dan Aksi Gizi
        SMP Negeri 1 Asembagus.
    </p>

    <span class="role-badge">
        {{ str_replace('_', ' ', auth()->user()->role) }}
    </span>

</section>


<section class="stats">

    <div class="stat-card purple">

        <div class="stat-icon">
            👨‍🎓
        </div>

        <div class="stat-number">
            860
        </div>

        <div class="stat-label">
            Total Siswa
        </div>

    </div>


    <div class="stat-card cyan">

        <div class="stat-icon">
            👨‍🏫
        </div>

        <div class="stat-number">
            60
        </div>

        <div class="stat-label">
            Guru & Tenaga Kependidikan
        </div>

    </div>


    <div class="stat-card green">

        <div class="stat-icon">
            👨‍👩‍👧
        </div>

        <div class="stat-number">
            0
        </div>

        <div class="stat-label">
            Wali Murid Terhubung
        </div>

    </div>


    <div class="stat-card yellow">

        <div class="stat-icon">
            📊
        </div>

        <div class="stat-number">
            0
        </div>

        <div class="stat-label">
            Data Hari Ini
        </div>

    </div>

</section>


<section class="dashboard-grid">

    <div class="panel">

        <div class="panel-title">
            Akses Cepat
        </div>

        <div class="quick-menu">

            <div class="quick-item">
                <strong>
                    👨‍🎓 Data Siswa
                </strong>

                <span>
                    Kelola seluruh data peserta didik.
                </span>
            </div>


            <div class="quick-item">
                <strong>
                    🥗 Pelayanan Gizi
                </strong>

                <span>
                    Input dan monitoring data pelayanan gizi.
                </span>
            </div>


            <div class="quick-item">
                <strong>
                    📋 Kegiatan
                </strong>

                <span>
                    Kelola pencatatan kegiatan siswa.
                </span>
            </div>


            <div class="quick-item">
                <strong>
                    📈 Statistik
                </strong>

                <span>
                    Lihat perkembangan dan rekap data.
                </span>
            </div>

        </div>

    </div>


    <div class="panel">

        <div class="panel-title">
            Aktivitas Terbaru
        </div>

        <div class="activity">

            <div class="activity-item">

                <div class="activity-icon">
                    ✓
                </div>

                <div class="activity-text">

                    <strong>
                        Sistem PELANGI BERSINAR aktif
                    </strong>

                    <span>
                        Sistem siap digunakan.
                    </span>

                </div>

            </div>


            <div class="activity-item">

                <div class="activity-icon">
                    👤
                </div>

                <div class="activity-text">

                    <strong>
                        Administrator berhasil masuk
                    </strong>

                    <span>
                        {{ now()->format('d-m-Y H:i') }}
                    </span>

                </div>

            </div>

        </div>

    </div>

</section>

@endsection