@extends('main')
@section('content')
<style>
  .form-container {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
} 
</style>
<main>
    <section id="blog" class="blog-area p-relative pt-95 pb-90 fix">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-8 col-lg-10">
            <div class="section-title text-center mb-80">
              <h2>Book an  Appointment Now</h2>
            </div>
          </div>
        </div>
        <form id="contact-form">
          <div class="row col-10 m-auto">
          <div class="col-lg-12">                               
              <div class="contact-field p-relative c-subject mb-20">                                   
                  <input type="name" placeholder="Write your Name here" id="name">
              </div>
          </div>	
          <div class="col-lg-12">                               
            <div class="contact-field p-relative c-subject mb-20">                                   
                <input type="phone" placeholder="Write your Phone Number here" id="phone_no">
            </div>
        </div>		
          							
          <div class="col-lg-12">
             
              <div class="slider-btn">  
                  <button class="btn ss-btn" type="submit" data-animation="fadeInRight">Book Now</button>                                        
              </div>                             
          </div>
      </div>
  </form>
      </div>
    </section>
</main>
@endsection

@push('scripts')
<script>
        
        $("#contact-form").on("submit", function (e) {
        e.preventDefault();
        var name = $("#name").val();
        var phoneNo = $("#phone_no").val();

        // Check if the fields are empty
        if (name === "" || phoneNo === "") {
            alert("Please fill out all fields.");
            return; // Stop form submission if validation fails
        }
        var formData = new FormData();
        formData.append("name", $("#name").val());
        formData.append("phone_no", $("#phone_no").val());
        
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content') }
        });

        $.ajax({
            url: '/book_now',
            type: 'POST',
            processData: false,
            contentType: false,
            data: formData,
            success: function (response) {
                $("#name").val('');
                $("#phone_no").val('');
               
                alert("Appoinment Request submitted successfully.");
            },
            error: function (response) {
                alert("Error submitting the Appoinment.");
            }
        });
    });

</script>
@endpush