@extends('layouts.master')

@section('content')

<div id="contact" class="container-fluid">
  <h2 class="text-center">CONTACT US</h2>
  <br>
  <div class="row">
    <div class="col-lg-5 col-sm-5">
      <b>Contact us and we'll get back to you within 24 hours.</b>
      <br>
      <br>
      <p><span class="fa fa-map-marker"> </span>Muniswamy Garden, BTM Layout, Bengaluru, Karnataka 560025</p>
      <p><span class="fa fa-phone"> </span> +91 700 483 5930</p>
      <p><span class="fa fa-envelope"> </span> contact@professnow.com</p>
    </div>
    <div class="col-lg-7 col-sm-7">
      <form id="contactus" name="contactus">
        <input class="form-control" type="text" name="name" id="name"
          value="{{ Auth::check() ? Auth::user()->name : '' }}" placeholder="Your Name" required />
        <br>
        <input class="form-control" type="email" name="email" id="email"
          value="{{ Auth::check() ? Auth::user()->email : '' }}" placeholder="Your E-mail Address" required />
        <br>
        <input class="form-control" type="tel" name="phone" id="phone"
          value="{{ Auth::check() ? Auth::user()->phone_number : '' }}" placeholder="Your Phone Number"
          pattern="^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$" title="Enter A Valid Phone Number With Country Code +91." />
        <br>
        <textarea class="form-control" type="text" name="message" id="message" placeholder="Your message here"
          maxlength="100" required></textarea>
        <br>
        <div id="example1"></div>
        <br>
        <button class="btn btn-info btn-sm" id="myAnchor">Get a Call Back</button>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="contactus-success-model" tabindex="-1" role="dialog"
  aria-labelledby="contactus-success-modelTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactus-success-modelTitle">Thankyou</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4 class="text-success">Your message has been sent</h4>
        <img src="{{asset('assets/images/checkGreen.png')}}" alt="Success" width="80" height="80">
      </div>
    </div>
  </div>
</div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
var widgetId1;
var onloadCallback = function() {
  // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
  // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
  widgetId1 = grecaptcha.render('example1', {
    'sitekey': '6LeAb7EbAAAAAJn5voz0HBGwWWzc6JxW7HuAKYFo',
    'theme': 'light'
  });
  // alert(grecaptcha.getResponse(widgetId1));
};

document.getElementById("myAnchor").addEventListener("click", function(event) {
  event.preventDefault();
  console.log('clicked');
  console.log('#contactus me h');

  if (grecaptcha.getResponse(widgetId1)) {
    console.log('grcptcha ke if me h');
    var name = document.contactus.name.value;
    console.log('name: ' + name);
    var email = document.contactus.email.value;
    console.log('email: ' + email);
    var phone = document.contactus.phone.value;
    console.log('phone: ' + phone);
    var message = document.contactus.message.value;
    console.log('message: ' + message);
    $.ajax({
      type: "POST",
      url: "{{url("api/ContactUsWeb")}}",
      data: {
        'name': name,
        'email': email,
        'phone': phone,
        'message': message,
      }, // serializes form input
      success: function(data) {
        console.log('Ajax call successfull');
        console.log('data: ' + data);
        $('#contactus-success-model').modal('show');
        setTimeout(function() {
          window.location.href = "/";
        }, 3000); //wait 5 seconds
      },
      error: function(error) {
        console.log(error.responseText)
      }
    });
  } else {
    alert("Please verify captha");
  }
});

setTimeout(function() {
  $('#mydiv').fadeOut('fast');
}, 3000); // <-- time in milliseconds
</script>
@endsection