@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <h2 class="mb-4">Edit Classroom</h2>

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

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

        <!-- County -->
        <div class="mb-3">
            <label for="county_id" class="form-label">County</label>
            <select name="county_id" id="county_id" class="form-select" required>
                <option value="">Select County</option>
                @foreach($counties as $county)
                    <option value="{{ $county->id }}" 
                        {{ $classroom->county_id == $county->id ? 'selected' : '' }}>
                        {{ $county->name }}
                    </option>
                @endforeach
            </select>
            @error('county_id')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Sub-County -->
        <div class="mb-3">
            <label for="sub_county_id" class="form-label">Sub-County</label>
            <select name="sub_county_id" id="sub_county_id" class="form-select" required>
                <option value="">Select Sub-County</option>
                @foreach($subCounties as $subCounty)
                    <option value="{{ $subCounty->id }}" 
                        {{ $classroom->sub_county_id == $subCounty->id ? 'selected' : '' }}>
                        {{ $subCounty->name }}
                    </option>
                @endforeach
            </select>
            @error('sub_county_id')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Center -->
        <div class="mb-3">
            <label for="center_id" class="form-label">Center</label>
            <select name="center_id" id="center_id" class="form-select" required>
                <option value="">Select Center</option>
                @foreach($centers as $center)
                    <option value="{{ $center->id }}" 
                        {{ $classroom->center_id == $center->id ? 'selected' : '' }}>
                        {{ $center->name }}
                    </option>
                @endforeach
            </select>
            @error('center_id')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <!-- Class Number -->
        <div class="mb-3">
            <label for="class_number" class="form-label">Class Number</label>
            <input type="number" 
                   name="class_number" 
                   id="class_number" 
                   class="form-control" 
                   min="1" 
                   max="10"
                   value="{{ old('class_number', $classroom->class_number) }}" 
                   required>
            @error('class_number')
                <small class="text-danger">{{ $message }}</small>
            @enderror
        </div>

        <button type="submit" class="btn btn-success">Update Classroom</button>
        <a href="{{ route('classrooms.index') }}" class="btn btn-secondary">Back</a>
    </form>
</div>

{{-- AJAX for dependent dropdowns --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#county_id').on('change', function () {
        let countyId = $(this).val();
        $('#sub_county_id').html('<option value="">Loading...</option>');
        $('#center_id').html('<option value="">Select Center</option>');

        if (countyId) {
            $.ajax({
                url: '/classrooms/get-subcounties/' + countyId,
                type: 'GET',
                success: function (data) {
                    $('#sub_county_id').empty().append('<option value="">Select Sub-County</option>');
                    data.forEach(function (subCounty) {
                        $('#sub_county_id').append(`<option value="${subCounty.id}">${subCounty.name}</option>`);
                    });
                },
                error: function () {
                    alert('Failed to load sub-counties.');
                }
            });
        } else {
            $('#sub_county_id').html('<option value="">Select Sub-County</option>');
        }
    });

    $('#sub_county_id').on('change', function () {
        let subCountyId = $(this).val();
        $('#center_id').html('<option value="">Loading...</option>');

        if (subCountyId) {
            $.ajax({
                url: '/classrooms/get-centers/' + subCountyId,
                type: 'GET',
                success: function (data) {
                    $('#center_id').empty().append('<option value="">Select Center</option>');
                    data.forEach(function (center) {
                        $('#center_id').append(`<option value="${center.id}">${center.name}</option>`);
                    });
                },
                error: function () {
                    alert('Failed to load centers.');
                }
            });
        } else {
            $('#center_id').html('<option value="">Select Center</option>');
        }
    });
</script>
@endsection