@extends('adminlte::page')

@section('title', 'Dashboard Overview')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2">
        <div>
            <h4 class="font-weight-bold text-dark" style="font-family: 'Inter', sans-serif;">Dashboard Overview</h4>
            <p class="text-muted small">Data statistik terkini per {{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM Y') }}</p>
        </div>
        {{-- Tombol Aksi Cepat --}}
        <div class="d-none d-md-block">
            <a href="{{ route('sekolah.website.posts.create', ['type' => 'berita']) }}" class="btn btn-primary btn-sm rounded-pill px-4 shadow-sm">
                <i class="fas fa-plus mr-2"></i> Buat Berita
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="apex-container pb-5">

    {{-- ====================================================================
       1. WIDGET STATISTIK (APEX STYLE - GRADIENT CARDS)
       ==================================================================== --}}
    <div class="row">
        {{-- Widget 1: SISWA (Teal) --}}
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card apex-card bg-apex-teal">
                <div class="card-body pb-0">
                    <div class="d-flex justify-content-between text-white">
                        <div>
                            <h3 class="font-weight-bold mb-0">{{ number_format($totalSiswa ?? 0) }}</h3>
                            <span class="text-white-50 text-sm font-weight-bold">Total Siswa</span>
                        </div>
                        <div class="icon-circle bg-white-20">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                    </div>
                </div>
                <div class="chart-area">
                    <canvas id="chartTeal"></canvas>
                </div>
            </div>
        </div>

        {{-- Widget 2: GURU (Orange) --}}
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card apex-card bg-apex-orange">
                <div class="card-body pb-0">
                    <div class="d-flex justify-content-between text-white">
                        <div>
                            <h3 class="font-weight-bold mb-0">{{ number_format($totalGuru ?? 0) }}</h3>
                            <span class="text-white-50 text-sm font-weight-bold">Total Guru</span>
                        </div>
                        <div class="icon-circle bg-white-20">
                            <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                    </div>
                </div>
                <div class="chart-area">
                    <canvas id="chartOrange"></canvas>
                </div>
            </div>
        </div>

        {{-- Widget 3: KELAS (Green) --}}
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card apex-card bg-apex-green">
                <div class="card-body pb-0">
                    <div class="d-flex justify-content-between text-white">
                        <div>
                            <h3 class="font-weight-bold mb-0">{{ number_format($totalKelas ?? 0) }}</h3>
                            <span class="text-white-50 text-sm font-weight-bold">Rombel Kelas</span>
                        </div>
                        <div class="icon-circle bg-white-20">
                            <i class="fas fa-school"></i>
                        </div>
                    </div>
                </div>
                <div class="chart-area">
                    <canvas id="chartGreen"></canvas>
                </div>
            </div>
        </div>

        {{-- Widget 4: PENGGUNA ONLINE (Blue) --}}
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card apex-card bg-apex-blue">
                <div class="card-body pb-0">
                    <div class="d-flex justify-content-between text-white mb-2">
                        <div>
                            <h3 class="font-weight-bold mb-0 d-flex align-items-center">
                                {{ number_format($totalOnline ?? 0) }} 
                                <span class="ml-2 blink-indicator"></span>
                            </h3>
                            <span class="text-white-50 text-sm font-weight-bold">Pengguna Online</span>
                        </div>
                        <div class="icon-circle bg-white-20">
                            <i class="fas fa-signal"></i>
                        </div>
                    </div>
                    
                    {{-- Mini Progress Bar Distribusi --}}
                    @php
                        $tot = ($totalOnline ?? 0) > 0 ? $totalOnline : 1;
                        $pG = (($onlineGuru ?? 0) / $tot) * 100;
                        $pS = (($onlineSiswa ?? 0) / $tot) * 100;
                    @endphp
                    <div class="progress mt-2 bg-white-20" style="height: 5px; border-radius: 5px;">
                        <div class="progress-bar bg-white" style="width: {{ $pG }}%; opacity: 0.9;" title="Guru"></div>
                        <div class="progress-bar bg-white" style="width: {{ $pS }}%; opacity: 0.5;" title="Siswa"></div>
                    </div>
                    <div class="d-flex justify-content-between mt-1 text-white-50" style="font-size: 0.65rem;">
                        <span>Guru: {{ $onlineGuru ?? 0 }}</span>
                        <span>Siswa: {{ $onlineSiswa ?? 0 }}</span>
                    </div>
                </div>
                <div class="chart-area">
                    <canvas id="chartBlue"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- ====================================================================
       2. BAGIAN UTAMA (CHART & TABEL ABSENSI DETIL)
       ==================================================================== --}}
    <div class="row">
        
        {{-- KOLOM KIRI: GRAFIK TREN --}}
        <div class="col-lg-8 mb-4">
            <div class="card shadow-sm border-0 h-100" style="border-radius: 20px;">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="text-uppercase text-muted font-weight-bold mb-0" style="letter-spacing: 1px; font-size: 0.8rem;">
                            <i class="fas fa-chart-line mr-2 text-teal"></i> Tren Kehadiran (7 Hari Terakhir)
                        </h6>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="position: relative; height: 300px;">
                        <canvas id="mainChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        {{-- KOLOM KANAN: TABEL ABSENSI HARI INI (SUDAH DIPERINCI) --}}
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm border-0 h-100" style="border-radius: 20px;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                    <h6 class="text-uppercase text-muted font-weight-bold mb-0" style="letter-spacing: 1px; font-size: 0.8rem;">
                        <i class="fas fa-calendar-check mr-2 text-orange"></i> Rincian Absensi Hari Ini
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-valign-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-0 pl-4">Status Kehadiran</th>
                                    <th class="border-0 text-right pr-4">Total Siswa</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- HADIR --}}
                                <tr>
                                    <td class="pl-4 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-square bg-light-success mr-3 text-success rounded">
                                                <i class="fas fa-check"></i>
                                            </div>
                                            <span class="font-weight-bold text-dark">Hadir / Tepat Waktu</span>
                                        </div>
                                    </td>
                                    <td class="text-right pr-4 border-0">
                                        <span class="font-weight-bold text-success h6 mb-0">{{ number_format($hadirHariIni ?? 0) }}</span>
                                    </td>
                                </tr>
                                {{-- TERLAMBAT --}}
                                <tr>
                                    <td class="pl-4 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-square bg-light-warning mr-3 text-warning rounded">
                                                <i class="fas fa-clock"></i>
                                            </div>
                                            <span class="font-weight-bold text-dark">Terlambat</span>
                                        </div>
                                    </td>
                                    <td class="text-right pr-4 border-0">
                                        <span class="font-weight-bold text-warning h6 mb-0">{{ number_format($terlambatHariIni ?? 0) }}</span>
                                    </td>
                                </tr>
                                {{-- IZIN --}}
                                <tr>
                                    <td class="pl-4 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-square bg-light-primary mr-3 text-primary rounded">
                                                <i class="fas fa-envelope"></i>
                                            </div>
                                            <span class="font-weight-bold text-dark">Izin</span>
                                        </div>
                                    </td>
                                    <td class="text-right pr-4 border-0">
                                        <span class="font-weight-bold text-primary h6 mb-0">{{ number_format($izinHariIni ?? 0) }}</span>
                                    </td>
                                </tr>
                                {{-- SAKIT --}}
                                <tr>
                                    <td class="pl-4 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-square bg-purple mr-3 text-white rounded" style="background-color: #6f42c1;">
                                                <i class="fas fa-briefcase-medical"></i>
                                            </div>
                                            <span class="font-weight-bold text-dark">Sakit</span>
                                        </div>
                                    </td>
                                    <td class="text-right pr-4 border-0">
                                        <span class="font-weight-bold text-purple h6 mb-0" style="color: #6f42c1;">{{ number_format($sakitHariIni ?? 0) }}</span>
                                    </td>
                                </tr>
                                {{-- ALPA --}}
                                <tr>
                                    <td class="pl-4 border-0 pb-3">
                                        <div class="d-flex align-items-center">
                                            <div class="icon-square bg-light-danger mr-3 text-danger rounded">
                                                <i class="fas fa-times"></i>
                                            </div>
                                            <span class="font-weight-bold text-dark">Alpa / Tanpa Ket.</span>
                                        </div>
                                    </td>
                                    <td class="text-right pr-4 border-0 pb-3">
                                        <span class="font-weight-bold text-danger h6 mb-0">{{ number_format($alpaHariIni ?? 0) }}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    {{-- Quick Action Button --}}
                    <div class="p-4 mt-auto border-top">
                        <div class="p-3 rounded bg-light border-0">
                            <small class="text-muted text-uppercase font-weight-bold d-block mb-2">Aksi Cepat</small>
                            <a href="{{ route('sekolah.website.posts.create', ['type' => 'pengumuman']) }}" class="btn btn-block btn-outline-primary btn-sm rounded-pill font-weight-bold">
                                <i class="fas fa-bullhorn mr-2"></i> Buat Pengumuman
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ====================================================================
       3. WIDGET ANALITIK KINERJA GURU (SIDAK DIGITAL)
       ==================================================================== --}}
    <div class="row mt-2">
        <div class="col-12 mb-4">
            <div class="card shadow-sm border-0" style="border-radius: 20px;">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-3 d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase text-danger font-weight-bold mb-0" style="letter-spacing: 1px; font-size: 0.8rem;">
                        <i class="fas fa-exclamation-circle mr-2"></i> Peringatan: Guru Belum Mengisi Jurnal
                    </h6>
                    @if(isset($guruBelumJurnal) && $guruBelumJurnal->count() > 0)
                        <span class="badge bg-light-danger text-danger px-3 py-1 rounded-pill">
                            Menampilkan {{ $guruBelumJurnal->count() }} Data Teratas
                        </span>
                    @endif
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-0 pl-4 text-muted text-xs text-uppercase font-weight-bold">Nama Guru</th>
                                    <th class="border-0 text-muted text-xs text-uppercase font-weight-bold">Mata Pelajaran</th>
                                    <th class="border-0 text-muted text-xs text-uppercase font-weight-bold text-center">Kelas</th>
                                    <th class="border-0 text-muted text-xs text-uppercase font-weight-bold text-center">Jam / Waktu</th>
                                    <th class="border-0 text-right pr-4 text-muted text-xs text-uppercase font-weight-bold">Aksi (Tegur)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($guruBelumJurnal ?? [] as $jadwal)
                                    @php
                                        $keterlambatan = \Carbon\Carbon::parse($jadwal->jam_mulai)->diffInMinutes(\Carbon\Carbon::now());
                                    @endphp
                                    <tr>
                                        <td class="pl-4 py-3">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-square bg-light mr-3 text-dark rounded-circle border">
                                                    <i class="fas fa-user-tie"></i>
                                                </div>
                                                <div>
                                                    <span class="font-weight-bold text-dark d-block">{{ $jadwal->user->name ?? 'Tidak Ada Guru' }}</span>
                                                    <span class="text-danger text-xs font-weight-bold"><i class="fas fa-clock mr-1"></i> Terlambat {{ $keterlambatan }} Menit</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="py-3">
                                            <span class="font-weight-500 text-dark">{{ $jadwal->mataPelajaran->nama_pelajaran ?? '-' }}</span>
                                        </td>
                                        <td class="py-3 text-center">
                                            <span class="badge badge-light-primary text-primary px-2 py-1 rounded-lg">
                                                {{ $jadwal->kelas->nama_kelas ?? '-' }}
                                            </span>
                                        </td>
                                        <td class="py-3 text-center text-muted font-weight-bold text-sm">
                                            {{ \Carbon\Carbon::parse($jadwal->jam_mulai)->format('H:i') }} - {{ \Carbon\Carbon::parse($jadwal->jam_selesai)->format('H:i') }}
                                        </td>
                                        <td class="pr-4 py-3 text-right">
                                            @php
                                                $pesanWa = "Assalamu'alaikum wr. wb. Mohon maaf Bapak/Ibu " . ($jadwal->user->name ?? '') . ", mengingatkan bahwa jadwal " . ($jadwal->mataPelajaran->nama_pelajaran ?? '') . " di kelas " . ($jadwal->kelas->nama_kelas ?? '') . " sudah berjalan. Mohon segera mengisi absensi dan jurnal kelas di aplikasi Smart Cendekia. Terima kasih.";
                                                $waLink = "https://wa.me/?text=" . urlencode($pesanWa);
                                            @endphp
                                            <a href="{{ $waLink }}" target="_blank" class="btn btn-sm btn-light text-success font-weight-bold rounded-pill px-3 shadow-sm hover-lift">
                                                <i class="fab fa-whatsapp mr-1"></i> Tegur via WA
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-5">
                                            <div class="d-flex flex-column align-items-center">
                                                <i class="fas fa-check-circle text-success fa-3x mb-3 opacity-50"></i>
                                                <h6 class="font-weight-bold text-dark">Alhamdulillah, KBM Berjalan Tertib</h6>
                                                <p class="text-muted small mb-0">Semua guru telah mengisi jurnal mengajar tepat waktu.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@stop

{{-- ====================================================================
   CSS STYLING (APEX THEME)
   ==================================================================== --}}
@push('css')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f6f9 !important; }
    
    /* Apex Cards */
    .apex-card { border: none; border-radius: 20px; overflow: hidden; height: 140px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: transform 0.3s; position: relative; }
    .apex-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
    
    /* Gradients */
    .bg-apex-teal { background: linear-gradient(135deg, #20c997 0%, #009688 100%); }
    .bg-apex-orange { background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%); }
    .bg-apex-green { background: linear-gradient(135deg, #28a745 0%, #218838 100%); }
    .bg-apex-blue { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }

    /* Chart Decoration */
    .chart-area { position: absolute; bottom: -10px; left: -10px; width: 110%; height: 70px; opacity: 0.6; }
    .icon-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
    .bg-white-20 { background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); }

    /* Table Decoration */
    .icon-square { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; }
    .bg-light-success { background-color: #e8f5e9; }
    .bg-light-warning { background-color: #fff8e1; }
    .bg-light-danger { background-color: #ffebee; }
    .bg-light-primary { background-color: #e1f0ff; color: #007bff; }

    /* Text Colors */
    .text-teal { color: #009688; }
    .text-orange { color: #fd7e14; }

    /* Hover Lift */
    .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }

    /* Online Blinker */
    .blink-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10px #fff;
        animation: blink 1.5s infinite;
    }
    @keyframes blink {
        0% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.2); }
        100% { opacity: 1; transform: scale(1); }
    }
</style>
@endpush

{{-- ====================================================================
   JAVASCRIPT (CHART CONFIG)
   ==================================================================== --}}
@section('plugins.Chartjs', true)

@push('js')
<script>
    $(function () {
        // 1. MINI CHARTS (WAVE EFFECT)
        const commonOptions = {
            responsive: true, maintainAspectRatio: false,
            plugins: { legend: { display: false }, tooltip: { enabled: false } },
            scales: { x: { display: false }, y: { display: false } },
            elements: { line: { tension: 0.4, borderWidth: 2, borderColor: 'rgba(255,255,255,0.8)' }, point: { radius: 0 } },
            layout: { padding: 0 }
        };
        const rand = () => Array.from({length: 8}, () => Math.floor(Math.random() * 40) + 10);

        new Chart(document.getElementById('chartTeal'), { type: 'line', data: { labels: [1,2,3,4,5,6,7,8], datasets: [{ data: rand() }] }, options: commonOptions });
        new Chart(document.getElementById('chartOrange'), { type: 'line', data: { labels: [1,2,3,4,5,6,7,8], datasets: [{ data: rand() }] }, options: commonOptions });
        new Chart(document.getElementById('chartGreen'), { type: 'line', data: { labels: [1,2,3,4,5,6,7,8], datasets: [{ data: rand() }] }, options: commonOptions });
        new Chart(document.getElementById('chartBlue'), { type: 'line', data: { labels: [1,2,3,4,5,6,7,8], datasets: [{ data: rand() }] }, options: commonOptions });

        // 2. MAIN CHART (DATA REAL DARI CONTROLLER) - DIPERBAIKI
        var chartData = @json($lineChartData ?? ['labels'=>[], 'siswa'=>[], 'guru'=>[]]);
        
        // Jaring Pengaman jika chartData kosong
        if (!chartData.labels || chartData.labels.length === 0) {
            chartData.labels = ['H-5', 'H-4', 'H-3', 'H-2', 'H-1', 'Hari Ini'];
            chartData.siswa = [0,0,0,0,0,0];
            chartData.guru = [0,0,0,0,0,0];
        }
        
        var ctx = document.getElementById('mainChart').getContext('2d');
        
        // Gradient Siswa (Teal)
        var gradientSiswa = ctx.createLinearGradient(0, 0, 0, 400);
        gradientSiswa.addColorStop(0, "rgba(32, 201, 151, 0.4)"); 
        gradientSiswa.addColorStop(1, "rgba(32, 201, 151, 0.0)");

        // Gradient Guru (Biru)
        var gradientGuru = ctx.createLinearGradient(0, 0, 0, 400);
        gradientGuru.addColorStop(0, "rgba(0, 123, 255, 0.4)"); 
        gradientGuru.addColorStop(1, "rgba(0, 123, 255, 0.0)");

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.labels,
                datasets: [
                    {
                        label: 'Siswa Hadir',
                        data: chartData.siswa, // <-- Mengambil data siswa dari Controller
                        borderColor: '#20c997', // Teal
                        backgroundColor: gradientSiswa,
                        borderWidth: 3,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#20c997',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Guru Hadir',
                        data: chartData.guru, // <-- Mengambil data guru dari Controller
                        borderColor: '#007bff', // Blue
                        backgroundColor: gradientGuru,
                        borderWidth: 3,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#007bff',
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { 
                        display: true,
                        position: 'top',
                        align: 'end',
                        labels: { boxWidth: 12, usePointStyle: true, font: { family: 'Inter' } }
                    },
                    tooltip: {
                        mode: 'index', intersect: false,
                        backgroundColor: '#343a40',
                        titleFont: { family: 'Inter', size: 13 },
                        bodyFont: { family: 'Inter', size: 13 },
                        padding: 10, cornerRadius: 8
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: '#adb5bd', font: { family: 'Inter' } } },
                    y: { 
                        grid: { borderDash: [5, 5], color: '#f0f0f0' }, 
                        ticks: { color: '#adb5bd', font: { family: 'Inter' }, beginAtZero: true, precision: 0 } 
                    }
                }
            }
        });
    });
</script>
@endpush