@extends('user.layouts.app')

@section('content')
@section('title', 'Invoices List')
<!-- Profile page start  -->
<section class="changepw">
  <h2 class="mt-4 ps-3">{{__('language.change_password')}}</h2>
  <div class="profile-section m-4">
    <div class="changepw_wrapper">
      <h4>{{__('language.change_password')}}</h4>
    </div>
    <div class="changepw-input">
      <div class="row">
         @if(Session::has('message'))
          <p class="alert {{ Session::get('alert-class', 'alert-success') }}">{{ Session::get('message') }}</p>
          @endif
        <div class="col-12 col-lg-6">

          <!-- @if ($errors->any())
          <div class="alert alert-danger mt-3 py-2 px-3">
            <ul>
              @foreach ($errors->all() as $error)
              <li>
                <span>
                  <img src="{{asset('user/icons/alert-icon.svg')}}" alt="error msg" class="alert-icon"/>
                </span>
                <p>{{ $error }}</p>
              </li>
              @endforeach
            </ul>
          </div>
          @endif -->
          <form class="form w-100" novalidate="novalidate"
          action="{{ route('user.change.password') }}" method="POST">
          @csrf
          <div class="mb-4 changepw_form-input">
            <label for="currentPassword" class="form-label">
              {{__('language.current_password')}}
              <span class="form_required">*</span></label
              >
              
              <input type="password" id="currentPassword" class="form-control" aria-describedby="passwordCurrent"
              required name="current_password"
              />
              @error('current_password')
              <div id="passwordCurrent" class="form-text">
                {{$message}}
              </div>
              @enderror
            </div>
            <div class="mb-4 changepw_form-input">
              <label for="newPassword" class="form-label"> {{__('language.new_password')}}
              <span class="form_required">*</span>
              <span data-toggle="tooltip" data-placement="top" title="
                        One small & capital letter
One number
One special character
Should be minimum 8 characters
Should be maximum 16 characters"><img src="{{asset('user/icons/info.png')}}" width="20"/></span>
              </label
              >
              <input
              type="password"
              id="newPassword"
              class="form-control"
              aria-describedby="passwordNew"
              required
              name="password"
              />
              @error('password')
              <div id="passwordNew" class="form-text">
                {{$message}}
              </div>
              @enderror
            </div>
            <div class="mb-4 changepw_form-input">
              <label for="conPassword" class="form-label"> {{__('language.confirm_password')}}
              <span class="form_required">*</span></label
              >
              <input type="password" id="conPassword" class="form-control" aria-describedby="passwordConfirm"
              required
              name="password_confirmation"
              />
              @error('password_confirmation')
              <div id="passwordConfirm" class="form-text">
                {{$message}}
              </div>
              @enderror
            </div>
            <div class="changepw-btns">
              <button
              type="submit"
              class="btn btn-primary btn-lg mt-3 me-3"
              >
              {{__('language.update_password')}}
            </button>
            <!-- <button
            type="button"
            class="btn btn-secondary btn-lg mt-3"
            >
            {{__('language.cancel')}}
          </button> -->
        </div>
      </form>
    </div>
  </div>
</div>
</div>
</section>
<!-- Profile page end -->
@endsection