@extends('front.frontLayout')
@section('title','Contact Us')
@section('pagelevelcss')
@stop
@section('content')
<section class=" contact-banner ">
   <div class="container">
      <div class="row align-items-center">
         <div class="col-md-6">
            <div class="banner-content">
               <h1 class="main-title">Contact us</h1>
               <!-- <h1 class="main-title">Contact Our<br>Friendly Team</h1> -->
               <p>We’re always here to help! Send us an email or call our friendly team. </p>
            </div>
         </div>
         <div class="col-md-6 banner-img-wrapper">
            <!-- <div class="banner-img">
               <img src="https://4medicaltesting.co.uk/frontend/images/contact-banner.png" alt="product">
               </div> -->
         </div>
      </div>
   </div>
</section>
<section class="contact-main section-padding" id="contact-main-sec">
   <div class="container">
      <!-- <div class="info-wrapper">
        
      </div> -->
      <div class="row">
         <div class="col-md-6">
         	 <div class="info">
               <div class="phone">
                  <i class="fa fa-phone" aria-hidden="true"></i>
                  <div class="info-inner">
                     <h4>Call:</h4>
                     <p>{{ config('app.contact_us_phone') }}</p>
                  </div>
               </div>
               <div class="email">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                  <div class="info-inner">
                     <h4>Email:</h4>
                     <p>{{ config('app.contact_us_email') }}</p>
                  </div>
               </div>
               <div class="address">
                  <i class="fa fa-map-marker" aria-hidden="true"></i>
                  <div class="info-inner">
                     <h4>Location:</h4>
                     <p>{{ config('app.contact_us_location') }}</p>
                  </div>
               </div>
            </div>
           
         </div>
         <div class="col-md-6">
         	 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3055.0388340782197!2d-83.12128388488334!3d40.029912386998205!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8838922c58f7c889%3A0xfc587a8fe05510b2!2s3681%20Fishinger%20Blvd%2C%20Hilliard%2C%20OH%2043026!5e0!3m2!1sen!2sus!4v1667617490793!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            <!-- <form action="{{route('contactus.post')}}" method="post" name="contact_us_form" id="contact_us_form" class="contact-form contact-us-form">
               {{ csrf_field() }}
               <h2 class="h3 mb-3 main-title" style="text-align: center">Personal information</h2>
               <input type="text" id="name" name="name" class="form-control" placeholder="Name*" value="{{old('name')}}" maxlength="255" autofocus>
               <input type="text" id="email" name="email" class="form-control" placeholder="Email*" value="{{old('email')}}" maxlength="255">
               <textarea id="message" class="form-control" name="message" rows="4" cols="50" placeholder="Discription*">{{old('message')}}</textarea>
               <div class="col-md-12">
                  <div class="form-group row mt-3">
                     <div class="">
                        {!! htmlFormSnippet() !!}
                     </div>
                  </div>
                  <div id="g-re-captcha" data-sitekey="{{ config('app.google_recaptcha_site_key') }}" class="" style="margin-top: -20px; display:none; color: red; margin-left: -15px;">Captcha is required</div>
              </div>
               <div class="text-center mt-3">
                  <button class="btn custom-btn btn-block" id="contact-submit" type="submit">Submit</button>
               </div>
            </form> -->

         </div>
      </div>
   </div>
</section>
<section id="faq" class="faq section-padding" style="display: none;">
   <div class="container">
      <div class="section-title">
         <h2 class="main-title">Frequently Asked Questions</h2>
      </div>
      <div id="accordion">
         @if(count($faqs) > 0)
            @foreach($faqs as $key => $value)
            <div class="card">
               <div class="card-header">
                  <a class="card-link {{$key}} @if($key != 0) collapsed @endif" data-toggle="collapse" href="#collapse{{ $value->id }}">
                     {!! $value->question !!}
                  </a>
               </div>
               <div id="collapse{{ $value->id }}" class="collapse @if($key == 0) show @endif" data-parent="#accordion">
                  <div class="card-body">
                     {!! $value->answer !!}
                  </div>
               </div>
            </div>
            @endforeach
         @endif
      </div>
      <div class="text-center mt-5 mb-3">
         <a href="#" title="" class="custom-btn faq-btn" data-toggle="modal" data-target="#myAddFaqModal">Ask a Different Question</a>
      </div>
      <!-- modal -->
      <!-- The Modal -->
      <div class="modal fade faq-modal" id="myAddFaqModal">
         <div class="modal-dialog">
            <div class="modal-content">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Add Your Question</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>
               <!-- Modal body -->
               <!-- <form class="faq-form" > -->
               <form class="faq-form" action="{{route('faq.post')}}" method="post" name="faq_form" id="faq_form">
                  {{ csrf_field() }}
                  <div class="modal-body">
                     <input id="name" type="text" name="name" value="{{old('name')}}" maxlength="255" placeholder="Name*" class="form-control">
                     <input id="email" type="text" name="email" value="{{old('email')}}" maxlength="255" placeholder="Email*" class="form-control">
                     <textarea id="message" name="message" class="form-control" placeholder="Message*">{{old('message')}}</textarea>
                  </div>
                  <!-- Modal footer -->
                  <div class="modal-footer">
                     <button type="submit" class="btn custom-btn" >Submit</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>
@endsection
@section('pageleveljs')
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="{{asset('frontend/js/jquery.validate.min.js')}}?v=1.0"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript">
$(function(){
   $(document).on("click","#recaptcha-verify-button",function() {
        $('#g-re-captcha').hide();
   })

   $('.contact-us-form').on('submit', function(e) {
        if(grecaptcha.getResponse() == "") {
            e.preventDefault();
            $('#g-re-captcha').show();
        } else {
            $('#g-re-captcha').hide();
        }
    });

   $("#contact_us_form").validate({
      ignore: '',
      rules: {   
         name:"required",
         email:{
            required: true,
            email: true,
            validEmail: true
         },
         message:{
            required: true,
         },
      },
      messages:{
         name: {
            required: "Please enter name.",
         },
         email: {
            required: "Please enter email.",
            email: "Please enter valid email.",
         },
         message: {
            required: "Please enter message.",
         },
      },
      errorElement: 'span',
   });

   $("#faq_form").validate({
      ignore: '',
      rules: {   
         name:"required",
         email:{
            required: true,
            email: true,
         },
         message:{
            required: true,
         },
      },
      messages:{
         name: {
            required: "Please enter name.",
         },
         email: {
            required: "Please enter email.",
            email: "Please enter valid email.",
         },
         message: {
            required: "Please enter message.",
         },
      },
      errorElement: 'span',
   });
   $.validator.addMethod("validEmail", function (value, element) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(value);
        
    }, "Please enter proper email address");
});
</script>
@stop