@extends('layouts.app')

@section('content')
<style>
    :root {
        --nyota-green: #198754;
        --nyota-light-green: #e9f8ef;
        --nyota-dark-green: #146c43;
        --nyota-accent: #0f5132;
        --nyota-bg: #f6f9f7;
    }

    body {
        background: var(--nyota-bg);
        font-family: "Segoe UI", "Poppins", sans-serif;
    }

    /* HEADER */
    .dashboard-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    .dashboard-header h2 {
        font-weight: 800;
        color: var(--nyota-green);
        letter-spacing: -0.5px;
    }
    .dashboard-header p {
        color: #6c757d;
        font-size: 1.05rem;
    }

    /* STATS CARDS */
    .stats-card {
        border: none;
        border-radius: 16px;
        color: #fff;
        background: linear-gradient(145deg, var(--nyota-green), #35a06d);
        box-shadow: 0 6px 15px rgba(25, 135, 84, 0.25);
        text-align: center;
        padding: 1.8rem;
        transition: all 0.3s ease;
    }
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(25, 135, 84, 0.35);
    }
    .stats-card h6 {
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.8px;
        opacity: 0.85;
    }
    .stats-card .value {
        font-size: 2.4rem;
        font-weight: 800;
        margin: 0.2rem 0;
    }
    .stats-card i {
        font-size: 2.2rem;
        opacity: 0.8;
        margin-top: 8px;
    }

    /* SECTION TITLES */
    .section-title {
        margin-top: 3rem;
        color: var(--nyota-green);
        font-weight: 800;
        border-left: 5px solid var(--nyota-green);
        padding-left: 0.75rem;
    }

    /* INFO CARDS */
    .card-custom {
        border-radius: 14px;
        border: none;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    .card-custom:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }
    .info-label {
        color: #6c757d;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .info-value {
        font-weight: 700;
        font-size: 1.05rem;
    }

    /* BUTTONS */
    .btn-action {
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-size: 0.92rem;
        font-weight: 600;
        margin: 5px;
        transition: all 0.25s ease;
    }
    .btn-view {
        background: var(--nyota-green);
        color: white;
    }
    .btn-view:hover {
        background: var(--nyota-dark-green);
        transform: translateY(-2px);
    }
    .btn-outline {
        background: #f8f9fa;
        color: var(--nyota-green);
        border: 1px solid var(--nyota-green);
    }
    .btn-outline:hover {
        background: var(--nyota-light-green);
        transform: translateY(-2px);
    }

    /* LISTS */
    .list-group-item {
        border: none;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 0.8rem;
        padding: 1.1rem 1.4rem;
        transition: all 0.2s ease;
    }
    .list-group-item:hover {
        background: var(--nyota-light-green);
        transform: translateY(-2px);
    }
    .empty-state {
        padding: 2rem;
        text-align: center;
        color: #6c757d;
        font-weight: 500;
    }

</style>

<div class="container py-5">

    <!-- HEADER -->
    <div class="dashboard-header">
        <h2>🌿 Welcome, {{ $user->name }}</h2>
        <p>Your Coordinator Dashboard Overview</p>
    </div>

    <!-- STATS CARDS -->
    <div class="row g-4 mb-5">
        @php
            $metrics = [
                ['label'=>'Trainees','value'=>$traineeCount ?? 0,'icon'=>'bi-people-fill'],
                ['label'=>'Trainers','value'=>$trainerCount ?? 0,'icon'=>'bi-person-badge'],
                ['label'=>'Classes','value'=>$totalClasses ?? 0,'icon'=>'bi-journal-bookmark'],
                ['label'=>'Attendance Today','value'=>$attendanceCount ?? 0,'icon'=>'bi-calendar-check'],
                ['label'=>'Recent Reports','value'=>$recentReports->count() ?? 0,'icon'=>'bi-journal-text'],
            ];
        @endphp

        @foreach($metrics as $metric)
        <div class="col-lg-2 col-md-3 col-sm-6">
            <div class="stats-card">
                <h6>{{ strtoupper($metric['label']) }}</h6>
                <div class="value">{{ $metric['value'] }}</div>
                <i class="bi {{ $metric['icon'] }}"></i>
            </div>
        </div>
        @endforeach
    </div>

    <!-- CENTRE & COORDINATOR INFO -->
    <h4 class="section-title">🏢 Centre & Coordinator Info</h4>
    <div class="row g-4 mt-3">
        <div class="col-md-6">
            <div class="card-custom">
                <h5 class="mb-3 fw-bold text-success">Centre Details</h5>
                <p><span class="info-label">County:</span> <span class="info-value">{{ $coordinator->county->name ?? '-' }}</span></p>
                <p><span class="info-label">Sub County:</span> <span class="info-value">{{ $coordinator->subCounty->name ?? '-' }}</span></p>
                <p><span class="info-label">Centre:</span> <span class="info-value">{{ $coordinator->centre->name ?? '-' }}</span></p>
                <p><span class="info-label">Total Classes:</span> <span class="info-value">{{ $totalClasses ?? 0 }}</span></p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card-custom">
                <h5 class="mb-3 fw-bold text-success">Coordinator Details</h5>
                <p><span class="info-label">Name:</span> <span class="info-value">{{ $user->name }}</span></p>
                <p><span class="info-label">ID:</span> <span class="info-value">{{ $user->id_number }}</span></p>
                <p><span class="info-label">Phone:</span> <span class="info-value">{{ $user->phone ?? '-' }}</span></p>
                <p><span class="info-label">Email:</span> <span class="info-value">{{ $user->email ?? '-' }}</span></p>
            </div>
        </div>
    </div>

    <!-- QUICK ACTIONS -->
    <h4 class="section-title mt-5">⚡ Quick Actions</h4>
    <div class="mt-3">
        <div class="d-flex flex-wrap gap-2">
            {{-- Group 1 --}}
            <a href="{{ route('coordinator.trainees') }}" class="btn-action btn-view">👥 Trainees</a>
            <a href="{{ route('coordinator.trainers') }}" class="btn-action btn-view">👤 Trainers</a>
            <a href="{{ route('coordinator.lead_trainers') }}" class="btn-action btn-view">🏅 Lead Trainers</a>
            <a href="{{ route('coordinator.master_trainers') }}" class="btn-action btn-view">🎖 Master Trainers</a>
        </div>

        <div class="d-flex flex-wrap gap-2 mt-2">
            {{-- Group 2 --}}
            <a href="{{ route('coordinator.deputy_lead_trainers') }}" class="btn-action btn-view">👨‍🏫 Deputy Lead Trainers</a>
            <a href="{{ route('coordinator.mp_coordinators') }}" class="btn-action btn-view">🏛 MP Coordinators</a>
        </div>

        <div class="d-flex flex-wrap gap-2 mt-2">
            {{-- Group 3 --}}
            <a href="{{ route('coordinator.attendance') }}" class="btn-action btn-outline">🕓 Attendance</a>
            <a href="{{ route('coordinator.reports') }}" class="btn-action btn-outline">📄 Reports</a>
        </div>
    </div>

    <!-- RECENT ACTIVITIES -->
    <h4 class="section-title mt-5">📝 Recent Activities</h4>
    <div class="class-list mt-3">
        <ul class="list-group">
            @if($recentReports->isEmpty() && $recentAttendance->isEmpty() && $recentTrainees->isEmpty())
                <li class="list-group-item empty-state">No recent activity yet.</li>
            @endif

            {{-- Reports --}}
            @foreach($recentReports as $report)
                <li class="list-group-item">
                    <strong>{{ $report->title ?? 'Report submitted' }}</strong> by 
                    {{ $report->user->name ?? 'Unknown' }}
                </li>
            @endforeach

            {{-- Trainees --}}
            @foreach($recentTrainees as $trainee)
                <li class="list-group-item">
                    🧑‍🎓 <strong>{{ $trainee->name ?? 'Unknown' }}</strong> was added as a new trainee.
                </li>
            @endforeach

            {{-- Attendance --}}
            @foreach($recentAttendance as $attendance)
                <li class="list-group-item">
                    ✅ {{ $attendance->trainee->name ?? 'User' }} marked attendance on 
                    <strong>{{ \Carbon\Carbon::parse($attendance->attendance_date)->format('d M, Y') }}</strong>
                </li>
            @endforeach
        </ul>
    </div>
</div>
@endsection