@extends('layouts.nifty')

@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('mylib/selectmultiple/choices.min.css') }}">
<script src="{{ asset('mylib/selectmultiple/choices.min.js') }}"></script>

<style>
.footerbutton {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 8%;
   margin-bottom: 6px;
   background-color: #fff;
   color: white;
   text-align: center;
}

.table-responsive,
.dataTables_scrollBody {
    overflow: visible !important;
}
 
.table-responsive-disabled .dataTables_scrollBody {
    overflow: hidden !important;
}

/* Datatables Buttons */

   .btn-sm-menu {
      width: 50px;
      height: 30px;
      /*border: 1px solid #474747;*/
   }
   .btn-sm-menu2 {
      width: 120px;
      height: 30px;
      border-radius: 10px;
      border: .5px solid #474747;
   }  
/* End Datatables Buttons */   
/* modal position */
.modal {
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* end modal position */
.mt-100{margin-top: 100px}body{background: #00B4DB;background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);background: linear-gradient(to right, #0083B0, #00B4DB);color: #514B64;min-height: 100vh}
</style>
		
        <section id="content" class="content">
            <div class="content__header content__boxed overlapping">
                <div class="content__wrap">

                    <!-- Breadcrumb -->
                    <!--
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="demo-pli-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Change Password</li>
                        </ol>
                    </nav>
                    -->
                    <!-- END : Breadcrumb -->

                    <h1 class="page-title mb-0 mt-2">Change Password</h1>
                    
                    <p>Complete the form below to Change your Password</p>
                    

                </div>

            </div>

            <div class="content__boxed">
                <div class="content__wrap">

                    <section>

                        <form action="{{ route('auth.change_password') }}" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
                        @csrf
                        @method('PATCH')
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    
                                    <div class="card h-100">
                                        <div style="padding-top: 20px" class="container-fluid">
                                            @if(session('message'))
                                                <div class="row mb-2">
                                                    <div class="col-lg-12">
                                                        <div class="alert alert-success" role="alert">{{ session('message') }}</div>
                                                    </div>
                                                </div>
                                            @endif
                                            @if($errors->count() > 0)
                                                <div class="alert alert-danger">
                                                    <ul class="list-unstyled">
                                                        @foreach($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            @yield('content')

                                        </div>                                         
                                        <div class="card-body">

                                            <div class="form-group mb-3 {{ $errors->has('current_password') ? 'has-error' : '' }}">
                                                <label for="current_password">Current Password *</label>
                                                <input type="password" id="current_password" name="current_password" class="form-control" required>
                                                @if($errors->has('current_password'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('current_password') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <div class="form-group mb-3 {{ $errors->has('new_password') ? 'has-error' : '' }}">
                                                <label for="new_password">New Password *</label>
                                                <input type="password" id="new_password" name="new_password" class="form-control" required>
                                                @if($errors->has('new_password'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('new_password') }}
                                                    </em>
                                                @endif
                                            </div>
                                            <div class="form-group mb-3 {{ $errors->has('new_password_confirmation') ? 'has-error' : '' }}">
                                                <label for="new_password_confirmation">New Password Confirmation *</label>
                                                <input type="password" id="new_password_confirmation" name="new_password_confirmation" class="form-control" required>
                                                @if($errors->has('new_password_confirmation'))
                                                    <em class="invalid-feedback">
                                                        {{ $errors->first('new_password_confirmation') }}
                                                    </em>
                                                @endif
                                            </div>

                                            <div class="card-footer" style="text-align: center;">
                                              <button type="button" class="btn btn-sm btn-info" onclick="window.location.href='{{ route('home') }}'"><i class="fa fa-home"></i> Home</button>
                                              <button type="submit"  class="btn btn-sm btn-primary"><i class="fas fa-paper-plane"></i> Change Password</button>
                                            </div>                                        

                                        </div>
                                    </div>
                                </div>


                            </div>
                      </form>
                    </section>


                </div>
            </div>
            <!-- FOOTER -->
            @include('partials.footer')
            <!-- END - FOOTER -->

        </section>




<script type="text/javascript" language="javascript" src="{{ asset('mylib/js/jquery-3.5.1.js') }}"></script>

<script>
function validateForm() {
  
  var current_password = document.getElementById('current_password').value;
  var new_password = document.getElementById('new_password').value;
  var new_password_confirmation = document.getElementById('new_password_confirmation').value;

  var n = new_password.length;

  if(n < 6){
      alert("Password must be at least 6 characters");
       return false;
  }
  if(new_password != new_password_confirmation){
      alert("New Password and Confirm Password does not match!");
       return false;
  }



  var ok = confirm("Are you sure you want to Change Password?");
  if(ok){  
    return true; 
  } else {  
    return false; 
  }
}
</script>




@endsection