@extends('app')
@section('title'){{__('main.contact_us')}}@endsection
@section('content')
<div class="col-xs-12 block">
    @if (session('success'))
           <div class="col-sm-12">
               <div class="alert alert-success alert-dismissable text-center" dir="ltr">
                   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                              {{ session('success') }}
               </div>
           </div>
           <div class="clearfix"></div>
    @endif
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
@if ( session('error') )
    <div class="alert alert-danger">
        <ul>
            <li>{{ session('error') }}</li>
        </ul>
    </div>
@endif
<style>
.block-description{line-height:30px;padding-left:0;font-size:16px;}
</style>
    <h1 class="block-header">
        <span><i class="flaticon-hand-with-smartphone-and-wireless-internet"></i> {{$title}}</span>
    </h1>
    <p class="block-description text-center">{!! __('main.contact_page_desc') !!}</p>
<div class=" block-content text-{{__('main.align')}}" dir="{{__('main.dir')}}">
             <p class="content">
              <form action="{{route('contact')}}" method="post">
                @csrf
  							<div class="col-sm-12">
  								<div class="row">
                    <div class="col-md-12">
  										<div class="form-group label-floating">
  											<label class="control-label">{{__('main.contact_name')}}</label>
  											<input type="text" maxlength="100" name="name" class="form-control" required="required">
  										</div>
  									</div>
  								</div>
  								<div class="form-group label-floating">
  									<label class="control-label">{{__('main.contact_email')}}</label>
  									<input type="email" maxlength="100" name="email" class="form-control" required="required">
  								</div>
  								<div class="form-group label-floating">
  									<label class="control-label">{{__('main.contact_msg')}}</label>
  									<textarea name="message" maxlength="1000" class="form-control" id="message" rows="6" required="required"></textarea>
  								</div>
                                <div class="form-group label-floating">
                                    <div id="html_element" style="display: inline-block;"></div>
                                </div>
  								<div class="row">
  									<div class="col-md-6">
  										<button type="submit" name="Submit" class="btn btn-primary pull-right">
                          {{__('main.contact_send')}}
                      <i class="fa fa-paper-plane" aria-hidden="true"></i>
                    </button>
  									</div>
  								</div>
  							</div>

  						</form>
            </p> 
</div>
</div>
@endsection
@section('js')
    <script type="text/javascript">
    var verifyCallback = function(response) {
        console.log(response);
      };
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : "6LeQHAQjAAAAAD7CS96JuNkSQ4MYII1uVYmoKPPw",
          'callback' : verifyCallback,
        });
      };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?trustedtypes=true&onload=onloadCallback&render=explicit"></script>
@endsection