@extends('layout.master')

    @section('content')
    
    <div class="view intro-2" style="background: url( {{ url('assets/img/bg/contact-us.png') }} ) no-repeat center center;height:500px">
  <div class="full-bg-img">
    <div class="mask rgba-black-strong flex-center">
      <div class="container text-center white-text ">
        <!-- <h1  style="font-size:55px;font-weight:700">CONTACT US</h1>
        <br> -->
        <a class="fb-ic" href="https://www.facebook.com">
          <i class="fab fa-facebook fa-2x blue-text mr-4"></i>
        </a>
        <a class="tw-ic" href="https://www.twitter.com">
          <i class="fab fa-twitter fa-2x cyan-text mr-4"> </i>
        </a>
        <a class="gplus-ic" href="https://www.gmail.com">
          <i class="fab fa-google-plus fa-2x red-text mr-4"> </i>
        </a>
        <a class="li-ic" href="https://www.linkedin.com">
          <i class="fab fa-linkedin fa-2x light-blue-text mr-4"> </i>
        </a>
        <a class="ins-ic" href="https://www.instagram.com">
          <i class="fab fa-instagram fa-2x red-text mr-5"> </i>
        </a>
      </div>
    </div>
  </div>
</div>


<div class="mask" style="margin-top:-10%">
  <div class="card" style="margin:0% 10% 0% 10%">

    <div class="card-body card-body-cascade text-center indigo-text ">

        <section class="mb-4 " >
          <h2 class="h1-responsive font-weight-bold text-center my-4">Contact us</h2>

          <p class="text-center w-responsive mx-auto mb-5">Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within
              a matter of hours to help you.</p>
               @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                  @if(Session::has('alert-' . $msg))
                    <div class="alert alert-{{ $msg }}" role="alert">
                     {{ Session::get('alert-' . $msg) }} 
                    </div>
                    {{ session()->forget('alert-' . $msg) }}
                  @endif
                @endforeach    

          <div class="row">
              <div class="col-md-9 mb-md-0 mb-5">

                  <form id="contact-form" action="{{ url('contact_us') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            
                            <div class="md-form mb-0">
                              <input type="text" id="name" name="name" class="form-control alphabates" required>
                              <label for="name" class="">Your Name</label>
                            </div>

                            <div class="md-form mb-0">
                              <input type="text" id="contact_no" name="contact_no" class="form-control contact_no" required>
                              <label for="contact_no" class="">Your Contact Number</label>
                            </div>

                            <div class="md-form mb-0">
                              <input type="email" id="email_id" name="email_id" class="form-control" required>
                              <label for="email_id" class="">Your Email</label>
                            </div>

                        </div>
                        <div class="col-md-6">
                          <div class="md-form">
                            <textarea type="text" id="message" name="message" rows="5" class="form-control md-textarea" 
                            required></textarea>
                              <label for="message">Your message</label>
                          </div>
                        </div>
                    </div>

                  <div class="text-center text-md-left">
                      <button type="submit" class="btn btn-primary" name="sendEmail">Send</button>
                  </div>
                </form>
              </div>
              <div class="col-md-3 text-center">
                  <ul class="list-unstyled mb-0">

                      <li><i class="fa fa-envelope mt-4 fa-2x"></i>
                          <p>info@jobkatta.com</p>
                      </li>
                  </ul>
              </div>
          </div>
        </section>
    </div>
</div>

    @endsection