@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 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">
                <h3 style="color: #337ab7;"><u>Stories of PM, A Comprehensive Primer of Preventive Maintenance</u></h3>
                <p><b>IBSN: </b>979-8496071154</p>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="">
                  <img src="public/assets/images/NewCoverImages/preventive-Maintenance.jpg" class="landing-page" alt="landing-page" style="height: auto;width: 200px; padding:10px;">
                </div>
                <div>
                  <p>PM (Preventive Maintenance) is the primary way to ensure the reliability of machines, buildings, or other physical assets. Even the most rigorous reliability techniques such as RCM and PMO, in the end, rely on effective PM. </p>
                  <p>In a series of interesting anecdotes, <u>Stories of PM</u> tells the PM person the why, what, when, where, and even sometimes how to PM effectively. The stories are fun to read and contain descriptive color drawings. <u> Stories of PM</u> tells the whole story of PM including the history and a couple of fun stories. Included are about a dozen best practices disguised as the rantings of a bug.</p>
                  <p>Stories of PM is the third book in the series <b>Elements of Great Maintenance Management,</b> which was designed to educate practitioners in the basics of some, often complex, but vital maintenance ideas.</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;"><b>Stories of PM</b></p>
                  <p><b>Paperback:</b><a href="https://www.amazon.com/dp/B0B917XPKK" target="_blank"> https://www.amazon.com/dp/B09K1TTGD5</a></p>
                  <p> Kindle:<a href="https://www.amazon.com/dp/B0B917XPKK" target="_blank"> https://www.amazon.com/dp/B09K1NVC7G</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" 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>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:</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-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');
          $("#success").show();
          $("#success").delay(2000).fadeOut(); 
          $(window).scrollTop(0);
        }
      }); 
    }
  });

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

</script>
@endpush