@extends('layouts.app')

@section('title', 'Statistik Akademik - SIAKAD')
@section('page-title', 'Statistik Akademik')

@section('content')
@php
$totalMahasiswaAktif = \App\Models\Mahasiswa::where('status', 'aktif')->count();
$totalDosen = \App\Models\Dosen::where('is_active', 1)->count();
@endphp

<div class="row mb-4">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">Dashboard Statistik Akademik</h5>
                <p class="text-muted small mb-0">Analisis data akademik dan performa mahasiswa</p>
            </div>
            <div class="btn-group">
                <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-printer me-1"></i> Cetak
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats Cards -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon primary"><i class="bi bi-people-fill"></i></div>
            <div class="stat-content">
                <h3>{{ $totalMahasiswaAktif }}</h3>
                <p>Mahasiswa Aktif</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon success"><i class="bi bi-person-badge"></i></div>
            <div class="stat-content">
                <h3>{{ $totalDosen }}</h3>
                <p>Dosen Aktif</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon warning"><i class="bi bi-bar-chart-fill"></i></div>
            <div class="stat-content">
                <h3>{{ $topMahasiswa->count() > 0 ? number_format($topMahasiswa->first()->ipk ?? 0, 2) : '0.00' }}</h3>
                <p>IPK Tertinggi</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-icon info"><i class="bi bi-trophy-fill"></i></div>
            <div class="stat-content">
                <h3>{{ $topMahasiswa->count() }}</h3>
                <p>Top 10 Mahasiswa</p>
            </div>
        </div>
    </div>
</div>

<!-- Tab Navigation -->
<ul class="nav nav-tabs mb-4" id="statTabs" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ipk-tab" type="button">
            <i class="bi bi-graph-up me-1"></i> IPK per Prodi
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#kelulusan-tab" type="button">
            <i class="bi bi-pie-chart me-1"></i> Kelulusan
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nilai-tab" type="button">
            <i class="bi bi-bar-chart-steps me-1"></i> Distribusi Nilai
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#top-tab" type="button">
            <i class="bi bi-star-fill me-1"></i> Top 10
        </button>
    </li>
</ul>

<!-- Tab Content -->
<div class="tab-content" id="statTabsContent">
    <!-- IPK Tab -->
    <div class="tab-pane fade show active" id="ipk-tab">
        <div class="row">
            <div class="col-lg-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-graph-up me-2"></i>Distribusi IPK per Program Studi</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="height: 350px;">
                            <canvas id="ipkChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-info-circle me-2"></i>Ringkasan IPK</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Prodi</th>
                                        <th class="text-center">Mhs</th>
                                        <th class="text-center">Avg IPK</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($ipkStats as $stat)
                                    <tr>
                                        <td>{{ $stat->prodi }}</td>
                                        <td class="text-center">{{ $stat->total_mahasiswa ?? 0 }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-{{ $stat->avg_ipk >= 3.5 ? 'success' : ($stat->avg_ipk >= 3.0 ? 'primary' : ($stat->avg_ipk >= 2.0 ? 'warning' : 'danger')) }}">
                                                {{ number_format($stat->avg_ipk ?? 0, 2) }}
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-3">Belum ada data</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Kelulusan Tab -->
    <div class="tab-pane fade" id="kelulusan-tab">
        <div class="row">
            <div class="col-lg-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-pie-chart me-2"></i>Status Mahasiswa per Prodi</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="height: 300px;">
                            <canvas id="kelulusanChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-table me-2"></i>Detail Status Mahasiswa</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Prodi</th>
                                        <th class="text-center">Aktif</th>
                                        <th class="text-center">Lulus</th>
                                        <th class="text-center">Dropout</th>
                                        <th class="text-center">Cuti</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($kelulusanStats as $stat)
                                    <tr>
                                        <td>{{ $stat->prodi }}</td>
                                        <td class="text-center"><span class="badge bg-success">{{ $stat->aktif ?? 0 }}</span></td>
                                        <td class="text-center"><span class="badge bg-primary">{{ $stat->lulus ?? 0 }}</span></td>
                                        <td class="text-center"><span class="badge bg-danger">{{ $stat->dropout ?? 0 }}</span></td>
                                        <td class="text-center"><span class="badge bg-warning">{{ $stat->cuti ?? 0 }}</span></td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-3">Belum ada data</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Distribusi Nilai Tab -->
    <div class="tab-pane fade" id="nilai-tab">
        <div class="row">
            <div class="col-lg-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-bar-chart-steps me-2"></i>Perbandingan Nilai Mata Kuliah</h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container" style="height: 350px;">
                            <canvas id="nilaiChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5><i class="bi bi-book me-2"></i>Detail Nilai MK</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-sm mb-0">
                                <thead class="bg-light sticky-top">
                                    <tr>
                                        <th>Mata Kuliah</th>
                                        <th class="text-center">Peserta</th>
                                        <th class="text-center">Rata-rata</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($nilaiDistribusi as $mk)
                                    <tr>
                                        <td>
                                            <small class="text-muted">{{ $mk->kode }}</small><br>
                                            {{ $mk->nama }}
                                        </td>
                                        <td class="text-center">{{ $mk->total_peserta ?? 0 }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-{{ $mk->avg_nilai >= 3.5 ? 'success' : ($mk->avg_nilai >= 3.0 ? 'primary' : ($mk->avg_nilai >= 2.0 ? 'warning' : 'danger')) }}">
                                                {{ number_format($mk->avg_nilai ?? 0, 2) }}
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted py-3">Belum ada data</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top 10 Tab -->
    <div class="tab-pane fade" id="top-tab">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-trophy me-2"></i>10 Mahasiswa Berprestasi</h5>
                <span class="badge bg-warning text-dark">
                    <i class="bi bi-star-fill me-1"></i>Based on IPK
                </span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-center" style="width: 50px;">Rank</th>
                                <th>NIM</th>
                                <th>Nama</th>
                                <th>Prodi</th>
                                <th class="text-center">MK Diambil</th>
                                <th class="text-center">IPK</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($topMahasiswa as $index => $mhs)
                            <tr>
                                <td class="text-center">
                                    @if($index < 3)
                                    <span class="badge bg-{{ $index == 0 ? 'warning' : ($index == 1 ? 'secondary' : 'bronze') }}">
                                        {{ $index + 1 }}
                                    </span>
                                    @else
                                    <span class="badge bg-light text-dark">{{ $index + 1 }}</span>
                                    @endif
                                </td>
                                <td><code>{{ $mhs->nim }}</code></td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-initial rounded-circle bg-{{ $index < 3 ? 'warning' : 'primary' }} text-white" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem;">
                                            {{ strtoupper(substr($mhs->nama, 0, 1)) }}
                                        </div>
                                        <strong>{{ $mhs->nama }}</strong>
                                    </div>
                                </td>
                                <td>{{ $mhs->prodi }}</td>
                                <td class="text-center">{{ $mhs->total_matakuliah ?? 0 }}</td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $mhs->ipk >= 3.75 ? 'success' : ($mhs->ipk >= 3.5 ? 'primary' : 'info') }}">
                                        <i class="bi bi-star-fill me-1"></i>{{ number_format($mhs->ipk ?? 0, 2) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">
                                    <i class="bi bi-emoji-frown fs-4 d-block mb-2"></i>
                                    Belum ada data nilai mahasiswa
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-bronze { background-color: #cd7f32; color: white; }
.avatar-initial {
    font-weight: 600;
}
</style>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // IPK Chart
    const ipkCtx = document.getElementById('ipkChart').getContext('2d');
    new Chart(ipkCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($ipkStats->pluck('prodi')) !!},
            datasets: [{
                label: 'Avg IPK',
                data: {!! json_encode($ipkStats->pluck('avg_ipk')) !!},
                backgroundColor: 'rgba(105, 108, 255, 0.8)',
                borderRadius: 6,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true, max: 4, title: { display: true, text: 'IPK' } }
            }
        }
    });

    // Kelulusan Chart
    const kelCtx = document.getElementById('kelulusanChart').getContext('2d');
    new Chart(kelCtx, {
        type: 'doughnut',
        data: {
            labels: ['Aktif', 'Lulus', 'Dropout', 'Cuti', 'Mundur'],
            datasets: [{
                data: [
                    {!! $kelulusanStats->sum('aktif') !!},
                    {!! $kelulusanStats->sum('lulus') !!},
                    {!! $kelulusanStats->sum('dropout') !!},
                    {!! $kelulusanStats->sum('cuti') !!},
                    {!! $kelulusanStats->sum('mundur') !!}
                ],
                backgroundColor: ['#02c39a', '#696cff', '#ff4b4b', '#fcb02c', '#8392ab']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });

    // Nilai MK Chart
    const nilaiCtx = document.getElementById('nilaiChart').getContext('2d');
    new Chart(nilaiCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($matakuliahComparison->pluck('nama')) !!},
            datasets: [{
                label: 'Avg Nilai',
                data: {!! json_encode($matakuliahComparison->pluck('avg_nilai')) !!},
                backgroundColor: 'rgba(2, 195, 154, 0.8)',
                borderRadius: 6,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: 'y',
            plugins: { legend: { display: false } },
            scales: { x: { beginAtZero: true, max: 4 } }
        }
    });
});
</script>
@endpush
@endsection