@extends('layouts.front.master')
@section('contant')
<section class="banner-inner-area sub-bg bg-image" data-background="{{ asset('assets/images/bg/banner-inner-bg.png') }}" style="background-image: url(&quot;assets/images/bg/banner-inner-bg.png&quot;);">
           <div class="banner-inner__shape1">
               <img class="animation__sunMove" src="{{ asset('assets/images/shape/banner-inner-shape1.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape2">
               <img src="{{ asset('assets/images/shape/banner-inner-shape2.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape3">
               <img class="animation__arryLeftRight" src="{{ asset('assets/images/shape/banner-inner-shape3.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape4">
               <img class="animation__arryUpDown" src="{{ asset('assets/images/shape/banner-inner-shape4.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape5">
               <img src="{{ asset('assets/images/shape/banner-inner-shape5.png') }}" alt="image">
           </div>
           <div class="banner-inner__circle">
               <img class="slide-effect1" src="{{ asset('assets/images/shape/banner-inner-circle.png') }}" alt="image">
           </div>
           <div class="banner-inner__circle2">
               <img class="slide-effect2" src="{{ asset('assets/images/shape/banner-inner-circle2.png') }}" alt="image">
           </div>
           <div class="banner-inner__dots">
               <img class="pxl-image-zoom" src="{{ asset('assets/images/shape/banner-inner-dots.png') }}" alt="image">
           </div>
           <div class="container">
               <div class="banner-inner__content">
                   <h1>Forgot Password</h1>
                   <ul>
                       <li><a href="{{ route('/') }}">Home</a></li>
                       <li><i class="fa-regular fa-angle-right"></i></li>
                       <li>Forgot Password</li>
                   </ul>
               </div>
           </div>
</section>
<section class="signup__area po-rel-z1 pt-100 pb-145" style="position: relative; overflow: hidden;">
   <div class="sign__shape">
      <img class="circle" src="asset('img/login/circle.png')}}" alt="">
      <img class="zigzag" src="asset('img/login/zigzag.png')}}" alt="">
      <img class="dot" src="asset('img/login/dot.png')}}" alt="">
      <img class="bg" src="asset('img/login/sign-up.png')}}" alt="">
   </div>
   <div class="container">
      <div class="row">

         <div class="alert alert-success alert-dismissible fade show successMsg" style="display: none">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <span>Link has been sent on your registered email, Check your inbox for reset password!</span>
         </div>

         <div class="col-xxl-8 offset-xxl-2 col-xl-8 offset-xl-2">
            <div class="section__title-wrapper text-center" style="margin-bottom: 20px">
               <h2 class="section__title">Forgot Password<br></h2>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-xxl-6 offset-xxl-3 col-xl-6 offset-xl-3 col-lg-8 offset-lg-2">
            <div class="sign__wrapper white-bg">
               <div class="sign__form">
               <!-- <form class="mb-5" id="forgotPasswordForm">
                   
                     <div class="form-group mb-2">
                        <label for="modalSigninEmail1">
                        Email
                        </label>
                        <input type="hidden" class="form-control" id="hiddenemailfield" name="hiddenemailfield" value="emailfield">
                        <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                        <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-email"></p>
                     </div>
                     <button class="btn btn-block btn-primary forgot-password" type="button">
                     SUBMIT
                     </button>
                  </form> -->
                  <form class="mb-5 p-4 border rounded shadow-sm bg-white" id="forgotPasswordForm" style="max-width: 400px; margin: auto;">
  <!-- Email -->
  <div class="form-group mb-3">
    <label for="modalSigninEmail1" class="form-label fw-bold">
      Email Address
    </label>
    <input type="hidden" class="form-control" id="hiddenemailfield" name="hiddenemailfield" value="emailfield">
    <input type="email" class="form-control border-primary" id="email" name="email" placeholder="Enter your email" required>
    <p class="text-danger small mt-1" id="error-email"></p>
  </div>

  <button class="btn btn-primary w-100 mt-2 forgot-password" type="button">
    <strong>Submit</strong>
  </button>
</form>



                  <!-- <p class="mb-0 font-size-sm text-center">
                     Don't have an account? <a class="text-underline" href="{{route('register')}}">Sign up</a>
                  </p> -->
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
   <script>
    window.forgtePassword = "{{ route('check-email') }}";
    window.jsonUrl = {!! json_encode(url('/')) !!};
</script>
@endsection