@extends('layouts.header')

@section('content')
    <main class="container mt-5">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
            <li class="breadcrumb-item active"><a href="{{ route('teacher.list') }}">Teacher List</a></li>
            <li class="breadcrumb-item active">Edit Teacher Details</li>
        </ol>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body">
                        <h2 class="card-title text-center">Edit Teacher Details</h2>
                        <form method="POST" action="{{ route('teacher.update', $teacher->id) }}">
                            @csrf
                            @method('PUT')

                            <div class="mb-3">
                                <label for="fullname" class="form-label">Full Name:</label>
                                <input type="text" id="fullname" name="fullname" class="form-control"
                                    value="{{ old('fullname', $teacher->fullname) }}">
                            </div>

                            <div class="mb-3">
                                <label for="school" class="form-label">School Name:</label>
                                <select id="school" name="school" class="form-control" required>
                                    <option value="" disabled>Select School</option>
                                    <option value="">{{ $teacher->school->school_name }}</option>
                                    @foreach ($schools as $school)
                                        @if ($teacher->school->school_name !== $school->school_name)
                                            <option value="{{ $school->Id }}"
                                                {{ old('school', $teacher->school_id) == $school->Id ? 'selected' : '' }}>
                                                {{ $school->school_name }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address:</label>
                                <input type="email" id="email" name="email" class="form-control"
                                    value="{{ old('email', $teacher->email) }}">
                            </div>

                            <div class="mb-3">
                                <label for="phone_no" class="form-label">Phone Number:</label>
                                <input type="tel" id="phone_no" name="phone_no" class="form-control"
                                    value="{{ old('phone_no', $teacher->phone_no) }}">
                            </div>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

            <script>
                document.getElementById('fullname').addEventListener('input', function() {
                    var input = this.value;
                    if (input.length > 0) {
                        input = input.charAt(0).toUpperCase() + input.slice(1);
                    }
                    this.value = input;
                });

                document.getElementById('phone_no').addEventListener('input', function() {
                    var inputValue = this.value.replace(/\D/g, ''); // Remove non-numeric characters
                    var maxLength = 10;

                    if (inputValue.length > maxLength) {
                        inputValue = inputValue.substring(0, maxLength);
                    }
                    this.value = inputValue;
                });
            </script>
        @endpush
    </main>
@endsection