@extends('layouts.app')

@section('content')
<style>
  #error-captcha{
    color:red;
    margin-left:18px;
  }
  .content{
    padding-top:65px;
  }
</style>
<section class="container-fluid" style="padding-bottom:10px;">
  <div class="content">
    
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-10">
          

          <div class="row justify-content-center">
            <div class="col-md-6">
              
              <h3 class="heading mb-4">Let's talk about everything!</h3>
              <p><img src="images/undraw-contact.svg" alt="Image" class="img-fluid"></p>


            </div>
            <div class="col-md-6">
              
              <form class="mb-5" method="POST" action="" id="contact-form" >
          @csrf
          
                <div class="row">
                  <div class="col-md-12 form-group">
                    <input type="text" class="form-control" name="name" id="name" placeholder="Your name" autocomplete="off">
                    <!-- <span class="text-danger font-weight-bold nameerror"></span> -->
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 form-group">
                    <input type="text" class="form-control" name="email" id="email" placeholder="Email">
                    <span class="text-danger font-weight-bold emailerror"></span>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 form-group">
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject">
                    <span class="text-danger font-weight-bold subjecterror"></span>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12 form-group">
                    <textarea class="form-control" name="message" id="message" cols="30" rows="7" placeholder="Write your message"></textarea>
                    <span class="text-danger font-weight-bold messageerror"></span>
                  </div>
                </div>
                <div class="row">
                  <div class="g-recaptcha brochure__form__captcha col-md-12 form-group"  data-sitekey="6LewA_oeAAAAAKCRtf-k_z298_Gv1slfPnDFT24U">
                  </div>
                  <span id="error-captcha" class=""></span>
                </div>

                <div class="row">
                  <div class="col-12">
                    <input type="submit" value="Send Message" class="btn btn-primary rounded-0 py-2 px-4" id="submitButton">
                    <span class="submitting"></span>
                    <!-- <div id="finalresult"></div> -->
                  </div>
                </div>
              </form>
              <div id="form-message-warning mt-4"></div> 
              <div id="form-message-success">
                Your message was sent, thank you!
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    </section>
    <!-- Download App Section Start -->
<section class="container-fluid mt-4" id="app_download" style="padding-bottom:10px;">
<h1 class="text-center"><i class="fa fa-download" aria-hidden="true">&nbsp;&nbsp;<b>Download the MyHospitalNow app</b></i></h1>
        <div class="row">
        <!--Tab 1 Start-->
            <div class="col-sm-4 col-md-4 mhn-install">
                <p><strong>Are you Patient?</strong></p>
                <ul class="list-unstyled">
                    <li>Free Surgery Cost Estimation</li>
                    <li>Free Consulting with Best Hospital</li>
                    <li>Free Consulting with Best Doctors</li>
                    <li>Lowest Treatment Cost</li>
                    <li>World Class Hospitals Options</li>
                    <li>Tour to your Dream Country</li>
                </ul>
                <a href="https://play.google.com/store/apps/details?id=com.cotocus.myhospitalnow"><img class="" src="{{asset('images/homepage/google_badge.webp')}}" alt="" id="playstore"></a>
                <img src="{{asset('images/homepage/appstore_badge.webp')}}" alt="" id="appstore">
            </div>
       <!--tab 1 End-->
       <!--tab 2 Start-->
       <div class="col-sm-4 col-md-4 mhn-install display-inline">
                <p><strong>Are you Hospital?</strong></p>
                <ul class="list-unstyled">
                    <li>Free International Surgery Query</li>
                    <li>Free Hospital Profile</li>
                    <li>Directly Interact with Patients</li>
                    <li>Free Services/Offer Publishing</li>
                    <li>Free Medical Tourism IT Platform</li>
                    <li>Free Case Management Software</li>
                </ul>
                <a href="https://play.google.com/store/apps/details?id=com.cotocus.myhositalnowhospitalhospital"><img class="" src="{{asset('images/homepage/google_badge.webp')}}" alt="" id="playstore"></a>
                <img src="{{asset('images/homepage/appstore_badge.webp')}}" alt="" id="appstore">
            </div>
       <!--tab 2 End-->
       <!--tab 3 Start-->
       <div class="col-sm-4 col-md-4 mhn-install">
                <p><strong>Are you Doctor?</strong></p>
                <ul class="list-unstyled">
                    <li>Free International Surgery Query</li>
                    <li>Free Doctor Profile</li>
                    <li>Directly Interact with Patients</li>
                    <li>Free Services/Offer Publishing</li>
                    <li>Free Medical Tourism IT Platform</li>
                    <li>Free Case Management Software</li>
                </ul>
                <a href="https://play.google.com/store/apps/details?id=com.cotocus.myhositalnowhospitaldoctor"><img class="" src="{{asset('images/homepage/google_badge.webp')}}" alt="" id="playstore"></a> 
                <img src="{{asset('images/homepage/appstore_badge.webp')}}" alt="" id="appstore">
            </div>
       <!--tab 3 End-->

            {{--<div class="col-sm-6 col-md-4 float-left">
                <img src="{{asset('images/homepage/myhospitalnow-app-download.svg')}}" alt="Myhospitalnow App Download" id="preview-right">--}}
            </div>
        </div>
    </section>
<!-- Download App Section End -->
<script>
  $(function() {

'use strict';

// Form

var contactForm = function() {

  if ($('#contact-form').length > 0 ) {
    $( "#contact-form" ).validate( {
      onkeyup: true,
      rules:{
        name:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true,
        },
        subject:"required",
        message:"required",
        },messages:{
        name:{
          required:"Please Enter Your name",
          minlength:"Name must be Contain 3 letters",
        },
        email:{
          required:"Please Enter Your email id",
          email:"Please Enter a valid Email",
        },
        subject:"Please Enter Your Subject",
        message:"Please Enter your message to Us",
        },
      /* submit via ajax */
      submitHandler: function(form) {		
        var $submit = $('.submitting'),
          waitText = 'Submitting...';

        $.ajax({   	
            type: "POST",
            url: "{{route('contact-data-submit')}}",
            data: $(form).serialize(),

            beforeSend: function() { 
              $submit.css('display', 'block').text(waitText);
            },
            success: function(response) {
                 if (response.status == 200) {
                   $('#form-message-warning').hide();
                  setTimeout(function(){
                     $('#contact-form').fadeOut();
                   }, 1000);
                  setTimeout(function(){
                     $('#form-message-success').fadeIn();   
                   }, 1400);
                   
                } else {
                   $('#form-message-warning').html(msg);
                  $('#form-message-warning').fadeIn();
                  $submit.css('display', 'none');
                }
            },
            error: function() {
              $('#form-message-warning').html("Something went wrong. Please try again.");
               $('#form-message-warning').fadeIn();
               $submit.css('display', 'none');
            }
          });    		
        }
      
    } );
  }
};
contactForm();

});
</script>

@endsection