@extends('layout.app')
@section('content')

<style>
    
    
     @media(min-width: 576px){
            .heroimg{
                padding: 70px;
               
                
            }
        }
        
        @media only screen and (max-width: 768px) {
            .heroimg2{
                height: 170px !important;
                 width: auto !important;
                 margin-bottom: 30px !important;
                
            }
        }
        
    @media only screen and (min-width: 768px) {
        .heroimg2{
                 margin-left: auto;
                 margin-right: auto;
                 width: 460px;
                 height: 460px;
                 text-align: center;
                
            }
        
    }
        
</style>

<section>
        <div class="container-fluid pl-4 sec1">
          <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-8 d-none d-sm-block">
              <ul class="list-group list-group-horizontal nav justify-content-center "  id="menuu" >
      <li><a href="https://connectkw.co/"  class="list-group-itemm " ><span class="underline-animation">{{__('Home')}}</span></a></li>
      <li><a href="about_us"  class="list-group-itemm " ><span class="underline-animation">{{__('About Us')}}</span></a></li>
      <li><a href="our_services"  class="list-group-itemm " ><span class="underline-animation">{{__('Our Services')}}</span></a></li>
      {{-- <li><a href="contact"  class="list-group-itemm " ><span class="underline-animation">Contact Us</span></a></li> --}}
      <li class="nav-item dropdown list-group-itemm">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><span class="underline-animation">{{__('Language')}}</span></a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="language/en">{{__('English')}}</a>
      <a class="dropdown-item" href="language/ar">{{__('Arabic')}}</a>
    </div>
    </li>
      <li><a href="welcome"  class="list-group-itemm" ><span class="underline-animation">{{__('SIGN IN')}}</span></a></li>
    
    </ul>
    
            </div>
          </div>
        <div class="row imgbox">
          <div class="col-md-6 ">
            <h3 class="text-primaryy"><b>{{__('Contact Us')}}</b></h3>
            <h5 class="text-uppercase">{{__('Please get in touch and our expert support team will answer all your questions')}}</h5>
            @if (Session::has('status'))
                <div class="alert alert-success">
                    
                        {{ Session::get('status') }}
                    
                </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::has('error'))
                <div class="alert alert-danger">
                    <ul>
                        <li>{{ Session::get('error') }}</li>
                    </ul>
                </div>
            @endif
          
<form method="post" action="contactdata">
    @csrf
    <input type="hidden" value="{{session()->get('locale')}}" id="lang">
  <div class="form ">
    <div class=" form-group row">
    <div class="col">
      <label class="pl-1 col-form-label-lg " >{{__('Name')}}</label>
       <input type="text" name="name" class="form-control form-control-lg bg-light  contact-form-field" placeholder="{{__('Full Name')}}" required>
</div>
{{-- </div> --}}

 {{-- <div class=" form-group row"> --}}
    <div class="col">
      <label class="pl-1 col-form-label-lg" >{{__('Email')}}</label>
       <input type="text" name="email" class="form-control form-control-lg bg-light  contact-form-field" placeholder="{{__('Email')}}" required>
</div>
</div>

 <div class=" form-group row">
    <div class="col">
      <label class="pl-1 col-form-label-lg" >{{__('Phone Number')}}</label>
       <input type="text" name="phone" class="form-control form-control-lg bg-light  contact-form-field" placeholder="{{__('Phone Number')}}" required>
</div>
</div>

 <div class=" form-group row">
    <div class="col">
        <div class="form-group">
          <label class="pl-1 col-form-label-lg" >{{__('Message')}}</label>
    <textarea name="message" class="form-control contact-form-field bg-light" id="exampleFormControlTextarea1"
    placeholder="{{__('Message')}}"  rows="4" required></textarea>
  </div>
</div>
</div>
<div class=" form-group row">
  <div class="col">
      <div class="form-group">
        <div class="g-recaptcha" data-sitekey="6LdJVCQhAAAAAPXerrUoIasvL6lCXPmPu2YwQzHZ"></div>
      </div>
  </div>
</div>
<span id="error_recaptcha"></span>

<div class=" form-group row">
    <div class="col">
        <div class="form-group">
          <button type="submit" id="submit" class="btn btn-lg btn-primaryy btn-block contact-form-field" style=""> {{__('SEND')}} </button> 
  </div>
</div>
</div>







</div> <!-- ..form.... -->
</form>
</div><!-- ....col... -->

<div class="col-md-6 text-center heroimg" style="">
  <img src="{{asset('front-con1/images/Support-Illustration.png')}}"  class="img-responsive contactimg heroimg2" alt="picture">
  {{-- <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_lqge6px5.json"   background="transparent"  speed="1"  style=" height: 660; width: 100%;"  loop  autoplay></lottie-player> --}}
</div>

</div> <!-- ......row -->

      
          
          </div>
        

      </section>

@endsection

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

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};
$(document).ready(function() {
    $('#submit').click(function(){
var lang = $('#lang').val();
var recaptcha = $('#g-recaptcha-response').val();
      if (recaptcha == '') {
        //   console.log('recaptcha')
        if (lang == "ar") {
          $('#error_recaptcha').html('يرجى وضع علامة على أنك لست روبوتًا');
        } else {
          $('#error_recaptcha').html('Please mark you are not robot');
        }
      }
})
})
</script>
@endsection