@extends('layouts.app')

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

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

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

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

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

    .filter-section {
        background-color: #e8f5e9;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .table {
        border-radius: 10px;
        overflow: hidden;
        background-color: #f9fff9;
    }

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

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

    .btn-warning {
        background-color: #fbc02d;
        border-color: #fbc02d;
    }

    .btn-warning:hover {
        background-color: #f9a825;
        border-color: #f9a825;
    }

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

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

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

    label {
        font-weight: 600;
        color: #2e7d32;
    }

    .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;
    }
</style>

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

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

    <!-- Filter Section -->
    <div class="filter-section">
        <form method="GET" action="{{ route('trainers.index') }}" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label for="trainer_name" class="form-label">Trainer Name</label>
                <input type="text" name="trainer_name" id="trainer_name" class="form-control"
                       placeholder="Search by name" value="{{ request('trainer_name') }}">
            </div>

            <div class="col-md-3">
                <label for="county_id" class="form-label">County</label>
                <select name="county_id" id="county_id" class="form-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>
            </div>

            <div class="col-md-3">
                <label for="sub_county_id" class="form-label">Sub-County</label>
                <select name="sub_county_id" id="sub_county_id" class="form-select">
                    <option value="">All Sub-Counties</option>
                </select>
            </div>

            <div class="col-md-3">
                <label for="center_id" class="form-label">Center</label>
                <select name="center_id" id="center_id" class="form-select">
                    <option value="">All Centers</option>
                </select>
            </div>

            <div class="col-md-3">
                <label for="class_id" class="form-label">Class</label>
                <select name="class_id" id="class_id" class="form-select">
                    <option value="">All Classes</option>
                </select>
            </div>

            <div class="col-md-12 text-end mt-3">
                <button type="submit" class="btn btn-success px-4">
                    <i class="bi bi-search"></i> Filter
                </button>
                <a href="{{ route('trainers.index') }}" class="btn btn-secondary px-4">
                    <i class="bi bi-arrow-clockwise"></i> Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Table Section -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle">
            <thead>
                <tr>
                    <th>Trainer Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                    <th>County</th>
                    <th>Sub-County</th>
                    <th>Center</th>
                    <th>Class</th>
                    <th>Total</th>
                    <th>Paid</th>
                    <th>Due</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($assignments as $a)
                    <tr>
                        <td>{{ $a->trainer_name }}</td>
                        <td>{{ $a->trainer_phone }}</td>
                        <td>{{ $a->trainer_email }}</td>
                        <td>{{ $a->county->name ?? '-' }}</td>
                        <td>{{ $a->subCounty->name ?? '-' }}</td>
                        <td>{{ $a->Center->name ?? '-' }}</td>
                        <td>{{ $a->classRoom->class_number ?? '-' }}</td>
                        <td><strong>Ksh {{ number_format($a->total_amount, 2) }}</strong></td>
                        <td>{{ number_format($a->amount_paid, 2) }}</td>
                        <td>{{ number_format($a->amount_due, 2) }}</td>
                        <td class="text-center">
                            <a href="{{ route('trainers.edit', $a->id) }}" class="btn btn-warning btn-sm text-white me-1">
                                <i class="bi bi-pencil-square"></i> Edit
                            </a>
                            <form action="{{ route('trainers.destroy', $a->id) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('Delete this assignment?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </form>
                            <!-- Toggle Mentor -->
                            @php
                                // Safely fetch the trainer user
                                $trainerUser = \App\Models\User::find($a->trainer_id);
                            @endphp

                            @if($trainerUser && $trainerUser->role === 'trainer')
                            <form action="{{ route('trainers.toggleMentor', $trainerUser->id) }}" method="POST" class="d-inline ms-1">
                                @csrf
                                <button type="submit" class="btn btn-sm {{ $trainerUser->is_mentor ? 'btn-danger' : 'btn-success' }}">
                                    {{ $trainerUser->is_mentor ? 'Remove Mentor' : 'Make Mentor' }}
                                </button>
                            </form>
                            @endif

                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted py-3">
                            No trainer assignments found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="d-flex justify-content-center mt-4">
        {{ $assignments->appends(request()->query())->links('pagination::bootstrap-5') }}
    </div>
</div>

<!-- Dynamic Dropdown Script -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const countySelect = document.getElementById('county_id');
        const subCountySelect = document.getElementById('sub_county_id');
        const centerSelect = document.getElementById('center_id');
        const classSelect = document.getElementById('class_id');

        countySelect.addEventListener('change', function() {
            fetch(`/trainer-assignments/subcounties/${this.value}`)
                .then(res => res.json())
                .then(data => {
                    subCountySelect.innerHTML = '<option value="">All Sub-Counties</option>';
                    data.forEach(sub => {
                        subCountySelect.innerHTML += `<option value="${sub.id}">${sub.name}</option>`;
                    });
                });
        });

        subCountySelect.addEventListener('change', function() {
            fetch(`/trainer-assignments/centers/${this.value}`)
                .then(res => res.json())
                .then(data => {
                    centerSelect.innerHTML = '<option value="">All Centers</option>';
                    data.forEach(center => {
                        centerSelect.innerHTML += `<option value="${center.id}">${center.name}</option>`;
                    });
                });
        });

        centerSelect.addEventListener('change', function() {
            fetch(`/trainer-assignments/classes/${this.value}`)
                .then(res => res.json())
                .then(data => {
                    classSelect.innerHTML = '<option value="">All Classes</option>';
                    data.forEach(cls => {
                        classSelect.innerHTML += `<option value="${cls.id}">${cls.class_number}</option>`;
                    });
                });
        });
    });
</script>
@endsection