@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

        <style>
            .select2-container--open .select2-dropdown {
                z-index: 99999;
                /* Set the desired z-index value */
            }

            .select2-selection__choice {
                background-color: #0080FF !important;
                /* Change the background color */
                color: #fff;
                /* Change the text color */
            }
        </style>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('teachers_list') }}">Teachers</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Teachers List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="createTeacher">Add Teachers</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Teachers Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="teacher_table" class="table-bordered category-table display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Phone</th>
                                        <th>Cnic</th>
                                        <th>Address</th>
                                        <th>Courses</th>
                                        <th style="width: 150px">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Teacher Modal -->
    <div class="modal fade" id="createTeacherModal" tabindex="-1" role="dialog" aria-labelledby="createTeacherModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createTeacherModalLabel">Add Teacher</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createTeacherForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" name="email" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="number" class="form-control" name="phone" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" name="password" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="cnic">CNIC</label>
                            <input type="number" class="form-control" name="cnic" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="address">Address</label>
                            <input type="text" class="form-control" name="address" placeholder="1234 Main St" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="course_ids">Courses</label>
                            <select name="course_ids[]" id="add_course" class="select2 form-control" multiple required>
                                @foreach ($courses as $course)
                                    <option value="{{ $course['id'] }}">{{ $course['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Update Teacher Modal -->
    <div class="modal fade" id="updateTeacherModal" tabindex="-1" role="dialog" aria-labelledby="updateTeacherModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateTeacherModalLabel">Update Teacher</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateTeacherForm">
                    <div class="modal-body">
                        <input type="hidden" id="teacher_id" name="teacher_id">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name_update" name="name" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email_update" name="email" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="number" class="form-control" id="phone_update" name="phone" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" name="password" id="update_password" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="cnic">CNIC</label>
                            <input type="number" class="form-control" id="cnic_update" name="cnic" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="address">Address</label>
                            <input type="text" class="form-control" id="address_update" name="address"
                                placeholder="1234 Main St">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="courses">Courses</label>
                            <select name="course_ids[]" id="course_update" class="select2 form-control" multiple
                                required>
                                @foreach ($courses as $course)
                                    <option value="{{ $course['id'] }}">{{ $course['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




    @push('scripts')
        <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(".select2").select2({
                width: '100%',
            
            });
            $(document).ready(function() {
                var table = $('#teacher_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('teachers_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'cnic',
                            name: 'cnic'
                        },
                        {
                            data: 'address',
                            name: 'address'
                        },
                        {
                            data: 'courses',
                            name: 'courses'
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                        <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editTeacher"><i class="feather icon-edit"></i></button>
                        <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteTeacher"><i class="feather icon-trash-2"></i></button>
                    `;
                            }
                        }
                    ]
                });

                $('#createTeacher').on('click', function() {
                    $('#createTeacherModal').modal('show');
                    $('#course_update').val([]).trigger('change');
                });
                $('#createTeacherForm').on('submit', function(e) {
                    e.preventDefault();

                    // Disable the submit button to prevent multiple submissions
                    let $submitButton = $('#createTeacherForm button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_teacher_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#createTeacherModal').modal('hide');
                                $('#teacher_table').DataTable().ajax.reload();
                                Swal.fire('Added!', 'The Teacher has been added.', 'success');
                                $('#createTeacherForm')[0].reset();
                                $('#add_course').val(['']).trigger('change');

                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                // Construct the error message
                                let errorMessage = response.message ||
                                    'An unexpected error occurred.';
                                if (response.errors && Object.keys(response.errors).length > 0) {
                                    // Remove previous error messages
                                    $('.is-invalid').removeClass('is-invalid');
                                    $('.invalid-feedback').remove();
                                    // Display new errors
                                    $.each(response.errors, function(field, messages) {
                                        let input = $('[name="' + field + '"]');
                                        input.addClass('is-invalid');
                                        let feedback = '<div class="invalid-feedback">' +
                                            messages.join('<br>') + '</div>';
                                        input.after(feedback);
                                    });
                                }
                                Swal.fire('Error!', errorMessage, 'error');
                            }
                        },
                        error: function(xhr) {
                            let message = 'Something went wrong.';
                            if (xhr.status === 422) { // Unprocessable Entity (Validation errors)
                                let errors = xhr.responseJSON.errors;
                                // Remove previous error messages
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                                // Display new errors
                                $.each(errors, function(field, messages) {
                                    let input = $('[name="' + field + '"]');
                                    input.addClass('is-invalid');
                                    let feedback = '<div class="invalid-feedback">' +
                                        messages.join('<br>') + '</div>';
                                    input.after(feedback);
                                });
                                message = 'Please correct the errors in the form.';
                            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                                Swal.fire('Error!', message, 'error');
                            } else {
                                Swal.fire('Error!', message, 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button after the request completes
                            $submitButton.prop('disabled', false);
                        }
                    });
                });





                $('body').on('click', '#deleteTeacher', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ route('delete_teacher', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Teacher has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'Teacher is assigned to Trial.',
                                        'error');
                                }
                            });
                        }
                    });
                });

                $('body').on('click', '#editTeacher', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_teacher', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateTeacherModal').modal('hide');
                            } else {
                                var teacher = response.data;
                                $('#updateTeacherModal').modal('show');
                                $('#teacher_id').val(teacher.data.id);
                                $('#name_update').val(teacher.data.name);
                                $('#email_update').val(teacher.data.email);
                                $('#phone_update').val(teacher.data.phone);
                                $('#cnic_update').val(teacher.data.cnic);
                                $('#address_update').val(teacher.data.address);
                                $('#update_password').val('');
                                $('#course_update').val(null).trigger(
                                    'change'); // Clear selections and update the display

                                // Reset Select2 field
                                $('#course_update').val(null).trigger(
                                'change'); // Clear selections and update display

                                // Set selected courses
                                var selectedCourses = teacher
                                .courses; // Array of selected course names
                                if (selectedCourses.length) {
                                    // Find corresponding options and set them as selected
                                    $('#course_update option').each(function() {
                                        var option = $(this);
                                        if (selectedCourses.includes(option.text())) {
                                            // Set the selected values based on course names
                                            $('#course_update').val(function() {
                                                var currentValues = $(this).val() ||
                                                    [];
                                                return [...currentValues, option
                                                    .val()
                                                ];
                                            }).trigger('change'); // Refresh Select2
                                        }
                                    });
                                }
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateTeacherForm').on('submit', function(e) {
                    e.preventDefault();

                    // Disable the submit button to prevent multiple submissions
                    let $submitButton = $('#updateTeacherForm button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('update_teacher_form', ['id' => ':id']) }}".replace(':id', $(
                            '#teacher_id').val()),
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#updateTeacherModal').modal('hide');
                                $('#teacher_table').DataTable().ajax.reload();
                                Swal.fire('Updated!', response.message, 'success');
                                $('#updateTeacherForm')[0].reset();
                                // Remove all error messages
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                // Construct the error message
                                let errorMessage = response.message ||
                                    'An unexpected error occurred.';
                                if (response.errors && Object.keys(response.errors).length > 0) {
                                    // Remove previous error messages
                                    $('.is-invalid').removeClass('is-invalid');
                                    $('.invalid-feedback').remove();
                                    // Display new errors
                                    $.each(response.errors, function(field, messages) {
                                        let input = $('[name="' + field + '"]');
                                        input.addClass('is-invalid');
                                        let feedback = '<div class="invalid-feedback">' +
                                            messages.join('<br>') + '</div>';
                                        input.after(feedback);
                                    });
                                }
                                Swal.fire('Error!', errorMessage, 'error');
                            }
                        },
                        error: function(xhr) {
                            let message = 'Something went wrong.';
                            if (xhr.status === 422) { // Unprocessable Entity (Validation errors)
                                let errors = xhr.responseJSON.errors;
                                // Remove previous error messages
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                                // Display new errors
                                $.each(errors, function(field, messages) {
                                    let input = $('[name="' + field + '"]');
                                    input.addClass('is-invalid');
                                    let feedback = '<div class="invalid-feedback">' +
                                        messages.join('<br>') + '</div>';
                                    input.after(feedback);
                                });
                                message = 'Please correct the errors in the form.';
                            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                                Swal.fire('Error!', message, 'error');
                            } else {
                                Swal.fire('Error!', message, 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button after the request completes
                            $submitButton.prop('disabled', false);
                        }
                    });
                });


            });
        </script>
    @endpush
@endsection