@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-person-plus-fill me-2"></i>{{ isset($assignment) ? 'Edit Lead Trainer' : 'Assign Lead Trainer' }}</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="{{ isset($assignment) ? route('lead_trainers.update', $assignment->id) : route('lead_trainers.store') }}" method="POST">
        @csrf
        @if(isset($assignment)) @method('PUT') @endif

        <div class="row g-3">
            <!-- Lead Trainer Details -->
            <div class="col-md-4">
                <label class="form-label">Lead Trainer ID</label>
                <input type="text" name="lead_trainer_id" 
                       value="{{ old('lead_trainer_id', $assignment->lead_trainer_id ?? '') }}" 
                       class="form-control @error('lead_trainer_id') is-invalid @enderror" required>
            </div>

            <div class="col-md-4">
                <label class="form-label">Lead Trainer Name</label>
                <input type="text" name="lead_trainer_name" 
                       value="{{ old('lead_trainer_name', $assignment->lead_trainer_name ?? '') }}" 
                       class="form-control @error('lead_trainer_name') is-invalid @enderror" required>
            </div>

            <div class="col-md-4">
                <label class="form-label">Phone</label>
                <input type="text" name="lead_trainer_phone" 
                       value="{{ old('lead_trainer_phone', $assignment->lead_trainer_phone ?? '') }}" 
                       class="form-control @error('lead_trainer_phone') is-invalid @enderror" required>
            </div>

            <div class="col-md-6">
                <label class="form-label">Email</label>
                <input type="email" name="lead_trainer_email" 
                       value="{{ old('lead_trainer_email', $assignment->lead_trainer_email ?? '') }}" 
                       class="form-control @error('lead_trainer_email') is-invalid @enderror" required>
            </div>

            <!-- Location Selection -->
            <div class="col-md-4">
                <label class="form-label">County</label>
                <select id="county_id" name="county_id" class="form-select @error('county_id') is-invalid @enderror" 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 @error('sub_county_id') is-invalid @enderror" 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 @error('center_id') is-invalid @enderror" required>
                    <option value="">Select Center</option>
                </select>
            </div>

            <!-- Submit Buttons -->
            <div class="col-12 mt-4">
                <button type="submit" class="btn btn-success">
                    <i class="bi bi-save me-1"></i> {{ isset($assignment) ? 'Update Assignment' : 'Save Assignment' }}
                </button>
                <a href="{{ route('lead_trainers.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle me-1"></i> 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>';
        let res = await fetch(`/admin/lead-trainers/get-subcounties/${countyId}`);
        let 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>';
        let res = await fetch(`/admin/lead-trainers/get-centers/${subCountyId}`);
        let 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