@extends('layouts.main')

@section('content')
<!-- ============================ Content Start =============================================== -->
<span class="display-zero">{!! $Locale = LaravelLocalization::getCurrentLocale() !!}</span>
<!-- ===============================  banner Contact  ================================================ -->
<style type="text/css">
  .banner-area{background:url('{!! asset(option('covernew')) !!}') no-repeat;background-size:cover}
</style>
<!-- ===============================  banner Contact  ================================================ -->
<section class="banner-area relative">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center banner-content">
      <div class="col-lg-5">
        <h1 class="text-white">Contact Us</h1>
        <!-- ===============================  Contact  ======================================== -->
        <p>{!! __('main.The_legal_2') !!}</p>
        <!-- ===============================  Contact  ======================================== -->
      </div>
    </div>
  </div>
</section>
<!-- =============== End top-section Area =================== -->
<!-- ================ contact section start ================= -->
<section class="section-gap">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="contact-title">Get in Touch</h2>
          <!--   ================  Messagge ==============================================  -->
          @if(session('Messagge'))
          <div class="alert alert-primary" role="alert">
            {{ __('main.Congratulations_Message')}}
          </div>
          @endif
          <!--   ===============================  Messagge  ==============================  -->
          @if ($errors->any()) 
          <div class="uk-alert-success" uk-alert>
            <a class="uk-alert-close" uk-close></a>
            <p>
              @foreach ($errors->all() as $error)
              {!! $error !!}
              @endforeach
            </p>
          </div>   
          @endif
         <!-- ================================ Messagge  ================================= -->
          <script>
            function validateForm() {
              var x = document.forms["Contact"]["Content"].value;
              if (x == null || x == "" || x.length > 50 ) {
               window.location.href = '{{ url('') }}';
               return false;
             }
           }
          </script>
          <!-- ================================ Messagge  ======================================== -->
      </div>
      <div class="col-lg-12">
        <!-- ===============================  Contact  =========================================== -->
        <form method="post" action="{!! route('Contact.store') !!}" 
        class="form-contact contact_form" 
        name="Contact" onsubmit="return validateForm()">
        {!! csrf_field() !!}
          <div class="row">
             <div class="col-md-12">
             <input class="@error('name') is-invalid @enderror form-control" type="text" 
                    placeholder="{!! __('main.Name') !!}" name="name">
            @error('name')
            <div class="uk-alert-warning" uk-alert>
              <a class="uk-alert-close" uk-close></a>
              <p>{{ $message }}</p>
            </div>
            @enderror
            </div>
            <div class="col-md-12 mt-2">
             <textarea rows="5" name="Message" class="@error('Message') is-invalid @enderror form-control" 
             placeholder="{!! __('main.Create_Message') !!}"></textarea>
              @error('Message')
              <div class="uk-alert-warning" uk-alert>
                <a class="uk-alert-close" uk-close></a>
                <p>{!! $message !!}</p>
              </div>
              @enderror
            </div> 
          </div>
          <div class="form-group mt-2 mb-5 mb-lg-0">
            <button type="submit" class="button button-contactForm primary-btn">
             {!! __('main.Message') !!} <i class="fa-solid fa-envelope"></i>
            </button>
          </div>
        </form>
        <!-- ===============================  Contact  ======================================= -->
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="single-footer-widget tp_widgets">
            <h4 class="footer_title"><i class="fas fa-headset"></i> {!! __('main.Contact') !!}</h4>
            <div class="ml-5">
                <p class="sm-head">
                    <span class="fas fa-map-marker-alt"></span>
                    {!! __('main.Head_Office') !!} {!! option('Address') !!}
                </p>
                <p class="sm-head mt-2">
                    <span class="fas fa-phone-square-alt"></span>
                    {!! __('main.PhoneNumber') !!} {!! option('PhoneNumber') !!}
                </p>
                <p class="sm-head mt-2">
                    <span class="far fa-envelope"></span>
                    {!! __('main.E-Mail_Address') !!} {!! option('Email') !!}
                  </p>
            </div>
        </div>
    </div>
    </div>
  </div>
</section>
<!-- =============================== Content Start ======================================================== -->
@endsection