@extends('layouts.app')
    
 @section('content')
    

    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="top_bar page-content">
            <div class="top_status_bar">
                <div id="top_progress_bar" class="progress_bar">
                </div>
            </div>
            <div class="breadcrumbs">
                <ul>
                    <li><a  href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li><a href="#">Modifiers List</a></li>
                </ul>
                <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
            </div>
        </div>
        <div class="page-content">
            <!-- BEGIN PAGE HEADER-->
            <!-- BEGIN PAGE BAR -->
            <div class="portlet">
                <!-- BEGIN PAGE HEADER-->
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;">page_heading</h2>
                                <span class="subtitle">page_description</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <form id="user_setup_form"  method="post" enctype="multipart/form-data">
                                <!-- System Users Privileges -->
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="new_product_left">
                                            <h4>Setup System Users</h4>
                                            <p>What are the system users privileges and their roles?</p>
                                            <p>Setup users roles, their designation, their departments<br> and all other privileges for pos in this section.</p>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-sm-12 new_product_form">
                                        <!--- Form Fields Start from here -->
                                        <div class="row">
                                            <div class="col-lg-3 col-md-4 col-sm-6">
                                                <div class="form-group">
                                                    <label for="select_user">Select a user*</label>
                                                    <select class="form-control select2 validate" id="select_user" name="select_user">
                                                        <option></option>
                                                        <option value="new_user">Add New</option>
                                                       
                                                            <option value='staff_uuid' data_role='user_group_uuid' data_title='title' data_fname='firstname' data_lname='firstname'>title firstname firstname</option>
                                                        
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-4 col-sm-6">
                                                <div class="form-group">
                                                    <label for="select_role">Select Role*</label>
                                                    <select class="form-control select2 validate" id="select_role" name="select_role">
                                                        <option></option>
                                                       
                                                            <option value='usergroup_uuid'>usergroup</option>
                                                       
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-4 col-sm-6">
                                                <div class="form-group">
                                                    <label for="user_name">Username*</label>
                                                    <input type="text" class="form-control validate" id="user_name" name="user_name"
                                                           placeholder="Enter user name here">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-4 col-sm-6">
                                                <div class="form-group">
                                                    <label for="user_password">Password*</label>
                                                    <input type="password" class="form-control validate" id="user_password" name="user_password"
                                                           placeholder="******">
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-4 col-sm-6">
                                                <div class="form-group">
                                                    <label for="user_pin">PIN<span>(4-Digits Only)</span></label>
                                                    <input type="text" class="form-control" id="user_pin" name="user_pin"
                                                           placeholder="****">
                                                </div>
                                            </div>
                                            <div class="col-lg-1 col-md-4 col-sm-6 user_status_div">
                                                <div class="form-group">
                                                    <label for="new_status" style="display:block;">Status</label>
                                                    <label class="switch" for="new_status">
                                                        <input type="checkbox" id="new_status" name="new_user_status" value="active" checked/>
                                                        <div class="slider_round round"></div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <!--- Form Fields End here -->
                                    </div>
                                </div>

                                <!-- BackOffice Privileges Checkboxes List-->
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="new_product_left">
                                            <h4>POS Backoffice User Privileges</h4>
                                            <p>What are the users privileges for using POS Backoffice?</p>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-sm-12 new_product_form" style="margin-top:-30px;">
                                        <div class="row privileges_box">
                                            <div class="col-md-3 col-sm-12"></div>
                                            <div class="col-md-9 col-sm-12">
                                                <!--- Privileges Rows -->
                                                <!--- 1 -->
                                                <div class="row privileges_row">
                                                   
                                                        <div class="col-md-3 col-sm-6 no-padding">
                                                            <label class="lbl_heading">screenname</label>
                                                        </div>
                                                        <div class="col-md-7 col-sm-6 checkbox_area">
                                                            
                                                                <div class="checkbox_row">
                                                                    <div class="form-group">
                                                                        <label class="user_privileges" for="action_uuid
                                                                            <input type="checkbox" id="action_uuid"
                                                                                   name="privileges[]"  value="action_uuid" data_name="action_name">
                                                                            <span class="checkmark"></span>
                                                                        </label>
                                                                        <p>description</p>
                                                                    </div>
                                                                </div>
                                                           
                                                        </div>
                                                 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- BackOffice Privileges Checkboxes List-->

                                <!-- POS Privileges Checkboxes List-->
                                <div class="row">
                                    <div class="col-md-4 col-sm-12">
                                        <div class="new_product_left">
                                            <h4>POS User Privileges</h4>
                                            <p>What are the users privileges for using POS?</p>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-sm-12 new_product_form" style="margin-top:-30px;">
                                        <div class="row privileges_box">
                                            <div class="col-md-3 col-sm-12"></div>
                                            <div class="col-md-9 col-sm-12">
                                                <!--- Privileges Rows -->
                                                <!--- 1 -->
                                                <div class="row privileges_row">
                                                   
                                                        <div class="col-md-3 col-sm-6 no-padding">
                                                            <label class="lbl_heading">screenname</label>
                                                        </div>
                                                        <div class="col-md-7 col-sm-6 checkbox_area">
                                                         
                                                                <div class="checkbox_row">
                                                                    <div class="form-group">
                                                                        <label class="user_privileges" for="action_uuid">
                                                                            action_name
                                                                            <input type="checkbox" id="action_uuid"
                                                                                   name="privileges[]"  value="action_uuid" data_name="action_name">
                                                                            <span class="checkmark"></span>
                                                                        </label>
                                                                        <p>description</p>
                                                                    </div>
                                                                </div>
                                                        </div>
                                                
                                                    <!-- Discount Section-->
                                                    <div class="col-md-3 col-sm-6 no-padding">
                                                        <label class="lbl_heading">Discounts</label>
                                                    </div>
                                                    <div class="col-md-7 col-sm-6 checkbox_area">
                                                        <div class="checkbox_row">
                                                            <div class="form-group">
                                                                <label class="user_privileges" for="free_discount">
                                                                    Free Discounts
                                                                    <input type="radio" id="free_discount" value="free_discount" name="allow_discount">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                                <p>Allow user to give 100% discount.</p>
                                                            </div>
                                                        </div>
                                                        <div class="checkbox_row">
                                                            <div class="form-group">
                                                                <label class="user_privileges" for="limited_discount">
                                                                    Limited Discount
                                                                    <input type="radio" id="limited_discount" value="limited" name="allow_discount">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                                <p>Allowed discount is limited to the percentage defined.</p>
                                                            </div>
                                                            <!--- Discount Limit Box-->
                                                            <div class="row maximum_discount hidden">
                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="max_discount">Max Discount</label>
                                                                        <input min="0" max="100" class="form-control" value="0" placeholder="0%" name="max_discount" id="max_discount" type="number">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--- Discount Limit Box-->
                                                        </div>
                                                    </div>
                                                    <!-- Staff Discount-->
                                                    <div class="col-md-3 col-sm-6 no-padding">
                                                        <label class="lbl_heading">Staff Discounts</label>
                                                    </div>
                                                    <div class="col-md-7 col-sm-6 checkbox_area">
                                                        <div class="checkbox_row">
                                                            <div class="form-group">
                                                                <label class="user_privileges" for="staff_discount">
                                                                    Take Discount
                                                                    <input type="checkbox" id="staff_discount" name="staff_discount">
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                                <p>Staff member can take discount.</p>
                                                            </div>
                                                            <div class="row staff_discount hidden">
                                                                <div class="col-sm-6">
                                                                    <div class="form-group">
                                                                        <label for="stf_discount">Discount%</label>
                                                                        <input min="0" max="100" class="form-control" value="0" placeholder="0%" name="stf_discount" id="stf_discount" type="number">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Discount Sections-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- POS Privileges Checkboxes List-->

                                <!-- Finalize Buttons -->
                                <div class="row">
                                    <div class="col-sm-4"></div>
                                    <div class="col-sm-8">
                                        <div class="col-sm-11 no-padding">
                                            <button class="btn theme_btn_round pull-right save_settings"
                                                    type="button">
                                                Save
                                            </button>
                                            <button class="btn action_btn cancel pull-right" type="button"
                                                    onclick="history.go(-1); return false">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div> <!--THIS IS CONTENT DIV END-->
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- New User Modal Begins -->
<div class="modal fade bs-modal right modal-fullscreen" id="newuser_model" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" id="newuser_form">
                <div class="modal-header">
                    <button type="button" class="close close_popup"
                            data-dismiss="modal">&times;
                    </button>
                    <h3 class="pop_heading">New User</h3>
                </div>
                <div class="modal-body" style="overflow: hidden">
                    <div class="portlet-body">
                        <p class="pop_desc">Add a new user here, you can define access policies later.</p>
                        <div class="row new_account_form">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="user_title">Title *</label>
                                    <select class="form-control select2 title filter validate" id="user_title" name="title">
                                        <option value=""></option>
                                            <option value="key">
                                               filter
                                            </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="first_name">First Name *</label>
                                    <input class="form-control first_name validate" id="first_name" type="text" name="first_name" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="last_name">Last Name *</label>
                                    <input class="form-control last_name validate" id="last_name" type="text" name="last_name" autocomplete="off">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="display_name">Display Name*</label>
                                    <select class="form-control select2 filter display_name validate" name="display_name" id="display_name">
                                        <option></option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="email">Email*</label>
                                    <input type="email" class="form-control validate" name="email" id="email" placeholder="User Email here">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="mobile">Mobile*</label>
                                    <input type="tel" class="form-control validate" name="mobile" id="mobile" placeholder="Mobile name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user_dob">Date of Birth*</label>
                                    <input type="tel" class="form-control validate datepicker" name="user_dob" id="user_dob" placeholder="dd-mm-yyyy">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="user_designation">Select Designation*</label>
                                    <select class="form-control select2 validate" id="user_designation" name="user_designation">
                                        <option></option>
                                       
                                            <option value='DUL_uuid' data_depuuid='department_uuid'>departmentuserlevel</option>
                                       
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="user_role">Select Role*</label>
                                    <select class="form-control select2 validate" id="user_role" name="user_role">
                                        <option></option>
                                      
                                            <option value='usergroup_uuid'>usergroup</option>
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="user_status">Status*</label>
                                    <select class="form-control select2 validate" id="user_status" name="user_status">
                                        <option></option>
                                        <option value="Active">Active</option>
                                        <option value="Blocked">Blocked</option>
                                        <option value="Suspended">Suspended</option>
                                        <option value="Resigned">Resigned</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row" style="min-height:44px;">
                        <div class="col-sm-6">
                            <div class="alert_box">Mandatory Fields Are Required!</div>
                        </div>
                        <div class="col-sm-6" style="padding: 3px 25px 0 0px;">
                            <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn theme_btn_round save_user"> Save</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- New User Modal End -->

@endsection
@section('admin_css')
    <link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <!-- DATE / TIME PICKER -->
    <link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet" type="text/css"/>
    <!-- DATE / TIME PICKER -->
    <style type="text/css">
        @media only screen and (max-width: 1670px) {
            .user_status_div {
                width: 50%;
            }
        }
        @media only screen and (max-width: 1183px) {
            .user_status_div {
                width: inherit;
            }
        }
    </style>
@stop

@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<!-- DATE / TIME PICKER -->
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<!-- DATE / TIME PICKER -->
<script type="text/javascript">
    //Ready function
    $(document).ready(function () {
        $(".select2").select2({
            placeholder: "--Select--",
            allowClear: true
        });

        //Bootstrap DATETIME Picker
        $('.datepicker').datepicker({
            format: "dd-mm-yyyy",
            orientation: 'auto',
            endDate: '+0d',
            autoclose: true
        });
    });

    $(window).on('resize', function () {
        console.log($(window).width());
    });

    //Selecting User From Users List
    $(document).on('change', '#select_user', function () {

        var option_value = $(this).find(':selected').val();
        var option_text = $(this).find(':selected').text();
        if(option_value == 'new_user'){
            $('#newuser_model .modal-body').animate({scrollTop: 0}, "fast");
            $('#newuser_form input.form-control').val('').removeClass('error_custom');
            $('#newuser_form select.select2').val('').trigger('change').parent().find('span.select2-selection').removeClass('error_custom');
            $('#user_status').val('Active').trigger('change');
            $('.alert_box').hide();
            $('#newuser_model').modal();
            $(this).val('').trigger('change');
        }
        else {
            $('#user_name').val('').attr('data_uuid','');
            $('#user_password').val('');
            $('#user_pin').val('');
            $(".privileges_box input[type='checkbox']").prop('checked', false);
            var role = $(this).find(':selected').attr('data_role');
            $('#select_role').val(role).trigger('change');
            var url = 'settings/find_user';
            $.post(url, { 'user_uuid': option_value })
                .done(function( data ) {
                    var res = $.parseJSON(data);
                    if(res=='empty') {
                        $(".privileges_box input[type='checkbox']").prop('checked', false);
                    }
                    else {
                        $.each(res['privileges'], function (k,v) {
                            $('.privileges_box').find("input#uuid_" + v.action_uuid).prop('checked', true);
                        });
                        if(res['username']!='' && res['useruuid']!=''){
                            $('#user_password').removeClass('validate');
                        }
                        $('#user_name').val(res['username']).attr('data_uuid', res['useruuid']);
                        $('#user_pin').val(res['userpin']);
                        if(res['userstatus']=='1') {
                            $('#new_status').prop('checked', true);
                        }
                        else {
                            $('#new_status').prop('checked', false);
                        }
                    }
                });
        }

    });

    //Making Display Name Combinations
    $('body').on('keyup', 'input.first_name, input.last_name', function (event) {
        var title = $('select.title').val();
        var first_name = $('input.first_name').val();
        var last_name = $('input.last_name').val();
        if (title != '' && first_name != '' && last_name != '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+' '+last_name+'">'+title+' '+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+' '+last_name+'">'+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+'">'+first_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+'">'+last_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+' '+first_name+'">'+last_name+' '+first_name+'</option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+'">'+title+' '+first_name+'</option>');
            $('select.display_name').append('<option value="'+title+' '+last_name+'">'+title+' '+last_name+'</option>');
            $('select.display_name').val(title+' '+first_name+' '+last_name).trigger('change');
        } else if (title != '' && first_name != '' && last_name != '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+' '+last_name+'">'+title+' '+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+' '+last_name+'">' +first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+'">'+first_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+'">'+last_name+'</option>');
            $('select.display_name').val(title+' '+first_name+' '+last_name).trigger('change');
        }
        if (first_name == '' || last_name == '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').val("").trigger('change');
        }
    });

    //Making Display Name Combinations
    $('body').on('change', 'select.title', function (event) {
        var title = $('select.title').val();
        var first_name = $('input.first_name').val();
        var last_name = $('input.last_name').val();
        if (title != '' && first_name != '' && last_name != '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+' '+last_name+'">'+title+' '+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+' '+last_name+'">'+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+'">'+first_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+'">'+last_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+' '+first_name+'">'+last_name+' '+first_name+'</option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+'">'+title+' '+first_name+'</option>');
            $('select.display_name').append('<option value="'+title+' '+last_name+'">'+title+' '+last_name+'</option>');
            $('select.display_name').val(title+' '+first_name+' '+last_name).trigger('change');
        } else if (title != '' && first_name != '' && last_name != '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').append('<option value="'+title+' '+first_name+' '+last_name+'">'+title+' '+first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+' '+last_name+'">' +first_name+' '+last_name+'</option>');
            $('select.display_name').append('<option value="'+first_name+'">'+first_name+'</option>');
            $('select.display_name').append('<option value="'+last_name+'">'+last_name+'</option>');
            $('select.display_name').val(title+' '+first_name+' '+last_name).trigger('change');
        }
        if (first_name == '' || last_name == '') {
            $('select.display_name').html('<option value=""></option>');
            $('select.display_name').val("").trigger('change');
        }
    });

    //Saving New User
    $(document).on('click', '.save_user', function () {
        var flag = '0';
        $('#newuser_form *').filter(':input, textarea, select').each(function () {
            if ($(this).hasClass('validate')) {
                if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) {
                    $(this).addClass('error_custom');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').addClass('error_custom');
                    flag = '1';
                }
                else {
                    $(this).removeClass('error_custom');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').removeClass('error_custom');
                }
            }
            //FOR EMAIL VALIDATION
            if ($(this).is('input[type="email"]')) {
                if($(this).val() != '') {
                    if (valid_email($(this).val()) == true) {
                        $(this).removeClass('error_custom');
                    } else {
                        $(this).addClass('error_custom');
                        flag = '1';
                    }
                }
            }
        });
        if (flag == '1') {
            alertbox('danger','{{ trans("js-messages.DCM100") }}' );
            return false;
        }
        else {
            var department_uuid = $('#user_designation').find(':selected').attr('data_depuuid');
            var formData =  new FormData(document.getElementById("newuser_form"));
            formData.append('department_uuid', department_uuid);
            $('#busyloading, .overlay').show();
            var url = 'settings/new_user';
            $.ajax({
                url: url,
                type: 'POST',
                data:formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    var result = $.parseJSON(res);
                    if(result.type=='success') {
                        $('#busyloading, .overlay').fadeOut(200);
                        alertbox('success', result.msg);
                        $('#select_user').append("<option value='"+result.uuid+"' selected>"+result.staffname+"</option>").trigger('change');
                        $('#select_role').val(result.role).trigger('change');
                        $('#newuser_model').modal('toggle');
                    }
                    else if(result.type == 'expired') {
                        alertbox('danger', result.msg);
                        window.setTimeout(function(){
                           // window.location.href = SITE_ROOT;
                        }, 1000);
                    }
                    else {
                        $('#busyloading, .overlay').fadeOut(200);
                        if(result.msg!='') {
                            alertbox('warning', result.msg);
                        }
                        else {
                            alertbox('warning','{{ trans("js-messages.DCM112") }}');
                        }
                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });
        }
    });

    //User checkbox for discount
    $(document).on('click', 'input[type=radio]', function () {
        var discount = $(this).val();
        if(discount=='free_discount') {
            $('.maximum_discount').addClass('hidden');
        }
        else {
            $('.maximum_discount').removeClass('hidden');
        }
    });

    //Staff Discount Checkbox
    $(document).on('click', '#staff_discount', function () {
        if ($(this).prop('checked')==true){
            $('.staff_discount').removeClass('hidden');
        }
        else {
            $('.staff_discount').addClass('hidden');
        }
    });
    $(document).on('input', '#user_pin', function () {
        $(this).addClass('required error_custom pin_restrict');
        if($(this).val().length==4){
            $(this).removeClass('required error_custom');
        }
    });

    //Save User Privileges Settings
    $(document).on('click', '.save_settings', function () {
        var flag = '0';
        $('#user_setup_form *').filter(':input, textarea, select').each(function () {
            if ($(this).hasClass('validate')) {
                if ($(this).val() == '' || $(this).val() == 0 || $(this).val() == null) {
                    $(this).addClass('error_custom required');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').addClass('error_custom');
                    flag = '1';
                }
                else {
                    $(this).removeClass('error_custom required');
                    $(this).parent().find('.select2-container--bootstrap .select2-selection').removeClass('error_custom');
                }
            }
        });
        if (flag == '1') {
            alertbox('danger','{{ trans("js-messages.DCM100") }}' );
            $('html, body').animate({scrollTop: '0px'}, 800);
            return false;
        }
        else {
            if ($("#user_pin").hasClass('pin_restrict')) {
                if ($("#user_pin").val().length > 4) {
                    $('html, body').animate({scrollTop: '0px'}, 800);
                    $("#user_pin").focus().addClass('error_custom required');
                    alertbox('warning','{{ trans("js-messages.DSM105") }}');
                    return false;
                }
                else if ($("#user_pin").val().length < 4) {
                    $('html, body').animate({scrollTop: '0px'}, 800);
                    $("#user_pin").focus().addClass('error_custom required');
                    alertbox('warning', '{{ trans("js-messages.DSM105") }}');
                    return false;
                }
                else {
                    $("#user_pin").removeClass('pin_restrict');
                }
            }
            else {
                var user_uuid = $('#select_user').find('option:selected').val();
                var user_role = $('#select_role').find('option:selected').val();
                var action_name = $('input[type=checkbox]:checked').map(function (_, el) {
                    return $(el).attr('data_name');
                }).get();
                var formData = new FormData(document.getElementById("user_setup_form"));
                var title = $('#select_user').find('option:selected').attr('data_title');
                var fname = $('#select_user').find('option:selected').attr('data_fname');
                var lname = $('#select_user').find('option:selected').attr('data_lname');
                var username_uuid = $('#user_name').attr('data_uuid');
                formData.append('title', title);
                formData.append('fname', fname);
                formData.append('lname', lname);
                formData.append('action_name', action_name);
                formData.append('username_uuid', username_uuid);
                $('#busyloading, .overlay').show();
                var url =  'settings/user_privileges';
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        $('#busyloading, .overlay').fadeOut(200);
                        var result = $.parseJSON(res);
                        if (result.type == 'success') {
                            alertbox('success', result.msg);
                            $('#select_user').val(user_uuid).trigger('change');
                            $('#select_role').val(user_role).trigger('change');
                        }
                        else if (result.type == 'expired') {
                            alertbox('danger', result.msg);
                            window.setTimeout(function () {
                              //  window.location.href = SITE_ROOT;
                            }, 1000);
                        }
                        else if (result.type == 'error') {
                            alertbox('warning', result.msg);
                        }
                        else {
                            alertbox('warning', '{{ trans("js-messages.DCM112") }}');
                        }
                    },
                    error: function (error) {
                        $('#busyloading, .overlay').fadeOut(200);
                        alertbox('danger', error);
                    }
                });
            }
        }
    });

    //Updating User Info into tbl_users_new Table
    // $(document).on('click', '#new_status', function () {
    //    var user_status;
    //    ($(this).prop('checked')==true)?user_status='1':user_status='0';
    //    var staff_uuid = $('#select_user').find('option:selected').val();
    //    var title = $('#select_user').find('option:selected').attr('data_title');
    //    var fname = $('#select_user').find('option:selected').attr('data_fname');
    //    var lname = $('#select_user').find('option:selected').attr('data_lname');
    //    var staff_role = $('#select_role').find('option:selected').val();
    //    var username = $('#user_name').val();
    //    var useruuid = $('#user_name').attr('data_uuid');
    //    var password = $('#user_password').val();
    //    var pin = $('#user_pin').val();
    //    //Sending Data via Ajax for Update
    //    if(staff_uuid !='' && username !='' && password !='' && pin !=''){
    //        var url = SITE_ROOT+'settings/update_newuser_switch';
    //        $.post(url,{'user_status':user_status,'staff_uuid':staff_uuid,'title':title,'fname':fname,'lname':lname,'staff_role':staff_role,'username':username,'useruuid':useruuid,'password':password,'pin':pin})
    //            .done(function( data ) {
    //                var result = $.parseJSON(data);
    //                if(result.type=='success') {
    //                    alertbox('success', result.msg);
    //                    $('#select_user').val(staff_uuid).trigger('change');
    //                }
    //                else if(result.type == 'expired') {
    //                    alertbox('danger', result.msg);
    //                    window.setTimeout(function(){
    //                        window.location.href = SITE_ROOT;
    //                    }, 1000);
    //                }
    //                else {
    //                    $('#busyloading, .overlay').fadeOut(200);
    //                    alertbox('warning', 'Something went wrong contact admin!');
    //                }
    //            });
    //    }
    // });

</script>
@stop