{% extends "super_admin_templates/base.html" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    
    
    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">
            <!-- Start::page-header -->
            <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                <div>
                    <p class="fw-semibold fs-18 mb-0">Profile Details</p>
                </div>
            </div>
            <!-- End::page-header -->


            <!-- Start::row-1 -->
            <div class="row">
                <div class="col-xl-4">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                Personal Info
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Name :
                                        </div>
                                        <span class="fs-12 text-muted">{{ adminDict.userName }}</span>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Email :
                                        </div>
                                        <span class="fs-12 text-muted">{{ adminDict.email }}</span>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Phone Number :
                                        </div>
                                        <span class="fs-12 text-muted">{{ adminDict.phoneNumber }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                    <ul class="flashes">
                    {% for message in messages %}
                        <h2><b><center style="color:green">{{ message }}</center></b></h2>
                    {% endfor %}
                    </ul>
                {% endif %}
                {% endwith %}

                <div class="col-xl-4">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                Admin Change Password
                            </div>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('admin.admin_change_password', adminId=adminDict.id) }}" enctype="multipart/form-data"  id="admindetails" name="admindetails">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" id="latitude_add" name="latitude">
                                <input type="hidden" id="longitude_add" name="longitude">
                                <div class="form-group">
                                    <label for="oldPassword">Old Password*</label>
                                    <input type="password" class="form-control" id="oldPassword" name="oldPassword" title="Password must be 6-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character."  placeholder="Enter old password" required>
                                    <span id="oldPassword_error" class="error"></span>
                                </div>
                                <div class="form-group">
                                    <label for="newPassword">New Password*</label>
                                    <input type="password" class="form-control" id="newPassword" name="newPassword" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~])[A-Za-z\d!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~]{6,30}$" title="Password must be 6-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character." placeholder="Enter new password" required>
                                    <span id="newPassword_error" class="error"></span>
                                </div>
                                <div class="form-group">
                                    <label for="confirmNewPassword">Confirm Password*</label>
                                    <input type="password" class="form-control" id="confirmNewPassword" name="confirmNewPassword"
                                    pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~])[A-Za-z\d!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~]{6,30}$" title="Password must be 6-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character." placeholder="Enter confirm password" required>
                                    <span id="confirmNewPassword_error" class="error"></span>
                                </div>
                                <div class="modal-footer justify-content-between">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-1 -->
        </div>
    </div>
    <!-- End::app-content -->
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $('#admindetails').validate({
            
            rules: {
                oldPassword: {
                    required: true,
                    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~])[A-Za-z\d!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~]{6,30}$/,
                    minlength: 6 // Or whatever minimum length you require
                },
                newPassword: {
                    required: true,
                    minlength: 6,
                    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~])[A-Za-z\d!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~]{6,30}$/
                },
                confirmNewPassword: {
                    required: true,
                    minlength: 6,
                    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~])[A-Za-z\d!@#$%^&*()_\-+[\]{}:;\,./\\<>?|`~]{6,30}$/,
                    equalTo: "#newPassword"
                }
            },
            messages: {
                oldPassword: {
                    required: "Please enter your old password",
                    minlength: "Your password must be at least 6 characters long"
                },
                newPassword: {
                    required: "Please enter a new password",
                    minlength: "Your password must be at least 8 characters long",
                    pattern: "Password must be 8-30 characters long, include at least one uppercase letter, one lowercase letter, one number, and one special character."
                },
                confirmNewPassword: {
                    required: "Please confirm your new password",
                    minlength: "Your password must be at least 8 characters long",
                    equalTo: "Please enter the same password as above"
                }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid').removeClass('is-valid');
            },
            unhighlight: function (element, validClass, errorClass) {
                $(element).addClass('is-valid').removeClass('is-invalid');
            },

            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);
                        $('.error').text('');
                        $.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
                            success: function (response) {
                                console.log('((((((((((((((((((()))))))))))))))))))',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 + "_error").text(value)
                                    });
                                    return false;
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                    return false;
                                } else {
                                    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 %}