@extends('layout/app')

@section('content')
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
    <h4 class="text-themecolor">Change Password</h4>
  </div>
  <div class="col-md-7 align-self-center text-end">
    <div class="d-flex justify-content-end align-items-center">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
        <li class="breadcrumb-item active">Change Password</li>
      </ol>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <form class="form-horizontal form-material" id="changePasswordForm">
      @csrf
      <div class="form-group">
        <div class="col-3">
          <label class="form-label" for="oldPassword">Old Password <span class="text-danger"> * </span></label>
          <input class="form-control" type="password" required placeholder="Old Password" id="oldPassword" name="oldPassword">
        </div>
      </div>

      <div class="form-group">
        <div class="col-3">
          <label class="form-label" for="newPassword">New Password <span class="text-danger"> * </span></label>
          <input class="form-control" type="password" required placeholder="New Password" id="newPassword" name="newPassword">
        </div>
      </div>

      <div class="form-group">
        <div class="col-3">
          <label class="form-label" for="confirmPassword">Confirm Password <span class="text-danger"> * </span></label>
          <input class="form-control" type="password" required placeholder="Confirm Password" id="confirmPassword" name="confirmPassword">
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 form-actions">
          <div class="form-group">
            <button id="changePassword" type="button" class="btn btn-success text-white"> <i class="fa fa-key"></i> Change Password</button>
            <a href="{{ url()->previous() }}" class="btn btn-dark">Cancel</a>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@section('js-script')
<script>
  $('#changePassword').click(function() {
    let oldPassword = $('#oldPassword').val().trim();
    let newPassword = $('#newPassword').val().trim();
    let confirmPassword = $('#confirmPassword').val().trim();
		var isValid = true;

    if(oldPassword == '') {
      isValid = false;
      loadToast('Please enter your old password !', 'Oops...', 'error');
    }

    if(newPassword == '') {
      isValid = false;
      loadToast('Please enter a new password !', 'Oops...', 'error');
    }

    if(confirmPassword == '') {
      isValid = false;
      loadToast('Please confirm your new password !', 'Oops...', 'error');
    }

    if(newPassword !== confirmPassword) {
      isValid = false;
      loadToast('The new passwords do not match', 'Oops...', 'error');
    }

    if(isValid === true) {
      //showLoader();
      $('#changePassword').prop('disabled', true);
      var formData = new FormData($('#changePasswordForm')[0]);
      $.ajax({
        type: 'POST',
        url: "{{ route('saveChangePassword') }}",
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (obj) {
          hideLoader();
          $('#changePassword').prop('disabled', false);
          if(obj.statusCode == 200) {
            loadToast(obj.message, 'Done!');
            setTimeout(function() {
              window.location.href = "{{ url()->previous() }}";
            }, 3600);
          } else {
            loadToast(obj.error, 'Oops...', 'error');
          }
        }
      });
    }
  });
</script>
@endsection