@extends('guru.layouts.app')

@section('title', 'Dashboard Guru')

@section('content')

<style>
    .page-title {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .stats-card {
        background: white;
        border-radius: 20px;
        padding: 25px;
        border: 2px solid #e0f2fe;
        text-align: center;
    }

    .stats-number {
        font-size: 48px;
        font-weight: 700;
        color: #0284c7;
    }

    .stats-label {
        font-size: 16px;
        color: #64748b;
        margin-top: 10px;
    }

    .welcome-card {
        background: white;
        border-radius: 20px;
        padding: 30px;
        border: 2px solid #e0f2fe;
        margin-bottom: 30px;
    }
</style>

<h3 class="page-title">DASHBOARD GURU</h3>

<div class="welcome-card">
    <h4>Selamat Datang, {{ Auth::guard('guru')->user()->nama }}! 👨‍🏫</h4>
    <p class="text-muted mb-0">NIP: {{ Auth::guard('guru')->user()->nip }}</p>
</div>

<div class="row">
    <div class="col-md-4 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ $totalKelas }}</div>
            <div class="stats-label">Total Kelas Diampu</div>
        </div>
    </div>

    <div class="col-md-4 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ $totalMapel }}</div>
            <div class="stats-label">Total Mata Pelajaran</div>
        </div>
    </div>

    <div class="col-md-4 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ $totalSiswa }}</div>
            <div class="stats-label">Total Siswa Diajar</div>
        </div>
    </div>
</div>

@endsection