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

@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); }
    
    .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; }

    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
</style>

<div class="content-inner p-4 p-md-5">
    {{-- Header --}}
    <div class="mb-5">
        <h1 class="text-massive mb-2">Halo, {{ auth()->user()->name }}!</h1>
        <p class="text-muted fw-bold m-0" style="font-size: 1.1rem;">Panel monitoring operasional sistem dan data akademik global.</p>
    </div>

    <div class="row mb-5">
        <div class="col-12">
            <div class="card-modern p-4 p-lg-5 border-0 shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="text-heading m-0">Distribusi Data Master Sistem</h5>
                    <span class="badge" style="background: #f0fdfa; color: var(--arn-teal); font-weight: 800; padding: 8px 12px; border-radius: 8px;">TOTAL ENTITAS</span>
                </div>
                
                <div style="position: relative; height: 300px; width: 100%; display: flex; align-items: center; justify-content: center;">
                    <canvas id="masterPieChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        
        <div class="col-lg-6">
            <div class="d-flex justify-content-between align-items-end mb-3">
                <h5 class="text-heading m-0">Jadwal Kelas Hari Ini</h5>
                <span class="badge" style="background: #f3f4f6; color: var(--arn-dark); font-weight: 800; padding: 6px 12px; border-radius: 6px;">{{ now()->translatedFormat('l, d M Y') }}</span>
            </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>Dosen Pengampu</th>
                                <th>Waktu & Ruang</th>
                                <th class="pe-4 text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($jadwalHariIni ?? [] as $jadwal)
                                @php
                                    $isSekarang = \Carbon\Carbon::now()->between(
                                        \Carbon\Carbon::parse($jadwal->jam_mulai), 
                                        \Carbon\Carbon::parse($jadwal->jam_selesai)
                                    );
                                @endphp
                                <tr>
                                    <td class="ps-4">
                                        <div class="fw-900 text-dark" style="font-size: 0.85rem;">{{ $jadwal->mataKuliah->nama ?? '-' }}</div>
                                        <div class="label-mono mt-1" style="font-size: 0.6rem;">{{ $jadwal->mataKuliah->kode ?? '-' }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-bold text-dark" style="font-size: 0.8rem;">{{ $jadwal->mataKuliah->dosen->user->name ?? '-' }}</div>
                                    </td>
                                    <td>
                                        <div class="fw-900 text-dark" style="font-size: 0.8rem;">
                                            {{ substr($jadwal->jam_mulai,0,5) }} - {{ substr($jadwal->jam_selesai,0,5) }} WIB
                                        </div>
                                        <div class="label-mono mt-1" style="color: var(--arn-teal); font-size: 0.6rem;">Ruang {{ $jadwal->ruangan }}</div>
                                    </td>
                                    <td class="pe-4 text-end">
                                        @if($isSekarang)
                                            <span style="font-size: 0.6rem; font-weight: 900; background: #fef2f2; color: #ef4444; padding: 4px 8px; border-radius: 6px; animation: pulse 2s infinite;">LIVE</span>
                                        @else
                                            <span style="font-size: 0.6rem; font-weight: 900; background: #f1f5f9; color: #64748b; padding: 4px 8px; border-radius: 6px;">READY</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <div class="fw-bold text-muted" style="font-size: 0.85rem;">Tidak ada jadwal untuk hari ini.</div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <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('admin.laporan.index') }}" class="label-mono text-dark text-decoration-none" style="font-size: 0.65rem;">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">Mahasiswa</th>
                                <th>Mata Kuliah</th>
                                <th class="pe-4 text-end">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentAbsensi as $a)
                            @php
                                $status = strtolower($a->status);
                                if($status == 'terlambat') $status = 'alpha';
                                $colors = [
                                    'hadir' => 'background: #f0fdfa; color: #0d9488;',
                                    'izin'  => 'background: #eff6ff; color: #3b82f6;',
                                    'alpha' => 'background: #fef2f2; color: #ef4444;'
                                ];
                            @endphp
                            <tr>
                                <td class="ps-4">
                                    <div class="fw-900 text-dark" style="font-size: 0.85rem;">{{ $a->user->name ?? '-' }}</div>
                                    <div class="label-mono mt-1" style="font-size: 0.6rem;">{{ $a->user->nim_nip ?? '-' }}</div>
                                </td>
                                <td>
                                    <div class="fw-800 text-dark" style="font-size: 0.8rem;">{{ $a->jadwal->mataKuliah->nama ?? '-' }}</div>
                                    <div class="text-muted fw-bold" style="font-size: 0.65rem;">{{ $a->waktu_absen->format('H:i') }} WIB</div>
                                </td>
                                <td class="pe-4 text-end">
                                    <span class="px-2 py-1 fw-900 text-uppercase" style="font-size: 0.6rem; border-radius: 4px; {{ $colors[$status] ?? '' }}">
                                        {{ $status }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="3" class="text-center py-5">
                                    <div class="fw-bold text-muted" style="font-size: 0.85rem;">Belum ada aktivitas presensi.</div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('masterPieChart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [
                    'Mahasiswa ({{ $stats["total_mahasiswa"] }})',
                    'Dosen ({{ $stats["total_dosen"] }})',
                    'Mata Kuliah ({{ $stats["total_matkul"] }})',
                    'Jadwal Kelas ({{ $stats["total_jadwal"] }})'
                ],
                datasets: [{
                    data: [
                        {{ $stats['total_mahasiswa'] }},
                        {{ $stats['total_dosen'] }},
                        {{ $stats['total_matkul'] }},
                        {{ $stats['total_jadwal'] }}
                    ],
                    backgroundColor: ['#0d9488', '#3b82f6', '#f59e0b', '#8b5cf6'],
                    borderWidth: 2, borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                        labels: { font: { family: "'Plus Jakarta Sans'", weight: 'bold', size: 13 }, usePointStyle: true, padding: 20 }
                    }
                }
            }
        });
    });
</script>
@endsection