@extends('layouts.app')

@section('content')
<style>
    body {
        background-color: #f4fdf6;
    }

    .trainer-container {
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.1);
        padding: 30px;
        margin-top: 30px;
        transition: all 0.3s ease-in-out;
    }

    h2 {
        color: #2e7d32;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .btn-primary, .btn-success {
        background-color: #2e7d32;
        border-color: #2e7d32;
        transition: all 0.3s;
    }

    .btn-primary:hover, .btn-success:hover {
        background-color: #256a28;
        border-color: #256a28;
    }

    .btn-secondary {
        background-color: #9e9e9e;
        border-color: #9e9e9e;
    }

    .btn-secondary:hover {
        background-color: #757575;
        border-color: #757575;
    }

    .btn-danger {
        background-color: #d32f2f;
        border-color: #d32f2f;
    }

    .btn-danger:hover {
        background-color: #b71c1c;
        border-color: #b71c1c;
    }

    .table {
        border-radius: 10px;
        overflow: hidden;
        background-color: #f9fff9;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    thead {
        background-color: #388e3c;
        color: #fff;
        font-weight: 600;
    }

    tbody tr:hover {
        background-color: #e8f5e9;
        transition: 0.2s;
    }

    .alert-success {
        background-color: #c8e6c9;
        color: #256a28;
        border: none;
        border-radius: 8px;
    }

    .pagination {
        justify-content: center;
        margin-top: 25px;
    }

    .pagination .page-link {
        color: #2e7d32;
        border-color: #c8e6c9;
    }

    .pagination .page-item.active .page-link {
        background-color: #2e7d32;
        border-color: #2e7d32;
        color: #fff;
    }

    .pagination .page-link:hover {
        background-color: #c8e6c9;
    }

    .search-box {
        max-width: 250px;
    }

    .filter-select {
        max-width: 200px;
    }

    .action-buttons .btn {
        margin-right: 5px;
    }
</style>

<div class="container trainer-container">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
        <h2><i class="bi bi-person-workspace me-2"></i>Lead Trainer Assignments</h2>
        <a href="{{ route('lead_trainers.create') }}" class="btn btn-primary shadow-sm mb-2">
            <i class="bi bi-plus-circle"></i> Assign Lead Trainer
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <!-- Advanced Search / Filters -->
    <form method="GET" class="mb-3 d-flex flex-wrap gap-2 align-items-center">
        <input type="text" name="search" class="form-control search-box" placeholder="Search by name or ID" value="{{ request('search') }}">
        
        <select name="county_id" class="form-select filter-select">
            <option value="">All Counties</option>
            @foreach($counties as $county)
                <option value="{{ $county->id }}" {{ request('county_id') == $county->id ? 'selected' : '' }}>{{ $county->name }}</option>
            @endforeach
        </select>

        <select name="sub_county_id" class="form-select filter-select">
            <option value="">All Sub-Counties</option>
            @if(request('county_id'))
                @foreach(\App\Models\SubCounty::where('county_id', request('county_id'))->get() as $sub)
                    <option value="{{ $sub->id }}" {{ request('sub_county_id') == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>
                @endforeach
            @endif
        </select>

        <select name="center_id" class="form-select filter-select">
            <option value="">All Centers</option>
            @if(request('sub_county_id'))
                @foreach(\App\Models\Center::where('sub_county_id', request('sub_county_id'))->get() as $center)
                    <option value="{{ $center->id }}" {{ request('center_id') == $center->id ? 'selected' : '' }}>{{ $center->name }}</option>
                @endforeach
            @endif
        </select>

        <button type="submit" class="btn btn-success">Filter</button>

        @if(request()->hasAny(['search', 'county_id', 'sub_county_id', 'center_id']))
            <a href="{{ route('lead_trainers.index') }}" class="btn btn-secondary">Reset</a>
        @endif
    </form>

    <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Lead Trainer Name</th>
                    <th>Phone</th>
                    <th>Email</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->lead_trainer_name }}</td>
                        <td>{{ $assignment->lead_trainer_phone }}</td>
                        <td>{{ $assignment->lead_trainer_email }}</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->format('d M, Y') }}</td>
                        <td class="action-buttons">
                            <a href="{{ route('lead_trainers.edit', $assignment->id) }}" class="btn btn-success btn-sm">
                                <i class="bi bi-pencil-square"></i> Edit
                            </a>
                            <form action="{{ route('lead_trainers.destroy', $assignment->id) }}" method="POST" style="display:inline-block;" onsubmit="return confirm('Are you sure you want to delete this assignment?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted">No lead trainers found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $assignments->withQueryString()->links('pagination::bootstrap-5') }}
    </div>
</div>
@endsection