@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;
    }

    /* Color-coded Paid/Due */
    .paid { color: green; font-weight: 600; }
    .due { color: red; font-weight: 600; }
    .fully-paid { background-color: #e0f2f1; } /* highlight fully paid rows */
</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>Assistant Trainer Assignments</h2>
        <a href="{{ route('assistant-trainers.create') }}" class="btn btn-primary shadow-sm">
            <i class="bi bi-plus-circle"></i> Assign Assistant 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('assistant-trainers.index') }}" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label for="assistant_name" class="form-label">Assistant Trainer Name</label>
                <input type="text" name="assistant_name" id="assistant_name" class="form-control"
                       placeholder="Search by name" value="{{ request('assistant_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('assistant-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>Assistant 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 class="{{ $a->amount_due == 0 ? 'fully-paid' : '' }}">
                        <td>{{ $a->assistantTrainer->name ?? '-' }}</td>
                        <td>{{ $a->assistantTrainer->phone ?? '-' }}</td>
                        <td>{{ $a->assistantTrainer->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 class="paid">KSh {{ number_format($a->amount_paid, 2) }}</td>
                        <td class="due">KSh {{ number_format($a->amount_due, 2) }}</td>
                        <td class="text-center">
                            <a href="{{ route('assistant-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('assistant-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>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="11" class="text-center text-muted py-3">
                            No assistant 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 with Pre-selected Values -->
<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');

    const selectedCounty = "{{ request('county_id') }}";
    const selectedSubCounty = "{{ request('sub_county_id') }}";
    const selectedCenter = "{{ request('center_id') }}";
    const selectedClass = "{{ request('class_id') }}";

    function populateSubCounties(countyId, selected = null) {
        fetch(`/assistant-trainers/subcounties/${countyId}`)
            .then(res => res.json())
            .then(data => {
                subCountySelect.innerHTML = '<option value="">All Sub-Counties</option>';
                data.forEach(sub => {
                    const isSelected = sub.id == selected ? 'selected' : '';
                    subCountySelect.innerHTML += `<option value="${sub.id}" ${isSelected}>${sub.name}</option>`;
                });
            });
    }

    function populateCenters(subCountyId, selected = null) {
        fetch(`/assistant-trainers/centers/${subCountyId}`)
            .then(res => res.json())
            .then(data => {
                centerSelect.innerHTML = '<option value="">All Centers</option>';
                data.forEach(center => {
                    const isSelected = center.id == selected ? 'selected' : '';
                    centerSelect.innerHTML += `<option value="${center.id}" ${isSelected}>${center.name}</option>`;
                });
            });
    }

    function populateClasses(centerId, selected = null) {
        fetch(`/assistant-trainers/classes/${centerId}`)
            .then(res => res.json())
            .then(data => {
                classSelect.innerHTML = '<option value="">All Classes</option>';
                data.forEach(cls => {
                    const isSelected = cls.id == selected ? 'selected' : '';
                    classSelect.innerHTML += `<option value="${cls.id}" ${isSelected}>${cls.class_number}</option>`;
                });
            });
    }

    // Pre-populate dropdowns
    if (selectedCounty) populateSubCounties(selectedCounty, selectedSubCounty);
    if (selectedSubCounty) populateCenters(selectedSubCounty, selectedCenter);
    if (selectedCenter) populateClasses(selectedCenter, selectedClass);

    // Event listeners
    countySelect.addEventListener('change', function() {
        populateSubCounties(this.value);
        centerSelect.innerHTML = '<option value="">All Centers</option>';
        classSelect.innerHTML = '<option value="">All Classes</option>';
    });

    subCountySelect.addEventListener('change', function() {
        populateCenters(this.value);
        classSelect.innerHTML = '<option value="">All Classes</option>';
    });

    centerSelect.addEventListener('change', function() {
        populateClasses(this.value);
    });
});
</script>
@endsection