@extends('layouts.app')

@section('content')
<style>
    /* ===== Trainer Dashboard Styles ===== */
    body {
        background: #f8fafc;
    }

    .dashboard-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .dashboard-header h2 {
        font-weight: 700;
        color: #198754;
    }

    .dashboard-header p {
        color: #6c757d;
        font-size: 1.05rem;
    }

    .stats-card {
        border: none;
        border-radius: 18px;
        background: linear-gradient(135deg, #28a745, #5cd65c);
        color: #fff;
        box-shadow: 0 6px 15px rgba(0, 128, 0, 0.25);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .stats-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0, 128, 0, 0.35);
    }

    .stats-card h5 {
        font-size: 1rem;
        letter-spacing: 0.5px;
        opacity: 0.9;
    }

    .stats-card p {
        font-size: 2.4rem;
        font-weight: 800;
        margin: 0;
    }

    .section-title {
        margin-top: 3rem;
        color: #198754;
        font-weight: 700;
        border-left: 5px solid #198754;
        padding-left: 0.6rem;
    }

    .class-list {
        margin-top: 1.2rem;
        list-style: none;
        padding: 0;
    }

    .list-group-item {
        border: none;
        border-radius: 12px;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 0.8rem;
        padding: 1.3rem 1.5rem;
        transition: all 0.2s ease;
    }

    .list-group-item:hover {
        background-color: #e9f8ef;
        transform: translateY(-2px);
    }

    .btn-action {
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        padding: 6px 12px;
        margin-right: 6px;
        transition: all 0.2s ease;
    }

    .btn-view {
        background-color: #198754;
        color: white;
    }

    .btn-view:hover {
        background-color: #146c43;
        transform: scale(1.05);
    }

    .btn-mark {
        background-color: #0d6efd;
        color: white;
    }

    .btn-mark:hover {
        background-color: #0a58ca;
        transform: scale(1.05);
    }

    .btn-report {
        background-color: #ffc107;
        color: #212529;
    }

    .btn-report:hover {
        background-color: #e0a800;
        transform: scale(1.05);
    }

    .empty-state {
        padding: 2rem;
        text-align: center;
        color: #6c757d;
    }

    .master-trainer-badge {
        background-color: #0d6efd;
        color: #fff;
        font-size: 0.85rem;
        padding: 4px 8px;
        border-radius: 8px;
    }
</style>

<div class="container py-5">
    <div class="dashboard-header">
        <h2>👋 Welcome, {{ $trainer->name }}</h2>
        <p>Here’s your overview for today.</p>
    </div>

    {{-- ===== Stats Section ===== --}}
    <div class="row g-4">
        <div class="col-md-4">
            <div class="card stats-card text-center p-4">
                <h5>Total Classes</h5>
                <p>{{ $classes->count() }}</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card stats-card text-center p-4">
                <h5>Total Trainees</h5>
                <p>{{ $totalTrainees }}</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card stats-card text-center p-4">
                <h5>Attendance Today</h5>
                <p>{{ $attendanceToday }}</p>
            </div>
        </div>
    </div>

    {{-- ===== Master Trainers Section ===== --}}
    <h4 class="section-title mt-5"> Master Trainers in Your Centers</h4>

    <ul class="class-list">
        @forelse($masterTrainers as $master)
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <div>
                    <strong>{{ $master->name ?? 'Unnamed Master Trainer' }}</strong><br>
                    <small class="text-muted">{{ $master->phone ?? 'No Phone' }}</small>
                </div>
                <span class="master-trainer-badge">{{ $master->email ?? 'No Email' }}</span>
            </li>
        @empty
            <div class="empty-state">
                <p>🚫 No master trainers assigned to your centers yet.</p>
            </div>
        @endforelse
    </ul>

    {{-- ===== Classes Section ===== --}}
    <h4 class="section-title mt-5">📘 Your Assigned Classes</h4>

    <ul class="class-list">
        @forelse($classes as $assignment)
            <li class="list-group-item">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="fw-semibold mb-2 mb-md-0">
                        {{ 'Class ' . $assignment->classRoom->class_number ?? 'Unnamed Class' }}
                    </div>

                    <div class="d-flex flex-wrap">
                        <a href="{{ route('trainer.class.show', $assignment->classRoom->id) }}"
                           class="btn-action btn-view">👥 View Trainees</a>

                        <a href="{{ route('attendances.create', ['class_room_id' => $assignment->classRoom->id]) }}"
                           class="btn-action btn-mark">🕓 Mark Attendance</a>

                        <a href="{{ route('trainer.attendance', ['class_room_id' => $assignment->classRoom->id]) }}"
                           class="btn-action btn-report">📊 Attendance Report</a>
                    </div>
                </div>
            </li>
        @empty
            <div class="empty-state">
                <p>🚫 You currently have no assigned classes.</p>
            </div>
        @endforelse
    </ul>
</div>
@endsection