@extends('users/layout/master')
@section('users_content')
@section('coactive','active')
<section class="inner-header divider parallax layer-overlay overlay-dark-5" data-bg-img="template/images/bg/bg2.jpg" style="background-image: url('template/images/bg/universite.jpg'); background-position: 50% 97px; height: 300px;">
      <div class="container pt-70 pb-20">
        <div class="section-content">
          <div class="row">
            <div class="col-md-12">
              <h2 class="title text-white">Nous contacter</h2>
              <ol class="breadcrumb text-left text-black mt-10">
                <li><a href="{{('/')}}">Accueil</a></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </section>
<section class="divider layer-overlay overlay-white-9" data-bg-img="images/bg/bg15.html" style="background-image: url(&quot;images/bg/bg15.html&quot;);">
      <div class="container">
        <div class="row pt-30">
          <div class="col-md-8">
            <h3 class="line-bottom mt-0 mb-20">Avez vous des questions ou suggestions ?</h3>
            <!-- Contact Form -->
            <form id="contact_form" name="contact_form" class="form-transparent" action="" method="post" novalidate="novalidate">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_name">Nom <small>*</small></label>
                    <input name="form_name" class="form-control" type="text" placeholder="Entrer votre nom" required="" aria-required="true">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_email">Email <small>*</small></label>
                    <input name="form_email" class="form-control required email" type="email" placeholder="Entrer votre mail" aria-required="true">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_name">Objet <small>*</small></label>
                    <input name="form_subject" class="form-control required" type="text" placeholder="Entrer l'objet" aria-required="true">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_phone">Téléphone</label>
                    <input name="form_phone" class="form-control" type="text" placeholder="Entrer votre contact téléphonique">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="form_name">Message</label>
                <textarea name="form_message" class="form-control required" rows="5" placeholder="Entrer votre méssage" aria-required="true"></textarea>
              </div>
              <div class="form-group">
                <input name="form_botcheck" class="form-control" type="hidden" value="">
                <button type="submit" class="btn btn-dark btn-theme-colored btn-flat mr-5" data-loading-text="Please wait...">ENVOYER</button>
                <button type="reset" class="btn btn-default btn-flat btn-theme-colored">ANNULER</button>
              </div>
            </form>
            <!-- 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>
          </div>
          <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-25 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"> <strong class="text-white">EMPLACEMENT DE NOTRE BUREAU</strong>
                    <p class="text-white">TOGO, DAPAONG</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-12 text-white">
                <div class="icon-box left media bg-black-333 p-25 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-call text-theme-color-2"></i></a>
                  <div class="media-body"> <strong class="text-white">NOUS CONTACTER</strong>
                    <p>(+228) 99 24 25 95 / 90 50 44 80</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-sm-6 col-md-12 text-white">
                <div class="icon-box left media bg-black-333 p-25 mb-20"> <a class="media-left pull-left" href="#"> <i class="pe-7s-mail text-theme-color-2"></i></a>
                  <div class="media-body"> <strong class="text-white">Email</strong>
                    <p>contact@bonitahaus.com</p>
                  </div>
                </div>
              </div>
             
            </div>
          </div>
        </div>
      </div>
    </section>
@endsection