@extends('layouts.app')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold text-success">Register Head Teacher</h3>
        <a href="{{ route('admin.head_teachers.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back
        </a>
    </div>

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">

            {{-- ERROR ALERT --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <i class="bi bi-exclamation-triangle"></i>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

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

                {{-- FULL NAME --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Full Name</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>

                {{-- PHONE --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Phone</label>
                    <input type="text" name="phone" class="form-control" value="{{ old('phone') }}" required>
                </div>

                {{-- EMAIL --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Email (optional)</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email') }}">
                </div>

                {{-- NATIONAL ID --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">National ID Number</label>
                    <input type="text" name="national_id" class="form-control" value="{{ old('national_id') }}" required>
                </div>

                {{-- ROLE --}}
                <input type="hidden" name="role" value="head_teacher">

                {{-- COUNTY --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">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 }}" {{ old('county_id') == $county->id ? 'selected' : '' }}>
                                {{ $county->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- SUB-COUNTY --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Sub-County</label>
                    <select name="sub_county_id" id="sub_county_id" class="form-select" required>
                        <option value="">-- Select Sub-County --</option>
                    </select>
                </div>

                {{-- CENTER --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Center (optional)</label>
                    <select name="center_id" id="center_id" class="form-select">
                        <option value="">-- Select Center --</option>
                    </select>
                </div>

                {{-- SUBMIT BUTTONS --}}
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check-circle"></i> Register
                    </button>
                    <a href="{{ route('admin.head_teachers.index') }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                </div>
            </form>

        </div>
    </div>
</div>

{{-- AJAX for dynamic Sub-County and Center --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const countySelect = document.getElementById('county_id');
    const subCountySelect = document.getElementById('sub_county_id');
    const centerSelect = document.getElementById('center_id');

    countySelect.addEventListener('change', function () {
        const countyId = this.value;
        subCountySelect.innerHTML = '<option value="">Loading...</option>';
        centerSelect.innerHTML = '<option value="">-- Select Center --</option>';

        if (!countyId) {
            subCountySelect.innerHTML = '<option value="">-- Select Sub-County --</option>';
            return;
        }

        fetch(`/api/sub-counties/${countyId}`)
            .then(res => res.json())
            .then(data => {
                let options = '<option value="">-- Select Sub-County --</option>';
                data.forEach(sc => {
                    options += `<option value="${sc.id}">${sc.name}</option>`;
                });
                subCountySelect.innerHTML = options;
            });
    });

    subCountySelect.addEventListener('change', function () {
        const subCountyId = this.value;
        centerSelect.innerHTML = '<option value="">Loading...</option>';

        if (!subCountyId) {
            centerSelect.innerHTML = '<option value="">-- Select Center --</option>';
            return;
        }

        fetch(`/api/centers/${subCountyId}`)
            .then(res => res.json())
            .then(data => {
                let options = '<option value="">-- Select Center --</option>';
                data.forEach(center => {
                    options += `<option value="${center.id}">${center.name}</option>`;
                });
                centerSelect.innerHTML = options;
            });
    });
});
</script>
@endsection