{% extends 'super_admin_templates/base.html' %}
{% set path = "staff" %}
{% set subpath = "staff_member" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <h1 class="page-title fw-semibold fs-18 mb-0">Staff Members List</h1>
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ url_for('staff_members.view_all_staff_members') }}">Staff Members List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Update Staff Member
                        </div>
                    </div>
                    <div class="card-body">
                        <center>
                            {% if error %}
                            <h2><b><center style="color:RED">{{ error }}</center></b></h2>
                            {% endif %}
                        </center>
                        <div class="table-responsive">
                            <div id="datatable-basic_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                                <form method="POST" action="" enctype="multipart/form-data"id="updateStaffForm"  name=updateStaffForm >
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                     <input type="hidden" id="latitude_update" name="latitude">
                                    <input type="hidden" id="longitude_update" name="longitude">
                                    <input type="hidden" name="defaultVerificationId" id="defaultVerificationId"> 
                                  <div class="card-body">
                                    <div class="form-group">
                                      <label>User Name</label>
                                      <input type="text" class="form-control" name="userName" placeholder="Enter user name" minlength="3" maxlength="75"  pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="UserName must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/"  value="{{staff_member_dict.userName}}">
                                      <span id="userName_edit_error" class="error"></span>
                                    </div>
                                    <div class="form-group">
                                      <label>Email</label>
                                      <input type="email" class="form-control" name="email" placeholder="Enter your email" pattern="^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" 
                                            title="Please enter a valid email address." value="{{staff_member_dict.email}}">
                                        <span id="email_edit_error" class="error"></span>
                                    </div>
                                    <div class="form-group">
                                      <label>Phone Number</label>
                                      <input type="phoneNumber" class="form-control" name="phoneNumber" placeholder="Enter your phonenumber" pattern="^[0-9]{10}$" minlength="10" maxlength="10"
                                            title="Phone number must be exactly 10 digits" value="{{staff_member_dict.phoneNumber}}">
                                        <span id="phoneNumber_edit_error" class="error"></span>

                                      <input type="hidden" name="staffMemberId" value="{{staff_member_dict.id}}">
                                     </div>
                                    <div class="form-group">
                                          <label class="control-label" for="basicName">Roles</label>
                                          <select class="form-control chosen-select" name="roleId" id="roleId">
                                            <option value="">Select role</option>
                                            {% for each_role in rolesList %}
                                              <option value="{{ each_role.id }}" {% if each_role.id|string == staff_member_dict.roleId|string %}selected{% endif %}>
                                                {{ each_role.roleName }}
                                              </option>
                                            {% endfor %}
                                          </select>
                                    </div>
                                    <br>
                                    <span id="roleId_edit_error" class="error"></span>

                                      <div class="form-group">
                                        {% if staff_member_dict.authenticationEnabled == True %}
                                            <input type="checkbox" name="authenticationEnabled" id="authenticationEnabled" value="True" checked>&nbsp;
                                        {% else %}
                                            <input type="checkbox" name="authenticationEnabled" id="authenticationEnabled" value="True" >&nbsp;
                                        {% endif %}
                                      <label>Authentication Enabled</label>

                                      <span id="authenticationEnabled_edit_error" class="error"></span>
                                    </div>

                        
                                    <div class="form-group mt-3">
                                        <button type="button" class="btn btn-warning generateOtpBtn" data-index="add" data-mail-type="Staff">Generate OTP</button>
                                        <input type="hidden" id="otpLogidadd" name="otpLogid">
                                    </div>

                                    <div class="form-group mt-3 otp-section" data-index="add" style="display: none;">
                                        <label for="otpCodeadd">Enter OTP*</label>
                                        <input type="text" class="form-control otp-input" id="otpCodeadd" name="otpCode" placeholder="Enter otp">
                                        <div class="mt-2">
                                            <button type="button" class="btn btn-primary verifyOtpBtn" data-index="add">Verify OTP</button>
                                            <button type="button" class="btn btn-secondary resendOtpBtn" data-index="add" data-mail-type="Staff">Resend OTP</button>
                                        </div>
                                        <div id="otpMessageadd" class="text-danger mt-2"></div>
                                        <span id="otpCode_error" class="error"></span>
                                    </div>

                                    <!-- End space -->

                                    
                                    <!-- End space -->
                                   
                                  
                                <!-- /.card-body -->
                                 <div class="modal-footer justify-content-between"><span id="EditErrorMessage" class="error"></span>

                                         <button type="submit" class="btn btn-primary form_submit" id="updateBtnadd" disabled>Submit</button>
                                </div>
                                  
                                </form>
                            </div>
                            {% with messages = get_flashed_messages(with_categories=true) %}
                                    {% if messages %}
                                        {% for category, message in messages %}
                                            {% if category == "success" %}
                                                <h2><b><center style="color:green">{{ message }}</center></b></h2>
                                            {% elif category == "danger" %}
                                                <h2><b><center style="color:red">{{ message }}</center></b></h2>
                                            {% else %}
                                                <h2><b><center style="color:orange">{{ message }}</center></b></h2>
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                {% endwith %}
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->



<script type="text/javascript">
    
$(document).ready(function () {


$('#updateStaffForm').validate({

    errorElement: 'div',
            errorClass: 'error', 
            errorPlacement: function (error, element) {
                error.insertAfter(element); 
            },
            ignore: ":hidden", 
        rules: {
                userName: {
                required: true,
                minlength: 3,
                maxlength: 75,
               
                },
                email: {
                    required: true,
                    
                },
                password: {
                    required: true,
                    minlength: 8,
                   
                },
               
                roleId: {
                    required: true,
                },
                authenticationEnabled: {
                    required: false,
                    
                },
            },
          messages: {
            userName: {
                required: 'UserName is required',
                minlength: 'UserName must be at least 3 characters long',
                maxlength: 'UserName must be less than or equal to 75 characters long',
                
            },
            email: {
                required: 'Email is required',
            },
            phoneNumber: {
                required: 'Phone Number is required',
            },
            
            roleId: {
                required: 'RoleId is required',
            },
            
          },
        submitHandler: function(form,event) {
                $('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    function (lat, lng) {
                       
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);

                        let formData = new FormData(form);

                        $.ajax({
                        url: form.action,
                        type: form.method,
                        data: formData,
                        processData: false,  // Don't process the data as a query string
                        contentType: false,  // Let jQuery set the content-type for multipart/form-data
                        xhrFields: {
                                            withCredentials: true   // THIS ensures cookies/session are sent
                                        },
                        success: function(response) {
                            if(response.responseStatus==1 || response.responseStatus==4){
                            form.reset();
                            location.reload();
                            }else if(response.responseStatus==0){
                                $('.form_submit').prop('disabled', false);
            				$('#newLoadingModel').hide();
                                $.each(response.result, function(key, value) {
                                $('#'+key+"_edit_error").text(value)
                            });
                                return false;
                            }else if(response.responseStatus==2){
                                $('.form_submit').prop('disabled', false);
            				$('#newLoadingModel').hide();
                            $('#EditErrorMessage').text(response.result);
                                return false;
                            }else{
                               location.reload(); 
                            }
                            
                        },
                        error: function (xhr) {
                            // You can also reload page after error (e.g. CSRF token mismatch)
                            location.reload();
                        }           
                    });
                },
                function () {
                    $('.form_submit').prop('disabled', false);
                    $('#newLoadingModel').hide();
                            alert("Location access is required to proceed. Please enable it in your browser.");
                    }
                );
            }
        });
    });
</script>


{% endblock %}