@extends('layouts.app')
@section('title', 'Classes & Class Teachers')
@section('page-title', 'Classes & Streams')

@push('styles')
<style>
    #addTeacherModal *::-webkit-scrollbar { width: 8px; height: 8px; }
    #addTeacherModal *::-webkit-scrollbar-track { background: transparent; }
    #addTeacherModal *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
    #addTeacherModal *::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
    [data-bs-theme="dark"] #addTeacherModal *::-webkit-scrollbar-thumb { background-color: #475569; }
</style>
@endpush

@section('content')
<div class="container-fluid p-0">
    <!-- Header with Tabs -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <ul class="nav nav-pills" id="classesTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab !== 'teachers' ? 'active' : '' }} fw-bold me-2 px-3 py-2" id="classes-tab" data-bs-toggle="pill" data-bs-target="#classes-panel" type="button" role="tab" style="border-radius: 6px;">
                    <i class="fa fa-chalkboard me-1"></i> Classes & Streams
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link {{ $activeTab === 'teachers' ? 'active' : '' }} fw-bold px-3 py-2" id="teachers-tab" data-bs-toggle="pill" data-bs-target="#teachers-panel" type="button" role="tab" style="border-radius: 6px;">
                    <i class="fa fa-user-plus me-1"></i> Class Teachers Directory
                </button>
            </li>
        </ul>

        <div class="d-flex align-items-center gap-2">
            <button data-bs-toggle="modal" data-bs-target="#addClassModal" class="btn btn-primary btn-sm shadow-sm px-3 fw-semibold">
                <i class="fa fa-plus me-1"></i> Add Class/Stream
            </button>
            <button data-bs-toggle="modal" data-bs-target="#addTeacherModal" class="btn btn-dark btn-sm shadow-sm px-3 fw-semibold">
                <i class="fa fa-user-plus me-1"></i> Add Teacher
            </button>
        </div>
    </div>

    <div class="tab-content" id="classesTabContent">
        <!-- TAB 1: Classes & Streams -->
        <div class="tab-pane fade {{ $activeTab !== 'teachers' ? 'show active' : '' }}" id="classes-panel" role="tabpanel">
            <div class="card shadow-sm border-0">
                <div class="d-flex justify-content-between align-items-center p-3 border-bottom">
                    <div class="d-flex align-items-center">
                        <span class="text-secondary small me-2">Show</span>
                        <form method="GET" action="{{ route('school-classes.index') }}" class="m-0 d-inline-block">
                            <input type="hidden" name="tab" value="classes">
                            <select name="limit" class="form-select form-select-sm" style="width: auto; font-size: 0.8rem;" onchange="this.form.submit()">
                                <option value="5" {{ $limit == 5 ? 'selected' : '' }}>5</option>
                                <option value="10" {{ $limit == 10 ? 'selected' : '' }}>10</option>
                                <option value="20" {{ $limit == 20 ? 'selected' : '' }}>20</option>
                                <option value="50" {{ $limit == 50 ? 'selected' : '' }}>50</option>
                                <option value="80" {{ $limit == 80 ? 'selected' : '' }}>80</option>
                                <option value="100" {{ $limit == 100 ? 'selected' : '' }}>100</option>
                            </select>
                        </form>
                        <span class="text-secondary small ms-2">entries</span>
                    </div>
                </div>
                <div class="card-body table-responsive p-0" style="max-height: 65vh; overflow-y: auto;">
                    <table class="table table-hover mb-0">
                        <thead class="bg-body-tertiary" style="position: sticky; top: 0; z-index: 10;">
                            <tr>
                                <th>Class Level</th>
                                <th>Stream</th>
                                <th>Class Teacher</th>
                                <th>Academic Year</th>
                                <th class="text-end" style="width: 15%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($classes as $c)
                            <tr>
                                <td class="fw-semibold">{{ $c->class_level }}</td>
                                <td>{{ $c->stream }}</td>
                                <td>
                                    @if($c->class_teacher || $c->teacher)
                                        <span class="text-dark fw-semibold">
                                            <i class="fa fa-user-tie text-secondary me-1"></i> {{ $c->class_teacher ?: ($c->teacher->name ?? 'Assigned') }}
                                        </span>
                                    @else
                                        <span class="text-muted fst-italic">
                                            Not Assigned
                                        </span>
                                    @endif
                                </td>
                                <td class="text-muted">{{ $c->academic_year }}</td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-link p-0 text-secondary text-decoration-none me-2" title="Edit" data-bs-toggle="modal" data-bs-target="#editClassModal{{ $c->id }}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <form action="{{ route('school-classes.destroy', $c) }}" method="post" class="d-inline" data-confirm>
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-link p-0 text-secondary text-decoration-none" title="Delete"><i class="fa fa-trash"></i></button>
                                    </form>
                                </td>
                            </tr>

                            <!-- Edit Class Modal -->
                            <div class="modal fade" id="editClassModal{{ $c->id }}" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header bg-warning border-0">
                                            <h6 class="modal-title fw-bold text-dark"><i class="fa fa-edit me-2"></i>Edit Class/Stream</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <form method="post" action="{{ route('school-classes.update', $c) }}">
                                            @csrf @method('PUT')
                                            <div class="modal-body p-4 text-start">
                                                <div class="mb-3">
                                                    <label class="form-label text-secondary fw-bold small">Class Level</label>
                                                    <input name="class_level" class="form-control" value="{{ $c->class_level }}" placeholder="e.g. 1, 2, Form 1, KG1" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label text-secondary fw-bold small">Stream</label>
                                                    <input name="stream" class="form-control" value="{{ $c->stream }}" placeholder="e.g. A, B, No stream">
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label text-secondary fw-bold small">Assign Class Teacher</label>
                                                    <select name="teacher_id" class="form-select">
                                                        <option value="">-- Select Class Teacher (Optional) --</option>
                                                        @foreach($teachers as $t)
                                                            <option value="{{ $t->id }}" {{ ($c->teacher_id == $t->id || $c->class_teacher == $t->name) ? 'selected' : '' }}>
                                                                {{ $t->name }} ({{ $t->email }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label text-secondary fw-bold small">Academic Year</label>
                                                    <input name="academic_year" class="form-control" value="{{ $c->academic_year }}">
                                                </div>
                                            </div>
                                            <div class="modal-footer bg-body-tertiary border-0">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-warning text-dark"><i class="fa fa-save me-2"></i>Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="fa fa-folder-open text-secondary opacity-50 fa-3x mb-3 d-block"></i>
                                    No classes or streams found.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if($classes->hasPages())
                <div class="p-2 border-top bg-body-tertiary">
                    {{ $classes->links() }}
                </div>
                @endif
            </div>
        </div>

        <!-- TAB 2: Class Teachers Directory -->
        <div class="tab-pane fade {{ $activeTab === 'teachers' ? 'show active' : '' }}" id="teachers-panel" role="tabpanel">
            <div class="card border-0 shadow-sm" style="border-radius: 4px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="fw-bold"><i class="fa fa-users me-2 text-primary"></i>Class Teachers List</span>
                        <form method="GET" action="{{ route('school-classes.index') }}" class="d-flex align-items-center">
                            <input type="hidden" name="tab" value="teachers">
                            <input type="text" name="search" class="form-control form-control-sm me-2 shadow-none" placeholder="Search teacher name/email..." value="{{ request('search') }}" style="width: 220px;">
                            <button type="submit" class="btn btn-primary btn-sm px-3">Search</button>
                        </form>
                    </div>

                    <!-- The Data Table -->
                    <div class="table-responsive" style="border: 1px solid #e2e8f0;">
                        <table class="table table-hover mb-0 align-middle" style="font-size: 0.85rem;">
                            <thead style="background-color: #0f172a;">
                                <tr class="text-white text-uppercase" style="font-size: 0.7rem;">
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Teacher</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Contact</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Specialization</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Classes</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Subjects</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Class Teacher Of</th>
                                    <th class="py-3 px-3 border-0" style="background-color: #0f172a; color: #ffffff;">Actions</th>
                                </tr>
                            </thead>
                            <tbody style="border-top: 0;">
                                @forelse($teacherList as $index => $teacher)
                                @php
                                    $username = strtolower(str_replace(' ', '', $teacher->name));
                                    $assignedClass = \App\Models\SchoolClass::where('class_teacher', $teacher->name)->orWhere('teacher_id', $teacher->id)->first();
                                    $assignedSubjects = \App\Models\SubjectClass::where('teacher_id', $teacher->id)->with('subject')->get();
                                @endphp
                                <tr>
                                    <td class="px-3 py-3">
                                        <div class="fw-bold text-dark">{{ $teacher->name }}</div>
                                        <div class="small text-muted" style="font-size: 0.75rem;">{{ $teacher->username ?? $username }}</div>
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="text-secondary mb-1"><i class="fa fa-envelope text-muted me-1"></i>{{ $teacher->email }}</div>
                                    </td>
                                    <td class="px-3 py-3">
                                        @if($assignedClass && $assignedSubjects->isNotEmpty())
                                            <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2 py-1" style="border-radius: 3px;">Class & Subject Teacher</span>
                                        @elseif($assignedClass)
                                            <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-2 py-1" style="border-radius: 3px;">Class Teacher</span>
                                        @else
                                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-2 py-1" style="border-radius: 3px;">Subject Teacher</span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="badge text-white px-2 py-1" style="background-color: #3b82f6; border-radius: 3px;">{{ $assignedClass ? 1 : 0 }}</span>
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="badge text-white px-2 py-1 me-1" style="background-color: #a855f7; border-radius: 3px;">{{ $assignedSubjects->count() }}</span>
                                        @foreach($assignedSubjects as $as)
                                            <span class="badge bg-light text-dark border me-1" style="font-size: 0.7rem;">{{ $as->subject->subject_name ?? '' }} ({{ $as->class_level }})</span>
                                        @endforeach
                                    </td>
                                    <td class="px-3 py-3 text-secondary" style="font-size: 0.75rem;">
                                        @if($assignedClass)
                                            <i class="fa fa-star text-warning me-1"></i> {{ $assignedClass->class_level }} {{ $assignedClass->stream }}
                                        @else
                                            &mdash;
                                        @endif
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-sm btn-light text-primary border shadow-sm" data-bs-toggle="modal" data-bs-target="#editTeacherModal{{ $teacher->id }}" title="Edit">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <form action="{{ route('teachers.destroy', $teacher->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this teacher?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-light text-danger border shadow-sm" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>

                                <!-- Edit Teacher Modal -->
                                <div class="modal fade" id="editTeacherModal{{ $teacher->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <form method="post" action="{{ route('teachers.update', $teacher->id) }}" class="w-100">
                                            @csrf
                                            @method('PUT')
                                            <div class="modal-content border-0 shadow">
                                                <div class="modal-header bg-light">
                                                    <h5 class="modal-title"><i class="fa fa-edit me-2 text-primary"></i>Edit Class Teacher</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body p-4 text-start">
                                                    <div class="mb-3">
                                                        <label class="form-label fw-bold text-secondary small">FULL NAME</label>
                                                        <input type="text" name="name" class="form-control" value="{{ $teacher->name }}" required>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label fw-bold text-secondary small">EMAIL ADDRESS</label>
                                                        <input type="email" name="email" class="form-control" value="{{ $teacher->email }}" required>
                                                    </div>
                                                </div>
                                                <div class="modal-footer bg-light">
                                                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-primary px-4">Save Changes</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4 text-muted">No teachers found.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Class Modal -->
<div class="modal fade" id="addClassModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fa fa-plus me-2"></i>Add Class/Stream</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{{ route('school-classes.store') }}">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-secondary fw-bold small">Class Level</label>
                        <input name="class_level" class="form-control" placeholder="e.g. 1, 2, Form 1, KG1" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary fw-bold small">Stream</label>
                        <input name="stream" class="form-control" placeholder="e.g. A, B, No stream">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary fw-bold small">Assign Class Teacher (Optional)</label>
                        <select name="teacher_id" class="form-select">
                            <option value="">-- Select Class Teacher --</option>
                            @foreach($teachers as $t)
                                <option value="{{ $t->id }}">{{ $t->name }} ({{ $t->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary fw-bold small">Academic Year</label>
                        <input name="academic_year" class="form-control" value="{{ date('Y') }}">
                    </div>
                </div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save me-2"></i>Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Teacher Modal -->
<div class="modal fade" id="addTeacherModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <form method="post" action="{{ route('teachers.store') }}" style="display: contents;">
            @csrf
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-body-tertiary">
                    <h5 class="modal-title"><i class="fa fa-user-plus me-2 text-primary"></i>Add New Class Teacher</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Full Name</label>
                            <select name="name" id="teacherNameSelect" class="form-select" required>
                                <option value="">Select from Staff Directory...</option>
                                @foreach($subjectTeachers as $staff)
                                    <option value="{{ $staff->name }}" data-email="{{ $staff->email ?? \App\Models\User::where('name', $staff->name)->value('email') ?? '' }}" data-phone="{{ $staff->phone ?? '' }}">
                                        {{ $staff->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Email Address</label>
                            <input type="email" name="email" id="teacherEmailInput" class="form-control" value="{{ old('email') }}" required placeholder="john@example.com">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Phone Number</label>
                            <input type="text" name="phone" id="teacherPhoneInput" class="form-control" value="{{ old('phone') }}" placeholder="e.g. +123456789">
                        </div>

                        <div class="col-md-12 mt-4">
                            <label class="form-label fw-bold fs-6 mb-3">Assign Class <span class="text-danger">*</span></label>
                            <div class="card bg-body-tertiary border shadow-sm" style="border-radius: 6px;">
                                <div class="card-body p-3">
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <h6 class="fw-bold text-white mb-3 p-2 rounded text-center shadow-sm" style="font-size: 0.85rem; background-color: #0f172a;"><i class="fa fa-shapes me-2 text-info"></i>Kindergarten</h6>
                                            <div class="d-flex flex-column gap-2" style="max-height: 200px; overflow-y: auto;">
                                                @foreach($classes->filter(fn($c) => stripos($c->class_level, 'kg') === 0) as $class)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="assigned_class_id" id="modal_class_{{ $class->id }}" value="{{ $class->id }}" required>
                                                    <label class="form-check-label" for="modal_class_{{ $class->id }}" style="font-size: 0.85rem;">{{ $class->class_level }} {{ $class->stream }}</label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="col-md-4 border-start border-end px-3">
                                            <h6 class="fw-bold text-white mb-3 p-2 rounded text-center shadow-sm" style="font-size: 0.85rem; background-color: #0f172a;"><i class="fa fa-book-open me-2 text-success"></i>Primary School</h6>
                                            <div class="d-flex flex-column gap-2" style="max-height: 200px; overflow-y: auto;">
                                                @foreach($classes->filter(fn($c) => !Str::startsWith($c->class_level, 'KG') && !Str::startsWith($c->class_level, 'Form')) as $class)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="assigned_class_id" id="modal_class_{{ $class->id }}" value="{{ $class->id }}" required>
                                                    <label class="form-check-label" for="modal_class_{{ $class->id }}" style="font-size: 0.85rem;">{{ $class->class_level }} {{ $class->stream }}</label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="col-md-4 px-3">
                                            <h6 class="fw-bold text-white mb-3 p-2 rounded text-center shadow-sm" style="font-size: 0.85rem; background-color: #0f172a;"><i class="fa fa-graduation-cap me-2 text-warning"></i>Secondary School</h6>
                                            <div class="d-flex flex-column gap-2" style="max-height: 200px; overflow-y: auto;">
                                                @foreach($classes->filter(fn($c) => stripos($c->class_level, 'form') === 0) as $class)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="assigned_class_id" id="modal_class_{{ $class->id }}" value="{{ $class->id }}" required>
                                                    <label class="form-check-label" for="modal_class_{{ $class->id }}" style="font-size: 0.85rem;">{{ $class->class_level }} {{ $class->stream }}</label>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mt-4">
                            <label class="form-label fw-bold fs-6 mb-3">Login Credentials <span class="text-danger">*</span></label>
                            <div class="card bg-body-tertiary border shadow-sm" style="border-radius: 6px;">
                                <div class="card-body p-3">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold small">Username</label>
                                            <input type="text" name="username" id="teacherUsernameInput" class="form-control" placeholder="Teacher's username" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold small">Password</label>
                                            <div class="input-group">
                                                <input type="text" name="password" id="teacherPasswordInput" class="form-control" placeholder="Set a strong password" required>
                                                <button class="btn btn-outline-secondary" type="button" id="generatePasswordBtn" title="Generate Password"><i class="fa fa-magic"></i> Generate</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-body-tertiary">
                    <button type="button" class="btn btn-light border shadow-sm px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fa fa-save me-2"></i>Save Teacher Data</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var teacherSelect = document.getElementById('teacherNameSelect');
        var emailInput = document.getElementById('teacherEmailInput');
        var phoneInput = document.getElementById('teacherPhoneInput');
        var usernameInput = document.getElementById('teacherUsernameInput');

        if (teacherSelect && emailInput && phoneInput) {
            teacherSelect.addEventListener('change', function () {
                var selectedOption = this.options[this.selectedIndex];
                var email = selectedOption.getAttribute('data-email');
                var phone = selectedOption.getAttribute('data-phone');

                if (email) {
                    emailInput.value = email;
                    if (usernameInput) usernameInput.value = email;
                }
                if (phone) phoneInput.value = phone;
            });
        }

        var generatePasswordBtn = document.getElementById('generatePasswordBtn');
        var teacherPasswordInput = document.getElementById('teacherPasswordInput');
        if (generatePasswordBtn && teacherPasswordInput) {
            generatePasswordBtn.addEventListener('click', function() {
                var randomDigits = Math.floor(1000 + Math.random() * 9000);
                var symbols = ['@', '#', '$', '%', '&', '*'];
                var randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
                var generatedPassword = 'Luindo' + randomSymbol + randomDigits;
                teacherPasswordInput.value = generatedPassword;
            });
        }
    });
</script>
@endpush

@endsection