@extends('user.layouts.app')

@section('body_class', 'change-password')

@section('content') 

<div class="container login-wrapper d-flex align-items-center justify-content-center">
  <div class="row w-100 justify-content-center">
    <div class="member-login-box">
      <div class="row g-0 login-card">

        <!-- Login Form Side -->
        <div class="col-md-12 login-show-box">
          @if(Session::has('success'))
          <p class="alert alert-success">{{ Session::get('success') }}</p>
          @endif

          <div class="member-login">
            <div class="padlock">
              <div class="padlock-icon">
                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                  <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                  <style>
                    .s0 {
                      fill: #ffffff
                    }
                  </style>
                  <g id="Objects">
                    <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0"
                      d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z" />
                  </g>
                </svg>
              </div>
            </div>
            <div class="verify-wrap">
              <h3 class="text-center">Set Your Password</h3>
            </div>
            <!-- Tab Content -->
            <div class="change-content" id="">
              <div class="tab-pane">
                <form method='POST' action="{{route('user.setPasswordSubmit')}}">
                  @csrf
                  <div class="form-row box-focus">
                    <label for="new-password">New Password</label>
                    <input type="password" class="form-control" id="new-password" name="new_password" required
                    placeholder="">
                    <span toggle="#new-password" class="field-icon toggle-password"></span>
                  </div>
                  {{-- Validation error message --}}
                  @error('new_password')
                  <p class="text-danger small mt-1">{{ $message }}</p>
                  @enderror

                  <div class="form-row box-focus">
                    <label for="confirm-password">Confirm Password</label>
                    <input type="password" class="form-control" id="confirm-password" name="new_password_confirmation" required
                    placeholder="">
                    <span toggle="#confirm-password" class="field-icon toggle-password"></span>
                  </div>
                  {{-- Validation error message --}}
                  @error('new_password_confirmation')
                  <p class="text-danger small mt-1">{{ $message }}</p>
                  @enderror

                  <div class="login-btn-outer">
                    <div class="d-grid gap-3 w-100">
                      <button type="submit" class="btn btn-primary">Set Password</button>
                      <a href="{{route('user.dashboard')}}" class="btn btn-secondary h-44">Skip For Now</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>
@endpush