<%- include('../partials/custom-script') %>
<%- include('../common-scripts/locations') %>
<script src="/backend/js/intl-tel/intlTelInput.min.js"></script>
<script>
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const hasUserStatusPermission = `<%= userInfo.permissions.includes('system_user_status') %>`;
    const table = $('.usersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/users' %>`,
            type: 'GET',
            dataType: 'json',
            data: function(d) {
                const selectedStatus = $('#statusFilter').val();
                const roleValue = $('#roleData').val();
                d.roleId = roleValue;
                d.status = selectedStatus;
            }
        },
        columns: [
            { 
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'first_name', 
                render: function(data, type, row) {
                    return data ? row.full_name : ' ';
                }
            },
            {
                data: 'username',
                render: function(data) {
                    return data ? data : `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'email',
                render: function(data) {
                    return data ? data : `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'phone_number',
                render: function(data) {
                    return data ? data : `<%= trans.global.not_available %>`;
                }
            },
            { 
                data: 'role',
                render: function(data, type, row) {
                    return data ? data.charAt(0).toUpperCase() + data.slice(1) : 'None';
                }
            },
            { 
                data: 'status',
                render: function(data, type, row) {
                    let statusClass = '';
                    let statusText = '';
                    let addNewClass = '';

                    switch (data) {
                        case 1:
                            statusClass = 'bg-success';
                            statusText = 'Active';
                            addNewClass = 'user-status cursor-pointer active';
                            break;
                        case 2:
                            statusClass = 'bg-warning';
                            statusText = 'Suspended';
                            addNewClass = 'user-status cursor-pointer suspended';
                            break;
                        case 0:
                        default:
                            statusClass = 'bg-secondary';
                            statusText = 'Pending';
                            addNewClass = 'pending';
                            break;
                    }

                    if (hasUserStatusPermission) {
                        return `<div class="${addNewClass}" data-id="${row.id}" data-status="${data}">
                                    <span class="badge ${statusClass}">${statusText}</span>
                                </div>`;
                    } else {
                        return `<div class="" data-id="${row.id}" data-status="${data}">
                                    <span class="badge ${statusClass}">${statusText}</span>
                                </div>`;
                    }
                }
            },
            { 
                data: 'createdAt',
                render: function(data) {
                    if (!data) return `<%= trans.global.not_available %>`;
                    return new Date(data).toLocaleDateString(`${lang}`);
                }
            },
            { 
                data: 'last_working_date',
                render: function(data) {
                    if (!data) return `<%= trans.global.not_available %>`;
                    return new Date(data).toLocaleDateString(`${lang}`);
                }
            },
            {
                data: 'id',
                render: function(data, type, row) {
                    let html = '<div class="d-flex gap-1">';
                    <% if(userInfo.permissions.includes('view_system_user')){ %>
                        html += `<a href="/admin/user/${data}/view" class="btn btn-sm btn-info btn-view viewUser" title="<%= trans.global.view %>">
                            <i class="fas fa-eye"></i>
                        </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('edit_system_user')){ %>
                        html += `<a href="/admin/user/${data}/edit" class="btn btn-sm btn-primary btn-edit editUser" title="<%= trans.global.edit %>">
                            <i class="fas fa-edit"></i>
                        </a>`;
                    <% } %>
                    <% if(userInfo.permissions.includes('delete_system_user')){ %>
                        html += `<a href="javascript:;" class="btn btn-sm btn-danger btn-delete" title="<%= trans.global.delete %>" data-id="${data}" onclick="confirmAction('delete', '/admin/user/${data}/delete', '/admin/users', 'DELETE')">
                            <i class="fas fa-trash"></i>
                        </a>`;
                    <% } %>
                    
                    if (row.status !== 2) {
                        <% if(userInfo.permissions.includes('resend_system_user_credential')) { %>
                            html += `<a href="javascript:;" class="btn btn-sm btn-warning btnResendMail" title="<%= trans.cruds.USER.fields.resend_mail %>" data-id="${data}">
                                <i class="fas fa-envelope"></i>
                            </a>`;
                        <% } %>

                        <% if(userInfo.permissions.includes('assign_system_user_last_working_days')) { %>
                            html += `<a href="javascript:;" class="btn btn-sm btn-info btnAssignWorkingDay" title="<%= trans.cruds.USER.fields.assign_system_user_last_working_days %>" data-id="${data}">
                                <i class="fas fa-calendar-day"></i>
                            </a>`;
                        <% } %>
                    }
                    html += `</div>`;
                    return html;
                },
                orderable: false
            }
        ],
        responsive: true,
        lengthMenu: [10, 25, 50, 100],
        stateSave: false,
        order: [[7, 'desc']],
        language: languageConfig,
    });

    $(document).on("change", "#statusFilter", function() {
        table.draw();
    });

    $(document).on("change", "#roleData", function() {
        table.draw();
    });

    if(document.querySelector("#phone_number")){
        const input = document.querySelector("#phone_number");
        const iti = window.intlTelInput(input, {
            initialCountry: "sa",
            separateDialCode: true,
            nationalMode: false,
            autoHideDialCode: false,
            formatOnDisplay: false,
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });

        const existingDialCode = `<%= typeof user !== 'undefined' && user.country_code ? '+' + user.country_code : '+966' %>`;
        function setCountryByDialCode(dialCode) {
            const allCountries = window.intlTelInputGlobals.getCountryData();
            const matchedCountry = allCountries.find(c => '+' + c.dialCode === dialCode);
            if (matchedCountry) {
                iti.setCountry(matchedCountry.iso2);
            }
        }

        setCountryByDialCode(existingDialCode);
        function updateCountryCode() {
            const dialCode = iti.getSelectedCountryData().dialCode;
            $('#country_code').val(dialCode);
        }

        updateCountryCode();
        input.addEventListener('countrychange', updateCountryCode);
    }

    /* Form Validate For Save & Update */
    $("#userData").validate({
        rules: {
            first_name: {
                required: true,
                minlength: 3
            },
            middle_name: {
                required: false,
                minlength: 1
            },
            last_name: {
                required: true,
                minlength: 1
            },
            username: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true
            },
            phone_number: {
                required: false,
                // validatePhoneIntl: true
            },
            role:{
                required:true
            },
            password: {
                required: $(document).find("#userid").val() ? false : true,
                minlength: 6,
                maxlength: 15,
            },
            password_confirmation: {
                required: $(document).find("#userid").val() ? false : true,
                equalTo: '#password'
            },
            city:{
                required:false
            },
            state:{
                required:false
            },
            country:{
                required:true
            },
            postal_code :{
                required: true,
                pattern: /^[A-Za-z0-9]{3,8}$/
            },
        },
        messages: {
            first_name: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.first_name,
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.USER.fields.first_name,
                    min: 3
                }) %>`,
            },
            middle_name: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.middle_name,
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.USER.fields.middle_name,
                    min: 1
                }) %>`,
            },
            last_name: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.last_name,
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.USER.fields.last_name,
                    min: 1
                }) %>`,
            },
            username: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.username,
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.USER.fields.username,
                    min: 3
                }) %>`,
            },
            email: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.email,
                }) %>`,
                email: `<%= t(trans.validation.client_side_validate.valid_message, {
                    attribute: trans.cruds.USER.fields.email
                }) %>`,
            },
            role:{
                required:`<%= t(trans.validation.client_side_validate.select_required_message, {
                    attribute: trans.cruds.USER.fields.role,
                }) %>`,
            },
            password: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.password,
                }) %>`,
                minlength: `<%= t(trans.validation.client_side_validate.min_length, {
                    attribute: trans.cruds.USER.fields.password,
                    min: 6
                }) %>`,
                maxlength: `<%= t(trans.validation.client_side_validate.max_length, {
                    attribute: trans.cruds.USER.fields.password,
                    min: 15
                }) %>`,
            },
            password_confirmation: {
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.USER.fields.password_confirmation,
                }) %>`,
                equalTo: `<%= t(trans.validation.client_side_validate.equal_to_message, {
                    attribute: trans.cruds.USER.fields.password_confirmation
                }) %>`,
            },
            city:{
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ADDRESS.fields.city,
                }) %>`,
            },
            state:{
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ADDRESS.fields.city,
                }) %>`,
            },
            country:{
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ADDRESS.fields.country,
                }) %>`,
            },
            postal_code :{
                required: `<%= t(trans.validation.client_side_validate.required_message, {
                    attribute: trans.cruds.ADDRESS.fields.postal_code,
                }) %>`,
                pattern: `<%= t(trans.validation.client_side_validate.valid_message, {
                    attribute: trans.cruds.ADDRESS.fields.postal_code
                }) %>`
            },
        },
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');

            if ((element.attr("name") === "role") || (element.attr("name") === "country") || (element.attr("name") === "state") || (element.attr("name") === "city")) {
                error.insertAfter(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            $(".page-loader").removeClass('d-none');
            const formData = new FormData(form);
            const url = $(form).attr("action");        
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                processData: false,
                contentType: false, 
                success: function(response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        showNotificationPopup(response.message, 'success', response.redirectUrl);
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function(xhr, status, error) {
                    $(".invalid-feedback").remove();
                    $(".page-loader").addClass('d-none');

                    const errors = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : {};
                    const message = xhr.responseJSON && xhr?.responseJSON?.message ? xhr?.responseJSON?.message : '';

                    if (errors && Object.keys(errors).length > 0) {
                        displayErrorMessage(errors);
                    } else if (message) {
                        showNotificationPopup(message, 'error');
                    } else {
                        showNotificationPopup("An unexpected error occurred.", 'error');
                    }
                }
            });
        }
    });


    function displayErrorMessage(errors) {
        for (const field in errors) {
            let fieldElement = $(`input[name="${field}"], select[name="${field}"], textarea[name="${field}"]`);
            const fieldError = errors[field];
            const errorSpan = $("<span>").addClass("error invalid-feedback").text(fieldError);
            if(field == 'role' || field == 'country' || field == 'state' || field == 'city') {
                fieldElement.next().after(errorSpan);
            } else {
                fieldElement.after(errorSpan);
            }
            fieldElement.addClass('is-invalid');
        }
    }

    jQuery.validator.addMethod("pattern", function (value, element, param) {
        if (value === '') return true;
        return param.test(value);
    }, `<%= t(trans.validation.invalid_format, {
        attribute: trans.cruds.USER.fields.phone_number
    }) %>`);

    $.validator.addMethod("validatePhoneIntl", function (value, element) {
        return value.trim() === "" || iti.isValidNumber();
    }, `<%= t(trans.validation.client_side_validate.valid_message, {
        attribute: trans.cruds.PROFILE.fields.phone_number
    }) %>`);

    $(document).on('click', '.user-status', function(e) {
        e.preventDefault();
        $(".page-loader").removeClass('d-none');

        const userId = $(this).data('id');
        const currentStatus = $(this).data('status');

        let newStatus;
        if (currentStatus === 1) {
            newStatus = 'inactive';
        } else if (currentStatus === 2 || currentStatus === 0) {
            newStatus = 'active';
        }

        if (userId && newStatus !== undefined) {
            $.ajax({
                url: `/admin/user/${userId}/update-status`,
                method: 'POST',
                data: { status: newStatus },
                success: function(response) {
                    $(".page-loader").addClass('d-none');
                    if (response.status) {
                        $('.usersTable').DataTable().ajax.reload(null, false);
                        showNotificationPopup(response.message, 'success');
                    } else {
                        showNotificationPopup(response.message, 'error');
                    }
                },
                error: function(xhr) {
                    $(".page-loader").addClass('d-none');
                    showNotificationPopup(`<%= t(trans.messages.oops_something_went_wrong, {
                        attribute: trans.cruds.MODULE.SYSTEM_USER,
                    }) %>`, 'error');
                }
            });
        } else {
            $(".page-loader").addClass('d-none');
            showNotificationPopup(`<%= t(trans.messages.not_found, {
                attribute: trans.cruds.MODULE.SYSTEM_USER,
            }) %>`, 'error');
        }
    });



    $(document).on('click', '.btnResendMail', function(e) {
        e.preventDefault();
        $(".page-loader").removeClass('d-none');
        const userId = $(this).data('id');
        if(userId){
            Swal.fire({
                title: `<%= trans.messages.sweetalert.send_credential.title %>`,
                text: `<%= trans.messages.sweetalert.send_credential.message %>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `<%= trans.messages.sweetalert.confirm_button_text %>`,
                cancelButtonText: `<%= trans.messages.sweetalert.cancel_button_text %>`,
                reverseButtons: true,
                allowOutsideClick: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/admin/user/${userId}/resend-mail`,
                        method: 'POST',
                        success: function(response) {
                            $(".page-loader").addClass('d-none');
                            if (response.status) {
                                showNotificationPopup(response.message, 'success');
                            } else {
                                showNotificationPopup(response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            $(".page-loader").addClass('d-none');
                            showNotificationPopup(response.message, 'error');
                        }
                    });
                }
                $(".page-loader").addClass('d-none');
            });
        } else {
            $(".page-loader").addClass('d-none');
            showNotificationPopup(`<%= t(trans.messages.not_found, {
                    attribute: trans.cruds.MODULE.SYSTEM_USER,
                }) %>`, 'error');
        }
    });

    /* 
    ** Assign Working Days
    */
    $(document).on('click', '.btnAssignWorkingDay', function(e) {
        e.preventDefault();
        var dataId = $(this).data('id');

        if (dataId) {
            Swal.fire({
                title: `<%= trans.cruds.USER.fields.last_working_date %>`,
                html: `
                    <label for="workingDate" class="swal2-label">
                        <%= trans.cruds.USER.fields.select_date %>
                    </label>
                    <input type="text" id="workingDate" class="swal2-input" placeholder="<%= trans.cruds.USER.fields.last_working_date %>" readonly>
                `,
                didOpen: () => {
                    flatpickr("#workingDate", {
                        dateFormat: "Y-m-d",
                        defaultDate: new Date(),
                        minDate: "today",
                        allowInput: true
                    });
                },
                showCancelButton: true,
                confirmButtonText: `<%= trans.global.save %>`,
                cancelButtonText: `<%= trans.global.cancel %>`,
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    const workingDate = document.getElementById('workingDate').value;
                    if (workingDate) {
                        $(".page-loader").removeClass('d-none');
                        return fetch(`/admin/user/${dataId}/assign-working-day`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({ workingDate }),
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status) {
                                showNotificationPopup(data.message, 'success');
                            } else {
                                showNotificationPopup(data.message, 'error');
                            }
                        })
                        .catch(error => {
                            showNotificationPopup(error.message, 'error');
                        });
                    } else {
                        Swal.showValidationMessage(
                            `<%= t(trans.validation.any_required, { attribute: (trans.cruds?.USER?.fields?.last_working_date || 'Last Working Date') }) %>`
                        );
                    }
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).finally(() => {
                $(".page-loader").addClass('d-none');
            });
        } else {
            showNotificationPopup(`<%= t(trans.messages.not_found, { attribute: trans.cruds.MODULE.SYSTEM_USER }) %>`, 'error');
        }
    });


});
</script>
<%- include('../common-scripts/password') %>
<%- include('../common-scripts/file-preview') %>