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

@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); }
    .card-modern:hover { box-shadow: 0 15px 30px -5px rgba(0,0,0,0.05); }

    .chart-wrapper { position: relative; height: 260px; width: 260px; margin: 0 auto; }

    .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 24px; 
        border: none; 
    }
    .table-teal td { padding: 16px 24px; vertical-align: middle; border-bottom: 1px solid #f1f5f9; }
</style>

@php 
    use Carbon\Carbon;
    $userId = auth()->id();
    $sekarang = Carbon::now('Asia/Jakarta');
    $hariIni = $sekarang->toDateString();
    
    // ✅ AMBIL SEMUA MATA KULIAH AKTIF
    $semuaMatkul = \App\Models\MataKuliah::with('dosen')
        ->where('is_aktif', true)
        ->orderBy('nama', 'asc')
        ->get();
    
    $matkulIds = $semuaMatkul->pluck('id');
    
    // ✅ AMBIL SEMUA PERTEMUAN YANG SUDAH LEWAT UNTUK SEMUA MATKUL
    $semuaPertemuan = \App\Models\Pertemuan::whereHas('jadwal', function($q) use ($matkulIds) {
        $q->whereIn('matkul_id', $matkulIds);
    })->where('tanggal', '<=', $hariIni)->get();
    
    // ✅ AMBIL DATA ABSENSI MAHASISWA
    $allAbsensi = \App\Models\Absensi::where('user_id', $userId)
        ->get()
        ->keyBy('pertemuan_id');
    
    $palette = ['#0ea5e9', '#f59e0b', '#10b981', '#8b5cf6', '#f43f5e', '#14b8a6', '#84cc16'];
    
    $matkulStats = [];
    $totalHadirSemua = 0;
    $totalPertemuanSemua = 0;
    
    foreach($semuaMatkul as $mk) {
        // ✅ Ambil pertemuan untuk matkul ini yang sudah lewat
        $pertemuans = $semuaPertemuan->filter(function($p) use ($mk) {
            return $p->jadwal && $p->jadwal->matkul_id === $mk->id;
        });
        
        $totalPertemuan = $pertemuans->count();
        $hadir = 0;
        
        foreach ($pertemuans as $p) {
            $absensi = $allAbsensi[$p->id] ?? null;
            if ($absensi && $absensi->status === 'hadir') {
                $hadir++;
            }
        }
        
        $persen = $totalPertemuan > 0 ? round(($hadir / $totalPertemuan) * 100) : 0;
        
        $matkulStats[$mk->id] = [
            'nama'   => $mk->nama,
            'kode'   => $mk->kode ?? '-',
            'total'  => $totalPertemuan,
            'hadir'  => $hadir,
            'alpha'  => $totalPertemuan - $hadir,
            'persen' => $persen,
            'warna'  => $persen >= 75 ? '#10b981' : ($persen >= 50 ? '#f59e0b' : '#ef4444')
        ];
        
        $totalHadirSemua += $hadir;
        $totalPertemuanSemua += $totalPertemuan;
    }
    
    // Data untuk chart (hanya matkul yang sudah ada pertemuan)
    $chartLabels = [];
    $chartData = [];
    $chartColors = [];
    $colorIndex = 0;
    
    foreach($matkulStats as $key => $mk) {
        if ($mk['total'] > 0) {
            $chartLabels[] = $mk['nama'];
            $chartData[] = $mk['hadir'];
            $chartColors[] = $palette[$colorIndex % count($palette)];
            $colorIndex++;
        }
    }
    
    // ✅ Ambil data dari Controller atau hitung ulang
    $recentAbsensi = $recentAbsensi ?? \App\Models\Absensi::with(['jadwal.mataKuliah'])
        ->where('user_id', $userId)
        ->latest('waktu_absen')
        ->take(5)
        ->get();
    
    $pendingTugas = $pendingTugas ?? \App\Models\Tugas::whereHas('mataKuliah', function($q) use ($matkulIds) {
            $q->whereIn('id', $matkulIds);
        })
        ->where('deadline', '>', now())
        ->whereDoesntHave('pengumpulans', function($q) use ($userId) {
            $q->where('user_id', $userId);
        })
        ->orderBy('deadline', 'asc')
        ->take(5)
        ->get();
@endphp

<div class="content-inner p-4 p-md-5">
    {{-- Header --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end mb-5 border-bottom pb-4 gap-3">
        <div>
            <h1 class="text-massive mb-2">Halo, {{ auth()->user()->name }}!</h1>
            <p class="text-muted fw-bold m-0" style="font-size: 1.1rem;">Selamat datang di portal akademik Anda.</p>
        </div>
        <a href="{{ route('mahasiswa.absensi.scan') }}" class="btn text-white fw-900 px-4 py-3 shadow-sm d-flex align-items-center justify-content-center" style="background: var(--arn-teal); border-radius: 12px; letter-spacing: 1px; min-width: 200px; text-decoration: none;">
            SCAN QR PRESENSI
        </a>
    </div>

    {{-- STATISTIK CARD TOTAL --}}
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card-modern p-4 text-center">
                <div class="text-massive" style="font-size: 2.5rem; color: var(--arn-teal);">{{ $totalPertemuanSemua }}</div>
                <div class="label-mono mt-2">TOTAL PERTEMUAN</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 text-center">
                <div class="text-massive" style="font-size: 2.5rem; color: #10b981;">{{ $totalHadirSemua }}</div>
                <div class="label-mono mt-2">TOTAL HADIR</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card-modern p-4 text-center">
                <div class="text-massive" style="font-size: 2.5rem; color: #f59e0b;">{{ $pendingTugas->count() }}</div>
                <div class="label-mono mt-2">TUGAS BELUM DIKUMPUL</div>
            </div>
        </div>
    </div>

    {{-- Grafik & Detail Kehadiran --}}
    <div class="card-modern p-4 p-lg-5 mb-5 shadow-sm border-0">
        <h5 class="text-heading mb-4">📊 Statistik Kehadiran per Mata Kuliah</h5>
        
        @if(count($matkulStats) > 0 && $totalPertemuanSemua > 0)
        <div class="row align-items-center">
            <div class="col-md-5 text-center mb-5 mb-md-0">
                <div class="chart-wrapper">
                    <canvas id="matkulChart"></canvas>
                </div>
                <div class="mt-3">
                    <div class="d-flex justify-content-center gap-3">
                        <div><span class="badge bg-success">✅ Hadir: {{ $totalHadirSemua }}</span></div>
                        <div><span class="badge bg-danger">❌ Alpha: {{ $totalPertemuanSemua - $totalHadirSemua }}</span></div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-7">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr><th>Mata Kuliah</th><th>Hadir</th><th>Total</th><th>Persen</th><th></th></tr>
                        </thead>
                        <tbody>
                            @foreach($matkulStats as $mk)
                            <tr>
                                <td><strong>{{ $mk['nama'] }}</strong><br><small class="text-muted">{{ $mk['kode'] }}</small></td>
                                <td class="text-success fw-bold">{{ $mk['hadir'] }}</td>
                                <td>{{ $mk['total'] }}</td>
                                <td class="fw-bold" style="color: {{ $mk['warna'] }};">{{ $mk['persen'] }}%</td>
                                <td width="120">
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar" style="width: {{ $mk['persen'] }}%; background: {{ $mk['warna'] }};"></div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @else
        <div class="text-center py-5">
            <div class="text-massive" style="color: #e5e7eb; font-size: 3rem;">Belum Ada Data</div>
            <p class="text-muted fw-bold mt-3">Belum ada pertemuan yang lewat atau mata kuliah aktif.</p>
        </div>
        @endif
    </div>

    {{-- Bagian Bawah: Presensi Terbaru & Tugas Mendesak --}}
    <div class="row g-4">
        
        {{-- KOLOM KIRI: PRESENSI TERBARU --}}
        <div class="col-lg-7">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <h5 class="text-heading m-0">🕒 Log presensi terbaru</h5>
                <a href="{{ route('mahasiswa.absensi.riwayat') }}" class="label-mono text-dark text-decoration-none">LIHAT SEMUA →</a>
            </div>

            <div class="table-container shadow-sm">
                <div class="table-responsive">
                    <table class="table table-teal mb-0">
                        <thead>
                            <tr><th class="ps-4">Mata Kuliah</th><th>Waktu</th><th class="pe-4 text-end">Status</th></tr>
                        </thead>
                        <tbody>
                            @forelse($recentAbsensi as $a)
                            @php
                                $status = strtolower($a->status);
                                $statusBadge = [
                                    'hadir' => ['bg' => '#f0fdfa', 'color' => '#0d9488', 'text' => '✅ Hadir'],
                                    'izin' => ['bg' => '#eff6ff', 'color' => '#3b82f6', 'text' => '📝 Izin'],
                                    'alpha' => ['bg' => '#fef2f2', 'color' => '#ef4444', 'text' => '❌ Alpha'],
                                    'sakit' => ['bg' => '#fefce8', 'color' => '#ca8a04', 'text' => '🤒 Sakit']
                                ][$status] ?? ['bg' => '#f3f4f6', 'color' => '#6b7280', 'text' => ucfirst($status)];
                            @endphp
                            <tr>
                                <td class="ps-4">
                                    <div class="fw-900 text-dark">{{ $a->jadwal->mataKuliah->nama ?? '-' }}</div>
                                    <div class="label-mono mt-1" style="font-size: 0.65rem;">
                                        {{ $a->jadwal->mataKuliah->kode ?? '-' }}
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-900">{{ $a->waktu_absen->format('d/m/Y') }}</div>
                                    <div class="fw-bold" style="font-size: 0.75rem; color: #64748b;">{{ $a->waktu_absen->format('H:i') }} WIB</div>
                                </td>
                                <td class="pe-4 text-end">
                                    <span class="px-3 py-1 fw-900" style="font-size: 0.7rem; border-radius: 20px; background: {{ $statusBadge['bg'] }}; color: {{ $statusBadge['color'] }};">
                                        {{ $statusBadge['text'] }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="3" class="text-center py-5">
                                <div class="text-muted">Belum ada riwayat presensi.</div>
                            </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: TUGAS --}}
        <div class="col-lg-5">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <h5 class="text-heading m-0">📋 Tugas mendesak</h5>
                <a href="{{ route('mahasiswa.tugas.index') }}" class="label-mono text-dark text-decoration-none">LIHAT SEMUA →</a>
            </div>

            <div class="card-modern shadow-sm" style="border-top: 5px solid var(--arn-teal);">
                <div class="list-group list-group-flush">
                    @forelse($pendingTugas as $tugas)
                    @php
                        $deadline = Carbon::parse($tugas->deadline);
                        $sisaJam = Carbon::now()->diffInHours($deadline, false);
                        if ($sisaJam <= 24) {
                            $bgStatus = '#fef2f2'; $colorStatus = '#ef4444'; $teksSisa = '🚨 Mendesak!';
                        } elseif ($sisaJam <= 72) {
                            $bgStatus = '#fffbeb'; $colorStatus = '#d97706'; $teksSisa = '⚠️ Segera';
                        } else {
                            $bgStatus = '#f0fdfa'; $colorStatus = '#0d9488'; $teksSisa = '✅ Masih aman';
                        }
                    @endphp
                    <a href="{{ route('mahasiswa.tugas.show', $tugas->id) }}" class="list-group-item list-group-item-action p-4" style="border-bottom: 1px solid #f1f5f9; text-decoration: none;">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <div class="label-mono mb-1" style="font-size: 0.6rem;">{{ $tugas->mataKuliah->nama ?? '-' }}</div>
                                <div class="fw-900 text-dark">{{ $tugas->judul }}</div>
                                <div class="fw-bold mt-2" style="font-size: 0.7rem; color: #64748b;">
                                    📅 {{ $deadline->format('d/m/Y, H:i') }}
                                </div>
                            </div>
                            <span style="font-size: 0.65rem; font-weight: 900; padding: 4px 12px; border-radius: 20px; background: {{ $bgStatus }}; color: {{ $colorStatus }}; white-space: nowrap;">
                                {{ $teksSisa }}
                            </span>
                        </div>
                    </a>
                    @empty
                    <div class="p-5 text-center">
                        <div class="text-massive mb-2" style="color: #e5e7eb; font-size: 3rem;">✨</div>
                        <div class="text-muted fw-bold">Tidak ada tugas yang perlu dikerjakan.</div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
        
    </div>
</div>

@if(count($chartLabels) > 0)
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('matkulChart').getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($chartLabels) !!},
                datasets: [{
                    data: {!! json_encode($chartData) !!},
                    backgroundColor: {!! json_encode($chartColors) !!},
                    borderWidth: 3,
                    borderColor: '#ffffff',
                    hoverOffset: 15
                }]
            },
            options: {
                cutout: '65%',
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { position: 'bottom', labels: { font: { size: 11, weight: 'bold' }, usePointStyle: true } }
                },
                animation: { animateScale: true, animateRotate: true }
            }
        });
    });
</script>
@endif

@endsection