@extends('layouts.app')

@section('title', 'Dashboard - SIAKAD')
@section('page-title', 'Dashboard')

@section('content')
<!-- Stats Cards -->
<div class="row">
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon primary">
                <i class="bi bi-building"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Prodi::count() }}</h3>
                <p>Program Studi</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon success">
                <i class="bi bi-person-badge"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Dosen::count() }}</h3>
                <p>Dosen</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon warning">
                <i class="bi bi-people"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Mahasiswa::count() }}</h3>
                <p>Mahasiswa</p>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="stat-icon danger">
                <i class="bi bi-book"></i>
            </div>
            <div class="stat-content">
                <h3>{{ \App\Models\Matakuliah::count() }}</h3>
                <p>Mata Kuliah</p>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart me-2"></i>Statistik Gender Dosen</h5>
            </div>
            <div class="card-body">
                <canvas id="dosenGenderChart" height="200"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-pie-chart me-2"></i>Statistik Gender Mahasiswa</h5>
            </div>
            <div class="card-body">
                <canvas id="mahasiswaGenderChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 2 -->
<div class="row">
    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Mahasiswa Per Prodi</h5>
            </div>
            <div class="card-body">
                <canvas id="mahasiswaProdiChart" height="200"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-bar-chart me-2"></i>Status Mahasiswa</h5>
            </div>
            <div class="card-body">
                <canvas id="mahasiswaStatusChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Quick Menu -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-grid-3x3-gap me-2"></i>Menu Cepat</h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.prodi.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(79, 70, 229, 0.1);">
                                        <i class="bi bi-building fs-3" style="color: var(--primary);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Program Studi</h6>
                                <small style="color: var(--text-secondary);">Kelola data prodi</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.dosen.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(16, 185, 129, 0.1);">
                                        <i class="bi bi-person-badge fs-3" style="color: var(--success);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Dosen</h6>
                                <small style="color: var(--text-secondary);">Kelola data dosen</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.mahasiswa.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(245, 158, 11, 0.1);">
                                        <i class="bi bi-people fs-3" style="color: var(--warning);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Mahasiswa</h6>
                                <small style="color: var(--text-secondary);">Kelola data mahasiswa</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.matakuliah.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(239, 68, 68, 0.1);">
                                        <i class="bi bi-book fs-3" style="color: var(--danger);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Mata Kuliah</h6>
                                <small style="color: var(--text-secondary);">Kelola mata kuliah</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.ruangan.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(100, 116, 139, 0.1);">
                                        <i class="bi bi-door-open fs-3" style="color: var(--secondary);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Ruangan</h6>
                                <small style="color: var(--text-secondary);">Kelola ruangan</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.tahun-akademik.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(79, 70, 229, 0.1);">
                                        <i class="bi bi-calendar3 fs-3" style="color: var(--primary);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Tahun Akademik</h6>
                                <small style="color: var(--text-secondary);">Kelola tahun akademik</small>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="{{ route('admin.jadwal.index') }}" class="text-decoration-none">
                            <div class="p-4 border rounded-3 text-center hover-card">
                                <div class="mb-3">
                                    <div class="d-inline-flex p-3 rounded-3" style="background: rgba(16, 185, 129, 0.1);">
                                        <i class="bi bi-calendar-week fs-3" style="color: var(--success);"></i>
                                    </div>
                                </div>
                                <h6 style="color: var(--text-primary);">Jadwal Kuliah</h6>
                                <small style="color: var(--text-secondary);">Kelola jadwal</small>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-card {
        transition: all 0.3s ease;
        background: var(--surface);
    }

    .hover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        border-color: var(--primary);
    }
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    // Chart defaults
    Chart.defaults.font.family = "'Inter', sans-serif";
    Chart.defaults.color = '#64748B';

    // Dosen Gender Chart
    const dosenGenderCtx = document.getElementById('dosenGenderChart').getContext('2d');
    new Chart(dosenGenderCtx, {
        type: 'doughnut',
        data: {
            labels: ['Laki-laki', 'Perempuan'],
            datasets: [{
                data: [
                    {{ \App\Models\Dosen::where('jenis_kelamin', 'L')->count() }},
                    {{ \App\Models\Dosen::where('jenis_kelamin', 'P')->count() }}
                ],
                backgroundColor: ['#4F46E5', '#F59E0B'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Mahasiswa Gender Chart
    const mahasiswaGenderCtx = document.getElementById('mahasiswaGenderChart').getContext('2d');
    new Chart(mahasiswaGenderCtx, {
        type: 'doughnut',
        data: {
            labels: ['Laki-laki', 'Perempuan'],
            datasets: [{
                data: [
                    {{ \App\Models\Mahasiswa::where('jenis_kelamin', 'L')->count() }},
                    {{ \App\Models\Mahasiswa::where('jenis_kelamin', 'P')->count() }}
                ],
                backgroundColor: ['#10B981', '#EF4444'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Mahasiswa Per Prodi Chart
    const mahasiswaProdiCtx = document.getElementById('mahasiswaProdiChart').getContext('2d');
    new Chart(mahasiswaProdiCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode(\App\Models\Prodi::pluck('nama')) !!},
            datasets: [{
                label: 'Jumlah Mahasiswa',
                data: {!! json_encode(\App\Models\Prodi::withCount('mahasiswas')->pluck('mahasiswas_count')) !!},
                backgroundColor: [
                    '#4F46E5', '#10B981', '#F59E0B', '#EF4444',
                    '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16'
                ],
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });

    // Mahasiswa Status Chart
    const mahasiswaStatusCtx = document.getElementById('mahasiswaStatusChart').getContext('2d');
    new Chart(mahasiswaStatusCtx, {
        type: 'bar',
        data: {
            labels: ['Aktif', 'Cuti', 'Dropout', 'Lulus', 'DO'],
            datasets: [{
                label: 'Jumlah',
                data: [
                    {{ \App\Models\Mahasiswa::where('status', 'aktif')->count() }},
                    {{ \App\Models\Mahasiswa::where('status', 'cuti')->count() }},
                    {{ \App\Models\Mahasiswa::where('status', 'dropout')->count() }},
                    {{ \App\Models\Mahasiswa::where('status', 'lulus')->count() }},
                    {{ \App\Models\Mahasiswa::where('status', 'do')->count() }}
                ],
                backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#4F46E5', '#64748B'],
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
</script>
@endpush
@endsection