@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-lg border-0">
        <div class="card-header text-white text-center py-3" style="background-color: #198754;">
            <h3 class="mb-0">Create Classroom</h3>
        </div>

        <div class="card-body" style="background-color: #f8fff9;">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <form action="{{ route('classrooms.store') }}" method="POST">
                @csrf

                <!-- County -->
                <div class="mb-3">
                    <label for="county_id" class="form-label fw-semibold text-success">County</label>
                    <select name="county_id" id="county_id" class="form-select border-success" required>
                        <option value="">Select County</option>
                        @foreach($counties as $county)
                            <option value="{{ $county->id }}">{{ $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 fw-semibold text-success">Sub-County</label>
                    <select name="sub_county_id" id="sub_county_id" class="form-select border-success" required>
                        <option value="">Select Sub-County</option>
                    </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 fw-semibold text-success">Center</label>
                    <select name="center_id" id="center_id" class="form-select border-success" required>
                        <option value="">Select Center</option>
                    </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 fw-semibold text-success">Class Number</label>
                    <input type="number" name="class_number" id="class_number" 
                        class="form-control border-success" min="1" max="10" required>
                    @error('class_number')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                <div class="text-center">
                    <button type="submit" class="btn btn-success btn-sm px-4 py-2">
                        <i class="bi bi-plus-circle"></i> Create Classroom
                    </button>
                    <a href="{{ route('classrooms.index') }}" class="btn btn-outline-success btn-sm px-4 py-2 ms-2">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                </div>
            </form>
        </div>
    </div>
</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: '{{ url("admin/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:  '{{ url("admin/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