@extends('layout.master')
@section('content')
<main id="main">
   <!-- ======= Breadcrumbs ======= -->
   <div class="breadcrumbs">
      <div class="container">
         <div class="d-flex justify-content-between align-items-center">
            <ol>
               <li><a href="{{route('index')}}" class="text-white">Home</a></li>
               <li><a href="{{route('speciality')}}" class="text-white">Speciality</a></li>
            </ol>
         </div>
      </div>
   </div>
   
   
   <section id="why-us" class="why-us">
      <div class="container">
         <div class="section-title">
            <h2>Our Specialities</h2>
            <p><strong>Dive into our specialized billing services tailored for healthcare professionals across various fields. From primary care and surgery to mental health and rehabilitation, our expertise ensures streamlined billing processes, maximum reimbursement, and financial peace of mind for your practice.</strong></p>
         </div>
         <div class="row">
            <form action="#" id="specilityForm" method="post" role="form" class="speciality-form">
               @csrf
              <div class="row">
               <p class="h3 section-title txt-color fw-6">Pick Your Specialty | Schedule Free Demo</p>
               <div class="col-md-1 form-group">
                   <div class="input-group mb-1">
                   </div>
                </div>
                <div class="col-md-3 form-group">
                  <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-ambulance"></i></span>
                           <select class="form-select" name="speciality" id="speciality" required>
                              <option value="">-- Choose Speciality --</option>
                              @if($specialities)
                                 @foreach($specialities as $speciality)
                                 <option value="{{$speciality->name}}">{{$speciality->name}}</option>
                                 @endforeach
                              @endif
                           </select>
                        </div>
                </div>
                <div class="col-md-3 form-group">
                  <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                           <input type="email" name="email" id="email" class="form-control" placeholder="Email address" aria-label="Email" aria-describedby="basic-addon1" required>
                           <input type="hidden" name="full_name" id="full_name" class="form-control" placeholder="Email address" aria-label="full_name" aria-describedby="basic-addon1" value="Web User">
                        </div>
                </div>
                <div class="col-md-3 form-group">
                   <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span>
                           <input type="number" min="0" maxlength="11" name="phone" id="phone" class="form-control" placeholder="Phone Number" aria-label="Phone" aria-describedby="basic-addon1" required>
                        </div>
                 </div>
                 <div class="col-md-1 form-group">
                      <div class="input-group mb-1">
                        <button class="btn btn-primary" id="submitFormSpecility" type="button">Submit</button>
                     </div>
                  </div>
              </div>            
            </form>
               <div class="row">
                  <div class="my-3 d-flex justify-content-center">
                      <div class="loading">Loading...</div>
                      <div class="error-message"></div>
                      <div class="response-message"></div> <!-- Placeholder for response message -->
                  </div>
              </div> 
         </div>
         <hr class="hr-5">
         <!-- Speciality start -->
      <section id="services" class="services">
         <div class="container speciality-bg">
            <div class="row">
               @if($specialities)
                  @foreach($specialities as $speciality)
                     <div class=" col-md-3 ">
                        <div class="flip-box">
                          <div class="flip-box-inner">
                            <div class="flip-box-front">
                              <div class="speciality-box-inner">
                                 <img src="{{asset('storage')}}/{{$speciality->icon}}" class="w-100 icona"><br><br>
                                 <h5 class="front_services txt-color"><a href="#">{{ $speciality->name }}</a><br>&nbsp;
                                 </h5>
                                 <!-- <a type="button" class="btn btn-primary btn-sm" href="{{url('/medical_billing')}}" name="" >Explore</a> -->
                              </div>
                            </div>
                            <div class="flip-box-back">
                              <p class="box-back-txt">{{ strip_tags($speciality->description) }}</p>
                            </div>
                          </div>
                        </div>
                     </div>
                  @endforeach
              @endif
            </div>
         </div>
   </section>
   <!-- Speciality end -->
      </div>
      <div class="row">
         <div class="col-md-12 text-center">
            <h3><strong>Were you unable to find your Specialty here?</strong></h3>
            <h4 class="txt-color">
               <strong class="txt-color">Please Call Our Billing Expert</strong>
               <a href="tel:9542348203" class="btn btn-primary">(954) 234-8203 Call Now</a>
            </h4>
               <h5><strong>Or</strong></h5>
               <h4><strong class="txt-color">Provide Us With Your More Details</strong></h4>
         </div>
         
      </div>
      <div class="container">
            <div class="section-title">
               <form action="#" method="post" id="contactForm" role="form" class="speciality-form">
                  @csrf
              <div class="row">
               <div class="col-md-1 form-group">
                   <div class="input-group mb-1">
                   </div>
                </div>
                <div class="col-md-3 form-group">
                  <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
                           <input type="text" class="form-control" placeholder="Full Name" name="full_name" id="full_name" aria-label="Name" aria-describedby="basic-addon1" required>
                        </div>
                </div>
                <div class="col-md-3 form-group">
                  <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span>
                           <input type="email" name="email" id="email" class="form-control" placeholder="Email address" aria-label="Email" aria-describedby="basic-addon1" required>
                        </div>
                </div>
                <div class="col-md-3 form-group">
                   <div class="input-group mb-3">
                           <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span>
                           <input type="number" name="phone" id="phone" min="0" maxlength="10" class="form-control" placeholder="Phone Number" aria-label="Phone" aria-describedby="basic-addon1" required>
                        </div>
                 </div>
                 <div class="col-md-1 form-group">
                      <div class="input-group mb-1">
                        <button class="btn btn-primary" id="submitForm" type="button">Submit</button>
                     </div>
                  </div>
              </div>              
            </form>
               <div class="row">
                  <div class="my-3 d-flex justify-content-center">
                      <div class="loading">Loading...</div>
                      <div class="error-message"></div>
                      <div class="response-message"></div> <!-- Placeholder for response message -->
                  </div>
              </div> 
            </div>
         </div>
   </section>
</main>
<!-- End #main -->
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#submitForm').click(function () {
            var form = $('#contactForm');
            var formData = form.serialize();

            $.ajax({
                type: form.attr('method'),
                url: '{{ route("send.email") }}', // Update to the correct route for email sending
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    $('.loading').show();
                },
                success: function (response) {
                    $('.loading').hide();
                    //$('.sent-message').show().html(response.message);
                    form[0].reset(); // Reset form fields
                    $('.response-message').html(response.message).show(); // Show response message
                    setTimeout(function() {
                         $('.response-message').fadeOut('slow');
                     }, 2000);
                },
                error: function (xhr, status, error) {
                    $('.loading').hide();
                      var errorMessage = xhr.responseJSON.message;
                      if (errorMessage) {
                          $('.error-message').show().html(errorMessage);
                      } else {
                          $('.error-message').show().html("Error: " + error);
                      }
                      setTimeout(function() {
                         $('.error-message').fadeOut('slow');
                     }, 2000);
                }
            });

        });
    });
</script>

<!-- Specility form -->

<script>
    $(document).ready(function () {
        $('#submitFormSpecility').click(function () {
            var form = $('#specilityForm');
            var formData = form.serialize();

            $.ajax({
                type: form.attr('method'),
                url: '{{ route("send.email") }}', // Update to the correct route for email sending
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function () {
                    $('.loading').show();
                },
                success: function (response) {
                    $('.loading').hide();
                    //$('.sent-message').show().html(response.message);
                    form[0].reset(); // Reset form fields
                    $('.response-message').html(response.message).show(); // Show response message
                    setTimeout(function() {
                         $('.response-message').fadeOut('slow');
                     }, 2000);
                },
                error: function (xhr, status, error) {
                    $('.loading').hide();
                      var errorMessage = xhr.responseJSON.message;
                      if (errorMessage) {
                          $('.error-message').show().html(errorMessage);
                      } else {
                          $('.error-message').show().html("Error: " + error);
                      }
                      setTimeout(function() {
                         $('.error-message').fadeOut('slow');
                     }, 2000);
                }
            });

        });
    });
</script>