@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | Change Password ')}}
@endsection
@section('headerTitle')
  {{__('Change Password')}}
@endsection
@section('content')
 <!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
     <!--  <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href=""{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">Change Password</li>
            </ol>
          </div>
        </div>
      </div> -->
    </section>
    <section class="content">
      <div class="container-fluid">
        <div class="row">
		    <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Change Password</h3>
                     </div>
                     {{ Form::open(['route' => 'student.parent.update-password', 'method' => 'post','id' => 'changePassword','class'=>"form-horizontal",'enctype'=>"multipart/form-data"]) }}
                        <input type="hidden" name="type" value="change-password" />
                        <div class="card-body">
                          <div class="form-group row">
                              <div class="col-sm-6 form-validation">
                                <label class="col-form-label">New Password</label>
                                <input type="password" name="password" class="form-control" placeholder="New Password" aria-label="Password" required />
                              </div>
                              <div class="col-sm-6 form-validation">
                                <label class="col-form-label">Confirm Password</label>
                                <input type="password" name="confirm_password" class="form-control" placeholder="Confirm Password" aria-label="Password" required />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-8">
                                  {{ Form::submit('Submit', ['class' => 'btn btn-lg btn-primary']) }}
                              </div>
                          </div>
                        </div>
                     {{ Form::close() }}
			        </div>
            </div>			
		    </div>
	    </div>
    </section>
 </div>
@endsection
@push('web-scripts')
  <script>
    $('#changePassword').on('submit', async function(e) {
        e.preventDefault(); // Prevent the default form submission
        // Gather form data
        const formData = new FormData(this);
        const submitButton = $('#changePassword button[type="submit"]');
        const originalText = submitButton.text(); // Store original button text
        
        const options = {
            type:  $(this).attr('method'),
            data: formData,
            contentType: false,
            processData: false,
            url:  $(this).attr('action'),
            headers: { Accept: "application/json" },
            dataType:'json',
            beforeSend: function () {
                // Clear previous errors
                $('.invalid-feedback').remove();
                $('.is-invalid').removeClass('is-invalid');
                submitButton.prop('disabled', true).text('Submitting...'); 
            },
            complete: function () {
                submitButton.prop('disabled', false).text(originalText);
            }
        };
        try {
            const response = await ajaxRequest(options);
            if(response.success) {
                $.NotificationApp.successMessageWithReload(response.message, true)
            }
        } catch (error) {
            console.log(error.xhr);
            if (error.status === 'error') {
                const errors = error.xhr.responseJSON.errors;
                await renderErrors(errors); // Use the common function here
            } else {
                alert('An error occurred. Please try again.');
            }
        }    
    });
  </script>
@endpush