@extends('layouts.main')

@section('styles')
@endsection

@section('content')

<!-- Start main-content -->
<div class="main-content">
  <!-- Section: inner-header -->
  <section class="inner-header divider parallax layer-overlay overlay-dark-5" data-bg-img="{{ asset('assets/images/bg/bg6.jpg')}}" style="background-image: url(&quot;images/bg/bg6.jpg&quot;); background-position: 50% 58px;">
    <div class="container pt-30 pb-40">
      <!-- Section Content -->
      <div class="section-content">
        <div class="row">
          <div class="col-md-12">
            <h2 class="title text-white text-center">Contact Us</h2>

          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section: About -->
 <section >
    <div class="container">
      <div class="row pt-10">
        <div class="col-md-4">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div class="icon-box left media bg-black-333 p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-map-2 text-theme-color-2"></i></a>
                <div class="media-body text-white"> <strong>OUR OFFICE LOCATION</strong>
                  <p class="text-white">Unit 201, 202, 9715 James Potter Road,Brampton, ON, L6X 3B9</p>
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-12">
              <div class="icon-box left media bg-black-333 p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-call text-theme-color-2"></i></a>
                <div class="media-body text-white"> <strong>OUR CONTACT NUMBER</strong>
                  <p class="text-white">905-654-4646</p>
                  <p class="text-white mb-0">Mon - Fri: 09:00 am - 08:00 pm</p>
                  <p class="text-white mb-0">Sat: 10:00 am - 01:00 pm</p>
                  <p class="text-white mb-0">Sun: Closed</p>
                </div>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-12">
              <div class="icon-box left media bg-black-333 p-30 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-mail text-theme-color-2"></i></a>
                <div class="media-body text-white"> <strong>OUR CONTACT E-MAIL</strong>
                  <p class="text-white">info@educatorsacademy.ca</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="col-md-8">
          <h3 class="line-bottom mt-0 mb-20">Contact The Educators Academy</h3>
          <p class="mb-20">We'd love to hear from you.</p>
          <!-- Contact Form -->
          <form id="" name="" class="" action="{{ route('submit_contactus')}}" method="post" novalidate="novalidate">

            <div class="row">
              <div class="col-sm-12">
                <div class="form-group">
                  <input name="name" class="form-control" type="text" placeholder="Enter Name" required="" aria-required="true">
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <input name="email" class="form-control required email" type="email" placeholder="Enter Email" aria-required="true">
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <input name="subject" class="form-control required" type="text" placeholder="Enter Subject" aria-required="true">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input name="phone" class="form-control" type="text" placeholder="Enter Phone">
                </div>
              </div>
            </div>

            <div class="form-group">
              <textarea name="message" class="form-control required" rows="5" placeholder="Enter Message" aria-required="true"></textarea>
            </div>
            <div class="form-group">
{{ csrf_field()}}
              <button type="submit" class="btn btn-flat btn-theme-colored text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px" >Send your message</button>
              <button type="reset" class="btn btn-flat btn-theme-colored text-uppercase mt-10 mb-sm-30 border-left-theme-color-2-4px">Reset</button>
            </div>
          </form>


        </div>
      </div>
    </div>
  </section>

</div>
<!-- end main-content -->

@endsection

@section('scripts')
<!-- Contact Form Validation-->
<script type="text/javascript">
  $("#contact_form").validate({
    submitHandler: function(form) {
      var form_btn = $(form).find('button[type="submit"]');
      var form_result_div = '#form-result';
      $(form_result_div).remove();
      form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
      var form_btn_old_msg = form_btn.html();
      form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
      $(form).ajaxSubmit({
        dataType:  'json',
        success: function(data) {
          if( data.status == 'true' ) {
            $(form).find('.form-control').val('');
          }
          form_btn.prop('disabled', false).html(form_btn_old_msg);
          $(form_result_div).html(data.message).fadeIn('slow');
          setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
        }
      });
    }
  });
</script>
@endsection