@extends('layouts.app')

@section('content')
<div class="container py-5">

    {{-- Dashboard Header --}}
    <div class="p-5 mb-5 text-center bg-gradient-green text-white rounded-4 shadow-sm">
        <h1 class="fw-bold mb-2">Welcome, {{ auth()->user()->name }}!</h1>
        <p class="lead mb-0">This dashboard gives an overview of your training program data — from classrooms to coordinators.</p>
    </div>

    {{-- Summary Stats --}}
    <div class="row g-4 mb-5 text-center">

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Classrooms</h6>
                <h3 class="fw-bold text-success">{{ $totalClassrooms ?? 0 }}</h3>
            </div>
        </div>

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Trainers</h6>
                <h3 class="fw-bold text-success">{{ $totalTrainers ?? 0 }}</h3>
            </div>
        </div>

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Students</h6>
                <h3 class="fw-bold text-success">{{ $totalStudents ?? 0 }}</h3>
            </div>
        </div>

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Lead Trainers</h6>
                <h3 class="fw-bold text-success">{{ $totalLeadTrainers ?? 0 }}</h3>
            </div>
        </div>

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Coordinators</h6>
                <h3 class="fw-bold text-success">{{ $totalCoordinators ?? 0 }}</h3>
            </div>
        </div>

        <div class="col-md-2 col-6">
            <div class="card border-0 shadow-sm rounded-4 p-3 bg-light-green">
                <h6 class="text-muted mb-1">Venues</h6>
                <h3 class="fw-bold text-success">{{ $totalVenues ?? 0 }}</h3>
            </div>
        </div>
    </div>

    {{-- ✅ Centers Monitoring Section --}}
    <div class="card shadow-sm border-0 mt-5">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="bi bi-building me-2"></i>Centers Monitoring Overview</h5>
        </div>
        <div class="card-body">
            @if ($centers->count() > 0)
                <div class="table-responsive">
                    <table class="table align-middle table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Center Name</th>
                                <th>Location</th>
                                <th>Trainers</th>
                                <th>Trainees</th>
                                <th>Lead Trainers</th>
                                <th>Coordinators</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($centers as $index => $center)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="fw-semibold">{{ $center->name }}</td>
                                    <td>{{ $center->location ?? '—' }}</td>
                                    <td>{{ $center->trainers_count ?? 0 }}</td>
                                    <td>{{ $center->trainees_count ?? 0 }}</td>
                                    <td>{{ $center->lead_trainers_count ?? 0 }}</td>
                                    <td>{{ $center->coordinators_count ?? 0 }}</td>
                                    <td>
                                        @if ($center->status === 'active')
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-secondary">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        <a href="{{ route('centers.show', $center->id) }}" class="btn btn-outline-success btn-sm">
                                            <i class="bi bi-eye"></i> View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted mb-0">No centers registered yet.</p>
            @endif
        </div>
    </div>

    {{-- Action Cards --}}
    <div class="row g-4 justify-content-center">
        @php
            $cards = [
                ['title' => 'Classrooms', 'text' => 'Create and manage classrooms by county, sub-county, and venue.', 'route' => 'classrooms.index'],
                ['title' => 'Assign Trainers', 'text' => 'Assign trainers to classes with rate, duration, and payment info.', 'route' => 'trainers.index'],
                ['title' => 'Assign Students', 'text' => 'Register and assign students to classrooms with tracking.', 'route' => 'assignments.index'],
                ['title' => 'Lead Trainers', 'text' => 'Assign and manage lead trainers per center.', 'route' => 'lead_trainers.index'],
                ['title' => 'Centre Coordinators', 'text' => 'Manage assigned coordinators for each venue and sub-county.', 'route' => 'centre_coordinators.index'],
                ['title' => 'Trainees', 'text' => 'View and verify trainee registrations and training progress.', 'route' => 'students.index'],
            ];
        @endphp

        @foreach($cards as $card)
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm dashboard-card h-100 rounded-4">
                <div class="card-body text-center p-5">
                    <h5 class="fw-semibold mb-3 text-success">{{ $card['title'] }}</h5>
                    <p class="text-muted mb-4 small">{{ $card['text'] }}</p>
                    <a href="{{ route($card['route']) }}" class="btn btn-success rounded-pill px-4">Go</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

{{-- Custom Styling --}}
<style>
    .bg-gradient-green { background: linear-gradient(135deg, #28a745, #20c997); }
    .bg-light-green { background-color: #f1fdf5; }
    .dashboard-card {
        background-color: #ffffff;
        border: 1px solid #e8f5e9;
        transition: all 0.3s ease;
    }
    .dashboard-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0.75rem 1.25rem rgba(0, 128, 0, 0.1);
    }
    .btn-success { background-color: #28a745; border: none; }
    .btn-success:hover { background-color: #218838; }
    .container { max-width: 1200px; }
    h1, h5 { letter-spacing: 0.3px; }
</style>
@endsection