@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
        <div>
            <h2 class="fw-bold text-success mb-1">
                <i class="bi bi-people-fill me-2"></i> Trainee Management
            </h2>
            <p class="text-muted mb-0">View, edit, and manage all registered trainees.</p>
        </div>
        <a href="{{ route('admin.register.trainee') }}" class="btn btn-success shadow-sm d-flex align-items-center gap-2">
            <i class="bi bi-person-plus-fill"></i> Add Trainee
        </a>
    </div>

    <!-- Flash Message -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm rounded-3" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Trainee Table -->
    @if($trainees->count())
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-success text-white rounded-top">
                            <tr>
                                <th scope="col" class="text-center">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Role</th>
                                <th scope="col" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($trainees as $trainee)
                                <tr class="table-row-hover">
                                    <td class="text-center text-muted">{{ $trainee->id }}</td>
                                    <td class="fw-semibold">{{ $trainee->name }}</td>
                                    <td class="text-muted">{{ $trainee->email ?? 'N/A' }}</td>
                                    <td class="text-muted">{{ $trainee->phone }}</td>
                                    <td>
                                        <span class="badge rounded-pill bg-light text-success border border-success px-3 py-2">
                                            {{ ucfirst($trainee->role) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-2">
                                            <!-- View Details -->
                                            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#traineeModal{{ $trainee->id }}" title="View Details">
                                                <i class="bi bi-eye"></i>
                                            </button>

                                            <!-- Edit -->
                                            <a href="{{ route('admin.trainees.edit', $trainee->id) }}" class="btn btn-sm btn-outline-warning" title="Edit">
                                                <i class="bi bi-pencil-square"></i>
                                            </a>

                                            <!-- Delete -->
                                            <form action="{{ route('admin.trainees.destroy', $trainee->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="btn btn-sm btn-outline-danger"
                                                    onclick="return confirm('Are you sure you want to delete this trainee?')"
                                                    title="Delete">
                                                    <i class="bi bi-trash3"></i>
                                                </button>
                                            </form>
                                        </div>

                                        <!-- Modal for View -->
                                        <div class="modal fade" id="traineeModal{{ $trainee->id }}" tabindex="-1" aria-labelledby="traineeModalLabel{{ $trainee->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-success text-white">
                                                        <h5 class="modal-title" id="traineeModalLabel{{ $trainee->id }}">
                                                            {{ $trainee->name }} - Details
                                                        </h5>
                                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <ul class="list-group list-group-flush">
                                                            <li class="list-group-item"><strong>ID Number:</strong> {{ $trainee->id_number }}</li>
                                                            <li class="list-group-item"><strong>Email:</strong> {{ $trainee->email ?? 'N/A' }}</li>
                                                            <li class="list-group-item"><strong>Phone:</strong> {{ $trainee->phone }}</li>
                                                            <li class="list-group-item"><strong>County:</strong> {{ $trainee->county->name ?? 'N/A' }}</li>
                                                            <li class="list-group-item"><strong>Sub-County:</strong> {{ $trainee->subCounty->name ?? 'N/A' }}</li>
                                                            <!-- <li class="list-group-item"><strong>Ward:</strong> {{ $trainee->ward->name ?? 'N/A' }}</li> -->
                                                            <li class="list-group-item"><strong>Training Type:</strong> {{ $trainee->training_type }}</li>
                                                            <li class="list-group-item"><strong>Registered At:</strong> {{ $trainee->created_at->format('d M Y') }}</li>
                                                        </ul>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Modal -->
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @else
        <div class="alert alert-light border-success text-success mt-4 rounded-3 shadow-sm">
            <i class="bi bi-info-circle me-2"></i>
            No trainees found. 
            <a href="{{ route('admin.register.trainee') }}" class="fw-semibold text-decoration-none text-success">
                Add one now.
            </a>
        </div>
    @endif
</div>

<!-- Custom Page Styles -->
<style>
    body {
        background: linear-gradient(135deg, #f5fff8, #e8f7ee);
    }

    .table thead tr th {
        border: none;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .table tbody tr {
        transition: all 0.2s ease;
    }

    .table tbody tr:hover {
        background-color: #e9fce9 !important;
    }

    .btn-outline-info:hover {
        background-color: #0dcaf0;
        color: #fff;
    }

    .btn-outline-success:hover {
        background-color: #198754;
        color: #fff;
    }

    .btn-outline-warning:hover {
        background-color: #ffc107;
        color: #fff;
    }

    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }

    .alert-light {
        background: #f9fffa;
        border: 1px solid #a8e6af;
    }

    .card-body {
        padding: 1.5rem 2rem;
    }

    .rounded-top {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
    }
</style>
@endsection