@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Show Classes</title>

<link rel="stylesheet" href="assets/css/toggle.css">
@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .udpate_password_class:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .udpate_password_class {
            cursor: pointer;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }

        .nowarp {
            white-space: nowrap;
        }
    </style>

    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:15%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Fee plans removed successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <div class="d-none" id="messageContainer" style="position: absolute; top:15%; margin-left:1%;">

    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-auto container-p-y row">
            <div class="row mb-2">
                <div class="col-md-6 col-12 mb-3">
                    <h4 class="fw-bold py-3 mb-1"><span class="text-muted fw-light">Records / </span>Classes</h4>
                </div>
                <div class="col-md-6 col-12 d-flex flex-row-reverse">
                    <div class="upgrade-btn m-1 text-end">
                        <a href="{{ url('/add-class') }}" class="btn btn-primary text-white">Add New Class</a>
                    </div>
                </div>
            </div>

            <!-- Basic Bootstrap Table -->
            <div class="card pb-5 ms-2">
                <h5 class="mt-4">Class</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead class="text-nowrap;" style="white-space: nowrap;">
                            <tr>
                                <th>S.No</th>
                                <th>Class Rank</th>
                                <th>Class Name</th>
                                <th>Class Mail</th>
                                <th>Teacher Name</th>
                                <th>Alternate_Teacher </th>
                                <th>Package Attached</th>
                                <th class="text-center" style="width: 220px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($classes) && count($classes) != 0)
                                @foreach ($classes as $key => $value)
                                    <tr id="row_{{ $value->id }}">
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $value->rank_class}}</td>
                                        <td>{{ $value->class_name != 'Other' ? ucwords($value->class_name) : ucwords($value->other_class_name) }}
                                        </td>
                                        <td class="text-nowrap;">{{ isset($value->user->email) ? $value->user->email : '' }}
                                        </td>
                                        <td class="text-nowrap;">
                                            @if (isset($value->teacher_ids) && is_array($value->teacher_ids))
                                                @php $teacher_names = []; @endphp
                                                @foreach ($value->teacher_ids as $teacher_id)
                                                    @if (isset($teacher_arr[$teacher_id]))
                                                        @php $teacher_names[] = $teacher_arr[$teacher_id]; @endphp
                                                    @endif
                                                @endforeach
                                                {{ implode(', ', $teacher_names) }}
                                            @else
                                                N.A.
                                            @endif
                                        </td>
                                        <td>{{ $value->alternate_teacher  ?: 'Not assigned' }}</td>

                                        <td>
                                            <a href="javaScript:void(0);">{{ $package_arr[$value->fee_plan_id] }}</a>
                                        </td>


                                        <td class="text-center">
                                            <div class="dropdown">
                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item"
                                                        href="{{ url('/edit-class') . '/' . $value->id }}"><i
                                                            class="bx bx-edit-alt me-1 "></i> Edit</a>

                                                    <a class="dropdown-item "
                                                    href="javaScript:void(0);"
                                                        onclick="ShowModal('{{ $value->id }}')"><i
                                                            class="bx bx-edit-alt me-1"></i>
                                                        Update Password</a>

                                                    @if (!session()->has('impersonated_by'))
                                                        @canImpersonate($guard = null)
                                                        <a class="dropdown-item"
                                                            href="{{ route('impersonate', $value->login_id) }}"><i
                                                                class="bx bx-edit-alt me-1"></i>Login In Class
                                                        </a>
                                                        @endCanImpersonate
                                                    @endif

                                                </div>
                                            </div>
                                        </td>

                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td><span>{{ 'No record found' }}</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="myModal" class="modal p-3">
            <!-- Modal content -->
            <div class="modal-content p-3" style="width: 40%;left: 50%;transform: translate(-50%, 50%);">
                <div><span onclick="closeModal()" class="close text-end"
                        style="cursor: pointer;font-size: 25px">&times;</span></div>
                <h4 class="text-center">Update Password</h4>
                <div class="mb-3">
                    <label class="form-label" for="basic-icon-default-fullname">Password</label>
                    <div class="input-group">
                        <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                        <input class="form-control" id="update_password" name="update_password" type="text"
                            placeholder="Password" autocomplete="off" pattern="\d*" />
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="confirm_password">Confirm Password</label>
                    <div class="input-group">
                        <span id="basic-icon-default-education" class="input-group-text"><i class="bx bx-user"></i></span>
                        <input class="form-control" id="confirm_password" name="confirm_password" type="password"
                            placeholder="Confirm Password" autocomplete="off" required />
                    </div>
                </div>
                <div id="password_error" class="text-danger" style="display: none;">
                    Passwords do not match.
                </div>
                <div class="row">
                    <div class="col-6 text-white text-end"
                        style="display: flex;justify-content: end;width: 100%;gap: 20px;">
                        <div class="loaderDiv" id="loader" style="display: none">
                            <!-- Your loader HTML or spinner goes here -->
                            <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                        </div>
                        <a class="btn btn-info" id="update_password_id" href="javascript:void(0)"
                            onclick="UpdatePassword()">Update Password</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
    </div>
@endsection

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var class_id;

    function ShowModal(id) {
        class_id = id;
        var modal = document.getElementById("myModal");
        modal.style.display = "block";
        $('#update_password').val('');
        $('#confirm_password').val('');

        // Hide any previous error messages
        $('#password_error').hide();
    }

    function closeModal() {
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
        review_id = 0;
        $('.text-danger').html('');
        $('#update_password').val('');


    }
    var request_send = false;


    function UpdatePassword() {
        if (request_send) {
            return;
        }

        $('#loader').show();
        $('.text-danger').html('');
        request_send = true;

        var update_password = $('#update_password').val();
        var confirm_password = $('#confirm_password').val();
        var password_error = $('#password_error');

        if (update_password.trim() !== '') {
            if (confirm_password.trim() === '') {
                $('#loader').hide();
                request_send = false;
                password_error.text('The confirm password field is required.').show();
                return;
            }
            if (update_password !== confirm_password) {
                $('#loader').hide();
                request_send = false;
                password_error.text('Passwords do not match.').show();
                return;
            }
        }
        password_error.hide();

        var formData = new FormData();
        document.getElementById('update_password_id').disabled = true;
        var update_password = $('#update_password').val();
        formData.append('id', class_id);
        formData.append('update_password', update_password);

        $.ajax({
            type: "post",
            url: "{{ url('/update-class-password') }}",
            contentType: 'application/json',
            cache: false,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,

            success: function(data) {
                $('#loader').hide();
                request_send = false;
                document.getElementById('update_password_id').disabled = false;
                setTimeout(() => {
                    if ($.isEmptyObject(data.error)) {
                        alert(data.success);
                        var modal = document.getElementById("myModal");
                        modal.style.display = "none";
                        $('#update_password').val('');
                    } else {
                        // printErrorMsg(data.error);
                        $.each(data.error, function(field_name, errors) {
                            // Clear existing error spans for the field before adding new ones
                            $(document).find('#' + field_name).closest('div').find(
                                    'span.text-danger')
                                .remove();

                            // Create a new <ul> element for the error messages
                            var errorList = '<ul class="text-strong text-danger">';

                            // Iterate over each error message and add to the <ul> as <li>
                            $.each(errors, function(index, error) {
                                errorList += '<li>' + error + '</li>';
                            });

                            errorList += '</ul>';

                            // Append the error list after the closest <div> element
                            $(document).find('#' + field_name).closest('div').after(
                                errorList);
                        });


                    }
                }, 500);
            },
            error: function(xhr, status, error) {
                $('#loader').hide();
                request_send = false;
                document.getElementById('update_password_id').disabled = false;
                alert('An error occurred. Please try again.');
            }
        });

    }
</script>