@extends('layouts.app')

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

    {{-- PAGE HEADER --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary mb-0">
            Welcome, {{ $user->name }} (Lead Trainer)
        </h2>
        <span class="badge bg-success p-2 px-3 fs-6 shadow-sm">Active</span>
    </div>

    {{-- SUMMARY CARDS --}}
    <div class="row g-3 mb-5">
        <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 p-3 bg-light text-center hover-shadow">
                <i class="bi bi-people-fill fs-2 text-primary"></i>
                <h3 class="fw-bold text-primary mt-2 mb-1">{{ $traineesCount ?? 0 }}</h3>
                <small class="text-muted">Total Trainees</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 p-3 bg-light text-center hover-shadow">
                <i class="bi bi-journal-bookmark-fill fs-2 text-success"></i>
                <h3 class="fw-bold text-success mt-2 mb-1">{{ $classesCount ?? 0 }}</h3>
                <small class="text-muted">Classes Managed</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 p-3 bg-light text-center hover-shadow">
                <i class="bi bi-building fs-2 text-info"></i>
                <h3 class="fw-bold text-info mt-2 mb-1">{{ $centersCount ?? 0 }}</h3>
                <small class="text-muted">Centers Assigned</small>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm border-0 rounded-3 p-3 bg-light text-center hover-shadow">
                <i class="bi bi-clock-fill fs-2 text-warning"></i>
                <h3 class="fw-bold text-warning mt-2 mb-1">{{ $ongoingTrainings ?? 0 }}</h3>
                <small class="text-muted">Ongoing Trainings</small>
            </div>
        </div>
    </div>

    <div class="row">

        {{-- LEFT COLUMN --}}
        <div class="col-lg-8">

            {{-- MASTER TRAINERS --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-secondary text-white fw-bold">
                    My Master Trainers
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($masterTrainers as $master)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $master->name ?? 'N/A' }}</strong><br>
                                    <small class="text-muted">{{ $master->phone ?? 'N/A' }}</small>
                                </div>
                                <span class="badge bg-success rounded-pill">
                                    {{ $master->email ?? 'No Email' }}
                                </span>
                            </li>
                        @empty
                            <li class="list-group-item text-center text-muted">No master trainers assigned yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>


            {{-- TRAINERS UNDER THIS LEAD --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-secondary text-white fw-bold">
                    My Trainers
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($trainers as $trainer)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $trainer->name ?? 'N/A' }}</strong><br>
                                    <small class="text-muted">{{ $trainer->phone ?? 'N/A' }}</small>
                                </div>
                                <span class="badge bg-primary rounded-pill">
                                    {{ $trainer->email ?? 'No Email' }}
                                </span>
                            </li>
                        @empty
                            <li class="list-group-item text-center text-muted">No trainers assigned yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>

                        {{-- DEPUTY LEAD TRAINERS --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-secondary text-white fw-bold">
                    My Deputy Lead Trainers
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($deputyTrainers as $deputy)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>{{ $deputy->name ?? 'N/A' }}</strong><br>
                                    <small class="text-muted">{{ $deputy->phone ?? 'N/A' }}</small>
                                </div>
                                <span class="badge bg-primary rounded-pill">
                                    {{ $deputy->email ?? 'No Email' }}
                                </span>
                            </li>
                        @empty
                            <li class="list-group-item text-center text-muted">No deputy lead trainers assigned yet.</li>
                        @endforelse
                    </ul>
                </div>
            </div>


            {{-- CLASSES UNDER THIS LEAD --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-primary text-white fw-bold">
                    My Active Classes
                </div>
                <div class="card-body p-0">
                    <table class="table table-striped mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Class</th>
                                <th>Center</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($classes as $class)
                                <tr>
                                    <td>{{ $class->class_number ?? 'N/A' }}</td>
                                    <td>{{ $class->center->name ?? 'N/A' }}</td>
                                    <td>{{ $class->start_date ? \Carbon\Carbon::parse($class->start_date)->format('d M Y') : 'N/A' }}</td>
                                    <td>{{ $class->end_date ? \Carbon\Carbon::parse($class->end_date)->format('d M Y') : 'N/A' }}</td>
                                    <td>
                                        <span class="badge bg-{{ ($class->status ?? 'inactive') == 'active' ? 'success' : 'secondary' }}">
                                            {{ ucfirst($class->status ?? 'Inactive') }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-3">No active classes found.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- TRAINING OF TRAINEES --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-success text-white fw-bold">
                    Training of Trainees
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Trainee</th>
                                    <th>Class</th>
                                    <th>Progress</th>
                                    <th>Attendance</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($traineeTrainings as $training)
                                    <tr>
                                        <td>{{ $training->student->name ?? 'N/A' }}</td>
                                        <td>{{ $training->classRoom->class_number ?? 'N/A' }}</td>
                                        <td>
                                            <div class="progress" style="height: 8px;">
                                                <div class="progress-bar bg-info" style="width: {{ $training->progress ?? 0 }}%"></div>
                                            </div>
                                            <small class="text-muted">{{ $training->progress ?? 0 }}%</small>
                                        </td>
                                        <td><span class="badge bg-secondary">{{ $training->attendance ?? 0 }}%</span></td>
                                        <td>
                                            <a href="{{ route('trainee.progress', $training->student_id) }}" class="btn btn-sm btn-outline-primary">View</a>
                                            <a href="{{ route('lead_trainer.attendance', $training->id) }}" class="btn btn-sm btn-outline-info">Attendance</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-3">No trainees assigned yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ASSIGNMENTS --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-info text-white fw-bold">
                    My Assignments
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Center</th>
                                    <th>Sub-County</th>
                                    <th>County</th>
                                    <th>Assigned On</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($assignments as $assignment)
                                    <tr>
                                        <td>{{ $assignment->lead_trainer_id }}</td>
                                        <td>{{ $assignment->center->name ?? 'N/A' }}</td>
                                        <td>{{ $assignment->subCounty->name ?? 'N/A' }}</td>
                                        <td>{{ $assignment->county->name ?? 'N/A' }}</td>
                                        <td>{{ $assignment->created_at ? $assignment->created_at->format('d M, Y') : 'N/A' }}</td>
                                        <td class="d-flex gap-1">
                                            <a href="{{ route('lead_trainers.edit', $assignment->id) }}" class="btn btn-success btn-sm"><i class="bi bi-pencil-square"></i></a>
                                            <form action="{{ route('lead_trainers.destroy', $assignment->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted">No assignments found.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>

        {{-- RIGHT COLUMN --}}
        <div class="col-lg-4">

            {{-- QUICK ACTIONS --}}
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-dark text-white fw-bold">
                    Quick Actions
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0 d-grid gap-2">
                        <li><a href="{{ route('lead_trainers.index') }}" class="btn btn-outline-primary w-100">📋 View Assignments</a></li>
                        <li><a href="{{ route('lead_trainer.manage_trainers') }}" class="btn btn-outline-warning w-100">🧑‍🏫 Manage Trainers</a></li>
                        <li><a href="{{ route('lead_trainer.manage_trainees') }}" class="btn btn-outline-info w-100">👨‍🎓 Manage Trainees</a></li>
                        <li><a href="{{ route('lead_trainer.center_files') }}" class="btn btn-outline-secondary w-100">📁 Center Files</a></li>
                    </ul>
                </div>
            </div>

            {{-- UPCOMING SESSION --}}
            <div class="card shadow-sm border-0 bg-light">
                <div class="card-body text-center">
                    <h6 class="fw-bold text-primary mb-2">Upcoming Sessions</h6>
                    <p class="text-muted small mb-2">
                        Next training session starts on 
                        <strong>{{ now()->addDays(3)->format('d M Y') }}</strong>.
                    </p>
                    <a href="#" class="btn btn-sm btn-primary w-100">View Details</a>
                </div>
            </div>

        </div>
    </div>
</div>

@push('styles')
<style>
    .hover-shadow:hover {
        transform: translateY(-3px);
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    }
</style>
@endpush

@endsection