@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Forgot Password | Anisabel Suites</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="{{ url('forgot-passowrd') }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Forgot Password | Anisabel Suites" />
<meta property="og:description" content="Experience the best of luxury and hospitality at Anisabel Suites, a boutique hotel in the heart of the city. Our spacious and well-appointed suites offer everything you need for a comfortable and relaxing stay, including plush beds, modern amenities, and stunning views. With our convenient location, you'll be close to all the major attractions, restaurants, and shopping. Book your stay today and experience the difference of Anisabel Suites." />
<meta property="og:site_name" content="Forgot Password | Anisabel Suites" />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
@endsection

@section('content')
<div class="container my-5">
    <div class="row">
        <div class="col-12 col-md-6" data-aos="fade-right">
            <img src="{{ asset('images/login-img.jpg') }}" class="img-fluid my-5" alt="">
        </div>
        <div class="col-12 col-md-6" data-aos="fade-left">
          <div>
            <h1 class="color-mid fw-bold text-center my-2">Forgot password</h1>
            <form action="{{ url('request-password') }}" class="form-forgot" method="POST"> @csrf
                <div class="mt-5">
                    <label for="email" class="form-label fw-bold color-mid">Email Address</label>
                    <input type="email" class="form-control rounded mb-3" name="email" id="email" placeholder="" style="border:1px solid #b19357; height: 50px;">
                    @error('email')
                        <span class="text-danger">{{ $message }}</span><br>
                    @enderror
                </div>
                <div class="my-5">
                    <button type="submit" class="btn bg-color-light w-100">Submit</button>
                </div>
                <div class="mt-5">
                    <span class="color-mid">Not a member yet?</span> <a href="{{url('membership')}}"><span class="text-decoration-underline">Inquire Now</span></a>
                </div>
            </form>
          </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
  $(document).ready(function () {
      $('.form-forgot').submit(function (e) {
          e.preventDefault();
          var form = $(this);
          var formData = form.serialize();

          $.ajax({
              method: "POST",
              url: '/request-password',
              data: formData,
              success: function (response) {
                  if (response.success) {
                      showSuccessAlert();
                  } else {
                      showErrorAlert('You already sent a request!');
                  }
              },
              error: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                        showFieldErrors(jqXHR.responseJSON.errors);
                    } else {
                        showErrorAlert('Failed to submit.');
                    }
                }
          });

          function showSuccessAlert() {
              Swal.fire({
                  toast: true,
                  position: 'top-end',
                  icon: 'success',
                  text: 'Request Submitted!',
                  showConfirmButton: false,
                  timer: 1500,
                  timerProgressBar: true,
              }).then(function() {
                window.location.href = '{{ url('user-login') }}';
              });
          }

          function showErrorAlert(message) {
              Swal.fire({
                  toast: true,
                  position: 'top-end',
                  icon: 'error',
                  text: message,
                  showConfirmButton: false,
                  timer: 5000,
                  timerProgressBar: true,
              });
          }

          function showFieldErrors(errors) {
              for (var key in errors) {
                  if (errors.hasOwnProperty(key)) {
                      showErrorAlert(errors[key][0]);
                  }
              }
          }
      });
  });
</script>
@endsection