@extends('template.default')

@section('content')
<div class="header-breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 sol-xs-12">
        <div class="breadcrumbs-title text-center">
          <h2>Enquiry Form</h2>
          <div class="subheader-pages">
            <ul>
              <li><a href="{{route('home')}}" style="color:#fff;">Home</a></li>
              <!-- <li><a href="{{route('inHouseTraining')}}" style="color:#fff;"></a></li> -->
              <li>Enquiry Form</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Contact Us-area start hear -->
<div class="contactus-area">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-title text-center">
          <h3> Enquiryform</h3>
        </div>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
          <div class="contractus-form">
            <form action="{{route('enquiryForm')}}" method="post" id="trainingrequestform">
              {{csrf_field()}}
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <label>Name</label>
                    <input type="text" name="name" id="name">
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <label>Title</label>
                    <input type="text" name="title">
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <label>Organization</label>
                    <input type="text" name="organizations">
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <label>EmailID</label>
                    <input type="email" name="emailid">
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <label>Address</label>
                    <input type="text" name="address">
                  </div>
                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <label>City</label>
                      <input type="text" name="city">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <label>State</label>
                      <input type="text" name="state">
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                      <label>Zip</label>
                      <input type="text" name="zip">
                    </div>
                  </div>

                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 row" style="width: 286px;">
                      <label>Phone</label>
                      <input type="text" name="phone">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                      <label>Fax</label>
                      <input type="text" name="fax" style="width: 286px;">
                    </div>

                    <div class=" col-md-6 " style="margin-left: -12px;">
                      <div class="form-group">
                        <label class="required">Interested In</label>
                        <div class="input-box" style="width: 558px;">
                          <select title="interested" name="interested" class="nice-select validate-select required-entry">
                            
                            <option>Laser-Focused-Training</option>
                            <option>Public Sessions</option>
                            <option>In House Training</option>
                            <option>Consulting Services</option>
                            <option>Expert Witness</option>
                          </select>
                        </div>
                      </div>
                    </div>

                  </div>

                  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                      <label class="required">Preferred contact method</label>
                      <div class="input-box">
                        <select title="Preferred contact method" name="contactMethod" class="nice-select validate-select required-entry"
                          style="">
                          <option>Email</option>
                          <option>Phone</option>
                          <option>Fax</option>
                          <option>Mail</option>
                        </select>
                      </div>
                    </div>
                  </div>


                  <!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                              <h3>Questions About the Project <h3></div>
                              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                               <label> Please provide a quick description of the training requested:</label>
                               <textarea name="summerize" id="summerize" ></textarea>
                             </div>

                              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                               <label> Location of training</label>
                               <textarea name="trainingLocation" id="trainingLocation" ></textarea>
                             </div>
                              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                               <label>What is your timing?</label>
                               <textarea name="timing" id="timing" ></textarea>
                             </div>

                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                               <label>How many people to be trained?</label>
                               <textarea name="peopleTrained" id="peopleTrained" ></textarea>
                             </div> -->
                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-top: 23px;    ">
                    <label> Please provide additional information,If any:</label>
                    <textarea name="comments" id="comments"></textarea>
                  </div>
                  <div class="row" id="captchadiv">
                   
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 m-b-30" style="margin-left: -3px;">
                      <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha" value="">
                      <div id="recaptcha" class="g-recaptcha" data-callback="validateRecaptcha" data-expired-callback="expiredRecaptcha" data-sitekey="6LewakIUAAAAACSoKMaBasi3pn53TBjxqBVLKJDJ"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="    margin-top: 12px;">
                <!-- <button class="btn-hr" id="submitBtn">Submit Request</button>   -->
                <input type="submit" class="btn-hr" id="submitBtn" value="Submit request" style="width: 189px;">
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- 40.contactus-area end hear -->

@endsection

@push('styles')
<link href="{{{URL::asset('public/css/home.css')}}}" rel="stylesheet">
<!-- <link href="{{{URL::asset('public/css/resource.css')}}}" rel="stylesheet"> -->
<link href="{{{URL::asset('public/css/contact.css')}}}" rel="stylesheet">
<link href="{{{URL::asset('public/css/category-management.css')}}}" rel="stylesheet" type="text/css" />

<style>
  .form-error{color:red !important; font-weight: lighter;}
.color{color:red;}

.msg-error {
  color: #c65848;
}
 .g-recaptcha.error {
  border: solid 2px #c64848;
  padding: .3em;
  width: 23em;
} 
#aaa {
  visibility:hidden;
}
.rc-anchor-normal {
    margin: 2px 13px 0 0;
    padding-right: 198px !important;
}
.rc-anchor-pt {
  padding-right: 198px !important;

}
.rc-anchor-pt{
  padding-right: 198px !important;

}
.rc-anchor-normal{
  margin-left: 16px !important;
}
#hiddenRecaptcha-error{
  margin-left: 17px !important;
}
#recaptcha{
  margin-left: 18px;
}
</style>
<link href="{{{URL::asset('public/css/home.css')}}}" rel="stylesheet">
@endpush

@push('scripts')
<script type="text/javascript" src="{{{URL::asset('public/js/jquery-1.7.1.min.js')}}}"></script>
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
<script>
  function validateRecaptcha() {

    response = grecaptcha.getResponse();

    if (response.length === 0) {
      $('#hiddenRecaptcha').val('');
    } 
    else {
      $('#hiddenRecaptcha').val('1');
    }
    $("#trainingrequestform").validate().element(':input[name="hiddenRecaptcha"]');
  }
 

  function expiredRecaptcha() {
    $('#hiddenRecaptcha').val('');
    $(
      "<label id='recaptcha-expired-error' class='form-error'>*ReCaptcha Expired! Please verify ReCaptcha again..</label>"
    ).appendTo('.g-recaptcha');
  }

  $(function () {

    $('#trainingrequestform').validate({
      errorClass: "form-error",
      ignore: '',
      rules: {
        name: {
          required: true,
        },
        title: {
          required: true,
        },
        city: {
          required: true,
        },
        state: {
          required: true,
        },
        zip: {
          required: true,
          number: true
        },
        organizations: {
          required: true,
        },
        emailid: {
          required: true,
          email: true
        },
        fax: {
          required: true,
          // email: true
        },
        address: {
          required: true,
        },
        phone: {
          required: true,
          number: true
        },
        "hiddenRecaptcha": {
          required: true
        },
      },
      messages: {
        name: "*Please enter Name",
        organizations: {
          required: "*Please enter organization"
        },
        title: "*Please enter title",
        city: "*Please enter city",

        state: "*Please enter state",

       
        emailid: {
          required: "*Please enter the Email ID",
          email: "*Please enter a valid Email ID"
        },
        address: {
          required: "*Please enter your address"
        },
        fax: {
          required: "*Please enter your fax"
        },
        zip: {
          required: "*Please enter the zip",
          number: "*Please enter a valid zip"
        },
        phone: {
          required: "*Please enter the Phone Number",
          number: "*Please enter a valid Phone Number"
        },
        hiddenRecaptcha: {
          required: "*Please verify ReCaptcha"
        }
      },
      errorPlacement: function (error, element) 
      {

          if(element.attr("name")==("hiddenRecaptcha"))
        {

          error.insertAfter(".g-recaptcha");
        } 
        else
         {

          error.insertAfter(element);
        }

      },
      submitHandler: function (form) {
        form.submit();
      }
    });

  });
</script>
@endpush