@extends('backend.layout.app')
<!-- title go hear -->
@section('title' , 'security' )
<!-- content go hear -->
@section('content')
<div class="   ">
	<h4 class="header-sub">  Password Settings</h4>
 
</div>
<div class="  border-top border-top py-4">
	<!-- row start -->
	<div class="row">
		<!-- col start -->
		<div class="col-12 col-md-4">
			<h6>create a new password</h6>
		</div>
		<!-- col end -->
		<!-- col start -->
		<div class="col-12 col-md-6">
			<div class="card m-0">
				<div class="card-body">
					  
					<!-- Button trigger modal -->
						<button type="button" class="btn btn-r  btn-outline-secondary" data-toggle="modal" data-target="#modalpassword">
						  new password
						</button>
						<!-- Button trigger modal -->

				</div>
			</div>
		</div>
		<!-- col end -->
	</div>
	<!-- row end -->
</div>

<!-- Modal -->
<div class="modal fade" id="modalpassword" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"  > create a new password </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
         <form id="formPassword">
				<div class="modal-body">
						<div class="  mb-3">
							<label class="form-label">Current Password</label>
 							<input type="password" name="old_password" class="form-control">
						</div>
						<div class=" mb-3">
							<label class="form-label">New Password</label>
 							<input type="password" name="new_password" class="form-control">
						</div>
						<div class="  ">
						<div class=" mb-3 ">
							<label class="form-label">Confirm Password</label>
 							<input type="password" name="new_password_confirmation" class="form-control">
						</div>
										<input type="submit"   type="submit" id="submitBtn" class="btn btn-md btn-r btn-dark"  value="Create Password">

						<button type="button" class="btn btn-md btn-r btn-outline-dark" data-dismiss="modal">Close</button>
           </div>
					</form>
				</div>
			</div>
		</div>
 <!-- modal end -->
@endsection

@push('footer-script')
 <script type="text/javascript">

    formPassword = document.getElementById('formPassword');
    formPassword.addEventListener('submit', async (event) => {
    event.preventDefault();

  // Disable the submit button before making the Axios request
  const submitBtn = document.getElementById('submitBtn');
  submitBtn.disabled = true;
    
    const formData = new FormData(formPassword);   
    const url = '{{ route('backend.settings.security.passwordUpdate') }}';

    const config = {
      headers: {
        'Accept': 'application/json',
      }
    };

    try {
	      const response = await axios.post(url, formData, config);
	      toastr.success(response.data.message);
	      formPassword.reset();  // reset form
	  } catch (error) {
	      handleErrorResponse(error);
	  } finally {
        	  // Re-enable the submit button whether the request succeeds or fails
	  	      const submitBtn = document.getElementById('submitBtn');
   	   	    submitBtn.disabled = false;
	       }


    });



</script>
 @endpush