@extends('layout.app')

@section('title', __('home.teacher_management'))

@section('content')
<section class="container pt-5">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.5/dist/bootstrap-table.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>
    
    <div class="row">
        <!-- Sidebar (User info + Account menu) -->
        @include('admin.Include.aside_account')

        <!-- Teacher management -->
        <div class="col-md-8 offset-lg-1 pb-5 mb-2 mb-lg-4 pt-md-5 mt-n3 mt-md-0">
            <div class="notification" id="notification">
                @if (session('error'))
                    <div class="alert alert-danger fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                
                @if (session('success'))
                    <div class="alert alert-success fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                
                @if ($errors->any())
                    <div class="alert alert-danger fade show" role="alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>

            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const notification = document.getElementById('notification');
                    if (notification) {
                        setTimeout(() => {
                            notification.style.display = 'none';
                        }, 5000);
                    }
                });
            </script>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#teacherApplicationsModal">
                    {{ __('home.teacher_applications') }} (<span>{{ $teacherApplications->count() }}</span>)
                </button>
                <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addTeacherModal">
                    <i class='bx bxs-plus-circle'></i> {{ __('home.add_new_teacher') }}
                </button>
            </div>

            <!-- Teacher Applications Modal -->
            <div class="modal fade" id="teacherApplicationsModal" tabindex="-1" aria-labelledby="teacherApplicationsModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="teacherApplicationsModalLabel">{{ __('home.teacher_applications') }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            @if($teacherApplications->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>{{ __('home.name') }}</th>
                                                <th>{{ __('home.phone') }}</th>
                                                <th>{{ __('home.email') }}</th>
                                                <th>{{ __('home.id_passport') }}</th>
                                                                                   <th>{{ __('home.register_date') }}</th>
                                        <th>{{ __('home.teacher_price') }}</th>



                                                <th>{{ __('home.subject') }}</th>
                                                <th>{{ __('home.cv') }}</th>
                                                <th>{{ __('home.actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($teacherApplications as $application)
                                                <tr>
                                                    <td>{{ $application->name }}</td>
                                                    <td>{{ $application->phone }}</td>
                                                    <td>{{ $application->email }}</td>
                                                    <td>{{ $application->id_passport }}</td>
                                                    <td>{{ $application->created_at }}</td>
                                                    <td>{{ $application->lesson_price }}</td>
                                                 <td>
                                                    @php
                                                        $courseIds = json_decode($application->courses, true);
                                                    @endphp
                                                
                                                    @if(is_array($courseIds))
                                                        @foreach($courseIds as $courseId)
                                                            @php
                                                                $course = \App\Models\Course::find($courseId);
                                                            @endphp
                                                            {{ $course ? $course->name : 'Unknown Course' }}<br>
                                                        @endforeach
                                                    @endif
                                                </td>


                                                    <td>
                                                        <a href="{{ asset('public/storage/' . $application->cv_path) }}" target="_blank">{{ __('home.view_cv') }}</a>
                                                    </td>
                                                    <td>
                                                        <form action="{{ route('admin.teacher.application.decision', $application->id) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            <input type="hidden" name="decision" value="accept">
                                                            <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('{{ __('home.confirm_accept') }}')">{{ __('home.accept') }}</button>
                                                        </form>
                                                        <form action="{{ route('admin.teacher.application.decision', $application->id) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            <input type="hidden" name="decision" value="reject">
                                                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('{{ __('home.confirm_reject') }}')">{{ __('home.reject') }}</button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <p>{{ __('home.no_applications') }}</p>
                            @endif
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('home.close') }}</button>
                        </div>
                    </div>
                </div>
            </div>

<!-- Add Teacher Modal -->
<div class="modal fade" id="addTeacherModal" tabindex="-1" role="dialog" aria-labelledby="addTeacherLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addTeacherLabel">{{ __('home.add_teacher') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('teachers.add') }}" enctype="multipart/form-data" id="addTeacherForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ __('home.teacher_name') }}</label>
                        <input type="text" id="name" name="name" class="form-control" required>
                        <div id="nameError" class="text-danger" style="font-size: 0.9em;"></div>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">{{ __('home.email') }}</label>
                        <input type="email" id="email" name="email" class="form-control" required>
                        <div id="emailError" class="text-danger" style="font-size: 0.9em;"></div>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">{{ __('home.phone') }}</label>
                        <input type="text" id="phone" name="phone" class="form-control" required>
                        <div id="phoneError" class="text-danger" style="font-size: 0.9em;"></div>
                    </div>
                    <div class="col-12 mb-4">
    <label for="password" class="form-label fs-base">{{ __('home.password') }}</label>
    <div class="input-group">
        <input type="password" name="password" id="password" class="form-control form-control-lg" required>
        <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password')">
            <i class="fas fa-eye" id="password-icon"></i> <!-- Any icon you prefer -->
        </button>
    </div>
    <div class="invalid-feedback position-absolute start-0 top-100">{{ __('home.enter_password') }}</div>
</div>

<div class="col-12 mb-4">
    <label for="password-confirm" class="form-label fs-base">{{ __('home.confirm_password') }}</label>
    <div class="input-group">
        <input type="password" name="password_confirmation" id="password-confirm" class="form-control form-control-lg" required>
        <button type="button" class="btn btn-outline-secondary" onclick="togglePassword1('password-confirm')">
            <i class="fas fa-eye" id="password-confirm-icon"></i> <!-- Any icon you prefer -->
        </button>
    </div>
    <div class="invalid-feedback position-absolute start-0 top-100">{{ __('home.confirm_password_error') }}</div>
</div>

<script>
    function togglePassword(id) {
        var passwordField = document.getElementById(id);
        var passwordIcon = document.getElementById(id + '-icon');
        
        // Toggle the type attribute
        if (passwordField.type === "password") {
            passwordField.type = "text";
            passwordIcon.classList.remove('fa-eye');
            passwordIcon.classList.add('fa-eye-slash');
        } else {
            passwordField.type = "password";
            passwordIcon.classList.remove('fa-eye-slash');
            passwordIcon.classList.add('fa-eye');
        }
    }
    function togglePassword1(id) {
        var passwordField = document.getElementById(id);
        var passwordIcon = document.getElementById(id + '-icon');
        
        // Toggle the type attribute
        if (passwordField.type === "password") {
            passwordField.type = "text";
            passwordIcon.classList.remove('fa-eye');
            passwordIcon.classList.add('fa-eye-slash');
        } else {
            passwordField.type = "password";
            passwordIcon.classList.remove('fa-eye-slash');
            passwordIcon.classList.add('fa-eye');
        }
    }
</script>
                    <div class="mb-3">
                        <label for="id_passport" class="form-label">{{ __('home.id_passport') }}</label>
                        <input type="text" name="id_passport" id="id_passport" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="coursesTeacherAdd" class="form-label">{{ __('home.subject_you_teach') }}</label>
                        <select name="courses[]" id="coursesTeacherAdd" class="form-control" data-live-search="true" multiple required>
                            @foreach($allcourses as $course)
                                <option value="{{ $course->id }}">{{ $course->name }} - {{ $course->system }} 
                        - grade: {{ $course->grade_range ?? $course->age_range }}</option>
                            @endforeach
                        </select>
                        <div id="coursesError" class="text-danger" style="font-size: 0.9em;"></div>
                    </div>
                    <div class="mb-3">
                        <label for="profile_photo" class="form-label">{{ __('home.profile_photo') }}</label>
                        <input type="file" id="profile_photo" name="profile_photo" class="form-control" accept="image/*" onchange="previewImage(event)">
                        <div class="mt-2">
                            <img id="imagePreview" src="#" alt="Preview" style="max-width: 200px; display: none;" class="img-thumbnail">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('home.close') }}</button>
                    <button type="submit" class="btn btn-primary" onclick="return validateForm()">{{ __('home.add_teacher') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function validateForm() {
        // Reset previous error messages
        document.getElementById("nameError").textContent = '';
        document.getElementById("emailError").textContent = '';
        document.getElementById("phoneError").textContent = '';
        document.getElementById("passwordError").textContent = '';
        document.getElementById("passwordConfirmError").textContent = '';
        document.getElementById("coursesError").textContent = '';

        // Validate each field
        var isValid = true;
        
        var name = document.getElementById("name").value;
        if (name === "") {
            document.getElementById("nameError").textContent = "{{ __('home.enter_name') }}";
            isValid = false;
        }

        var email = document.getElementById("email").value;
        if (email === "") {
            document.getElementById("emailError").textContent = "{{ __('home.enter_valid_email') }}";
            isValid = false;
        }

        var phone = document.getElementById("phone").value;
        if (phone === "") {
            document.getElementById("phoneError").textContent = "{{ __('home.enter_valid_phone') }}";
            isValid = false;
        }

        var password = document.getElementById("password").value;
        if (password === "") {
            document.getElementById("passwordError").textContent = "{{ __('home.enter_password') }}";
            isValid = false;
        }

        var passwordConfirm = document.getElementById("password-confirm").value;
        if (passwordConfirm === "") {
            document.getElementById("passwordConfirmError").textContent = "{{ __('home.confirm_password_error') }}";
            isValid = false;
        } else if (password !== passwordConfirm) {
            document.getElementById("passwordConfirmError").textContent = "{{ __('home.password_mismatch') }}";
            isValid = false;
        }

        var courses = document.getElementById("coursesTeacherAdd").selectedOptions;
        if (courses.length === 0) {
            document.getElementById("coursesError").textContent = "{{ __('home.select_subjects') }}";
            isValid = false;
        }

        return isValid; // Only submit the form if it's valid
    }

    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('imagePreview');
            output.src = reader.result;
            output.style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }
</script>


<!-- External Dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- JavaScript for Modal -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize Choices.js for the courses select
        window.coursesSelectAdd = new Choices('#coursesTeacherAdd', {
            removeItemButton: true,
            searchPlaceholderValue: "{{ __('home.search') }}",
            placeholderValue: "{{ __('home.select_multiple_courses') }}",
            shouldSort: false,
        });

        // Form validation
        const form = document.getElementById('addTeacherForm');
        form.addEventListener('submit', function (e) {
            let hasError = false;

            // Password validation
            const password = document.getElementById('password').value;
            if (password.length < 6) {
                document.getElementById('passwordError').innerText = 'Password must be at least 6 characters long.';
                hasError = true;
            } else {
                document.getElementById('passwordError').innerText = '';
            }

            // Confirm password validation
            const confirmPassword = document.getElementById('password_confirmation').value;
            if (password !== confirmPassword) {
                document.getElementById('confirmPasswordError').innerText = 'Passwords do not match.';
                hasError = true;
            } else {
                document.getElementById('confirmPasswordError').innerText = '';
            }

            // Courses validation
            const courses = window.coursesSelectAdd.getValue(true);
            if (!courses || courses.length === 0) {
                document.getElementById('coursesError').innerText = 'Please select at least one subject.';
                hasError = true;
            } else {
                document.getElementById('coursesError').innerText = '';
            }

            if (hasError) {
                e.preventDefault();
            }
        });
    });

    // Toggle password visibility
    function togglePassword() {
        const passwordField = document.getElementById('password');
        const passwordIcon = document.getElementById('passwordIcon');
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            passwordIcon.classList.remove('bi-eye');
            passwordIcon.classList.add('bi-eye-slash');
        } else {
            passwordField.type = 'password';
            passwordIcon.classList.remove('bi-eye-slash');
            passwordIcon.classList.add('bi-eye');
        }
    }

    // Preview image
    function previewImage(event) {
        const preview = document.getElementById('imagePreview');
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = function (e) {
            preview.style.display = 'block';
            preview.src = e.target.result;
        };
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.style.display = 'none';
            preview.src = '#';
        }
    }
</script>

            <div class="ps-md-3 ps-lg-0 mt-md-2 py-md-4">
                <div class="table-responsive">
<table id="table"
                            data-toggle="table"
                            data-show-export="true"
                            data-export-types='["csv"]' 
                            data-filter-control="true"
                            data-pagination="true"
                            data-toolbar=".toolbar"
                            data-show-footer="true"
                            data-id-table="advancedTable"
                            data-show-toggle="true"
                            data-show-columns="true"
            data-toolbar=".toolbar"
        >
                        <thead>
                            <tr>
                                <th>#</th>
                                <th data-field="name" data-filter-control="input">{{ __('home.teacher_name') }}</th>
                                <th data-field="email" data-filter-control="input">{{ __('home.email') }}</th>
                                <th data-field="subject" data-filter-control="input">{{ __('home.subject') }}</th>
                                <th data-field="lesson_price" data-filter-control="input">{{ __('home.lesson_course_price') }}</th>

                                <th data-field="balance_egp" data-filter-control="input">{{ __('home.balance_egp') }}</th>
                                

                                <th data-field="balance_usd" data-filter-control="input">{{ __('home.balance_usd') }}</th>
                                <th data-field="teacher_specialty" data-filter-control="input">{{ __('home.teacher_specialty') }}</th>
                                <th>{{ __('home.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($teachers as $teacher)
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>{{ optional($teacher)->name }}</td>
                                    <td>{{ optional($teacher->user)->email }}</td>
                                    <td>
                                        @php
                                            // تحميل العلاقة المسماة registeredCourses
                                            $courses = $teacher ? $teacher->registeredCourses : collect();
                                        @endphp
                                    
                                        @if($courses && $courses->isNotEmpty())
                                            @foreach($courses as $course)
                                                {{ $course->name }}<br>
                                            @endforeach
                                        @else
                                            <span>No courses registered.</span>
                                        @endif
                                    </td>
                                    <td>@if ($teacher->lesson_price) {{ optional($teacher)->lesson_price }} @else not found @endif</td>

                                    <td>{{ optional($teacher)->balance_egp }}</td>
                                    <td>{{ optional($teacher)->balance_usd }}</td>
                                    <td>{{ optional($teacher)->subject }}</td>
                                   <td class="d-flex gap-2 flex-wrap">

                                <!-- زر تعديل المدرس -->
                                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal-3" onclick="fillModal({{ json_encode($teacher) }})">
                                    <i class='bx bx-edit-alt'></i>
                                </button>
                            
                                <!-- زر عرض الطلبات السابقة -->
                                <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#requestsModal" onclick="loadRequests({{ $teacher->id }})">
                                    <i class='bx bx-list-ul'></i> {{ __('home.view_requests') }}
                                </button>
                            
                                <!-- زر حذف المدرس -->
                                <form action="{{ route('teachers.delete', $teacher->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('{{ __('home.confirm_delete') }}');">
                                        <i class='bx bx-trash'></i>
                                    </button>
                                </form>
                            
                            </td>


                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>              
            </div>
        </div>
    </div>
</section>
<!-- مودال الطلبات السابقة -->
<div class="modal fade" id="requestsModal" tabindex="-1" aria-labelledby="requestsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="requestsModalLabel">{{ __('home.previous_requests') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('home.student_name') }}</th>
                            <th>{{ __('home.lecture_name') }}</th>
                            <th>{{ __('home.status') }}</th>
                            <th>{{ __('home.date') }}</th>
                        </tr>
                    </thead>
                    <tbody id="requestsTable">
                        <tr>
                            <td colspan="5" class="text-center">{{ __('home.loading') }}...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    function loadRequests(teacherId) {
    var modalBody = document.getElementById("requestsTable");
    modalBody.innerHTML = `<tr><td colspan="5" class="text-center">{{ __('home.loading') }}...</td></tr>`;

    fetch(`/teacher-requests/${teacherId}`)
        .then(response => response.json())
        .then(data => {
            if (data.length > 0) {
                                console.log(data);

                modalBody.innerHTML = data.map((request, index) => `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${request.student_name}</td>
                        <td>${request.lecture_name}</td>
                        <td>${request.action === 'approved' ? `{{ __('home.approved') }}` : `{{ __('home.rejected') }}`}</td>

                        <td>${request.action_time}</td>
                    </tr>
                `).join('');
            } else {
                console.log(data);
                modalBody.innerHTML = `<tr><td colspan="5" class="text-center">{{ __('home.no_requests_found') }}</td></tr>`;
            }
        })
        .catch(error => {
            console.error("Error loading requests:", error);
            modalBody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">{{ __('home.error_loading') }}</td></tr>`;
        });
}

</script>


<!-- Update Teacher Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ __('home.update_teacher') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form class="needs-validation" method="POST" action="" id="updateTeacherForm" enctype="multipart/form-data" novalidate>
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <!-- باقي الحقول -->
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ __('home.teacher_name') }}</label>
                        <input type="text" id="name-update" name="name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">{{ __('home.email') }}</label>
                        <input type="email" id="email-update" name="email" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">{{ __('home.phone') }}</label>
                        <input type="text" id="phone-update" name="phone" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">{{ __('home.password') }}</label>
                        <input type="password" id="password-update" name="password" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label for="id_passport" class="form-label">{{ __('home.id_passport') }}</label>
                        <input type="text" name="id_passport" id="id_passport-update" class="form-control" required>
                    </div>
                    <!-- قائمة اختيار الكورسات -->
                    <div class="mb-3">
                        <label for="coursesTeacher" class="form-label">{{ __('home.subject_you_teach') }}</label>
                        <select name="courses[]" id="coursesTeacher" class="form-control" data-live-search="true" multiple required>
                            @foreach($allcourses as $course)
                                <option value="{{ $course->id }}">{{ $course->name }} - {{ $course->system }} 
                        - grade: {{ $course->grade_range ?? $course->age_range }}</option>
                            @endforeach
                        </select>
                        <small>{{ __('home.select_multiple_courses') }}</small>
                    </div>
                    
                    <script>
                        document.addEventListener('DOMContentLoaded', function(){
                            // استخدام متغير باسم coursesSelectUpdate
                            window.coursesSelectUpdate = new Choices('#coursesTeacher', {
                                removeItemButton: true, 
                                searchPlaceholderValue: "{{ __('home.search') }}",
                                placeholderValue: "{{ __('home.select_multiple_courses') }}",
                                shouldSort: false,
                            });
                        });
                    </script>


                    <div class="mb-3">
                        <label for="profile_photo" class="form-label">{{ __('home.profile_photo') }}</label>
                        <input type="file" id="profile_photo-update" name="profile_photo" class="form-control" onchange="previewUpdateLogo(event)">
                        <img id="updateLogoPreview" src="" style="max-width: 200px; margin-top: 10px; display: none;">
                    </div>
                    <div class="mb-3">
                        <label for="balance_egp" class="form-label">{{ __('home.balance_egp') }}</label>
                        <input type="number" id="balance_egp-update" name="balance_egp" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label for="balance_usd" class="form-label">{{ __('home.balance_usd') }}</label>
                        <input type="number" id="balance_usd-update" name="balance_usd" class="form-control">
                    </div>
                    <script>
                        function previewUpdateLogo(event) {
                            const updateLogoPreview = document.getElementById('updateLogoPreview');
                            const file = event.target.files[0];
                            if (file) {
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    updateLogoPreview.src = e.target.result;
                                    updateLogoPreview.style.display = 'block';
                                }
                                reader.readAsDataURL(file);
                            } else {
                                updateLogoPreview.src = '';
                                updateLogoPreview.style.display = 'none';
                            }
                        }

                        // دالة لملء بيانات النموذج عند فتح المودال
                       function fillModal(teacher) {
    document.getElementById('name-update').value = teacher.name;
    document.getElementById('email-update').value = teacher.user.email;
    document.getElementById('phone-update').value = teacher.phone;
    document.getElementById('id_passport-update').value = teacher.id_passport;
    document.getElementById('password-update').value = '';
    document.getElementById('balance_egp-update').value = teacher.balance_egp ?? 0;
    document.getElementById('balance_usd-update').value = teacher.balance_usd ?? 0;

    const updateLogoPreview = document.getElementById('updateLogoPreview');
    if (teacher.profile_photo) {
        updateLogoPreview.src = '/public/storage/' + teacher.profile_photo;
        updateLogoPreview.style.display = 'block';
    } else {
        updateLogoPreview.src = '';
        updateLogoPreview.style.display = 'none';
    }

    // تحديث رابط الفورم
    const updateForm = document.getElementById('updateTeacherForm');
    updateForm.action = `/teachers/update/${teacher.id}`;

    // تحديث الكورسات باستخدام Choices
    let selectedCourses = [];
    if (teacher.registered_courses && Array.isArray(teacher.registered_courses)) {
        selectedCourses = teacher.registered_courses.map(course => course.id.toString());
    }
    console.log('Selected Courses:', selectedCourses);

    if(window.coursesSelectUpdate) {
        window.coursesSelectUpdate.removeActiveItems();
        window.coursesSelectUpdate.setChoiceByValue(selectedCourses);
    }
}                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('home.close') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('home.update_teacher') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection

<!-- jQuery (required by Bootstrap Table) -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>



<!-- Bootstrap Table Core -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.2/dist/bootstrap-table.min.js"></script>

<!-- Bootstrap Table Extensions -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.2/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.2/dist/extensions/reorder-columns/bootstrap-table-reorder-columns.min.js"></script>

<!-- Optional: jQuery UI and Dragtable for column reordering (if used) -->
<script src="https://cdn.jsdelivr.net/npm/jqueryui@1.11.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/akottr/dragtable@master/jquery.dragtable.js"></script>