@extends('layouts.app')

@section('content')
<style>
    body { background-color: #f4fdf6; }
    .trainer-form-container { background-color: #fff; 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; }
    label { font-weight: 600; color: #2e7d32; }
    .form-control, .form-select { border-radius: 8px; border: 1px solid #c8e6c9; box-shadow: none; transition: 0.3s; }
    .form-control:focus, .form-select:focus { border-color: #2e7d32; box-shadow: 0 0 8px rgba(46, 125, 50, 0.2); outline: none; }
    .btn-success { background-color: #2e7d32; border-color: #2e7d32; transition: all 0.3s; }
    .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; }
    .alert-danger { background-color: #ffebee; color: #c62828; border: none; border-radius: 8px; }
</style>

<div class="container trainer-form-container">
    <h2 class="mb-4"><i class="bi bi-pencil-square me-2"></i>Edit Trainer Assignment</h2>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Fix the following errors:</strong>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('trainers.update', $assignment->id) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="row g-3">
            <!-- Location -->
            <div class="col-md-4">
                <label class="form-label">County</label>
                <select id="county_id" name="county_id" class="form-select" required>
                    <option value="">Select County</option>
                    @foreach($counties as $county)
                        <option value="{{ $county->id }}" 
                            {{ old('county_id', $assignment->county_id) == $county->id ? 'selected' : '' }}>
                            {{ $county->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Sub-County</label>
                <select id="sub_county_id" name="sub_county_id" class="form-select" required>
                    <option value="">Select Sub County</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Center</label>
                <select id="center_id" name="center_id" class="form-select" required>
                    <option value="">Select Center</option>
                </select>
            </div>

            <!-- Trainers Multi-Select -->
            <div class="col-md-12 mt-3">
                <label for="trainer_ids" class="form-label fw-bold">Assign Trainers</label>
                <select name="trainer_ids[]" id="trainer_ids" class="form-select" multiple required>
                    @php
                        $selectedTrainers = old('trainer_ids', $assignment->trainers->pluck('id')->toArray());
                    @endphp
                    @foreach($trainers as $trainer)
                        <option value="{{ $trainer->id }}" 
                            {{ in_array($trainer->id, $selectedTrainers) ? 'selected' : '' }}>
                            {{ $trainer->name }} ({{ $trainer->center->name ?? 'N/A' }})
                        </option>
                    @endforeach
                </select>
                <small class="text-muted">Hold Ctrl (Cmd on Mac) to select multiple trainers</small>
            </div>

            <!-- Submit -->
            <div class="col-12 mt-4">
                <button type="submit" class="btn btn-success">Update Assignment</button>
                <a href="{{ route('trainers.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const county = document.getElementById('county_id');
    const subCounty = document.getElementById('sub_county_id');
    const center = document.getElementById('center_id');

    const oldSubCounty = "{{ old('sub_county_id', $assignment->sub_county_id) }}";
    const oldCenter = "{{ old('center_id', $assignment->center_id) }}";

    const loadSubCounties = async (countyId) => {
        if (!countyId) return subCounty.innerHTML = '<option value="">Select Sub County</option>';
        subCounty.innerHTML = '<option>Loading...</option>';
        const res = await fetch(`/admin/trainers/get-subcounties/${countyId}`);
        const data = await res.json();
        subCounty.innerHTML = '<option value="">Select Sub County</option>';
        data.forEach(s => {
            const selected = s.id == oldSubCounty ? 'selected' : '';
            subCounty.innerHTML += `<option value="${s.id}" ${selected}>${s.name}</option>`;
        });
        if (oldSubCounty) loadCenters(subCounty.value);
    };

    const loadCenters = async (subCountyId) => {
        if (!subCountyId) return center.innerHTML = '<option value="">Select Center</option>';
        center.innerHTML = '<option>Loading...</option>';
        const res = await fetch(`/admin/trainers/get-centers/${subCountyId}`);
        const data = await res.json();
        center.innerHTML = '<option value="">Select Center</option>';
        data.forEach(c => {
            const selected = c.id == oldCenter ? 'selected' : '';
            center.innerHTML += `<option value="${c.id}" ${selected}>${c.name}</option>`;
        });
    };

    county.addEventListener('change', () => loadSubCounties(county.value));
    subCounty.addEventListener('change', () => loadCenters(subCounty.value));

    if (county.value) loadSubCounties(county.value);
});
</script>
@endsection