@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Account settings - Security')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.css')}}" />

@endsection

@section('page-style')
<link rel="stylesheet" href="{{asset('assets/vendor/css/pages/page-account-settings.css')}}" />
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/sweetalert2/sweetalert2.js')}}"></script>

@endsection

@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-security.js')}}"></script>
<script src="{{asset('assets/js/modal-enable-otp.js')}}"></script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4">
  <span class="text-muted fw-light">Account Settings /</span> Password Change
</h4>

<div class="row">
  <div class="col-md-12">
    <!-- Change Password -->
    <div class="card mb-4">
      <h5 class="card-header">Change Password</h5>
      <div class="card-body">
        <!-- <form id="password-reset-form" method="POST" onsubmit="return false"> -->
        <form id="password-reset-form" class="row g-3" enctype="multipart/form-data">
        @csrf

          <div class="row">
            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="currentPassword">Current Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control" type="password" name="current_password" id="currentPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="newPassword">New Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control" type="password" id="newPassword" name="new_password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
              </div>
            </div>

            <div class="mb-3 col-md-6 form-password-toggle">
              <label class="form-label" for="confirmPassword">Confirm New Password</label>
              <div class="input-group input-group-merge">
                <input class="form-control" type="password" name="new_password_confirmation" id="confirmPassword" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
                <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
              </div>
            </div>
            <div class="col-12 mb-4">
              <h6>Password Requirements:</h6>
              <ul class="ps-3 mb-0">
                <li class="mb-1">Minimum 8 characters long - the more, the better</li>
                <li class="mb-1">At least one lowercase character</li>
                <li>At least one number, symbol, or whitespace character</li>
              </ul>
            </div>
            <div>
            <button type="submit" id="submit-pin-reset-btn" class="btn btn-primary me-sm-3 me-1">Submit</button>
              <button type="reset" class="btn btn-label-secondary">Cancel</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--/ Change Password -->



  </div>
</div>



<script>
function disableButton() {
    var submitBtn = document.getElementById('submit-pin-reset-btn');
    submitBtn.disabled = true;
    submitBtn.innerHTML = 'Loading...';
}

function enableButton() {
    var submitBtn = document.getElementById('submit-pin-reset-btn');
    submitBtn.disabled = false;
    submitBtn.innerHTML = 'Submit';
}

function setLoadingState() {
    var submitBtn = document.getElementById('submit-pin-reset-btn');
    submitBtn.disabled = true; // Disable the button
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'; // Change button content to loading state
}

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('submit-pin-reset-btn').addEventListener('click', function (event) {
        event.preventDefault(); // Prevent default form submission
        setLoadingState();
        // Serialize form data
        var form = document.getElementById('password-reset-form');
        var formData = new FormData(form);
        // Send POST request
        fetch('{{ route("admin.password-change") }}', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                var erroMessage = 'An error occurred. Contact Admin';
                Swal.fire({
                    title: 'Processing Failed. Please contact IT for support',
                    text: erroMessage,
                    icon: 'error',
                    customClass: {
                        confirmButton: 'btn btn-success'
                    }
                });
                throw new Error('Network response was not ok');
            }
        })
        .then(data => {
            // Access and use the response data
            console.log(data.code); // Log the response data to the console
            // You can access specific properties of the data and perform actions accordingly
            if (data.code === 200) {
                Swal.fire({
                    icon: 'success',
                    title: `Successful`,
                    text: data.message,
                    customClass: {
                        confirmButton: 'btn btn-success'
                    }
                });

                // Clear the form fields
                document.getElementById('password-reset-form').reset();

                // Reload the page after a short delay (e.g., 1 second)
                setTimeout(function() {
                    window.location.reload();
                }, 5000); // 1000 milliseconds = 1 second

            } else if (data.code === 400) {
                let errorMessage = '';

                data.error.forEach(error => {
                    errorMessage += error.message + '\n';
                });
                Swal.fire({
                    title: 'Validation Error',
                    text: errorMessage,
                    icon: 'error',
                    customClass: {
                        confirmButton: 'btn btn-success'
                    }
                });
            } else {
                Swal.fire({
                    title: data.error,
                    text: data.code,
                    icon: 'error',
                    customClass: {
                        confirmButton: 'btn btn-success'
                    }
                });
            }
        })
        .catch(error => {
            // Display error message
            alert('Error: ' + error.message);
        })
        .finally(() => {
            // Change the button back to its original state after the request is complete
            var submitBtn = document.getElementById('submit-pin-reset-btn');
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Submit';
        });
    });
});
</script>




@endsection