{% extends 'root/base.html' %}
{% load static %}

{% block title %} Employee Management (Admin Tool){% endblock %}
{% block maincontent %}


<div class="container-fluid">
    <div class="mep-form_wrapper">
        <div class="d-flex justify-content-between">
            <h3>Employee Management</h3>
            <div>
                 <button class="btn btn-outline-primary"  title="Extract" onclick="location.href='{% url 'eProc_Admin_Tool:extract_employee_template' %}'"type="button">
                    <i class="fas fa-download"></i> download template
                </button>
                <button class="btn btn-outline-primary"  title="Extract" onclick="location.href='{% url 'eProc_Basic_Settings:extract_employee_data' %}'"type="button">
                    <i class="fas fa-download"></i> extract
                </button>
                <button class="btn btn-outline-primary modal_upload" id="id_upload_redirect_data"  title="Upload Data" value="employee_upload"  onclick="onclick_upload_button();" type="button">
                    <i class="fas fa-cloud-upload-alt"></i> upload data
                </button>
                <button class="btn btn-primary" onclick="window.open(href = '{% url 'eProc_Admin_Tool:user_details_page' None %}')"><i class="fas fa-user-plus"></i> Create Employee</button>
            </div>
        </div>
        <hr>
        <div id="error_msg" class="alert alert-danger display-none" role="alert"><span id="error_message_search"></span></div>
        <div class="card card-shadow-1">
            <div class="card-body">
                <form method="POST" id="search_form" name="search_form" >
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md">
                            <label for="">Username</label>
                            <input type="text" class="form-control check_for_search mandatory_fields" id="username" name="username" value="" >
                            <span id="err_username" class="error_message" hidden></span>
                        </div>
                        <div class="col-md">
                            <label for="">First Name</label>
                            <input type="text" class="form-control check_for_search mandatory_fields" id="first_name" name="first_name" >
                            <span id="err_firstname" class="error_message" hidden></span>
                        </div>
                        <div class="col-md">
                            <label for="">Last Name</label>
                            <input type="text" class="form-control check_for_search mandatory_fields" id="last_name" name='last_name' >
                            <span id="err_lastname" class="error_message" hidden></span>
                        </div>
                        <div class="col-auto">
                            <button id="id_search" class="button-search-users btn btn-primary" type="submit"
                                title="Please click to get the search details!" onclick="reload()"><i class="fas fa-search"></i> search
                            </button>
                        </div>
                    </div>
                    <hr>
                    <div class="elements-space-between" data-toggle="collapse" data-target="#employee_adv_search">
                        <span class="h5">Advanced Search</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="employee_adv_search" class="advanced-search-collapse collapse">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Email</label>
                                <input type="text" class="form-control mandatory_fields" id="email" name="email">
                                <span id="err_email" class="error_message" hidden></span>
                            </div>
                            <div class="col-md-3">
                                <label for="">User Type</label>
                                <select type="text" class="form-control" id="user_type" name="user_type">
                                    <option value="All">All</option>
                                    {% for usertype in dropdown_usertype_values %}
                                        <option value="{{usertype.field_type_id}}">{{usertype.field_type_desc}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="">Employee Number</label>
                                <input type="text" class="form-control check_for_search mandatory_fields" id="employee_id" name="employee_id">
                                <span id="err_empnum" class="error_message" hidden></span>
                            </div>
                            <div class="col-md">
                                <div class="form-check">
                                    <input class="form-check-input checkbox-size" type="checkbox" name="user_locked" id="user_locked_id">
                                    <label class="form-check-label" for="">
                                        User Locked
                                    </label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-check">
                                    <input class="form-check-input checkbox-size" type="checkbox"  name="pwd_locked" id="pwd_locked_id">
                                    <label class="form-check-label" for="">
                                        Password Locked
                                    </label>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="form-check">
                                    <input class="form-check-input checkbox-size" type="checkbox" name="is_active" id="is_active_id">
                                    <label class="form-check-label" for="">
                                        Inactive
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="elements-space-between">
                        <input type="reset" value="Clear filters" class="ip-form-clear-filters">
                        <div>
                            <span class="badge help-text-badge help-text-star-search"></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {% if count == 0 %}
        <div class="search_result_count_card card" id="result_id">
            <div class="card-body">
                <h6 class="card-title">No Results Found</h6>
            </div>
        </div>
        {% endif %}
        {% if  employee_results %}
        <div style="margin-top:25px" id="error_msg_div" class="alert alert-success" hidden><span id="success_msg_id"></span></div>

        <div class="card mt-5">
            <div>
                 <button class="btn btn-primary  btn-sm mt-2 ml-2"  title="Delete" id="id_delete_emp" value="emp_delete" data-toggle="modal" data-target="#id_delete_confirm_popup" style="display:none;" >
                    <i class="fa fa-trash"></i> delete
                </button>
                <div>
                    <table id="user_tab" class="table table_sort_filter_basic">
                        <thead class="thead-light">
                        <tr>
                        <th id="hg_select_checkbox"> <div id="id_check_all"> <input type="checkbox" id="selectAll" onclick="checkAll(this)"></div></th>
                        <th> employee no </th>
                        <th> username </th>
                        <th> first name </th>
                        <th> last name </th>
                        <th> email </th>
                        <th> User Status</th>
                        <th> User Lock Status</th>
                        <th> User password Lock status</th>
                        <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="user_tab_tbody">
                        {% for results in employee_results %}
                        <tr id="tr_{{results.email}}">
                            <td class="class_select_checkbox"><input type="checkbox" class="emp_checkbox" onclick="valueChanged();"></td>
                            <td><a href="{% url 'eProc_Admin_Tool:user_details_page' results.encrypted_email %}" id="{{results.employee_id}}" class="deletepop" target="_blank">{{results.employee_id}}</a></td>
                            <td>{{results.username}}</td>
                            <td>{{results.first_name}}</td>
                            <td>{{results.last_name}}</td>
                            <td>{{results.email}}</td>
                            <td>
                                {% if results.is_active %}
                                <label>Active</label>
                                {% else %}
                                <label>InActive</label>
                                {% endif %}
                            </td>
                            <td>
                                <label class="switch">
                                    <label class="toggle-control">
                                        {% if results.user_locked %}
                                        <input type="checkbox" id="{{results.employee_id}}-LOCKED" class="toggle-block" checked>
                                        <span class="control"></span>
                                        {% else %}
                                        <input type="checkbox" id="{{results.employee_id}}-UNLOCKED" class="toggle-block">
                                        <span class="control"></span>
                                        {% endif %}
<!--                                        <div class="toggle-controller default-success"></div>-->
                                    </label>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <label class="toggle-control">
                                        {% if results.pwd_locked %}
                                        <input type="checkbox" id="{{results.employee_id}}-PWDLOCKED" class="toggle-block" checked>
                                         <span class="control"></span>
                                        {% else %}
                                        <input type="checkbox" id="{{results.employee_id}}-PWDUNLOCKED" class="toggle-block">
                                         <span class="control"></span>
                                        {% endif %}
<!--                                        <div class="toggle-controller default-success"></div>-->
                                    </label>
                                </label>
                            </td>
                            <td class="item-action-icon-section">
                                <span title="Delete employee" onclick="get_user_detail_to_delete(this.id)" id="{{results.email}}">
                                    <i class="material-icons item-action-icons">delete_outline</i>
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!--modal popup for user delete-->
<div class="modal fade" id="confirm_delete_pop_up" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Please Confirm</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                You Are About To Delete  "<span id="form_id_del"></span>". Are You Sure?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="delete_user()">Delete</button>
            </div>
        </div>
    </div>
</div>

<!--delete confirmation popup-->
<div class="modal fade" id="id_delete_confirm_popup">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" >
                <h5 class="modal-title">Please Confirm</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are You Sure You Want To Delete?.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                <button type="button" onclick="main_table_delete()" class="btn btn-primary"><i class="fas fa-check"></i> yes </button>
            </div>
        </div>
    </div>
</div>
<!--end of delete confirmation popup-->
 <!--modal popup for Add,copy,update and upload-->
    <!-- The Modal -->
    <div class="modal fade" id="myModal" style="overflow:auto;">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="update-countries-title"> Employee Upload</h5>
                    <button type="button" class="close remove_upload_data" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="modal-body scrollbox">

                    <div id="id_del_add_button" class="mb-4">
                        <button class="btn btn-primary" type="button" onclick="add_popup_row()">
                            <i class="fa fa-plus"></i> Add New Row
                        </button>
                        <button class="btn btn-outline-danger" onclick="application_settings_delete_Row('id_userpopup_table')">
                            <i class="fa fa-trash"></i> delete
                        </button>
                    </div>
                    <div id="id_check_success_messages" class="alert alert-success check_success_message" hidden></div>
                    <div id="id_check_error_messages" class="alert alert-danger check_error_messages" hidden></div>
                    <div id="id_check_special_character_messages" class="alert alert-danger check_special_character_messages" hidden>
                        <p id="id_error_msg_email" ></p>
                        <p id="id_error_msg_username" ></p>
                        <p id="id_error_msg_first_name" ></p>
                        <p id="id_error_msg_last_name" ></p>
                        <p id="id_error_msg_phonenumber" ></p>
                        <p id="id_error_msg_empid" ></p>
                    </div>
                    <div id="error_msg_id" class="alert alert-danger display-none" role="alert"><span id="error_message"></span></div>
                    <div id="id_warning_msg_id" class="alert alert-warning display-none" role="alert"></div>
                    <div id="id_info_msg_id" class="alert alert-primary display-none" role="alert"></div>

                    <table class="class_popup_table table table-bordered mt-2" id="id_userpopup_table" >
                        <thead>

                        <tr>
                            <th id="header_select">Select</th>
                            <th>User Name</th>
                            <th>Employee Number</th>
                            <th>User Type</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Currency</th>
                        </tr>


                        <tr>
                            <th>Language</th>
                            <th>Time Zone</th>
                            <th>E-mail</th>
                            <th>Mobile</th>
                            <th>Date Format</th>
                            <th>Decimal Notation</th>
                            <th>Del Indicator</th>
                        </tr>

                         </thead>

                        <tbody id="id_userpopup_tbody">

                        </tbody>
                    </table>

                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary remove_upload_data" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                    <button id="id_delete_duplicate" class="btn btn-primary" style="display:none;" type="button" onclick="delete_duplicate()"><i class="fa fa-trash"></i> delete duplicates</button>
                    <button id="id_check_data" style="display:none;" class="btn btn-primary" type="button" onclick="check_data()"><i class="fas fa-check"></i> check</button>
                    <button class="btn btn-primary" id="save_user_basic_info" onclick="save_user_basic_info()"><i class="fas fa-save"></i> save</button>
                </div>
            </div>
        </div>
    </div>

    <!--end of modal popup for Add,copy,update and upload-->
    <div>
        {% if messages %}
        {% for message in messages %}
        {% if message.tags == 'success' %}
        <div style="color: green; ">{{ message }}</div>
        {% endif %}
        {% if message.tags == 'error' %}
        <div style="color: red; ">{{ message }}</div>
        {% endif %}
        {% if message.tags == 'info' %}
        <div style="color: Black bold"><b>{{ message }}</b> </div>
        {% endif %}
        {% endfor %}
        {% endif %}
    </div>


<!--modal popup to upload the csv file-->
    <div class="modal fade" id="id_data_upload">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Data Upload</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div>
                        <p id="id_error_msg_upload" class="alert alert-danger error" hidden></p>
                    </div>
                    <div><label> Upload a file</label></div>
                    <input type="file" id="id_file_data_upload" name="file">
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                    <button id="popup_save"  class="btn btn-primary" onclick="valid_popup()"><i class="fas fa-save"></i> Upload File</button>
                </div>
            </div>
        </div>
    </div>
    <!--end of modal popup to upload the csv file-->

    <!--save confirmation popup-->
    <div class="modal fade" id="id_save_confirm_popup">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Please Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to save?.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                    <button type="button" id="id_popup_save" onclick="popup_save_data()" class="btn btn-primary"><i class="fas fa-save"></i> yes</button>
                </div>
            </div>
        </div>
    </div>
    <!--end of save confirmation popup-->

<!--change confirmation popup-->
    <div class="modal fade" id="id_confirm_popup" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" >
                    <h5 class="modal-title">Please Confirm</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are You Sure You Want To Change?.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal" onclick="toggle()"><i class="fas fa-times"></i> cancel</button>
                    <button type="button" onclick="lock_active_change()" class="btn btn-primary"><i class="fas fa-check"></i> yes </button>
                </div>
            </div>
        </div>
    </div>
    <!--end of delete confirmation popup-->

<!--      valid confirm popup-->
    <div class="modal fade" id="valid_upload">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content">
                 <div class="modal-header">
                    <h5 class="modal-title">Information</h5>
                 </div>
                <div class="modal-body">
                    <p>Only valid records will be uploaded to backend</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-primary" data-dismiss="modal"><i class="fas fa-times"></i> cancel</button>
                    <button type="button" class="btn btn-primary"  onclick="onclick_display_csv_data()" > Ok</button>
                </div>
            </div>
        </div>
    </div>
    <!--   end of valid confirm popup-->


    {{ employee_results|json_script:"employee_results" }}
    {{ count|json_script:"count" }}
    {{ employee_results_onload|json_script:"employee_results_onload" }}
    {{ dropdown_user|json_script:"dropdown_user" }}
    {{ dropdown_user_date_format|json_script:"dropdown_user_date_format" }}
    {{ dropdown_decimal_list|json_script:"dropdown_decimal_list" }}
     {{ dropdown_language|json_script:"dropdown_language" }}
    {{ dropdown_currency_id|json_script:"dropdown_currency_id" }}
    {{ dropdown_time_zones|json_script:"dropdown_time_zones" }}
    {{ dropdown_messages|json_script:"dropdown_messages" }}


<script src="{% static 'scripts/user-search.js' %}"></script>

<script>
var emp_data_array = {}
var Tablename = uiConstants["CONST_TABLENAME_EMPLOYEE"]
var appname = uiConstants["CONST_APPNAME03"]
var db_header_data = uiConstants["CONST_HEADER_DATA_EMP_DETAIL"]
var data_delete = '';
var rendered_emp_data = JSON.parse(document.getElementById('employee_results').textContent);
var emp_data_onload = JSON.parse(document.getElementById('employee_results_onload').textContent);
var count = JSON.parse(document.getElementById('count').textContent);
var rendered_dropdown_user = JSON.parse(document.getElementById('dropdown_user').textContent);
var rendered_dropdown_user_date_format = JSON.parse(document.getElementById('dropdown_user_date_format').textContent);
var rendered_dropdown_decimal_list = JSON.parse(document.getElementById('dropdown_decimal_list').textContent);
var rendered_dropdown_time_zones = JSON.parse(document.getElementById('dropdown_time_zones').textContent);
var rendered_dropdown_messages = JSON.parse(document.getElementById('dropdown_messages').textContent);
var rendered_dropdown_currency_id = JSON.parse(document.getElementById('dropdown_currency_id').textContent);
var rendered_dropdown_language = JSON.parse(document.getElementById('dropdown_language').textContent);
var messages_list = {{dropdown_messages|safe}};
var form_method = '{{form_method|safe}}';
var employee_data = new Array();
var emp_data;

$(document).ready(function() {
    $('#id_userpopup_table').DataTable(); // Replace 'id_userpopup_table' with your table's ID or selector
    if(form_method == 'GET'){
    document.getElementById("username").value = '';
    document.getElementById("first_name").value = '';
    document.getElementById("last_name").value = '';
     document.getElementById("email").value = '';
    document.getElementById("employee_id").value = '';
    document.getElementById("user_type").value = 'All';
    $('#user_locked_id').prop('checked', false);
    $('#pwd_locked_id').prop('checked', false);
    $('#is_active_id').prop('checked', false);
    }
});
$('form').on('reset',function (e) {
    e.preventDefault();
    localStorage.clear();
    $(".error_message").prop("hidden", true);
    $("#result_id").prop("hidden", true);
     $("input[type=text], input[type=checkbox]").val('');
    document.getElementById("is_active_id").value = "on";
    $('#search_form')[0].submit();
    localStorage.setItem("user_type", "All");
    document.getElementById("user_type").value = "All";
});
     var currency_opt = ''
     var language_opt = ''
     var timezone_opt = ''
    function dropdown_values(){
        var rendered_dropdown_currency_id = {{ dropdown_currency_id| safe}};
        currency_opt = ''
        $.each(rendered_dropdown_currency_id, function (i, value) {
            currency_opt += '<option value="' + value.currency_id + '"> ' + value.description + ' </option>'
        });
        var rendered_dropdown_language = {{ dropdown_language| safe}};
         language_opt = ''
        $.each(rendered_dropdown_language, function (i, value) {
            language_opt += '<option value="' + value.language_id + '"> ' + value.description + ' </option>'
        });
        var rendered_dropdown_time_zones = {{ dropdown_time_zones| safe}};
         timezone_opt = ''
        $.each(rendered_dropdown_time_zones, function (i, value) {
            timezone_opt += '<option value="' + value.time_zone + '"> ' + value.description + ' </option>'
        });
        rendered_dropdown_decimal_list = {{ dropdown_decimal_list | safe }};
        decimal_opt = ''
        $.each(rendered_dropdown_decimal_list, function (i, value) {
            decimal_opt += '<option> ' + rendered_dropdown_decimal_list[i] + ' </option>'
        });
        rendered_dropdown_user_date_format = {{ dropdown_user_date_format | safe }}
        date_format_opt = ''
        $.each(rendered_dropdown_user_date_format, function (i, value) {
            date_format_opt += '<option> ' + rendered_dropdown_user_date_format[i] + ' </option>'
        })
         rendered_dropdown_user = {{ dropdown_user | safe }}
        user_opt = ''
        $.each(rendered_dropdown_user, function (i, value) {
            user_opt += '<option> ' + rendered_dropdown_user[i] + ' </option>'
        })
    }

function reload()
{
    localStorage.setItem("username", document.getElementById("username").value);
    localStorage.setItem("first_name", document.getElementById("first_name").value);
    localStorage.setItem("last_name", document.getElementById("last_name").value);
    localStorage.setItem("email", document.getElementById("email").value);
    localStorage.setItem("user_type", document.getElementById("user_type").value);
    localStorage.setItem("employee_id", document.getElementById("employee_id").value);
    localStorage.setItem("user_locked", document.getElementById("user_locked_id").checked);
    localStorage.setItem("pwd_locked", document.getElementById("pwd_locked_id").checked);
    localStorage.setItem("is_active", document.getElementById("is_active_id").checked);
    OpenLoaderPopup();

}

$('form').on('submit',function (e) {
        OpenLoaderPopup();
        var valid = true;
        var temp = document.getElementsByClassName('mandatory_fields');
        for (var i = 0; i<temp.length; i++) {
            if(!(temp[i].value == '') || !(temp[i].value == null)){
                data = temp[i].value;
                var count = data.split('**').length - 1;
                if((count >= 1) || (data == '*')){
                    var display_id = temp[i].nextElementSibling.id;
                    $('#'+display_id).prop('hidden', false);
                    document.getElementById(temp[i].nextElementSibling.id).innerHTML = "Please enter valid value";
                    valid = false;
                }
            }
        }
        if(!valid){
            localStorage.setItem("error_flag", 1);
            e.preventDefault();
            $("#err_username").prop("hidden", false);
                setTimeout(function() {
                       CloseLoaderPopup();
         }, 500);
        }
    });

    $("body").on("keypress keyup blur change", ".mandatory_fields", function (event) {
         var temp = document.getElementsByClassName('mandatory_fields');
        var get_value = event.currentTarget.value;
        var count = get_value.split('**').length - 1;
        for (var i = 0; i<temp.length; i++) {
            var count = get_value.split('**').length - 1;
            if((count>=1)|| (get_value == '*'))
            {
            var display_id = event.currentTarget.nextElementSibling.id;
            $('#'+display_id).prop('hidden', false);
            document.getElementById(display_id).style.display = "block";
            event.currentTarget.nextElementSibling.innerHTML = "Please enter valid value";
            }
            else{
<!--                $(".error_message").prop("hidden", true);-->
<!--                document.getElementById(event.currentTarget.nextElementSibling.id).style.display = "true";-->
                  var display_id = event.currentTarget.nextElementSibling.id;
                $('#'+display_id).prop('hidden', true);
                document.getElementById(event.currentTarget.nextElementSibling.id).style.display = "none";
            }
        }
    });

// Function to delete User
function delete_user() {
        var user_info = [];
        user_info.push(data_delete);
        $('#confirm_delete_pop_up').modal('hide');
        data = {'data': user_info}
        OpenLoaderPopup();
    $.ajax({
        type: 'POST',
        url: "{% url 'eProc_Admin_Tool:delete_user' %}",
        data:JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Response) {
            display_emp_data(Response.employee_results);
            $('#success_msg_id').text(Response.success_message)
            $("#error_msg_div").prop("hidden",false)
            message_display_time();
            CloseLoaderPopup();
        }
    });
}
function get_user_detail_to_delete(element) {
        data_delete = element;
        document.getElementById("form_id_del").innerHTML = data_delete;
        $('#confirm_delete_pop_up').modal('show')
        $(".emp_checkbox").prop("checked", false);
    }
function valueChanged() {
    if ($('.emp_checkbox').is(":checked")) {
        $("#id_delete_emp").show();
    } else {
        $("#id_delete_emp").hide();
    }
}
//onclick of select all checkbox
function checkAll(ele) {
    if (ele.checked) {
        $('.emp_checkbox').each(function() {
            var disable_check = this.disabled
            if(disable_check == false){
                this.checked = true;
                $("#id_delete_emp").show();
            }
        });
    }
    else{
        $('.emp_checkbox').each(function() {
            var disable_check = this.disabled
            if(disable_check == false){
                this.checked = false;
                $("#id_delete_emp").hide();
            }
        });
    }
}
function display_emp_data(emp_data){
    var emp_detail_html = '';
    $('#user_tab').DataTable().destroy();
    $("#user_tab_tbody").empty();
    $.each(emp_data, function (i, emp) {
        checkbox_input = '<input type="checkbox" class="emp_checkbox" onclick="valueChanged();" >'
        var lock_id, pwd_lock;
        if(emp.user_locked){
            lock_id = '<input type="checkbox" id="'+emp.employee_id.concat("-LOCKED")+'" class="toggle-block dummy_emp_block" checked><span class="control"></span>';
            }
        else {
            lock_id = '<input type="checkbox" id="'+emp.employee_id.concat("-UNLOCKED")+'" class="toggle-block dummy_emp_block"> <span class="control"></span>';
        }
        if(emp.pwd_locked){
            pwd_lock = '<input type="checkbox" id="'+emp.employee_id.concat("-PWDLOCKED")+'" class="toggle-block" checked><span class="control"></span>';
        }
        else {
            pwd_lock = '<input type="checkbox" id="'+emp.employee_id.concat("-PWDUNLOCKED")+'" class="toggle-block"><span class="control"></span>';
            }
        emp_detail_html += '<tr id="tr_'+emp.email+'"><td class="class_select_checkbox">'+checkbox_input+'</td> '+
        '<td><a href="#" id="'+emp.encrypted_email+'" class="deletepop dummy_emp_detail"  target="_blank">'+emp.employee_id+'</a></td>'+
         '<td>'+ emp.username +'</td>'+
         '<td>'+ emp.first_name +'</td>'+
         '<td>'+ emp.last_name +'</td>'+
         '<td>'+ emp.email +'</td>'+
         '<td>' + emp.is_active + '</td>'+
         '<td><label class="switch"><label class="toggle-control">' + lock_id + '</label></label></td>'+
         '<td><label class="switch"><label class="toggle-control">' + pwd_lock + '</label></label></td>'+
         '<td class="item-action-icon-section"><span title="Delete employee" onclick="get_user_detail_to_delete(this.id)" id="'+ emp.email +'">'+
          '<i class="material-icons item-action-icons">delete_outline</i></span></td>'+
         '</tr>';
            });
    $("#user_tab_tbody").append(emp_detail_html);
    table_sort_filter('user_tab');
}
$(document).on('click', '.dummy_emp_detail', function () {
        var url = "{% url 'eProc_Admin_Tool:user_details_page' 123 %}";
        var id = $(this).attr('id');
        var href_link = url.replace('123', id)
        window.open(href_link,'_blank');
    });
    $(document).on('click', '.dummy_emp_block', function () {
        var id = this.id
        block_id = id
        data.employee_id = id.split('-')[0];
        $('#id_confirm_popup').modal('show');
    });

function main_table_delete(){
    main_table_emp_checked = [];
    $("#user_tab TBODY TR").each(function () {
        var row = $(this);
        var abc = row.find("TD").eq(5).html();
        var country_arr_obj ={};
        var check_status = row.find("TD").eq(0).find('input[type="checkbox"]').is(':checked');
        if(check_status){
            main_table_emp_checked.push(abc);
        }
    });
    $('#id_delete_confirm_popup').modal('hide');
    data = {'data':main_table_emp_checked}
    OpenLoaderPopup();
    $.ajax({
        type: 'POST',
        url: "{% url 'eProc_Admin_Tool:delete_user' %}",
        data:JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (Response) {
            display_emp_data(Response.employee_results);
            $('#success_msg_id').text(Response.success_message)
            $("#error_msg_div").prop("hidden",false)
            message_display_time();
            CloseLoaderPopup();
        }
    });
}


    //**********************************************
    function update_check_message(messages) {
        $.each(messages, function (i, message) {
            $("#id_check_success_messages").append('<p>' + message + '</p>')
        });
        $("#id_check_success_messages").prop("hidden",false)
    }
//onclick of data Upload copy data to modal pop-up

function onclick_display_csv_data() {
        $("#valid_upload").modal('hide');
        $("#id_delete_duplicate").hide()
        $("#id_check_success_messages").empty();
        $("#id_check_error_messages").empty();
        $("#id_check_success_messages").prop("hidden", true);
        $("#id_check_error_messages").prop("hidden", true);
        $("#id_check_special_character_messages").prop("hidden", true);
        $("#error_msg_id").css("display", "none")
        $('#id_userpopup_table').DataTable().destroy();
        formdata = new FormData();
        attached_file = $('#id_file_data_upload').prop('files')[0]
        if(attached_file == undefined){
           display_file_select_error(); // Display error message if no file is selected
        }
        else {
            file_extension = (attached_file.name).split(".")[1]
            file_extension = file_extension.toUpperCase();
            if(file_extension == 'CSV'){
            formdata.append("file_attach", attached_file);
            formdata.append("Tablename",Tablename);
            formdata.append("appname",appname);
            db_header_data = db_header_data
            formdata.append("db_header_data",db_header_data);
            $('#id_data_upload').modal('hide');
            $('#id_userpopup_tbody').empty();
            OpenLoaderPopup();
            $.ajax({
                type: 'POST',
                url: "{% url 'eProc_Basic_Settings:data_upload' %}",
                data: formdata,
                contentType: "application/json; charset=utf-8",
                success: function(response) {
                    if(response.error_message) {
                        $("#id_error_msg_upload").prop("hidden",false)
                        document.getElementById("id_error_msg_upload").innerHTML = response.error_message;
                        document.getElementById("id_error_msg_upload").style.color = "Red";
                        $('#id_data_upload').modal('show');
                    }
                    else{
                        emp_data_array = response.valid_data_list;
                        var edit_basic_data = '';
                        var del_ind = '';
                        var dropdown_values = [];
                        console.log(response.valid_data_list);
                        $("#id_userpopup_tbody").empty();
                            $.each(response.valid_data_list, function (i, value) {
                                var currency_id_value = value.currency_id
                                var language_id_value = value.language_id
                                var time_zone_value = value.time_zone
                                var decimal_notation_value = value.decimal_notation
                                var date_format_value = value.date_format
                                var user_type_value = value.user_type
                                dropdown_values.push([currency_id_value, language_id_value,time_zone_value,user_type_value,decimal_notation_value,date_format_value])
                            del_ind = '<td>' + value.del_ind + '</td>'
                            if (value.del_ind == 1) {
                                del_ind=' <input type="checkbox" value="' + value.del_ind + '" checked>'
                            }
                            else {
                                del_ind= '<input type="checkbox" value="' + value.del_ind + '" required>'
                            }

                            var currency_opt = ''
                            var currency_list = ''
                            var currency_id_list = ''
                            $.each(rendered_dropdown_currency_id, function (i, item) {
                                 if( value.currency_id == item.currency_id){
                                      currency_opt += '<option value="' + item.currency_id + '">' + item.description + '</option>';
                                 }else{
                                       currency_list += '<option value="' + item.currency_id + '">' + item.description + '</option>';
                                 }
                                currency_id_list = currency_opt + currency_list
                            });

                            var language_opt = ''
                            var language_list = ''
                            var language_id_list = ''
                            $.each(rendered_dropdown_language, function (i, item) {
                                 if( value.language_id == item.language_id){
                                    language_opt += '<option value="' + item.language_id + '">' + item.description + '</option>';
                                 }else{
                                    language_list += '<option value="' + item.language_id + '">' + item.description + '</option>';
                                 }
                                language_id_list = language_opt + language_list
                            });


                            var timezone_opt = ''
                            var time_zone_list = '';
                            var time_zone_id_list = '';
                            $.each(rendered_dropdown_time_zones, function (i, item) {
                                 if( value.time_zone == item.time_zone){
                                    timezone_opt  += '<option value="' + item.time_zone + '">' + item.description + '</option>';
                                 }else{
                                    time_zone_list += '<option value="' + item.time_zone + '">' + item.description + '</option>';
                                 }
                                time_zone_id_list = timezone_opt + time_zone_list
                            });


                             var date_format_opt = ''
                             var date_format_list = '';
                             var date_format_id_list = '';
                            $.each(rendered_dropdown_user_date_format, function (i, item) {
                                 if( value.date_format == rendered_dropdown_user_date_format[i]){
                                   date_format_opt += '<option value="' + rendered_dropdown_user_date_format[i] + '">' +  rendered_dropdown_user_date_format[i] + '</option>';
                                 }else{
                                   date_format_list += '<option value="' + rendered_dropdown_user_date_format[i] + '">' + rendered_dropdown_user_date_format[i] + '</option>';
                                 }
                                    date_format_id_list = date_format_opt + date_format_list
                            })

                            var decimal_opt = '';
                            var decimal_opt_list = '';
                            var decimal_opt_id_list = '';
                            $.each(rendered_dropdown_decimal_list, function (i, item) {
                                 if( value.decimal_notation == rendered_dropdown_decimal_list[i] ){
                                    decimal_opt += '<option value="' + rendered_dropdown_decimal_list[i] + '">' + rendered_dropdown_decimal_list[i] + '</option>';
                                 }else{
                                    decimal_opt_list += '<option value="' + rendered_dropdown_decimal_list[i] + '">' + rendered_dropdown_decimal_list[i] + '</option>';
                                 }
                                decimal_opt_id_list = decimal_opt + decimal_opt_list
                            });


                             var dropdown_opt = ''
                             var dropdown_list_list = '';
                             var dropdown_list_id_list = '';
                            $.each(rendered_dropdown_user, function (i, item) {
                                 if( value.user_type == rendered_dropdown_user[i] ){
                                   dropdown_opt += '<option value="' + rendered_dropdown_user[i] + '">' + rendered_dropdown_user[i] + '</option>';
                                 }else{
                                   dropdown_list_list += '<option value="' + rendered_dropdown_user[i] + '">' + rendered_dropdown_user[i] + '</option>';
                                 }
                                    dropdown_list_id_list = dropdown_opt + dropdown_list_list
                            })

                        edit_basic_data += '<tr><tr><td class="class_select_checkbox"><input type="checkbox" required></td>' +
                        '<td><input class="form-control" type="text" value="' + value.username + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="text" value="' + value.employee_id + '" maxlength="100" required></td>' +
                        '<td><select class="form-control" type="text"><option value="' + value.user_type + '"' + dropdown_list_id_list + '>' + value.user_type + '</option></select></td>' +
                        '<td><input class="form-control" type="text" value="' + value.first_name + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="text" value="' + value.last_name + '" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" required></td>' +
                        '<td><select class="form-control" type="text"><option value="' + value.currency_id + '"' + currency_id_list + '>' + value.currency_id + '</option></select></td></tr>' +
                        '<tr><td><select class="form-control" type="text"><option value="' + value.language_id + '"' + language_id_list + '>' + value.language_id + '</option></select></td>' +
                        '<td><select class="form-control" type="text"><option value="' + value.time_zone + '"' + time_zone_id_list + '>' + value.time_zone + '</option></select></td>' +
                        '<td><input class="form-control" type="email" value="' + value.email + '" maxlength="40" onkeypress="return /[a-z]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="tel" value="' + value.phone_num + '" maxlength="100" required></td>' +
                        '<td><select class="form-control"><option value="' + value.date_format + '"' + date_format_id_list + '>' + value.date_format + '</option></select></td>' +
                        '<td><select class="form-control"><option value="' + value.decimal_notation + '"' + decimal_opt_id_list + '>' + value.decimal_notation + '</option></select></td>' +
                        '<td>' + del_ind + '</td></tr></tr>';
                        });
                        $('#id_userpopup_tbody').append(edit_basic_data);
<!--                         var i =0;-->
<!--                            $("#id_userpopup_table TBODY TR").each(function() {-->
<!--                                var row = $(this);-->
<!--                                var date_format_id_list = dropdown_values[i][0]-->
<!--                                var decimal_opt_id_list = dropdown_values[i][1]-->
<!--                                var dropdown_list_id_list = dropdown_values[i][2]-->
<!--                                var currency_id_list = dropdown_values[i][3]-->
<!--                                var language_id_list = dropdown_values[i][4]-->
<!--                                var time_zone_id_list = dropdown_values[i][5]-->

<!--                                $(row.find("TD").eq(6).find("select option[value="+date_format_id_list+"]")).attr('selected','selected');-->
<!--                                $(row.find("TD").eq(8).find("select option[value="+decimal_opt_id_list+"]")).attr('selected','selected');-->
<!--                                $(row.find("TD").eq(9).find("select option[value="+dropdown_list_id_list+"]")).attr('selected','selected');-->
<!--                                $(row.find("TD").eq(10).find("select option[value="+currency_id_list+"]")).attr('selected','selected');-->
<!--                                $(row.find("TD").eq(11).find("select option[value="+language_id_list+"]")).attr('selected','selected');-->
<!--                                $(row.find("TD").eq(12).find("select option[value="+time_zone_id_list+"]")).attr('selected','selected');-->
<!--                                i++;-->
<!--                            });-->
                        $( "#id_del_ind_checkbox").prop( "hidden", false );
                        $( "#header_select").prop( "hidden", false );

                        $( ".class_del_checkbox").prop( "hidden", false );
                        $('#myModal').modal('show');
                        $('#id_data_upload').modal('hide');
                        document.getElementById("id_del_add_button").style.display = "block";
                        $('#id_check_data').modal('show');
                        $("#id_check_data").prop("hidden", false);
                        $("#save_user_basic_info").prop("hidden", true);
                    }
                     CloseLoaderPopup();
                },
                cache: false,
                processData: false,
                contentType: false,
            });
            }
            else{
                 display_file_select_error(); // Display error message for file selection except .csv
            }
        }
}

function display_error_message(error_message){
        $('#error_message').text(error_message);
        document.getElementById("error_message").style.color = "Red";
        $("#error_msg_id").css("display", "block")
        $('#id_save_confirm_popup').modal('hide');
        $('#custproddescModal').modal('show');
    }
 //onclick of cancel empty the popup table body and error messages
    $(".remove_upload_data").click(() => {
        $("#id_error_msg").html("");
        $("#id_userpopup_tbody").empty();
        $("#id_error_msg").empty();
        $('#myModal').modal('hide');
        $("#id_error_msg").prop("hidden", true);
        $("#id_error_msg_email").prop("hidden", true);
        $("#id_error_msg_username").prop("hidden", true);
        $("#id_error_msg_first_name").prop("hidden", true);
        $("#id_error_msg_last_name").prop("hidden", true);
        $("#id_error_msg_phonenumber").prop("hidden", true);
        $("#id_error_msg_empid").prop("hidden", true);
        $("#id_check_error_messages").prop("hidden", true);
        $("#id_check_success_messages").prop("hidden", true);
        $("#id_check_special_character_messages").prop("hidden", true)
        $("#id_check_data").prop("hidden", true);
        $('#id_userpopup_table').DataTable().destroy();
    });

//check function restricting special char and diaplay the data count of csv file
function check_data() {
    $("#id_delete_duplicate").hide()
    $("#id_check_success_messages").empty()
    $("#id_check_error_messages").empty()
    $("#id_check_success_messages").prop("hidden", true)
    $("#id_check_error_messages").prop("hidden", true)
    $("#id_check_special_character_messages").prop("hidden", true)
    $('#id_userpopup_table').DataTable().destroy();
    document.getElementById("id_error_msg_email").innerHTML = "";
    document.getElementById("id_error_msg_username").innerHTML = "";
    document.getElementById("id_error_msg_first_name").innerHTML = "";
    document.getElementById("id_error_msg_last_name").innerHTML = "";
    document.getElementById("id_error_msg_phonenumber").innerHTML = "";
    document.getElementById("id_error_msg_empid").innerHTML = "";
    count = 0;
    var emp_array = new Array
    var DB_array = new Array
    var user_list = new Array
    var user_code_check = new Array
    del_ind = ''
    $("#id_userpopup_table TBODY TR").each(function() {
        $('#id_userpopup_table').DataTable().destroy();
        $("#id_check_data").prop("hidden", false);
        var row = $(this);
         user_dic = {}
        //*************** reading data from the pop-up ***************

        user_dic.username = row.find("TD").eq(1).find('input[type="text"]').val();
        user_dic.employee_id = row.find("TD").eq(2).find('input[type="text"]').val();
        user_dic.user_type = row.find("TD").eq(3).find('select').val();
        user_dic.first_name = row.find("TD").eq(4).find('input[type="text"]').val();
        user_dic.last_name = row.find("TD").eq(5).find('input[type="text"]').val();
        user_dic.currency_id = row.find("TD").eq(6).find('select').val();
        user_dic.language_id = row.find("TD").eq(7).find('select').val();
        user_dic.time_zone = row.find("TD").eq(8).find('select').val();
        user_dic.phone_num = row.find("TD").eq(9).find('input[type="tel"]').val();
        user_dic.email = row.find("TD").eq(10).find('input[type="email"]').val();
        user_dic.date_format = row.find("TD").eq(11).find('select').val();
        user_dic.decimal_notation = row.find("TD").eq(12).find('select').val();

        checked_box = row.find("TD").eq(13).find('input[type="checkbox"]').is(':checked')
            if (checked_box){
                user_dic.del_ind = '1'
            }
            else{
               user_dic.del_ind = '0'
            }
            user_list.push(user_dic)

       //*************** checking for empty records for product id name (max length = 2) ***************
            if(user_dic.email.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_email").innerHTML = display8+ "Email ID";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
            if(user_dic.username.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_username").innerHTML = display8+ "User Name";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
             if(user_dic.first_name.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_first_name").innerHTML = display8+ "First Name";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
             if(user_dic.last_name.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_last_name").innerHTML = display8+ "Last Name";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
            if(user_dic.phone_num.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_phonenumber").innerHTML = display8+ "Phone Number";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
            if(user_dic.employee_id.length == 0){
                $(row.find("TD").eq(1).find('input[type="text"]')).css("border", "1px solid #FF0000");
                row_color_highlight_empty(row);
                $("#id_error_msg_prod_cat_desc").prop("hidden",false);
                error_message = ui_messeges("JMSG002")// Get message details
                var display8 = error_message;
                document.getElementById("id_error_msg_empid").innerHTML = display8+ "Employee ID";
                $("#id_check_special_character_messages").prop("hidden",false);
                $("#id_check_data").prop("hidden", false);
                count = count +1;
            }
            else{
                $(row.find("TD").eq(2).find('input[type="text"]')).css("border", "none");
                row_color_no_highlight(row);
                $(row).css("border", "");
                $("#id_delete_duplicate").hide()
            }
            table_sort_filter_popup_pagination('id_userpopup_table');
        });


          //*************** shows save button if there are no errors(special characters and max length) ***************
        if(count == 0){
            $('#id_userpopup_table').DataTable().destroy();
            $("#id_userpopup_table").find("input,button,textarea,select").attr("disabled", "disabled");
            document.getElementById("id_del_add_button").style.display = "none";
            $("#save_user_basic_info").prop("hidden", false);
            $("#id_check_data").prop("hidden", true);
            if (user_list == 0) {
                $("#save_user_basic_info").prop("hidden", true);
            }
            popup_data_dict = {'data_list': user_list}
            OpenLoaderPopup();
            $.ajax({
                type: 'POST',
                url: "{% url 'eProc_Configuration_Check:check_Employee' %}",
                data: JSON.stringify(popup_data_dict),
                success: function(response) {
                     table_sort_filter_popup_pagination('id_userpopup_table')
                     $("#id_check_special_character_messages").prop("hidden", false);
                     if (count == 0) {
                        $("#id_check_special_character_messages").prop("hidden", true);
                     }
                    var message = ''
                    update_check_message(response.messages[1])
                    CloseLoaderPopup();
                }
            });
        }
    }
var data = {};
var block_id = '';
 $('.toggle-block').change(function() {
        $('#id_confirm_popup').modal('show')
        if($(this).is(':checked')) {
            $('.toggle-off').removeClass('active');
            $('.toggle-on').addClass('active');
            data.flag = true
        } else {
            $('.toggle-off').addClass('active');
            $('.toggle-on').removeClass('active');
            data.flag = false
        }
        var id = this.id;
        data.employee_id = id;
        var id = this.id
        block_id = id
<!--        data.employee_id = id.split('-')[0]-->
  });
  var previous_state;
function lock_active_change(){
        OpenLoaderPopup();
        jQuery.ajax({
       type: 'POST',
       url: "{% url 'eProc_Admin_Tool:lock_unlock_emp' %}",
       dataType :'json',
       data: JSON.stringify(data),
       success: function(result){
             $('#id_confirm_popup').modal('hide');
             $('#success_msg_id').text("Changed Successfully");
            previous_state = data.flag;
            $("#error_msg_div").prop("hidden",false)
            message_display_time();
            CloseLoaderPopup();
       },
       error: function(xhr, resp, text) {
       },
       cache: false,
       processData: false,
       contentType: false,
        });
    }

   function toggle(){
        var abc = $('#'+block_id)
        if($('#'+block_id).is(':checked')) {
            $('#'+block_id).prop("checked", false);
        }
        else{
            $('#'+block_id).prop("checked", true);
        }
    }
<!--Check All -->
<!-- ----------------------------------------------------   -->
var table = $('#user_tab').DataTable();
 var rows_selected = [];
 //onclick of select all checkbox
$('#user_tab tbody').on('click', 'input[class="emp_checkbox"]', function(e){
      var $row = $(this).closest('tr');
      // Get row data
      var data = table.row($row).data();
      // Get row ID
      var rowId = data[0];
      // Determine whether row ID is in the list of selected row IDs
      var index = $.inArray(rowId, rows_selected);
      // If checkbox is checked and row ID is not in list of selected row IDs
      if(this.checked && index === -1){
         rows_selected.push(rowId);
      // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
      } else if (!this.checked && index !== -1){
         rows_selected.splice(index, 1);
      }
      if(this.checked){
         $row.addClass('selected');
      } else {
         $row.removeClass('selected');
      }
      // Update state of "Select all" control
//      updateDataTableSelectAllCtrl(table);
      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle click on "Select all" control
   $('thead input[id="selectAll"]', table.table().container()).on('click', function(e){
      if(this.checked){
         $('#user_tab tbody input[class="emp_checkbox"]:not(:checked)').trigger('click');
         $(".emp_checkbox").prop("checked", true);
      } else {
         $('#user_tab tbody input[class="emp_checkbox"]:checked').trigger('click');
         $(".emp_checkbox").prop("checked", false);
      }
      // Prevent click event from propagating to parent
      e.stopPropagation();
   });
   // Handle table draw event
   table.on('draw', function(){
      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);
      valueChanged();
//      e.stopPropagation();
   });
    function updateDataTableSelectAllCtrl(table){
       var $table             = table.table().node();
       var $chkbox_all        = $('tbody input[class="emp_checkbox"]', $table);
       var $chkbox_checked    = $('tbody input[class="emp_checkbox"]:checked', $table);
       var chkbox_select_all  = $('thead input[id="selectAll"]', $table).get(0);

       // If none of the checkboxes are checked
       if($chkbox_checked.length === 0){
          chkbox_select_all.checked = false;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = false;
          }
       // If all of the checkboxes are checked
       } else if ($chkbox_checked.length === $chkbox_all.length){
          chkbox_select_all.checked = true;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = false;
          }
       } else {
          chkbox_select_all.checked = true;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = true;
          }
   }
}

//*******************************************************
// on click add icon display the row in to add the new entries
function add_popup_row() {
    $("#error_msg_id").css("display", "none")
    basic_add_new_html = '';
    $('#id_userpopup_table').DataTable().destroy();
    $(".modal").on("hidden.bs.modal", function () {
        $("#id_error_msg").html(" ");
    });
    dropdown_values()
    basic_add_new_html = '<tr><tr><td class="class_select_checkbox"><input type="checkbox" required></td>' +
                        '<td><input class="form-control" type="text"  maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="text" maxlength="100" required></td>' +
                        '<td><select class="form-control" type="text">'+user_opt+'</select></td>' +
                        '<td><input class="form-control" type="text" maxlength="100" onkeypress="return /[a-z ]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="text" maxlength="100" onkeypress="return /[a-						z ]/i.test(event.key)" required></td>' +
                        '<td><select class="form-control" type="text">'+currency_opt+'</select></td></tr>' +
                        '<tr><td><select class="form-control" type="text">'+language_opt+'</select></td>' +
                        '<td><select class="form-control" type="text">'+timezone_opt+'</select></td>' +
                        '<td><input class="form-control" type="email" maxlength="40" onkeypress="return /[a-z]/i.test(event.key)" required></td>' +
                        '<td><input class="form-control" type="tel"  maxlength="100" required></td>' +
                        '<td><select class="form-control">'+date_format_opt+'</select></td>' +
                        '<td><select class="form-control">'+decimal_opt+'</select></td>' +
                        '<td><input type="checkbox" required></td></tr></tr>';
         $('#id_userpopup_tbody').append(basic_add_new_html);
         $(".class_del_checkbox").prop("hidden", false);
         $("#id_del_ind_checkbox").prop("hidden", false);
         table_sort_filter('id_userpopup_table');
    }

function ajax_update_user_basic_data(data) {
        urlLink = "{% url 'eProc_Master_Settings:create_update_master_data' %}";
        var response = AjaxCallAPIBasic(urlLink, data)
        return response
}


// Funtion to save basic detail data
    function save_user_basic_info() {
            var name1_val= $('#first_name1').val();
            var phone_num_val = $('#phone_num').val();
            var email_val = $('#email1').val();
            var err_flag, super_user_val = 0, user_locked_val = 0, pwd_locked_val = 0, is_active_val = 0 ;

            OpenLoaderPopup();
            var user_list_data = new Array
            del_ind = ''
            $("#id_userpopup_table TBODY TR").each(function() {
                $('#id_userpopup_table').DataTable().destroy();
                $("#id_check_data").prop("hidden", false);
                var row = $(this);
                 user_data_dict = {}
                //*************** reading data from the pop-up ***************
                user_data_dict.email = row.find("TD").eq(1).find('input[type="email"]').val();
                user_data_dict.username = row.find("TD").eq(2).find('input[type="text"]').val();
                user_data_dict.first_name = row.find("TD").eq(3).find('input[type="text"]').val();
                user_data_dict.last_name = row.find("TD").eq(4).find('input[type="text"]').val();
                user_data_dict.phone_num = row.find("TD").eq(5).find('input[type="tel"]').val();
                user_data_dict.date_format = row.find("TD").eq(6).find('select').val();
                user_data_dict.employee_id = row.find("TD").eq(7).find('input[type="text"]').val();
                user_data_dict.decimal_notation = row.find("TD").eq(8).find('select').val();
                user_data_dict.user_type = row.find("TD").eq(9).find('select').val();
                user_data_dict.currency_id = row.find("TD").eq(10).find('select').val();
                user_data_dict.language_id = row.find("TD").eq(11).find('select').val();
                user_data_dict.time_zone = row.find("TD").eq(12).find('select').val();
                checked_box = row.find("TD").eq(13).find('input[type="checkbox"]').is(':checked')
                    if (checked_box){
                        user_data_dict.del_ind = '1'
                    }
                    else{
                       user_data_dict.del_ind = '0'
                    }
                     if($("#super_user").is(":checked")){
                        super_user_val = 1;
                    }
                    user_data_dict.super_user= super_user_val;
                    if($("#user_locked").is(":checked")){
                        user_locked_val = 1;
                    }
                    user_data_dict.user_locked= user_locked_val;
                    if($("#pwd_locked").is(":checked")){
                        pwd_locked_val = 1;
                    }
                    user_data_dict.pwd_locked= pwd_locked_val;
                     if($("#user_status").is(":checked")){
                        is_active_val = 1;
                    }
                    user_data_dict.is_active= is_active_val;
                    user_data_dict.status = GLOBAL_ACTION ;
                    user_list_data.push(user_data_dict)
                    table_sort_filter_popup_pagination('id_userpopup_table');
                });
                data = {'data':user_list_data,'table_name':'UserData','action':GLOBAL_ACTION}
             $.ajax({
                    type: 'POST',
                    url: "{% url 'eProc_Master_Settings:create_update_master_data' %}",
                    data: JSON.stringify(data),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(Response) {
                             message = Response

                     if(message){
                        document.getElementById('id_check_success_messages').innerHTML = message;
                        $('#id_check_error_messages').hide();
                        $('#id_check_success_messages').show();
                        $('html, body').animate({ scrollTop: 0 }, 'slow');
                        setTimeout(function() {
                                   CloseLoaderPopup();
                        }, 500);
                        setTimeout(function() {
                                   $('#id_check_success_messages').hide();
                                    $('#id_check_data').modal('hide');
                                    $("#id_check_data").prop("hidden", true);
                                    $('#myModal').modal('hide');
                        }, 3000);
                        localStorage.setItem("error_flag", 0);
                    }

                    CloseLoaderPopup();
                    }
             });
             $('#id_check_data').modal('hide');
             $("#id_check_data").prop("hidden", true);
             table_sort_filter('id_userpopup_table');
    }


</script>
{% endblock %}