@extends('layouts.dashboard')

@section('title', 'Dashboard Trainer')
@section('eyebrow', 'Pelatih')

@section('content')
@php
    $metrics = [
        ['school', 'Kelas Saya', $classes->count(), 'Kelas aktif yang ditangani', route('trainer.classes')],
        ['calendar-clock', 'Sesi Hari Ini', $todaySessions->count(), 'Jadwal latihan hari ini', route('trainer.sessions.index')],
        ['clipboard-check', 'Perlu Dinilai', $pendingAssessments, 'Progres peserta dalam proses', route('trainer.progress')],
        ['user-round-check', 'Les Privat', $privateLessons, 'Klik untuk melihat jadwal privat', route('trainer.private-lessons')],
    ];
@endphp

<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    @foreach($metrics as [$icon, $label, $value, $desc, $url])
        <a href="{{ $url }}" class="group rounded-lg border border-slate-200 bg-white p-5 shadow-sm hover:border-cyan-300 hover:shadow-md">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm font-black text-slate-500">{{ $label }}</p>
                    <p class="mt-2 text-3xl font-black text-slate-950 group-hover:text-cyan-700">{{ $value }}</p>
                </div>
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-cyan-100 text-cyan-700 group-hover:bg-orange-100 group-hover:text-orange-600">
                    <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                </span>
            </div>
            <p class="mt-3 text-xs font-semibold text-slate-500">{{ $desc }}</p>
        </a>
    @endforeach
</section>

<section class="mt-6 grid gap-5 lg:grid-cols-[1.15fr_.85fr]">
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Jadwal Hari Ini</h2>
            <a href="{{ route('trainer.sessions.index') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Kelola sesi</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($todaySessions as $session)
                <a href="{{ route('trainer.sessions.attendance', $session) }}" class="group rounded-lg border border-slate-200 bg-slate-50 p-4 hover:border-sky-300 hover:bg-white">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="truncate font-black text-slate-950 group-hover:text-sky-700">{{ $session->swimmingClass?->class_name }}</p>
                            <p class="mt-1 text-sm font-semibold text-slate-600">{{ $session->start_time }} - {{ $session->end_time }} &middot; {{ $session->quota_used }}/{{ $session->quota_total }} peserta</p>
                        </div>
                        <i data-lucide="arrow-right" class="h-4 w-4 shrink-0 text-slate-400 group-hover:text-sky-700"></i>
                    </div>
                </a>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Tidak ada sesi hari ini.</p>
            @endforelse
        </div>
    </article>

    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Notifikasi</h2>
            <a href="{{ route('trainer.notifications') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Buka</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($notifications as $notification)
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <p class="font-black text-slate-950">{{ $notification->title }}</p>
                    <p class="mt-1 text-sm leading-6 text-slate-600">{{ $notification->message }}</p>
                </div>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Belum ada notifikasi.</p>
            @endforelse
        </div>
    </article>
</section>
@endsection