@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 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> 
                      <h4>Introducing a new training series.  A tool to teach maintenance fundamentals called <a href="{{route('elementsOfGreatMaintenance')}}"><b style="color:black";><u>“Elements of Great Maintenance Management.”</u></b></a></h4>
                      <i>You already know:</i>  
                      <ul style="list-style-type: circle;">
                        <li> Old-school books and manuals don’t cut it.</li>
                        <li> Boring texts don’t cut it</li>
                        <li> Humans learn best with stories.  Hey, that has worked for thousands of years.</li>
                        <li> New students want <i><b>entertrainment!</b></i>  (I made this word up from Entertainment + Training)</li>
                      </ul>  
                      <h2 style="text-align: center;">Free offer!</h2>
                      <p><b>Order one of these books for free</b> and see how it can fit into your curriculum.  Order a review copy of one of the books today by filling in the form with a street address where we can send it.</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:white!important;background-color: #c61508 !important;border:1px !important;border-radius:4px !important;line-height: revert;width: auto;"><b>For Free Review Copy mailed directly to you</b></button>
                      </div>
                      <div style="margin:30px;padding-top: 65px;margin-top:50px;">
                        <h4>You can tell from the covers these books are different then everything else you’ve seen.<br><br>Click the book to see what it is about</h4>
                        <div class="row">
                          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" 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-3 col-md-3 col-sm-3 col-xs-3" 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-3 col-md-3 col-sm-3 col-xs-3" 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-3 col-md-3 col-sm-3 col-xs-3" 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>
                      </div>
                    </div>                         
                  </div>
                </div>
                <br>
                <p>They are colorful, humorous, and weird. All reports say they are a FUN way to learn some basics!  And there are more titles on the way, including Lubrication and Maintenance engineering! Virtual or live training based on the books is available. Please add a note to the request form. For instructors each graphic book has a 1-hour class PowerPoint available.</p>
                <h4>Why is this important now?</h4>
                <p>Maintenance gets no respect!  It is a fascinating, varied, and exciting field.  Yet kids flock away from it.  Maybe it is the decades of bad PR.  These good-paying jobs are begging for people!</p>
                <p>Without more candidates, our society’s mission-critical systems will not do their jobs, and society’s assets will be challenging to maintain.  This lack of qualified people is the single biggest complaint of industry leaders worldwide.</p>
                <h4>Why this approach?</h4>
                <p>Traditional teaching modes like textbooks don’t work as well anymore.  People read less and use Google and social media for everything.<br>To get students’ attention: We need to appeal to their sense of humor, drama, irony, and, of course, everyone’s short attention span.</p>
                <h4>Why Me, Joel Levitt?</h4>
                <p>I have skills from writing 16 maintenance management books and over 200 articles, teaching 20,000 students, and consulting with organizations in 40 countries.  I figured it was time to unleash my inner comic. </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:white !important;background-color: #c61508 !important;border:1px !important;border-radius:4px !important;line-height: revert;width: auto;"><b>For Free Review Copy mailed directly to you</b></button>
                </div>
              </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="http://amazon.com/author/joellevitt" target="_blank"><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">
      <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="col-md-12">
            <div class="row" style="margin-bottom: 15px !important;">
              <div class="col-md-3">
                <label>Name:</label>
              </div>
              <div class="col-md-9">
                <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-3">
                <label>Email:</label>
              </div>
              <div class="col-md-9">
                <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-3">
                <label>Street Address:</label>
              </div>
              <div class="col-md-9">
                <input type="text" id="address" name="address" class="contactFormInp">
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row" style="margin-bottom: 10px !important;">
              <div class="col-md-3">
                <label>Comments:</label>
              </div>
              <div class="col-md-9">
                <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-3">
                <label>Training Needs:</label>
              </div>
              <div class="col-md-9">
                <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-3">
                <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">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  
      }
      .contactFormInp{
        width: 260px;
        vertical-align: top;
      }
    </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');
      }
    }); 
  }
});

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

</script>
@endpush