@extends('admin.layout.app')

@section('body')
@php
    $n = fn($v) => is_null($v) ? 'N/A' : number_format($v);
    $students   = $stats['students'] ?? 0;
    $teachers   = $stats['teachers'] ?? 0;
    $courses    = $stats['courses'] ?? 0;
    $enroll     = $stats['enrollments'] ?? 0;
@endphp

<style>
    .dashboard-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(2,6,23,0.06);
        transition: all 0.2s ease;
        background: white;
    }
    .dashboard-card:hover {
        box-shadow: 0 16px 32px rgba(2,6,23,0.08);
        transform: translateY(-2px);
    }
    .kpi-icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: rgba(15,23,42,0.04);
        font-size: 28px;
    }
    .pill {
        border-radius: 100px;
        padding: 0.25rem 1rem;
        font-size: 0.85rem;
        background: rgba(13,110,253,0.06);
        border: 1px solid rgba(13,110,253,0.2);
        color: #0d6efd;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }
    .badge-soft {
        background: rgba(13,110,253,0.1);
        color: #0d6efd;
        font-weight: 500;
        padding: 0.35rem 0.75rem;
        border-radius: 30px;
        font-size: 0.8rem;
    }
    .chart-container {
        position: relative;
        min-height: 300px;
    }
    .table-modern td, .table-modern th {
        padding: 0.9rem 0.75rem;
        border-color: rgba(0,0,0,0.05);
    }
</style>

<!-- ========== TOP GREETING & QUICK ACTIONS ========== -->
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div>
        <h3 class="fw-bold mb-1">{{ __('admin.lms_dashboard') }}</h3>
        <p class="text-muted mb-0">
            <i class="fa-regular fa-calendar me-1"></i> {{ now()->format('l, F j, Y') }}
        </p>
    </div>
    <div class="d-flex flex-wrap align-items-center gap-3">
        <span class="pill">
            <i class="fa-regular fa-clock"></i> {{ __('admin.today_enroll') }} <strong class="ms-1">{{ number_format($todayEnroll) }}</strong>
        </span>
        <span class="pill">
            <i class="fa-regular fa-calendar-week"></i> {{ __('admin.this_week') }} <strong class="ms-1">{{ number_format($weekEnroll) }}</strong>
        </span>
        <div class="d-flex gap-2">
            <a href="{{ route('students.index') }}" class="btn btn-primary rounded-pill px-4">
                <i class="fa-solid fa-user-plus me-2"></i> {{ __('admin.new_student') }}
            </a>
            <a href="{{ route('courses.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
                <i class="fa-solid fa-book-open me-2"></i> {{ __('admin.courses') }}
            </a>
        </div>
    </div>
</div>

<!-- ========== KPI CARDS ========== -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-xl-3">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex align-items-center">
                <div class="kpi-icon bg-primary bg-opacity-10 text-primary"><i class="fa-solid fa-users"></i></div>
                <div class="ms-3 flex-grow-1">
                    <span class="text-muted small text-uppercase fw-semibold">{{ __('admin.students') }}</span>
                    <h3 class="fw-bold mb-0">{{ $n($students) }}</h3>
                    <span class="text-success small"><i class="fa-regular fa-arrow-up me-1"></i> +2.5%</span>
                    <span class="text-muted small ms-2">{{ __('admin.vs_last_month') }}</span>
                </div>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                <span class="small text-muted">{{ __('admin.total_registered') }}</span>
                <a href="{{ route('students.index') }}" class="small fw-semibold text-decoration-none">{{ __('admin.view_all') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex align-items-center">
                <div class="kpi-icon bg-success bg-opacity-10 text-success"><i class="fa-solid fa-chalkboard-user"></i></div>
                <div class="ms-3 flex-grow-1">
                    <span class="text-muted small text-uppercase fw-semibold">{{ __('admin.teachers') }}</span>
                    <h3 class="fw-bold mb-0">{{ $n($teachers) }}</h3>
                    <span class="text-success small"><i class="fa-regular fa-arrow-up me-1"></i> +1.2%</span>
                    <span class="text-muted small ms-2">{{ __('admin.vs_last_month') }}</span>
                </div>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                <span class="small text-muted">{{ __('admin.active_instructors') }}</span>
                <a href="{{ route('teachers.index') }}" class="small fw-semibold text-decoration-none">{{ __('admin.view_all') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex align-items-center">
                <div class="kpi-icon bg-warning bg-opacity-10 text-warning"><i class="fa-solid fa-book"></i></div>
                <div class="ms-3 flex-grow-1">
                    <span class="text-muted small text-uppercase fw-semibold">{{ __('admin.courses') }}</span>
                    <h3 class="fw-bold mb-0">{{ $n($courses) }}</h3>
                    <span class="text-warning small"><i class="fa-regular fa-minus me-1"></i> 0.0%</span>
                    <span class="text-muted small ms-2">{{ __('admin.vs_last_month') }}</span>
                </div>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                <span class="small text-muted">{{ __('admin.active_programs') }}</span>
                <a href="{{ route('courses.index') }}" class="small fw-semibold text-decoration-none">{{ __('admin.view_all') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex align-items-center">
                <div class="kpi-icon bg-info bg-opacity-10 text-info"><i class="fa-solid fa-clipboard-list"></i></div>
                <div class="ms-3 flex-grow-1">
                    <span class="text-muted small text-uppercase fw-semibold">{{ __('admin.enrollments') }}</span>
                    <h3 class="fw-bold mb-0">{{ $n($enroll) }}</h3>
                    <span class="text-success small"><i class="fa-regular fa-arrow-up me-1"></i> +5.3%</span>
                    <span class="text-muted small ms-2">{{ __('admin.vs_last_month') }}</span>
                </div>
            </div>
            <div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
                <span class="small text-muted">{{ __('admin.total_registrations') }}</span>
                <a href="{{ route('course-enrollments.index') }}" class="small fw-semibold text-decoration-none">{{ __('admin.view_all') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
        </div>
    </div>
</div>

<!-- ========== CHARTS ROW ========== -->
<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <div>
                    <h5 class="fw-semibold mb-1">{{ __('admin.performance_overview') }}</h5>
                    <span class="text-muted small">{{ __('admin.enrollments_payments_last_12_months') }}</span>
                </div>
                <span class="badge-soft"><i class="fa-regular fa-calendar me-1"></i> {{ __('admin.12_month_window') }}</span>
            </div>
            <div class="chart-container" id="lms-performance-chart"></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="dashboard-card p-3 p-xl-4 h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-semibold mb-1">{{ __('admin.attendance') }}</h5>
                    <span class="text-muted small">{{ __('admin.last_30_days') }}</span>
                </div>
                <span class="badge-soft"><i class="fa-regular fa-clock me-1"></i> {{ __('admin.live') }}</span>
            </div>
            <div class="chart-container" id="lms-attendance-donut"></div>
            <div class="mt-3 text-center small text-muted">
                <span class="d-inline-flex align-items-center me-3">
                    <span class="badge bg-success rounded-pill me-1" style="width:10px;height:10px;"></span> {{ __('admin.present') }}
                </span>
                <span class="d-inline-flex align-items-center me-3">
                    <span class="badge bg-danger rounded-pill me-1" style="width:10px;height:10px;"></span> {{ __('admin.absent') }}
                </span>
                <span class="d-inline-flex align-items-center">
                    <span class="badge bg-warning rounded-pill me-1" style="width:10px;height:10px;"></span> {{ __('admin.late') }}
                </span>
            </div>
        </div>
    </div>
</div>

<!-- ========== TOP COURSES & RECENT ENROLLMENTS ========== -->
<div class="row g-4">
    <div class="col-lg-6">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-semibold mb-1">{{ __('admin.top_courses') }}</h5>
                    <span class="text-muted small">{{ __('admin.by_enrollment_count') }}</span>
                </div>
                <a href="{{ route('courses.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">{{ __('admin.view_all_2') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
            @if($topCourses->count())
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 table-modern">
                        <thead class="table-light bg-opacity-50">
                            <tr><th>{{ __('admin.course_title') }}</th><th class="text-end">{{ __('admin.enrollments') }}</th><th class="text-end">{{ __('admin.share') }}</th></tr>
                        </thead>
                        <tbody>
                            @foreach($topCourses as $c)
                                <tr>
                                    <td><div class="d-flex align-items-center"><i class="fa-solid fa-book-open text-primary me-2"></i><span class="fw-medium">{{ $c->title }}</span></div></td>
                                    <td class="text-end"><span class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-3 py-2">{{ number_format($c->enrollments_count) }}</span></td>
                                    <td class="text-end text-muted">{{ round(($c->enrollments_count / max($enroll,1)) * 100, 1) }}%</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5"><i class="fa-solid fa-book-open text-muted fa-2x mb-2"></i><p class="text-muted mb-0">{{ __('admin.no_course_data_available') }}</p></div>
            @endif
        </div>
    </div>

    <div class="col-lg-6">
        <div class="dashboard-card p-3 p-xl-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h5 class="fw-semibold mb-1">{{ __('admin.recent_enrollments') }}</h5>
                    <span class="text-muted small">{{ __('admin.latest_8_registrations') }}</span>
                </div>
                <a href="{{ route('course-enrollments.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">{{ __('admin.view_all_2') }} <i class="fa-solid fa-arrow-right ms-1"></i></a>
            </div>
            @if($recentEnrollments->count())
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 table-modern">
                        <thead class="table-light bg-opacity-50">
                            <tr><th>{{ __('admin.id') }}</th><th>{{ __('admin.course') }}</th><th>{{ __('admin.status') }}</th><th class="text-end">{{ __('admin.date') }}</th></tr>
                        </thead>
                        <tbody>
                            @foreach($recentEnrollments as $e)
                                @php
                                    $st = $e->status ?? 'active';
                                    $badgeSoft = $st === 'active' ? 'bg-success bg-opacity-10 text-success' : ($st === 'dropped' ? 'bg-danger bg-opacity-10 text-danger' : 'bg-secondary bg-opacity-10 text-secondary');
                                @endphp
                                <tr>
                                    <td><span class="fw-medium">#ENR-{{ $e->id }}</span></td>
                                    <td><span class="small">{{ $e->course->title ?? 'Course #'.$e->course_id }}</span></td>
                                    <td><span class="badge {{ $badgeSoft }} rounded-pill px-3 py-2">{{ ucfirst($st) }}</span></td>
                                    <td class="text-end text-muted"><i class="fa-regular fa-calendar me-1"></i> {{ $e->created_at->format('M d, Y') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-5"><i class="fa-solid fa-user-plus text-muted fa-2x mb-2"></i><p class="text-muted mb-0">{{ __('admin.no_recent_enrollments') }}</p></div>
            @endif
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="text-center text-muted small py-2">
            <i class="fa-regular fa-circle-check me-1 text-primary"></i> Dashboard auto-refreshes every 5 minutes. Last update: {{ now()->format('h:i A') }}
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Performance line chart
        const chartEl = document.querySelector("#lms-performance-chart");
        if (chartEl) {
            new ApexCharts(chartEl, {
                chart: { type: 'line', height: 300, toolbar: { show: false }, zoom: { enabled: false } },
                series: [
                    { name: '{{ __("admin.enrollments") }}', data: @json($enrollMonthly) },
                    { name: '{{ __("admin.payments") }}', data: @json($paymentsMonthly) }
                ],
                xaxis: { categories: @json($labels), axisBorder: { show: false }, axisTicks: { show: false } },
                yaxis: { labels: { style: { colors: '#6c757d', fontSize: '12px' } } },
                stroke: { width: 3, curve: 'smooth' },
                colors: ['#0d6efd', '#20c997'],
                fill: { type: 'solid', opacity: 0.1 },
                dataLabels: { enabled: false },
                grid: { borderColor: '#f1f1f1', strokeDashArray: 4 },
                legend: { position: 'top', horizontalAlign: 'right', markers: { width: 10, height: 10, radius: 12 } },
                tooltip: { shared: true, intersect: false }
            }).render();
        }

        // Attendance donut
        const donutEl = document.querySelector("#lms-attendance-donut");
        if (donutEl) {
            const att = @json($attendance);
            new ApexCharts(donutEl, {
                chart: { type: 'donut', height: 240, toolbar: { show: false } },
                series: [att.present || 0, att.absent || 0, att.late || 0],
                labels: ['{{ __("admin.present") }}', '{{ __("admin.absent") }}', '{{ __("admin.late") }}'],
                colors: ['#198754', '#dc3545', '#ffc107'],
                dataLabels: { enabled: false },
                legend: { show: false },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                total: { show: true, label: 'Total', formatter: () => (att.present + att.absent + att.late) + ' entries' }
                            }
                        }
                    }
                },
                responsive: [{ breakpoint: 480, options: { chart: { height: 200 } } }]
            }).render();
        }
    });
</script>
@endsection