@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" >How can we transfer basic maintenance knowledge effectively to the next generation? </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 id="success" style="display: none; margin-left:50px;"><h4>Request Sent Successfully</h4></div>
    <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> 
                      <h3 style="text-align: center;">Everyone seems to complain about the lack of young people coming into maintenance.</h3>
                      <h3 style="text-align: center;">Here are 5 easy ways to do something about it!</h3><br>
                      <h4 style="text-align: center;font-weight:450;">For more information on a specific book, click the picture of the cover. After the description you
                        can click through to Amazon to purchase it.</h4>
                      <div style="margin:30px;">
                        <h4>You can tell from the covers these books are different then everything else you’ve seen.</h4>
                        <div class="row">
                          
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                            <a href="{{route('PreventiveMaintenance')}}"><img src="public/assets/images/NewCoverImages/preventive-Maintenance.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 100%;"></a> 
                            <h4 style="margin-top:20px;text-align: center;">Preventive Maintenance</h4>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                            <a href="{{route('defectElimination')}}"><img src="public/assets/images/NewCoverImages/Maintenance-Management-2.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 100%;"></a> 
                            <h4 style="margin-top:20px;text-align: center;">Defect Elimination</h4>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                            <a href="{{route('reliabilityFundamentals')}}"><img src="public/assets/images/NewCoverImages/Maintenance-Management.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 100%;"></a> 
                            <h4 style="margin-top:20px;text-align: center;">Reliability and Fundamentals</h4>
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                            <a href="{{route('maintenanceQuality')}}"><img src="public/assets/images/NewCoverImages/Maintenance-quality.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 100%;"></a> 
                            <h4 style="margin-top:20px;text-align: center;">Maintenance quality</h4> 
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                            <a href="{{route('lubrication')}}"><img src="public/assets/images/NewCoverImages/lubrication.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 100%;"></a> 
                            <h4 style="margin-top:20px;text-align: center;">Lubrication</h4> 
                          </div>
                          <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">  
                        </div>
                      </div>
                    </div>                         
                  </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-t-10" style="padding-bottom: 20px;">
                  <div style="display: flex; align-items: center; justify-content: center; position: relative;">
                      <div style="text-align: center; flex-grow: 1;">
                          <button type="button" data-toggle="modal" data-target="#exampleModal" class="buttonsize" id="submitBtn" style="color:white!important; background-color: #c61508 !important; border:1px !important; border-radius:7px !important; line-height: revert; width: auto; height:65px !important; font-size: 14px; box-shadow: 3px 5px 0 0 #cd081261; padding: 10px 32px; margin-bottom: 19px; transition: .5s;">
                              <b>Get a free sample of all the current books in the <br>Elements of Great Maintenance Management</b>
                          </button>
                      </div>
                      <div style="position: absolute; left: 804px; top: 40%; transform: translateY(-52%);">
                          <img src="public/assets/images/NewCoverImages/sampler_books.jpg" class="landing-page" alt="landing-page" style="height: auto; max-width: 32%;">
                      </div>
                  </div>
                </div>
                <p><a href="{{route('elementsOfGreatMaintenance')}}"><b style="color:black";>Elements of Great Maintenance Management</b></a> is our new series that provides fundamentals of maintenance training for the next generation!</p>
                <i>You already know that:</i>  
                <ul style="list-style-type: disc;">
                  <li> Attention spans are short.</li>
                  <li> Old-school manuals and texts don’t cut it</li>
                  <li> Many of your students prefer graphic novels to long paragraphs and small print</li>
                  <li> Humans learn best with stories - this has worked for thousands of years</li>
                </ul> 
                <br>
                <p>The books are fun to read and bring the basics to people coming into the field. <b>Order any one of these new books for free </b>and see how they fit into your curriculum. Just fill in the form with your street address and we will send it to you free of charge.</p>
              </div>
              <div style="text-align: center;">
                <a href="http://amazon.com/author/joellevitt" target="_blank"><img src="public/assets/images/NewCoverImages/Joel003.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 200px; padding:10px;"></a>
                <a href="{{route('shopDetails',['catID'=>'1'])}}"><p style="font-size: 18px;"><u>See all of Joel Levitt's books on Amazon</u></p></a>
              </div>
            </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" style="width: 650px;">
      <div class="modal-header">
        <h5 class="modal-title" style="text-align: center;" id="exampleModalLabel">Elements of Great Maintenance Management<br>Review Copy Request</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="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Name:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="name" name="name" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Email:</label>
              </div>
              <div class="col-md-8">
                <input type="email" id="email" name="email" class="contactFormInp">
              </div>
            </div>
          </div>

          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Organaization:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="company" name="company" class="contactFormInp">
              </div>
            </div>
          </div>


          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Street Address:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="address" name="address" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>City:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="city" name="city" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>State/Providence:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="state" name="state" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Zip:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="zip" name="zip" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-4">
                <label>Country:</label>
              </div>
              <div class="col-md-8">
                <input type="text" id="country" name="country" class="contactFormInp">
              </div>
            </div>
          </div> 
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-4">
                <label>Comments:</label>
              </div>
              <div class="col-md-8">
                <textarea name="comments" id="comments" class="contactFormInp"></textarea>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-4">
                <label>Training Needs:</label>
              </div>
              <div class="col-md-8">
                <textarea name="training" id="training" class="contactFormInp"></textarea>
              </div>
            </div>
          </div> 
          {{-- <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-4">
                <label for="">I Want a Free Review Copy of:</label>
              </div>
              <div class="col-md-5">
                <label><input type="radio" name="books" id="books" value="PreventiveMaintenance">Preventive Maintenance</label><br>
                <label><input type="radio" name="books" id="books" value="DefectElimination">Defect Elimination</label><br>
                <label><input type="radio" name="books" id="books" value="ReliabilityFundamentals">Reliability Fundamentals</label><br>
              </div>
              <div class="col-md-3" style="margin-left: -46px">
                <label><input type="radio" name="books" id="books" value="Quality">Quality</label><br>
                <label><input type="radio" name="books" id="books" value="Lubrication">Lubrication</label>
              </div>
            </div>  
          </div> --}}
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-4">
                <label for="">Please include a course catalog:</label>
              </div>
              <div class="col-md-5">
                <label><input type="checkbox" name="courseCatalog" id="courseCatalog"></label>
              </div>
          </div> 
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-2">
                <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="row" style="margin-left:20px !important">
          <p>*You will be notified when new books in this series come out. Unsubscribe anytime</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary closeEmailModal" data-dismiss="modal" style="background-color:#c61508 !important">Cancel</button>
          <button type="submit" class="btn btn-primary saveBtnEmail" style="background-color:#c61508 !important">Submit</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  
      }
      .contactFormInp{
        width: 260px; 
        vertical-align: top;
      }
      .buttonsize:hover {
        box-shadow: none !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: {
      name: {
        required: true,
    },  
  email: {
        required: true,
      },
      "hiddenRecaptcha": {
        required: true
      },
    },
    messages: {
      email: {
        required: "*Please enter the Email ID",
        email: "*Please enter a valid Email ID"
      },
      email: {
        required: "*Please enter the Name",
      },
      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');
        $("#success").show();
		    $("#success").delay(2000).fadeOut(); 
        $(window).scrollTop(0);    
      }
    }); 
  }
});

$('#exampleModal').on('show.bs.modal', function () {
  $('#contactForm').find('#email,#name,#address,#city,#state,#zip,#country,#comments,#training').val('');
  $('#contactForm').validate().resetForm();
});

</script>
@endpush