@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-sm border-success">
        <div class="card-header bg-success text-white">
            <h4 class="mb-0">Add Centre Coordinator</h4>
        </div>
        <div class="card-body">
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <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('centre_coordinators.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <!-- County -->
                    <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 }}">{{ $county->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Sub County -->
                    <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>

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

                    <hr class="my-3">

                    <!-- Coordinator 1 -->
                    <h5 class="text-success mb-2">Coordinator 1 (Required)</h5>
                    <div class="col-md-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="coordinator1_name" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">ID</label>
                        <input type="text" name="coordinator1_id" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Phone</label>
                        <input type="text" name="coordinator1_phone" class="form-control" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="coordinator1_email" class="form-control" required>
                    </div>

                    <hr class="my-3">

                    <!-- Coordinator 2 -->
                    <h5 class="text-success mb-2">Coordinator 2 (Optional)</h5>
                    <div class="col-md-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="coordinator2_name" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">ID</label>
                        <input type="text" name="coordinator2_id" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Phone</label>
                        <input type="text" name="coordinator2_phone" class="form-control">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="coordinator2_email" class="form-control">
                    </div>

                    <div class="col-12 mt-3">
                        <button type="submit" class="btn btn-success me-2">Save Coordinator</button>
                        <a href="{{ route('centre_coordinators.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const countySelect = document.getElementById('county_id');
    const subCountySelect = document.getElementById('sub_county_id');
    const centerSelect = document.getElementById('center_id');

    countySelect.addEventListener('change', async () => {
        let countyId = countySelect.value;
        subCountySelect.innerHTML = '<option>Loading...</option>';
        centerSelect.innerHTML = '<option value="">Select Centre</option>';

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

        let res = await fetch(`/admin/centre-coordinators/get-subcounties/${countyId}`);
        let data = await res.json();

        subCountySelect.innerHTML = '<option value="">Select Sub County</option>';
        data.forEach(s => subCountySelect.innerHTML += `<option value="${s.id}">${s.name}</option>`);
    });

    subCountySelect.addEventListener('change', async () => {
        let subCountyId = subCountySelect.value;
        centerSelect.innerHTML = '<option>Loading...</option>';

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

        let res = await fetch(`/admin/centre-coordinators/get-centers/${subCountyId}`);
        let data = await res.json();

        centerSelect.innerHTML = '<option value="">Select Centre</option>';
        data.forEach(c => centerSelect.innerHTML += `<option value="${c.id}">${c.name}</option>`);
    });
});
</script>
@endsection