@extends('template.default')
@push('styles')
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@endpush
@section('content')
 <div class="header-breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            {{-- <iframe frameborder="1" width="420" height="345" src="//www.youtube.com/"></iframe> --}}
           <div class="headerheading">
            <p class="big-caption home-big-cation" >We will train your maintenance staff</p>
            <p class="smallcaption home-small-caption" style="padding-top:20px !important;">to improve equipment reliability, safety and to reduce costs</p>
             {{-- <h3 class="smallcaption" style="padding-top:20px !important;">reliability, safety and reduce your costs</h3> --}}
          </div>
        </div>
      </div>
    </div>
  </div>
 <br>

  <!-- testomilial area end hear -->

        <div class="coursedetails-area">
            <div class="container-inner">
              <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="">
                  <div class="aboutus-video mob-aboutus-video">
                    <div class="container mob-p-l-0">
                        <div class="row">
                          <div class="col-xs-12">
                                <div class="">
                                <img src="public/assets/images/NewCoverImages/newHomeCover.jpg" class="landing-page" alt="landing-page" style="height: 364px;width: 100%;">
                                </div>
                                <p class="imgageTitle" style="margin-top:25px">Let us keep you informed with all the new books published for the Elements of Great Maintenance Management</p>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-t-10">
                                  <button type="button" data-toggle="modal" data-target="#exampleModal" class="buttonsize"  id="submitBtn" style="color:black !important;background-color: #c61508 !important;border:1px !important;border-radius:4px !important">Keep me Informed</button>
                                </div>
                            </div>
                      </div>
                      <br>
                      <h2>Without competent maintenance workers we will fall behind in caring for our machines and facilities</h2>
                      <p>New maintenance employees are smart and many of them are tech savvy. They lack experience. In traditional societies they teach experience with stories. These stories explain the past and predict the future. And people enjoy stories. People also learn from stories</p>
                      <p>The challenge we face is transferring basic knowledge to the next generation. Without this transfer of useful knowledge our mission-critical systems will not do their jobs and will be difficult to maintain.</p>
                      <p>Traditional teaching modes like lectures, heavy books just don’t work anymore. These kids read fewer books, won’t tolerate boring lectures, use Google and YouTube (and all the social media sites) for everything. The second problem is that they will readily learn the complicated computer stuff but what they miss are the fundamentals of maintenance and reliability.</p>
                      <p>They will love stories that are interesting, fast paced, irreverent, and creative. We need to appeal to their sense of humor, their sense of drama, their sense of irony and, of course, their attention span.</p>
                      <p>The fundamentals we currently cover are Defect Elimination, TLC (Tighten, Lubricate, Clean), Quality, and Basic PM. These topics are covered in an entertaining way that can be used in your shop to train the whole team in the fundamentals. The series will release new books on a regular basis.</p>
                    </div>
                  </div>
                </div>
            </div>
        </div>


<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Contact Email</h5>
        <button type="button" class="close contactemail" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form type="post" id="contactForm" name="contactForm">
        <div class="modal-body" style="margin-left:50px !important">
        <div class="row" style="margin-left: 71px;!important">
            <label>Email:</label>
            <input type="email" id="email" name="email" style="width: 260px;margin-left: 20px;">
        </div>
      </div>
        <div class="row" style="margin-left:133px !important">
          <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 class="modal-footer">
          <button type="button" class="btn btn-secondary closeEmailModal" data-dismiss="modal" style="background-color:#c61508 !important">Close</button>
          <button type="submit" class="btn btn-primary saveBtnEmail" style="background-color:#c61508 !important">Save</button>
        </div>
      </form> 
    </div>
  </div>
</div>
  

  <!-- Price Table area end hear -->

@endsection

@push('styles')
    <style>
        .form-error{color:red !important; font-weight: lighter;}
        .color{color:red;}
        iframe:focus {
          outline: none;
        }

        iframe[seamless] {
          display: block;
        }

        .more{
          margin-left: 2px;
            color: #c61508;
        }
        .boxsize
        {
          height: 366px!important;
            width: 363px!important;
        }
        .butontop {
          margin-top: -132px!important;
            height: 150px!important;
        }
        .laserfocus{
          height: 340px!important;
            width: 360px!important;
        }

        .modal-header .close {
            margin-top: -22px !important;
        }
        .modal-header{
          border-bottom:0px !important
        }

        .modal-footer{
          border-top:0px !important
        }

        .closeEmailModal .saveBtnEmail{
          background-color:#c61508 !important
        }
        .form-error{color:red !important; font-weight: lighter;}
.color{color:red;}

      .error{
        color:red !important  
      }
    </style>
   <link href="{{{URL::asset('public/css/home.css')}}}" rel="stylesheet">
   <link href="{{{URL::asset('public/css/about.css')}}}" rel="stylesheet">
   <meta name="csrf-token" content="{{ csrf_token() }}" />
@endpush

@push('scripts')
<script type="text/javascript" src="{{{URL::asset('public/js/jquery-1.7.1.min.js')}}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
      $('#hiddenRecaptcha').val('');
  } else {
      $('#hiddenRecaptcha').val('1');
  }
});

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


$("#contactForm").validate({
    errorClass: "form-error",
    ignore: '',
    rules: {
      email: {
        required: true,
      },
      "hiddenRecaptcha": {
        required: true
      },
    },
    messages: {
      email: {
        required: "*Please enter the Email ID",
        email: "*Please enter a valid Email ID"
      },
      hiddenRecaptcha: {
        required: "*Please verify ReCaptcha"
      }
    },
    errorPlacement: function (error, element) 
  {

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

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

      error.insertAfter(element);
    }

  },
});

$('#contactForm').on('submit',function(e) {
  e.preventDefault(); 
  if($('#contactForm').valid()) {
    $.ajax({
      type: "POST",
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      data:$('#contactForm').serialize(),
      url: "{{route('saveEmail')}}",
      success: function(response)
      {
        $('#exampleModal').modal('hide');
        $('.contactemail').trigger('click');
      }
    }); 
  }
});

$('#exampleModal').on('show.bs.modal', function () {
  $('#contactForm').find('#email').val('');
  $('#contactForm').validate().resetForm();
});

</script>
@endpush