@extends("front.layout")

@section("content")
<!-- <div class="container-xxl py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-12 right-wrap">

                <div class="h-100">
                    <h1 class="display-4 pb-3">Change Password </h1>
                    <form name="frmChangePassword" id="frmChangePassword" method="post" enctype="multipart/form-data" class="mt-4">
                        @csrf
                        <div class="row g-3">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                            <div class="row">
                            <div class="col-lg-12">
                                <input type="password" class="form-control" id="current_password" name="current_password" placeholder="Current Password" required>
                            </div>
                            <div class="col-lg-12">
                                <input type="password" class="form-control" id="new_password" name="new_password" placeholder="New Password" required>
                            </div>
                            <div class="col-lg-12">
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" required>
                            </div>

                            <div class="col-lg-12">
                                <div class="alert alert-info" style="display: none;" id="resmessage"></div>
                                <div id="btnloader" class="text-center" style="display: none;"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
                                <button class="btn btn-primary" id="btnsave">Update</button>
                            </div>
                        </div>
                        </div>
                    </form>
                </div>
                </div>

            </div>
        </div>
    </div>
</div> -->
<!-- About End -->
<!--
/*
* Author: Vidhi Shah
* Updated date: 12th Jun 2024
* Description: Change Password functionality
* Functionality was not working. Updated code for making this feature functional.
*/
-->
<div class="container-fluid main-container-a">
      <div class="a-form">
        <div class="">
          <div>
            <h3>Change Password</h3>
           
            <form class="mt-4" name="frmChangePassword" id="frmChangePassword" method="post" enctype="multipart/form-data">
            @csrf
              <div class="mb-3">
                <label for="current_password" class="form-label label-f">Current Password</label>
                <input
                  type="password"
                  name="current_password"
                  class="form-control form-st"
                  id="current_password"
                  placeholder="Enter your current password"
                  required
                />
              </div>

              <div class="mb-3 password">
                <label for="new_password" class="form-label label-f">New Password</label>
                <input
                  type="password"
                  name="new_password"
                  class="form-control form-st"
                  id="new_password"
                  placeholder="Enter your new password"
                  required
                />
              </div>
              <div class="mb-4">
                <label for="confirm_password" class="form-label label-f">Confirm Password</label>
                <input
                  type="password"
                  name="confirm_password"
                  class="form-control form-st"
                  id="confirm_password"
                  placeholder="Enter your confirm password"
                  required
                />
              </div>
              <div class="alert alert-info" style="display: none;" id="resmessage"></div>
              <div id="btnloader" class="text-center" style="display: none;"><i class="fa fa-spinner fa-spin fa-2x"></i></div>
              <button type="submit" class="btn btn-primary update-btn" id="btnsave">Update</button>
            </form>
          </div>
        </div>
      </div>
    
    </div>

@endsection
@push("scripts")
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
    $("#frmChangePassword").validate({
        errorClass: "input-error text-danger",
        errorPlacement: function(error, element) {
            if (element.attr("name") == "current_password" ) {
                error.insertAfter(element);
            } else if (element.attr("name") == "new_password" ) {
                error.insertAfter(element);
            } else if (element.attr("name") == "confirm_password" ) {
                error.insertAfter(element);
            }
        },
        rules: {
            "current_password": {
                required: true
            },
            "new_password": {
                required: true
            },
            "confirm_password": {
                required: true
            }
        },
        submitHandler: function(){
            
            let formdata = $("#frmChangePassword").serialize();

            $.ajax({
                method: "post",
                url: "{{route('save-password')}}" ,
                data: formdata,
                beforeSend() {
                    $("#btnloader").show();
                    $("#btnsave").hide();
                },
                success: function(response) {
                    $("#btnloader").hide();

                    if(response.success == 1) {
                        $("#resmessage").html(response.message).removeClass("alert-info").addClass("alert-success").removeClass("alert-danger").show();
                        $("#frmChangePassword")[0].reset();
                    } else {
                        $("#btnsave").show();
                        $("#resmessage").html(response.message).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $("#btnloader").hide();
                    $("#btnsave").show();
                    let jsonValue = jQuery.parseJSON( xhr.responseText );

                    let obj = jsonValue.errors;
                    let errHtml = ''
                    Object.keys(obj).forEach(key => {
                        // console.log(key, obj[key]);
                        errHtml = errHtml + obj[key] + "<br/>";
                    });

                    $("#resmessage").html(errHtml).removeClass("alert-info").removeClass("alert-success").addClass("alert-danger").show();

                }
            });
        }
    });
});
</script>
@endpush