@extends('layout.master')

@section('content')

<main id="main">

  <!-- ======= Breadcrumbs ======= -->
  <section id="why-us" class="whyus bg1 " style="margin-top: 130px;">
    <div class="overlay"></div>
    <div class="container">
      <div class="text-center page_header">
        <h2>Contact Us</h2>

      </div>

  </section>

  <!-- ======= Contact Section ======= -->
  <section id="contact" class="contact">
    <div class="container">

      <div class="section-title">

        <p>Have questions or ready to elevate your billing experience? <br>Reach out to us for personalized assistance. Our team is here to support your practice with efficient and reliable contact options.</p>
      </div>
    </div>

    <div class="container">
      @if (isset($success))
      <div class="alert alert-success d-flex justify-content-center">
        {{ $success }}
      </div>
      @endif

      @if (isset($error))
      <div class="alert alert-danger d-flex justify-content-center">
        {{ $error }}
      </div>
      @endif
      <div class="row mt-5">

        <div class="col-lg-4">
          <div class="info">
            <div class="address">
              <i class="bi bi-geo-alt"></i>
              <h4>Location:</h4>
              <p>eServMD, Inc.<br>
                11471 West Sample Rd # 40,
                Coral Springs, Florida 33065</p>
            </div>

            <div class="email">
              <i class="bi bi-envelope"></i>
              <h4>Email:</h4>
              <p><a href="mailto:info@eservmd.com">info@eservmd.com</a></p>
            </div>

            <div class="phone">
              <i class="bi bi-phone"></i>
              <h4>Call:</h4>
              <p><a href="tel:9542348203">(954) 234-8203</a></p>
            </div>

          </div>

        </div>

        <div class="col-lg-8 mt-5 mt-lg-0">

          <form action="{{ route('contact') }}" id="contactForm" method="post" role="form" class="php-email-form">
            @csrf
            <div class="row">
              <div class="col-md-6 form-group">
                <input type="text" name="full_name" class="form-control" id="full_name" placeholder="Your Name" required>
              </div>
              <div class="col-md-6 form-group mt-3 mt-md-0">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
              </div>
            </div>
            <div class="form-group mt-3">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
            </div>
            <div class="form-group mt-3">
              <textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
            </div>
            <div class="my-3">
              <div class="loading">Loading</div>
              <div class="error-message"></div>
              <div class="sent-message">Your message has been sent. Thank you!</div>
            </div>
            <div class="text-center"><button type="submit">Send Message</button></div>
          </form>

        </div>

      </div>
      <div class="row mt-5">
        <div>
          <iframe style="border:0; width: 100%; height: 350px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1788.8190605846999!2d-80.28003329935122!3d26.273405823073684!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d90fff21dba6d7%3A0xa7364125cf0d5f34!2seServMD!5e0!3m2!1sen!2s!4v1553010791756" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>

  </section><!-- End Contact Section -->

</main><!-- End #main -->

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // Check if the success message exists
    if ($('.alert.alert-success').length > 0) {
      // Fade out the success message after 4 seconds
      setTimeout(function() {
        $('.alert.alert-success').fadeOut('slow', function() {
          // After fading out, remove the success message from the DOM
          $(this).remove();
        });
      }, 4000); // 4000 milliseconds = 4 seconds
    }
  });

  $(document).ready(function() {
    // Check if the success message exists
    if ($('.alert.alert-danger').length > 0) {
      // Fade out the success message after 4 seconds
      setTimeout(function() {
        $('.alert.alert-danger').fadeOut('slow', function() {
          // After fading out, remove the success message from the DOM
          $(this).remove();
        });
      }, 4000); // 4000 milliseconds = 4 seconds
    }
  });
</script>