@extends('layouts.app')
@section('title', 'Admin Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good Morning' : ($hour < 17 ? 'Good Afternoon' : 'Good Evening');
    $maxAttendance = collect($chartData)->max('total') ?: 1;
@endphp

<div class="space-y-6">

    {{-- Greeting --}}
    <div>
        <h2 class="text-2xl font-bold text-stone-800">{{ $greeting }}, {{ explode(' ', auth()->user()->name)[0] }}</h2>
        <p class="text-stone-500 text-sm mt-0.5">Welcome to {{ $schoolSettings['school_name'] ?? 'School' }} Admin Panel</p>
    </div>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        {{-- Students --}}
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 bg-amber-50 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-graduate text-amber-600"></i>
                </div>
                <span class="text-[10px] font-semibold text-green-600 bg-green-50 px-2 py-0.5 rounded-full">Active</span>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Total Students</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">{{ number_format($totalStudents) }}</p>
        </div>

        {{-- Teachers --}}
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 bg-stone-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-stone-600"></i>
                </div>
                <span class="text-[10px] font-semibold text-green-600 bg-green-50 px-2 py-0.5 rounded-full">Active</span>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Total Teachers</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">{{ number_format($totalTeachers) }}</p>
        </div>

        {{-- Classes --}}
        <div class="bg-amber-500 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow text-white">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-school text-white"></i>
                </div>
            </div>
            <p class="text-xs text-amber-100 font-medium uppercase tracking-wide">Total Classes</p>
            <p class="text-3xl font-extrabold mt-1">{{ $totalClasses }}</p>
        </div>

        {{-- Fees --}}
        <div class="bg-white rounded-2xl p-5 ring-1 ring-stone-200/60 shadow-sm hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-3">
                <div class="w-11 h-11 bg-green-50 rounded-xl flex items-center justify-center">
                    <i class="fas fa-rupee-sign text-green-600"></i>
                </div>
            </div>
            <p class="text-xs text-stone-400 font-medium uppercase tracking-wide">Fee Collected</p>
            <p class="text-3xl font-extrabold text-stone-800 mt-1">₹{{ number_format($totalCollected / 1000, 1) }}k</p>
            <p class="text-xs text-stone-400 mt-1">of ₹{{ number_format($totalBilled / 1000, 1) }}k billed</p>
        </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        {{-- LEFT: Charts area (2 cols) --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Attendance Chart --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <div class="flex items-center justify-between mb-5">
                    <div>
                        <h3 class="font-bold text-stone-800">Attendance Report</h3>
                        <p class="text-xs text-stone-400 mt-0.5">Last 10 school days</p>
                    </div>
                    <div class="flex items-center gap-4 text-xs">
                        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-amber-500 rounded-full"></span> Present</span>
                        <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-stone-800 rounded-full"></span> Absent</span>
                    </div>
                </div>

                {{-- Bar Chart --}}
                <div class="flex items-end gap-2 h-48">
                    @forelse($chartData as $day)
                    <div class="flex-1 flex flex-col items-center gap-1">
                        <div class="w-full flex flex-col gap-0.5" style="height: 180px;">
                            <div class="flex-1 flex flex-col justify-end gap-0.5">
                                @if($day['absent'] > 0)
                                <div class="bg-stone-800 rounded-t-sm w-full transition-all"
                                     style="height: {{ ($day['absent'] / $maxAttendance) * 100 }}%"
                                     title="Absent: {{ $day['absent'] }}"></div>
                                @endif
                                <div class="bg-amber-500 rounded-t-sm w-full transition-all"
                                     style="height: {{ ($day['present'] / $maxAttendance) * 100 }}%"
                                     title="Present: {{ $day['present'] }}"></div>
                            </div>
                        </div>
                        <span class="text-[9px] text-stone-400 font-medium">{{ $day['date'] }}</span>
                    </div>
                    @empty
                    <div class="flex-1 flex items-center justify-center text-stone-400 text-sm">
                        No attendance data yet
                    </div>
                    @endforelse
                </div>
            </div>

            {{-- Student Performance --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-bold text-stone-800">Top Student Performance</h3>
                </div>
                <table class="w-full">
                    <thead>
                        <tr class="text-[11px] text-stone-400 uppercase tracking-wider">
                            <th class="text-left pb-3 font-semibold">Name</th>
                            <th class="text-left pb-3 font-semibold">Class</th>
                            <th class="text-left pb-3 font-semibold">Average</th>
                            <th class="text-left pb-3 font-semibold">Performance</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm">
                        @forelse($topStudents as $i => $student)
                        <tr class="border-t border-stone-100/80">
                            <td class="py-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 bg-{{ ['amber','stone','orange','yellow','green'][$i % 5] }}-100 rounded-full flex items-center justify-center text-xs font-bold text-{{ ['amber','stone','orange','yellow','green'][$i % 5] }}-600">
                                        {{ strtoupper(substr($student->name, 0, 1)) }}
                                    </div>
                                    <span class="font-semibold text-stone-700">{{ $student->name }}</span>
                                </div>
                            </td>
                            <td class="py-3 text-stone-500">{{ $student->class_name }} {{ $student->section }}</td>
                            <td class="py-3">
                                <span class="font-bold {{ $student->avg_pct >= 80 ? 'text-green-600' : ($student->avg_pct >= 60 ? 'text-amber-600' : 'text-red-600') }}">
                                    {{ $student->avg_pct }}%
                                </span>
                            </td>
                            <td class="py-3">
                                <div class="w-24 h-2 bg-stone-100 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full {{ $student->avg_pct >= 80 ? 'bg-amber-500' : ($student->avg_pct >= 60 ? 'bg-amber-400' : 'bg-stone-400') }}"
                                         style="width: {{ min($student->avg_pct, 100) }}%"></div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="py-6 text-center text-stone-400">No performance data yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- RIGHT: Sidebar (1 col) --}}
        <div class="space-y-6">

            {{-- Gender Distribution --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-5">
                <h3 class="font-bold text-stone-800 text-sm mb-4">Student Distribution</h3>
                @php
                    $boys = $genderData['male'] ?? 0;
                    $girls = $genderData['female'] ?? 0;
                    $totalGender = $boys + $girls;
                    $boysPct = $totalGender > 0 ? round($boys / $totalGender * 100) : 0;
                    $girlsPct = $totalGender > 0 ? round($girls / $totalGender * 100) : 0;
                @endphp
                <div class="flex items-center justify-center mb-4">
                    <div class="relative w-32 h-32">
                        <svg viewBox="0 0 36 36" class="w-32 h-32 -rotate-90">
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" stroke="#F59E0B" stroke-width="3.5" stroke-dasharray="{{ $boysPct }}, 100" />
                            <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" stroke="#292524" stroke-width="3.5" stroke-dasharray="{{ $girlsPct }}, 100"
                                  stroke-dashoffset="-{{ $boysPct }}" />
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-2xl font-extrabold text-stone-800">{{ $totalGender }}</span>
                            <span class="text-[10px] text-stone-400">Students</span>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center gap-6 text-xs">
                    <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-amber-500 rounded-full"></span> Boys: {{ $boys }}</span>
                    <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 bg-stone-800 rounded-full"></span> Girls: {{ $girls }}</span>
                </div>
            </div>

            {{-- Mini Calendar --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm p-5">
                @php
                    $today = now();
                    $firstDay = $today->copy()->startOfMonth();
                    $lastDay = $today->copy()->endOfMonth();
                @endphp
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-bold text-stone-800 text-sm">{{ $today->format('F Y') }}</h3>
                    <div class="flex gap-1">
                        <span class="text-stone-400 text-xs cursor-pointer hover:text-stone-600"><i class="fas fa-chevron-left"></i></span>
                        <span class="text-stone-400 text-xs cursor-pointer hover:text-stone-600"><i class="fas fa-chevron-right"></i></span>
                    </div>
                </div>
                <div class="grid grid-cols-7 gap-0.5 text-center">
                    @foreach(['S','M','T','W','T','F','S'] as $d)
                    <div class="text-[10px] font-semibold text-stone-400 py-1">{{ $d }}</div>
                    @endforeach
                    @for($i = 0; $i < $firstDay->dayOfWeek; $i++)
                    <div class="text-[11px] text-stone-300 py-1.5">{{ $firstDay->copy()->subDays($firstDay->dayOfWeek - $i)->day }}</div>
                    @endfor
                    @for($d = 1; $d <= $lastDay->day; $d++)
                    <div class="text-[11px] py-1.5 font-medium rounded-lg {{ $d == $today->day ? 'bg-amber-500 text-white font-bold' : 'text-stone-600 hover:bg-stone-100' }} cursor-default">
                        {{ $d }}
                    </div>
                    @endfor
                </div>
            </div>

            {{-- Upcoming Events --}}
            <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
                <div class="px-5 py-4 border-b border-stone-100">
                    <h3 class="font-bold text-stone-800 text-sm">Upcoming Events</h3>
                </div>
                @forelse($upcomingEvents as $event)
                <a href="{{ route('academic-calendar.index') }}" class="flex items-center gap-3 px-5 py-3 hover:bg-stone-50 border-b border-stone-50 last:border-0 transition">
                    <div class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $event->color }}"></div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-stone-700 truncate">{{ $event->title }}</p>
                        <p class="text-[11px] text-stone-400">{{ $event->start_date->format('d M, Y') }}</p>
                    </div>
                    <i class="fas fa-chevron-right text-stone-300 text-xs"></i>
                </a>
                @empty
                <div class="p-5 text-center text-stone-400 text-sm">No upcoming events</div>
                @endforelse
            </div>

            {{-- Quick Actions --}}
            <div class="bg-amber-50 rounded-2xl ring-1 ring-amber-200/60 p-5">
                <h3 class="font-bold text-stone-800 text-sm mb-3">Quick Actions</h3>
                <div class="grid grid-cols-2 gap-2">
                    <a href="{{ route('students.create') }}" class="flex flex-col items-center p-3 bg-white rounded-xl hover:shadow-sm transition text-center ring-1 ring-stone-200/40">
                        <i class="fas fa-user-plus text-amber-600 mb-1"></i>
                        <span class="text-[10px] font-semibold text-stone-600">Add Student</span>
                    </a>
                    <a href="{{ route('academics.exams.create') }}" class="flex flex-col items-center p-3 bg-white rounded-xl hover:shadow-sm transition text-center ring-1 ring-stone-200/40">
                        <i class="fas fa-file-alt text-amber-600 mb-1"></i>
                        <span class="text-[10px] font-semibold text-stone-600">New Exam</span>
                    </a>
                    <a href="{{ route('attendance.index') }}" class="flex flex-col items-center p-3 bg-white rounded-xl hover:shadow-sm transition text-center ring-1 ring-stone-200/40">
                        <i class="fas fa-clipboard-check text-amber-600 mb-1"></i>
                        <span class="text-[10px] font-semibold text-stone-600">Attendance</span>
                    </a>
                    <a href="{{ route('fees.index') }}" class="flex flex-col items-center p-3 bg-white rounded-xl hover:shadow-sm transition text-center ring-1 ring-stone-200/40">
                        <i class="fas fa-rupee-sign text-amber-600 mb-1"></i>
                        <span class="text-[10px] font-semibold text-stone-600">Fees</span>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection