@extends("app")

@section('head_title', getcong('contact_title').' | '.getcong('site_name') )
@section('meta_title',getcong('contact_meta_title').' | '.getcong('site_name'))
@section('meta_keywords',getcong('contact_meta_keyword'))
@section('meta_description',getcong('contact_meta_description'))
@section('head_url', Request::url())

@section("content")

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
{{--    <script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>--}}
<style type="text/css">
  #g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}
</style>
 <div class="tp-page-head"><!-- page header -->
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="page-header">
          <h1>{{getcong('contact_title')}}</h1>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tp-breadcrumb">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <ol class="breadcrumb">
          <li><a href="{{ URL::to('/') }}">Home</a></li>
          <li class="active">{{getcong('contact_title')}}</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="main-container">
  <div class="container">
	<div class="row">
		<div class="col-md-4">
			<div class="contact-us-block help-service-block">
				<div class="contact-us-icon">
					<i class="fa fa-map-marker"></i>
				</div>
				<div class="contact-us-dtl text-center">
					<h4 class="contact-heading">Our Address</h4>
					<div class="contact-sub-heading">{!!getcong('contact_address')!!}</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="contact-us-block help-service-block">
				<div class="contact-us-icon">
					<i class="fa fa-phone"></i>
				</div>
				<div class="contact-us-dtl text-center">
					<h4 class="contact-heading">Call Us</h4>
					<div class="contact-sub-heading"><a href="tel:{{getcong('contact_number')}}">{{getcong('contact_number')}}</a><br><a href="+919811154621">+91 98 11 15 46 21<br>+91 99 11 03 33 02</a><!-- <br><a href="+91 11-42412226">+91 11-42 41 22 26</a> --></div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="contact-us-block help-service-block">
				<div class="contact-us-icon">
					<i class="fa fa-envelope"></i>
				</div>
				<div class="contact-us-dtl text-center">
					<h4 class="contact-heading">Email Us</h4>
					<div class="contact-sub-heading"><a href="mailto:{{getcong('contact_email')}}">{{getcong('contact_email')}}</a></div>
				</div>
			</div>
		</div>
	</div>
    <div class="row" style="margin-top:50px;">
      <div class="col-md-6">
        <div class="well-box">
          {!! Form::open(array('url' => 'contact_send','class'=>'','id'=>'contact_form','role'=>'form')) !!}

            <div class="message">
                         
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                    
                        <ul style="list-style: none;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                                    
            </div>
            @if(Session::has('flash_message'))

              <div class="alert alert-success fade in">
                  
                 {{ Session::get('flash_message') }}
               </div>

                 
            @endif
            @if(Session::has('error_message'))

                <div class="alert alert-danger fade in">

                    {{ Session::get('error_message') }}
                </div>


            @endif

            <div class="form-group">
              <label class="control-label" for="first">Name <span class="required">*</span></label>
              <input id="name" name="name" type="text" placeholder="Name" required class="form-control input-md">
            </div>
            <div class="form-group">
                <label class="control-label" for="email">Phone No. <span class="required">*</span></label>
                <input id="phone_no" name="phone_no" type="number" placeholder="Phone Number" pattern=".{9,15}"   required title="10 minimum numbers required"  class="form-control input-md" >
            </div>
            <div class="form-group">
              <label class="control-label" for="email">Email <span class="required">*</span></label>
              <input id="email" name="email" type="text" required placeholder="Email" class="form-control input-md" >
            </div>            
            <div class="form-group">
              <label class=" control-label" for="subject">Subject <span class="required">*</span></label>
              <input id="subject" name="subject" type="text" placeholder="Subject" class="form-control input-md" >
            </div>
            <div class="form-group">
              <label class="  control-label" for="message">Message</label>
              <textarea class="form-control" rows="6" id="message" name="message" placeholder="Message"></textarea>
              <div class="textarea-resize"></div>
            </div>
            <input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true" value="" type="text" style="display:none;">
            <div class="g-recaptcha" data-sitekey="6LfNTKYUAAAAAMclqV9M7gXjl7QAwLp5ww8KLvgA"></div>
            <span id='errorContainer'></span>
            <div class="form-group">
              <button id="submit" name="submit" class="btn tp-btn-default tp-btn-lg">Send Message</button>
            </div>
          {!! Form::close() !!}
        </div>
      </div>
      <div class="col-md-6 contact-info">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3505.1102606844042!2d77.22153131508048!3d28.536405382455797!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce32404cadba7%3A0x8f97cce39aff55!2sVenue.Events!5e0!3m2!1sen!2sin!4v1556514217310!5m2!1sen!2sin"  width="100%" height="610" frameborder="0" style="border:0" allowfullscreen></iframe>
          <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3505.1101039107793!2d77.22153131455742!3d28.536410095176784!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce32404cadba7%3A0x8f97cce39aff55!2sVenue.Events!5e0!3m2!1sen!2sin!4v1593851884136!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> -->

      </div>
      <div class="col-md-6">
        <div class="map" id="googleMap"></div>
      </div>
    </div>
  </div>
</div>

<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script>
var myCenter=new google.maps.LatLng({{getcong('contact_lat')}},{{getcong('contact_long')}});

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:9,
  scrollwheel: false,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
        position: myCenter, 
        map: map,
        title:"Contact"
});

marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
  content:"Contact"
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>


    <script>
      window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('6LdrQ6YUAAAAABf_WTvnJcBsvqcfwXbkdlHZD-9P', {action:'validate_captcha'})
                .then(function(token) {
                    // add token value to form
                    document.getElementById('g-recaptcha-response').value = token;
                });
        });
        function recaptchaCallback() {
            document.getElementById('myField').value = 'nonEmpty';
        }
    </script>

@endsection