@extends('layouts.admin')

@section('content')
<div class="p-4" style="min-height: 80vh; background: linear-gradient(to right, #6eb7e7ff, #cedff3ff);">
    <div class="container mt-5">
        <div class="card shadow-lg" style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 16px; color: white;">
            <div class="card-body">
                <h1 class="card-title h4 font-weight-bold mb-2">👋 Selamat datang, {{ Auth::user()->name }}!</h1>
                <p class="card-text">Kamu berhasil login ke aplikasi Data Siswa 🎉</p>

    <div class="row mt-4">
    <!-- Kotak Data Siswa -->
    <div class="col-md-4 col-sm-12 mb-3">
        <a href="{{ route('siswa.index') }}" class="text-decoration-none">
            <div class="card shadow-sm h-100" style="background-color: #3a8cf7ff; color: #ffffffff;">
                <div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
                    <i class="fas fa-user-graduate fa-4x mb-3" style="color: #ffffffff;"></i>
                    <h5 class="card-title">2 Siswa</h5>
                    <p class="m-0">View Details</p>
                </div>
            </div>
        </a>
    </div>

<!-- Kotak Data Kelas -->
<div class="col-md-4 col-sm-12 mb-3">
    <a href="{{ route('kelas.index') }}" class="text-decoration-none">
        <div class="card shadow-sm h-100" style="background-color: #3a8cf7ff; color: #ffffffff;">
            <div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
                <i class="fas fa-school fa-4x mb-3" style="color: #ffffffff;"></i> 
                <h5 class="card-title">4 Kelas</h5>
                <p class="m-0">View Details</p>
            </div>
        </div>
    </a>
</div>


    <!-- Grafik Statistik Pengguna -->
    <div class="col-md-8 col-sm-12 mb-3">
        <div class="card bg-white text-dark shadow-sm h-100">
            <div class="card-body">
                <h5 class="mb-3">Statistik Pengguna</h5>
                <canvas id="userChart" height="100"></canvas>
            </div>
        </div>
    </div>
</div>
        </div>
    </div>
</div>

<style>
    .card:hover {
        transform: scale(1.03);
        transition: 0.3s ease-in-out;
    }
</style>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('userChart').getContext('2d');
    const userChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Siswa', 'Kelas'],
            datasets: [{
                label: 'Jumlah Data',
                data: [2, 4],
                backgroundColor: ['#007bff', '#28a745', '#dc3545'],
                borderRadius: 5
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true }
            }
        }
    });
</script>
@endsection