@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>
          </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-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                  <img src="public/assets/images/NewCoverImages/Maintenance-Management.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 200px; padding:10px;">
                </div>
                <div id="">
                  <h3 style="color: #337ab7;"><u>Battle for Reliability, Fundamentals Win the Day</u> </h3>
                  <p><b>ISBN:</b> 9798598795286</p>
                  <h4>What is reliability, and how, on Earth, do we get more of it?</h4> 
                  <p>The Battle for Reliability is a graphic novel teaching the critical need for all industries to focus on maintenance fundamentals to avoid unscheduled shutdowns from breakdowns. The battle for Reliability shows that everyday failures are still killing productivity even with the current focus on hi-tech sensors and software.</p>
                  <p>This easy-to-read full-color graphic novel shows how creativity can solve repetitive reliability problems. In the end, ideas for projects generated from the rank and file can inexpensively and quickly improve reliability. </p> 
                  <p>Goal: To raise awareness of basic maintenance and its impact on reliability. Focus on small, focused actions.</p> 
                  <h4>Don Fitchett, President - Maintenance, Engineering Training Co., Nevada</h4>
                  <p>"Although we had heard many of those perspectives in Joel's book from the stakeholders before, it is nice to have them in one presentation to get a better sense of the big picture.</p>                        
                  <p>The 3D analysis lab was super cool! The real-world examples and learning process I watched (read?) play out was of great value to the story. Your book Joel is a real piece of art. You wrote it in such a way that it is relatable to everyone. It didn't hurt that I have a soft spot for superhero comics. :) Thanks for sharing."</p>
                  <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>Free Review Copy</b></button>
                  </div>
                  <p style="margin-top:90px;"> Book:<a href="https://www.amazon.com/dp/B0B917XPKK" target="_blank"> https://www.amazon.com/dp/B0B917XPKK</a></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="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>
            <br>
          </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" style="text-align: center;" id="exampleModalLabel">Elements of Great Maintenance Management</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: 15px !important;">
                <div class="col-md-3">
                  <label>City:</label>
                </div>
                <div class="col-md-9">
                  <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-3">
                  <label>State:</label>
                </div>
                <div class="col-md-9">
                  <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-3">
                  <label>Zip:</label>
                </div>
                <div class="col-md-9">
                  <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-3">
                  <label>Country:</label>
                </div>
                <div class="col-md-9">
                  <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-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">Cancel</button>
            <button type="submit" class="btn btn-primary saveBtnEmail" style="background-color:#c61508 !important">Submit</button>
          </div>
        </form> 
      </div>
    </div>
  </div>

@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>
  
  $(document).ready(function(){
    $("#contactForm").validate({  
      rules: {
        name : "required",
        email: "required",
      },  
    });
  });

  $('#contactForm').on('submit',function(e) {
    e.preventDefault(); 
  console.log($('#contactForm').valid());
    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,#city,#state,#zip,#country').val('');
    $('#contactForm').validate().resetForm();
  });

</script>
@endpush