@extends('layouts.app')

@section('content')
<div class="container py-4">
    <h3 class="fw-bold mb-3 text-success">Edit Teacher on Duty</h3>

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            @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.teachers_on_duty.update', $teacher->id) }}" method="POST">
                @csrf
                @method('PUT')

                {{-- 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', $teacher->name) }}" required>
                </div>

                {{-- ID Number --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">ID Number</label>
                    <input type="text" name="id_number" class="form-control" value="{{ old('id_number', $teacher->id_number) }}" 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', $teacher->phone) }}" required>
                </div>

                {{-- Duty Date --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Duty Date</label>
                    <input type="date" name="duty_date" class="form-control" value="{{ old('duty_date', $teacher->duty_date) }}" required>
                </div>

                {{-- County --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">County</label>
                    <select name="county_id" class="form-select" id="county" required>
                        <option value="">-- Select County --</option>
                        @foreach($counties as $county)
                            <option value="{{ $county->id }}" {{ $teacher->county_id == $county->id ? 'selected' : '' }}>
                                {{ $county->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- SubCounty --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Sub County</label>
                    <select name="sub_county_id" class="form-select" id="sub_county" required>
                        <option value="">-- Select Sub County --</option>
                        @foreach($subcounties->where('county_id', $teacher->county_id) as $sub)
                            <option value="{{ $sub->id }}" {{ $teacher->sub_county_id == $sub->id ? 'selected' : '' }}>
                                {{ $sub->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Center --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Assigned Center</label>
                    <select name="center_id" class="form-select" id="center" required>
                        <option value="">-- Select Center --</option>
                        @foreach($centers->where('sub_county_id', $teacher->sub_county_id) as $center)
                            <option value="{{ $center->id }}" {{ $teacher->center_id == $center->id ? 'selected' : '' }}>
                                {{ $center->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- Password --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Password (leave blank to keep current)</label>
                    <input type="password" name="password" class="form-control">
                </div>

                <input type="hidden" name="role" value="teacher_on_duty">

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

<script>
    document.getElementById('county').addEventListener('change', function() {
        const countyId = this.value;
        fetch(`/admin/subcounties/${countyId}`)
            .then(res => res.json())
            .then(data => {
                const subSelect = document.getElementById('sub_county');
                subSelect.innerHTML = '<option value="">-- Select Sub County --</option>';
                data.forEach(sub => {
                    subSelect.innerHTML += `<option value="${sub.id}">${sub.name}</option>`;
                });
                document.getElementById('center').innerHTML = '<option value="">-- Select Center --</option>';
            });
    });

    document.getElementById('sub_county').addEventListener('change', function() {
        const subCountyId = this.value;
        fetch(`/admin/centers/${subCountyId}`)
            .then(res => res.json())
            .then(data => {
                const centerSelect = document.getElementById('center');
                centerSelect.innerHTML = '<option value="">-- Select Center --</option>';
                data.forEach(center => {
                    centerSelect.innerHTML += `<option value="${center.id}">${center.name}</option>`;
                });
            });
    });
</script>
@endsection