@extends('layouts.app')
@section('title', 'Dashboard Dosen')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&display=swap');

    :root { --arn-teal: #0d9488; --arn-teal-light: #f0fdfa; --arn-dark: #111827; }
    
    .content-inner { font-family: 'Plus Jakarta Sans', sans-serif; background: #fcfdfd; min-height: 100vh; }
    .text-massive { font-size: 2.8rem; font-weight: 900; line-height: 1; letter-spacing: -1.5px; color: var(--arn-dark); }
    .text-heading { font-size: 1.15rem; font-weight: 900; color: var(--arn-dark); letter-spacing: -0.5px; }
    .label-mono { font-family: monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: #6b7280; text-transform: uppercase; font-weight: 800; }
    
    .card-modern { border-radius: 16px; border: 1px solid #e5e7eb; background: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
    
    .matkul-item { cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; border-radius: 12px; }
    .matkul-item:hover { background-color: #f8fafc; border-color: #e2e8f0; transform: translateX(-5px); }
    .matkul-item.active { background-color: var(--arn-teal-light); border-color: var(--arn-teal); }

    .chart-wrapper { position: relative; height: 260px; width: 100%; display: flex; align-items: center; justify-content: center; }
    .chart-center-text { position: absolute; text-align: center; pointer-events: none; }

    .table-container { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; }
    .table-teal th { background-color: var(--arn-teal) !important; color: #ffffff !important; font-size: 0.85rem; font-weight: 800; padding: 16px 20px; border: none; }
    .table-teal td { padding: 16px 20px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
</style>

<div class="content-inner p-4 p-md-5">
    {{-- Header --}}
    <div class="mb-5">
        <h1 class="text-massive mb-2">Dashboard</h1>
        <p class="text-muted fw-bold m-0" style="font-size: 1.1rem;">Berikut adalah ringkasan aktivitas pengajaran dan tugas mahasiswa Anda.</p>
    </div>

    {{-- KARTU STATISTIK ATAS --}}
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 border-0 shadow-sm" style="border-left: 5px solid var(--arn-dark);">
                <div class="label-mono mb-2" style="color: var(--arn-dark);">Mata kuliah diampu</div>
                <div class="text-massive">{{ $stats['total_matkul'] }}</div>
                <div class="label-mono mt-3" style="color: var(--arn-teal); font-size: 0.65rem;">Kelas aktif semester ini</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 border-0 shadow-sm" style="border-left: 5px solid #3b82f6;">
                <div class="label-mono mb-2" style="color: #3b82f6;">Total tugas terbit</div>
                <div class="text-massive" style="color: #1d4ed8;">{{ $stats['total_tugas'] }}</div>
                <div class="label-mono mt-3" style="color: #3b82f6; font-size: 0.65rem;">Penugasan mahasiswa</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 h-100 border-0 shadow-sm" style="border-left: 5px solid var(--arn-teal);">
                <div class="label-mono mb-2" style="color: var(--arn-teal);">Total Tugas</div>
                <div class="text-massive" style="color: var(--arn-teal);">{{ $stats['total_tugas'] }}</div>
                <div class="label-mono mt-3" style="color: var(--arn-teal); font-size: 0.65rem;">Tugas yang telah dibuat</div>
            </div>
        </div>
    </div>

    {{-- BARIS TENGAH: GRAFIK & DAFTAR MATKUL (INTERAKTIF) --}}
    <div class="row g-4 mb-5">
        
        {{-- KIRI: GRAFIK INTERAKTIF --}}
        <div class="col-lg-7">
            <div class="card-modern p-4 p-lg-5 shadow-sm border-0 h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="text-heading m-0" id="chartTitle">{{ $globalData['nama'] }}</h5>
                    <button class="btn btn-sm btn-light fw-bold" onclick="resetChart()" style="font-size: 0.75rem;">Reset Global</button>
                </div>
                
                <div class="row align-items-center h-100">
                    <div class="col-md-6 mb-4 mb-md-0">
                        <div class="chart-wrapper">
                            <canvas id="attendanceChart"></canvas>
                            <div class="chart-center-text">
                                <div class="text-massive" id="chartCenterPercent" style="font-size: 2.2rem;">{{ $globalData['persen'] }}%</div>
                                <div class="label-mono" style="font-size: 0.6rem;">Rata-rata Hadir</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex flex-column gap-2">
                            <div class="d-flex align-items-center justify-content-between p-2 rounded-3" style="background: #f0fdfa; border: 1px solid #ccfbf1;">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:12px;height:12px;border-radius:50%;background:#0d9488;"></div>
                                    <div class="fw-bold" style="font-size: 0.8rem;">Hadir</div>
                                </div>
                                <div class="fw-900" style="font-size: 1rem;" id="lblHadir">{{ $globalData['hadir'] }}</div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between p-2 rounded-3" style="background: #eff6ff; border: 1px solid #dbeafe;">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:12px;height:12px;border-radius:50%;background:#3b82f6;"></div>
                                    <div class="fw-bold" style="font-size: 0.8rem;">Izin</div>
                                </div>
                                <div class="fw-900" style="font-size: 1rem;" id="lblIzin">{{ $globalData['izin'] }}</div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between p-2 rounded-3" style="background: #fefce8; border: 1px solid #fef08a;">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:12px;height:12px;border-radius:50%;background:#ca8a04;"></div>
                                    <div class="fw-bold" style="font-size: 0.8rem;">Sakit</div>
                                </div>
                                <div class="fw-900" style="font-size: 1rem;" id="lblSakit">{{ $globalData['sakit'] ?? 0 }}</div>
                            </div>
                            <div class="d-flex align-items-center justify-content-between p-2 rounded-3" style="background: #fef2f2; border: 1px solid #fee2e2;">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:12px;height:12px;border-radius:50%;background:#ef4444;"></div>
                                    <div class="fw-bold" style="font-size: 0.8rem;">Alpha</div>
                                </div>
                                <div class="fw-900" style="font-size: 1rem;" id="lblAlpha">{{ $globalData['alpha'] }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- KANAN: DAFTAR MATA KULIAH --}}
        <div class="col-lg-5">
            <div class="card-modern shadow-sm border-0 h-100 overflow-hidden" style="background: #f8fafc;">
                <div class="p-4 border-bottom bg-white">
                    <h5 class="text-heading m-0">Mata kuliah saya</h5>
                    <div class="label-mono mt-1">Klik kelas untuk memfilter grafik</div>
                </div>
                <div class="list-group list-group-flush p-2" style="max-height: 380px; overflow-y: auto;">
                    @forelse($mataKuliahList as $mk)
                        @php
                            $jadwalPertama = $mk->jadwals->first();
                            $jamMulai = $jadwalPertama ? substr($jadwalPertama->jam_mulai,0,5) : '-';
                            $jamSelesai = $jadwalPertama ? substr($jadwalPertama->jam_selesai,0,5) : '-';
                            $hari = $jadwalPertama ? $jadwalPertama->hari : '-';
                            $tugasCount = $mk->tugass->count();
                        @endphp
                        <div class="list-group-item matkul-item rounded-3 mb-2 p-3 d-flex justify-content-between align-items-center" 
                             onclick="changeChartData({{ $mk->id }}, this)">
                            <div class="d-flex align-items-center gap-3">
                                <div style="width: 42px; height: 42px; border-radius: 12px; background: var(--arn-teal); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.9rem; flex-shrink: 0;">
                                    {{ strtoupper(substr($mk->nama, 0, 2)) }}
                                </div>
                                <div>
                                    <div class="fw-900 text-dark" style="font-size: 0.95rem;">{{ $mk->nama }}</div>
                                    <div class="label-mono mt-1" style="font-size: 0.65rem;">
                                        {{ $mk->kode }} &bull; {{ $hari }}, {{ $jamMulai }} - {{ $jamSelesai }} WIB
                                    </div>
                                </div>
                            </div>
                            <span class="badge bg-dark rounded-pill py-2 px-3" style="font-size: 0.65rem;">{{ $tugasCount }} TUGAS</span>
                        </div>
                    @empty
                        <div class="p-5 text-center">
                            <div class="text-muted fw-bold">Belum ada mata kuliah yang diampu.</div>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

    </div>

    {{-- BARIS BAWAH: LOG TUGAS TERBARU --}}
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <h5 class="text-heading m-0">Tugas Terbaru</h5>
                <a href="{{ route('dosen.tugas.index') }}" class="label-mono text-dark text-decoration-none">LIHAT SEMUA →</a>
            </div>

            <div class="table-container shadow-sm bg-white">
                <div class="table-responsive">
                    <table class="table table-teal mb-0">
                        <thead>
                            <tr>
                                <th class="ps-4">Mata Kuliah</th>
                                <th>Judul Tugas</th>
                                <th>Deadline</th>
                                <th class="pe-4 text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentTugas ?? [] as $tugas)
                            <tr>
                                <td class="ps-4">
                                    <div class="fw-900 text-dark" style="font-size: 0.9rem;">{{ $tugas->mataKuliah->nama ?? '-' }}</div>
                                 </td>
                                 <td>
                                    <div class="fw-800 text-dark" style="font-size: 0.85rem;">{{ $tugas->judul ?? '-' }}</div>
                                 </td>
                                 <td>
                                    <div class="fw-900 text-dark" style="font-size: 0.85rem;">{{ \Carbon\Carbon::parse($tugas->deadline)->format('d/m/Y') }}</div>
                                    <div class="text-muted fw-bold" style="font-size: 0.75rem;">{{ \Carbon\Carbon::parse($tugas->deadline)->format('H:i') }} WIB</div>
                                 </td>
                                <td class="pe-4 text-end">
                                    @php
                                        $now = now();
                                        $deadline = \Carbon\Carbon::parse($tugas->deadline);
                                        if ($now->gt($deadline)) {
                                            $status = 'Terlewat';
                                        } else {
                                            $status = 'Aktif';
                                        }
                                    @endphp
                                    <span class="px-3 py-1 fw-900 text-uppercase" style="font-size: 0.65rem; border-radius: 6px; background: {{ $now->gt($deadline) ? '#fef2f2' : '#f0fdfa' }}; color: {{ $now->gt($deadline) ? '#ef4444' : '#0d9488' }};">
                                        {{ $status }}
                                    </span>
                                 </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <div class="text-massive" style="color: #e5e7eb; font-size: 2.5rem;">Kosong</div>
                                    <p class="text-muted fw-bold mt-2">Belum ada tugas yang dibuat.</p>
                                 </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const chartDataSources = @json($chartData);
    const globalData = @json($globalData);

    let attendanceChartInstance = null;

    // 🔥 GRAFIK 4 BAGIAN: Hadir, Izin, Sakit, Alpha
    function renderChart(hadir, izin, sakit, alpha) {
        const ctx = document.getElementById('attendanceChart').getContext('2d');
        
        if (attendanceChartInstance) {
            attendanceChartInstance.destroy();
        }

        const total = hadir + izin + sakit + alpha;
        const dataValues = total === 0 ? [1, 0, 0, 0] : [hadir, izin, sakit, alpha];
        const bgColors = total === 0 
            ? ['#e2e8f0', '#e2e8f0', '#e2e8f0', '#e2e8f0'] 
            : ['#0d9488', '#3b82f6', '#ca8a04', '#ef4444'];

        attendanceChartInstance = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Hadir', 'Izin', 'Sakit', 'Alpha'],
                datasets: [{
                    data: dataValues,
                    backgroundColor: bgColors,
                    borderWidth: 3,
                    borderColor: '#ffffff',
                    hoverOffset: 5
                }]
            },
            options: {
                cutout: '70%',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { 
                        position: 'bottom',
                        labels: { 
                            font: { size: 10, weight: 'bold' },
                            usePointStyle: true,
                            padding: 8
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                if(total === 0) return ' Belum ada data';
                                const value = context.raw;
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return ` ${context.label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                },
                animation: { animateScale: true, animateRotate: true }
            }
        });
    }

    function updateUI(dataObj) {
        document.getElementById('chartTitle').innerText = dataObj.nama;
        // Hitung ulang persentase kehadiran dari data
        const total = (dataObj.hadir || 0) + (dataObj.izin || 0) + (dataObj.sakit || 0) + (dataObj.alpha || 0);
        const persenKehadiran = total > 0 ? Math.round(((dataObj.hadir || 0) / total) * 100) : 0;
        document.getElementById('chartCenterPercent').innerText = persenKehadiran + '%';
        document.getElementById('lblHadir').innerText = dataObj.hadir || 0;
        document.getElementById('lblIzin').innerText = dataObj.izin || 0;
        document.getElementById('lblSakit').innerText = dataObj.sakit || 0;
        document.getElementById('lblAlpha').innerText = dataObj.alpha || 0;
    }

    function changeChartData(matkulId, element) {
        document.querySelectorAll('.matkul-item').forEach(el => el.classList.remove('active'));
        element.classList.add('active');

        const data = chartDataSources[matkulId];
        if (data) {
            updateUI(data);
            renderChart(data.hadir || 0, data.izin || 0, data.sakit || 0, data.alpha || 0);
        }
    }

    function resetChart() {
        document.querySelectorAll('.matkul-item').forEach(el => el.classList.remove('active'));
        updateUI(globalData);
        renderChart(globalData.hadir || 0, globalData.izin || 0, globalData.sakit || 0, globalData.alpha || 0);
    }

    document.addEventListener("DOMContentLoaded", function() {
        renderChart(globalData.hadir || 0, globalData.izin || 0, globalData.sakit || 0, globalData.alpha || 0);
    });
</script>
@endsection