@extends('frontend.layouts.master')
    <!-- Changes
4/11/22 - DMS remove CC year 2021, change max page to 500, setup fee, resubmit
2/28/20 - Remove Bleed selection, spine text message, change content provided via    
    -->
@section('title')
Order for 1-49 books
@endsection

@section('meta_description')

@endsection

@section('meta_keywords')

@endsection

@section('content')
    <style type="text/css">
      p > img {
        padding: 10px 20px 10px 0px;
      }
      p{text-align: justify;}
      label.error{color: red !important; padding-left: 15px;}
    </style>
    @include('frontend/includes/header')
    @include('frontend/includes/navigation')

    <!-- start slider -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="{{ URL::asset('frontend/img/banner_img.jpg') }}" class="img-responsive banner-img">
          <div class="carousel-caption">
            <h1>Order for 1 - 49 books</h1>
            <center><div class="line"></div></center>
          </div>
        </div>
      </div>
    </div>
    <!-- end slider-->

    <section id="pricing-info">
      <div class="container">
          <h3>Get Pricing</h3>
          <div class="pricing_boxshadow col-md-12 col-xs-12">
            <div class="row">
              <section>
                <div class="wizard">
                  <div class="alert alert-danger payment_error" style="display: none;">
                    Opps! Something went wrong while placing order. Please try again later.
                  </div>
                  <div class="wizard-inner">
                    <div class="connecting-line"></div>
                    <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                          <span class="round-tab">1</span>
                        </a>
                      </li>
                      <li role="presentation" class="disabled">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                          <span class="round-tab">2</span>
                        </a>
                      </li>
                      <li role="presentation" class="disabled">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                          <span class="round-tab">3</span>
                        </a>
                      </li>
                      <li role="presentation" class="disabled">
                        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                          <span class="round-tab">4</span>
                        </a>
                      </li>
                    </ul>
                  </div>

                  <form method="post" id="myForm" action="{{route('place_order_for_50_less')}}">
                    <!-- <center> -->
                    <div class="tab-content">
                      <div class="tab-pane active" role="tabpanel" id="step1">
                          <input type="hidden" name="_token" value="{{csrf_token()}}">
                          <input type="hidden" name="book_qty" id="book_qty" value="{{$data['book_qty']}}">
                          <input type="hidden" name="page_count" id="page_count" value="{{$data['page_count']}}">
                          <input type="hidden" name="book_size" id="book_size" value="{{$data['book_size_id']}}">
                          <input type="hidden" name="cover_type" id="cover_type" value="{{$data['cover_type_id']}}">
                          <input type="hidden" name="b_size" id="b_size" value="{{$data['b_size']}}">
                          <input type="hidden" name="c_type" id="c_type" value="{{$data['c_type']}}">
                          <input type="hidden" name="total_price_value" id="total_price_value" value="{{$data['total_price_value']}}">
                          <input type="hidden" name="sales_tax_cost" id="sales_tax_cost" value="">
                          <input type="hidden" name="spine_text_cost" id="spine_text_cost" value="">
                          <input type="hidden" name="shipping_cost" id="shipping_cost" value="">
                          <input type="hidden" name="grand_total_cost" id="grand_total_cost" value="">
                          <ol id="listol">
                            <li>
                                <div class="toggle-title"><label class=""><h1>Book Quantity *<a href="javascript:void(0)" data-html="true"  data-toggle="tooltip" data-placement="bottom" title="<p>Enter total amount of books that you would like to order. We offer discounts based on quantity. 
                                <p>If you are ordering 1-5 books, there is a $98.00 setup fee. </p>
                                <p>11-24 Books - 10% Discount </p>
                                <p>25-49 Books - 20% Discount </p>
                                <p>50+ Books get a 30% to 80% Discount!.</p> "><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" class="form-control required" placeholder="Enter Book Title" value="{{$data['book_qty']}}" readonly>
                                </div>
                            </li>
                            <li>
                                <div class="toggle-title"><label class=""><h1>Page Count *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" data-html="true" title="<p> 1 Sheet of paper printed on both sides is 2 pages. Also, Do NOT count cover. We typically print books between 24 and 500 pages. Pricing is based on 24 pages</p>"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" class="form-control" required placeholder="Enter Book Title" value="{{$data['page_count']}}" readonly>
                                </div>
                            </li>
                            
                            <li>
                                <div class="toggle-title"><label class=""><h1>Size *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Enter Book Size"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" class="form-control" required placeholder="Enter Book Title" value="{{$data['book_size']->width}} x {{$data['book_size']->height}}" readonly>
                                </div>
                            </li>
                            <li>
                                <div class="toggle-title"><label class=""><h1>Binding Type *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Enter Book Name"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" class="form-control" required placeholder="Enter Book Title" value="{{$data['cover_type']}}" readonly>
                                </div>
                            </li>
                            <li>
                                <div class="toggle-title"><label class=""><h1>Book Title *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Enter Book Name"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" id="book_title" class="form-control required" name="book_title" placeholder="Enter Book Title">
                                </div>
                            </li>
                            <li>
                                <div class="toggle-title"><label class=""><h1>Spine Text to be Added by UBuildABook ($25 Extra Charge)<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Additional $25 will be charged for adding Spine text"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                <div class="toggle-content">
                                    <input type="text" id="spine_text" class="form-control" name="spine_text" placeholder="Spine Text">
                                </div>
                            </li>
                          </ol>
                          <ul class="list-inline">
                              <li class="pull-right">
                                  <div>
                                      <p id="step1-error" style="color: red; display: none;">Please enter valid book details</p>
                                  </div>
                                  <button type="button" class="orderbtn next-step">Next</button>
                                  <!-- <a style="color: #FFF; text-decoration: none; margin-right: 10px;" href="https://ubuildabook.com/pricing-book-printing.html" class="orderbtn next-step">Change</a> -->
                              </li>
                          </ul>
                      </div>
                      <div class="tab-pane" role="tabpanel" id="step2">
                          <ol id="listol">
                              <li>
                                  <div class="toggle-title">
                                      <label><h1>Paper Type *<a href="javascript:void(0)" data-html="true" data-toggle="tooltip" data-placement="right" title="<p>Our standard paper type is 80# gloss. We also offer a variety of economy and premium gloss and matte paper on orders of 50+ books.</p>"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label>
                                  </div>
                                  <div class="toggle-content one pricing_form">
                                      <ul class="list-inline">
                                          @foreach($paper_type as $type)
                                          <li>  
                                              <input id='mpaper_type{{$type->type_id}}' type='checkbox' class='mpaper_type' value='{{$type->type_id}}' onclick='mpaper_type_selected(this.value)' name="paper_type" checked />
                                              <label for='mpaper_type{{$type->type_id}}'>
                                                  <div class='pricing_economybox'>
                                                      <span>{{$type->name}}</span>
                                                  </div>
                                              </label>
                                          </li>
                                          @endforeach
                                          <!-- <span id="show_paper_type"><h4><br><br><br>Select Book Size first<br><br><br><br></h4></span> -->
                                      </ul>
                                  </div>
                              </li>
                              <li>
                                  <div class="toggle-title"><label><h1>Book Genre *<a href="javascript:void(0)" data-toggle="tooltip" data-html="true" data-placement="right" title="<p>We can make recommendations on your book based on genre type. Yearbooks have additional options including software, multi-user, and FastTrak rush orders.</p>"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content one pricing_form">
                                      <ul class="list-inline">
                                          @foreach($book_genre as $genre)
                                                                                    @foreach($genre_value as $value)
                                          <li>  
                                              <input id="genre{{$value}}" type="checkbox" name="book_genre" class="book_genre" value="{{$value}}" onclick="check_book_genre(this.value)" />
                                              <label for="genre{{$value}}">
                                                 <div class="pricing_bookbox">
                                                      <span>{{$value}}</span>
                                                 </div>
                                              </label>
                                          </li>
                                          @endforeach
                                          @endforeach
                                          <p class="book_genre_error" style="color: red; display: none;">This field is required.</p>
                                       </ul>
                                   </div>
                              </li>
                    <!-- START Remove Bleed Selection
                              <li>
                                  <div class="toggle-title"><label class=""><h1>Page Bleed *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Select Page Bleed"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content row">
                                      <div class='col-md-4'>
                                          <input class='magic-checkbox page_bleed' id='cfin1' type='checkbox' name='page_bleed' value='no_bleed' checked />
                                          <label for='cfin1'><span>No Bleed</span></label>
                                      </div>
                                      <div class='col-md-4'>
                                          <input class='magic-checkbox page_bleed' id='cfin2' type='checkbox' name='page_bleed' value='full_bleed'/>
                                          <label for='cfin2'><span>Full Bleed</span></label>
                                      </div>
                                  </div>
                              </li>
                     END Remove Bleed Selection -->         
                              <li class="yearbook_options" style="display: none;">
                                  <div class="toggle-title"><label><h1>Yearbook Options *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Select Yearbook Options"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content row">
                                      @foreach($yearbook_options as $yearbook_option)
                                      <div class="col-md-4">
                                          <input class="magic-checkbox yearbook_optionss" id="y_book{{$yearbook_option->id}}" type="checkbox" value="{{$yearbook_option->id}}" name="multi_yearbook_options[{{$yearbook_option->id}}]">
                                          <label for="y_book{{$yearbook_option->id}}"><span>{{$yearbook_option->name}}</span></label>
                                      </div>
                                      @endforeach
                                  </div>
                              </li>
                              <li>
                                  <div class="toggle-title"><label class=""><h1>Shipping Options *<a href="javascript:void(0)" data-toggle="tooltip" data-html="true" data-placement="right" title="<p>Please indicate your need by date. Rush fees apply for orders needed in less than 10 days.</p>"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content row">
                                      <div class="form-group col-md-6">
                                          <select name="rush_order" id="shipping_options" class="form-control" onchange="check_rush(this.value);">
                                              <option value="standard">Standard (7-10 Business days)</option>
                                              <option value="rush">Rush</option>
                                          </select>
                                      </div>
                                      <div class="form-group col-md-6 rush_date" style="display: none;">
                                          <input data-provide="datepicker" id="date_needed" class="form-control" name="rush_date" placeholder="Date needed">
                                      </div>
                                  </div>
                              </li>
                              <li>
                                  <div class="toggle-title"><label class=""><h1>Content Provided Via *<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="How will you provide content?"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content row">
                                      <div class="form-group col-md-6">
                                          <select id="content_provided" class="form-control" onchange="check_content_provided(this.value)" name="content_provided">
                                              <option value="UBuildABook Upload Page"> UBuildABook Upload Page</option>
                                              <option value="email">Email</option>
                                              <option value="cd">CD/DVD/Flash Drive</option>
                                              <option value="ftp">FTP</option>
                                              <option value="photo_creation_software">Photo Creation Software</option>
                                              <option value="other">Other</option>
                                          </select>
                                      </div>
                                      <div class="form-group col-md-6 content_other" style="display: none;">
                                          <input type="text" class="form-control" id="content_provided_other" placeholder="Other" name="content_provided_other">
                                      </div>
                                  </div>
                              </li>
                              <li>
                                  <div class="toggle-title"><label class=""><h1>How did you hear about us?<a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="How did you hear about us?"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                                  <div class="toggle-content row">
                                      <div class="col-md-12 pd">
                                          <h5>How did you hear about us?</h5>
                                          <input type="text" class="form-control" name="hear_us" id="hear_us">
                                      </div>
                                      <div class="col-md-12 pd">
                                          <h5>Questions and comments</h5>
                                          <textarea placeholder="Comments" class="form-control" name="comments" id="questions" row="10"></textarea>
                                      </div>
                                  </div>
                              </li>
                          </ol>
                          <ul class="list-inline">
                              <li><button type="button" class="orderbtn prev-step">Previous</button></li>
                              <li class="pull-right">
                                  <div>
                                      <p id="step2-error" style="color: red; display: none;">Please enter valid book details</p>
                                  </div>
                                  <button type="button" class="orderbtn next-step">Next</button>
                              </li>
                          </ul>
                      </div>
                      <div class="tab-pane" role="tabpanel" id="step3">
                      <ol id="listol">
                          <li class="col-md-12 pd">
                              <div class="toggle-title"><label><h1>Contact Information<a href="javascript:void(0)" data-toggle="tooltip" data-html="true" data-placement="right" title="<p>Please include your contact information.</p>"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                              <div class="toggle-content one specifi">
                                  <div class="row">
                                      <div class="form-group col-md-8">
                                          <label for="exampleInputEmail1">First Name *</label>
                                          <input type="text" class="form-control required" id="fn" name="first_name">
                                      </div>
                                      <div class="form-group col-md-4">
                                          <label for="exampleInputPassword1">Last name *</label>
                                          <input type="text" class="form-control required" id="ln" name="last_name">
                                      </div>
                                      <div class="form-group col-md-12">
                                          <label for="exampleInputPassword1">Company / Organization</label>
                                          <input type="text" class="form-control required" id="com_org" name="company">
                                      </div>
                                      <div class="form-group col-md-8">
                                          <label for="exampleInputEmail1">E-Mail *</label>
                                          <input type="email" class="form-control required" id="em" name="email">
                                      </div>
                                      <div class="form-group col-md-4">
                                          <label for="exampleInputPassword1">Phone no *</label>
                                          <input type="text" class="form-control required" id="ph" name="phone">
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="col-md-12 pd">
                              <div class="toggle-title"><label><h1>BILLING ADDRESS<a href="javascript:void(0)"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                              <div class="toggle-content one specifi">
                                  <div class="row">
                                      <div class="form-group col-md-12">
                                          <label for="exampleInputEmail1">Address 1 *</label>
                                          <input type="text" class="form-control required" id="add1" placeholder="Street Address" name="badd1">
                                      </div>
                                      <div class="form-group col-md-12">
                                          <label for="exampleInputEmail1">Address 2</label>
                                          <input type="text" class="form-control" id="add2" placeholder="Street Address 2" name="badd2">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputPassword1">Country *</label>
                                          <select id="mcountry" class="dropdown form-control" onchange="get_state(this.value)" name="bcountry">
                                              <option value="">Select Country</option>
                                              @foreach($countries as $country)
                                              <option value="{{$country->id}}">{{$country->country_name}}</option>
                                              @endforeach
                                          </select>
                                          <p class="country_error" style="color: red; display: none;">This field is requred.</p>
                                      </div>
                                      <div class="form-group col-md-6 state_div">
                                          <label for="exampleInputEmail1">State *</label>
                                          <select id="mstate" class="dropdown form-control" name="bstate">
                                              <option value="">Select country first</option>
                                          </select>
                                          <p class="state_error" style="color: red; display: none;">This field is requred.</p>
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputtext1">City *</label>
                                          <input type="text" class="form-control required" id="mcity" name="bcity">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputPassword1">Zip *</label>
                                          <input type="text" class="form-control required" id="mzip" name="bzip">
                                      </div>
                                      <div class="form-group col-md-12">
                                          <input type="checkbox" id="ssa" class="magic-checkbox" onchange="change_shipping_address()" checked>
                                          <label for="ssa">Shipping address same as Billing address</label>
                                      </div>
                                      <!-- <div class="form-group col-md-12">
                                          <input type="checkbox" id="spa" class="magic-checkbox" onchange="change_proof_address()" checked>
                                          <label for="spa">Proof book address same as Billing address</label>
                                      </div> -->
                                  </div>
                              </div>
                          </li>
                          <li class="col-md-12 pd shipping_address" style="display: none;">
                              <div class="toggle-title"><label><h1>Shipping ADDRESS<a href="javascript:void(0)"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                              <div class="toggle-content one specifi">
                                  <div class="row">
                                      <div class="form-group col-md-12">
                                          <label for="exampleInputEmail1">Address 1 *</label>
                                          <input type="text" class="form-control required" id="sadd1" placeholder="Street Address" name="sadd1">
                                      </div>
                                      <div class="form-group col-md-12">
                                          <label for="exampleInputEmail1">Address 2</label>
                                          <input type="text" class="form-control" id="sadd2" placeholder="Street Address 2" name="sadd2">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputPassword1">Country *</label>
                                          <select id="scountry" class="dropdown form-control" name="scountry" onchange="get_state1(this.value)">
                                              <option value="">Select Country</option>
                                              @foreach($countries as $country)
                                              <option value="{{$country->id}}">{{$country->country_name}}</option>
                                              @endforeach
                                          </select>
                                          <p class="scountry_error" style="color: red; display: none;">This field is requred.</p>
                                      </div>
                                      <div class="form-group col-md-6 state_div1">
                                          <label for="exampleInputEmail1">State *</label>
                                          <select id="sstate1" name="sstate" class="dropdown form-control">
                                              <option value="">Select country first</option>
                                          </select>
                                          <p class="sstate_error" style="color: red; display: none;">This field is requred.</p>
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputtext1">City *</label>
                                          <input type="text" class="form-control required" name="scity" id="scity">
                                      </div>
                                      <div class="form-group col-md-6">
                                          <label for="exampleInputPassword1">Zip *</label>
                                          <input type="text" class="form-control required" name="szip" id="szip">
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="col-md-12 pd">
                              <div class="toggle-title"><label><h1>Customer Agreement<a href="javascript:void(0)"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label></div>
                              <div class="toggle-content one specifi">
                                  <div class="form-group col-md-12">
                                      <input type="checkbox" id="ca1" class="magic-checkbox" value="1">
                                      <label for="ca1">By checking this box I agree to the standard <a target="_blank" href="order-terms.html">terms and conditions</a>. If signing electronically, I acknowledge that it has the same legal value as my signature. *</label>
                                      <p class="customer_aggrement_1" style="color: red; display: none;">This field is required.</p>
                                  </div>
                                  
                                  <div class="form-group col-md-12">
                                      <input type="checkbox" class="magic-checkbox" id="ca2" value="1">
                                      <label for="ca2">File Resubmit: For orders of less than 50 books, there will be a $65 charge for each file resubmit. For orders of 50 books or more, 1 free file re-submit is permitted, thereafter there will be a $65 charge for each file re-submit. *</label>
                                      <p class="customer_aggrement_2" style="color: red; display: none;">This field is required.</p>
                                  </div>
                              </div>
                          </li>
                      </ol>
                      <ul class="list-inline">
                          <li><button type="button" class="orderbtn prev-step">Previous</button></li>
                          <li class="pull-right">
                              <div>
                                  <p id="step3-error" style="color: red; display: none;">Please enter valid book details</p>
                              </div>
                              <button type="button" class="orderbtn next-step">Next</button>
                          </li>
                      </ul>
                  </div>
                  <div class="tab-pane" role="tabpanel" id="complete">
                      <ol id="listol">
                        <li class="col-md-12 pd">
                            <div class="toggle-title">
                                <label><h1>PAYMENT INFORMATION<a href="javascript:void(0)"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label>
                            </div>
                            <div class="toggle-content one specifi">
                                <!-- <div class="form-group col-md-12">
                                    <label>Sub-Total Order Amount</label>
                                    <input type="text" id="sub_total" class="form-control" value="{{$data['total_price_value']}}">
                                </div> -->
                                <div class="col-md-12">
                                    <div class="pricing_list_boxshadow">
                                        <table style="width:100%">
                                          <tr>
                                              <th>Sub-Total Order Amount</th>
                                                <td><span style="float: right; padding-right: 20px;">$ {{$data['total_price_value']}}</span></td>
                                            </tr>
                                            <tr>
                                              <th>Spine Text Fee</th>
                                                <td><span style="float: right; padding-right: 20px;" id="spine_text_fee">$ 0.00</span></td>
                                            </tr>
                                            <tr>
                                              <th>Shipping Fee</th>
                                                <td><span style="float: right; padding-right: 20px;" id="shipping_fee">$ 0.00</span></td>
                                            </tr>
                                            <tr>
                                              <th>Sales Tax</th>
                                                <td><span style="float: right; padding-right: 20px;" id="tax_fee">$ 0.00</span></td>
                                            </tr>
                                            <tr>
                                              <th>Grand Total</th>
                                                <td><span style="float: right; padding-right: 20px;" id="grand_total">$ 0.00</span></td>
                                            </tr>
                                        </table>
                                      </div>
                                </div>

                                <!-- <div class="form-group col-md-12 show_gift_coupon" style="display: none;">
                                    <label>Gift Certificate/Coupon Code</label>
                                    <input type="text" id="cvv" class="form-control">
                                </div> -->
                            </div>
                        </li>
                        <li class="col-md-12 pd">
                            <div class="toggle-title">
                                <label><h1>PAYMENT INFORMATION<a href="javascript:void(0)"><img src="{{ URL::asset('frontend/img/info.png') }}"></a></h1></label>
                            </div>
                            <div class="toggle-content one specifi">
                                <div class="form-group col-md-12">
                                    <label>Payment Method *</label>
                                    <select name="payment_method" id="payment_method" class="form-control" onchange="choose_payment_method(this.value);">
                                        <option value="credit_card">Credit Card</option>
                                        <option value="check">Check</option>
                                        <!-- <option value="gift_certificate">Gift Certificate</option>
                                        <option value="coupon">Coupon</option>
                                        <option value="prepaid">Prepaid</option> -->
                                    </select>
                                </div>
                                <div class="credit_card">
                                    <div class="form-group col-md-12">
                                        <label>Credit Card *</label>
                                        <select id="card_type" name="card_type" class="form-control">
                                            <option value="master_card">Master Card</option>
                                            <option value="visa">Visa</option>
                                            <option value="discover">Discover</option>
                                            <option value="american_express">American Express</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label>Name on Credit Card *</label>
                                        <input type="text" id="name_on_card" name="name_on_card" class="form-control required">
                                    </div>
                                    <div class="form-group col-md-8">
                                        <label>Credit Card Number *</label>
                                        <input type="text" id="credit_card_number" name="credit_card_number" class="form-control required">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>CVV *</label>
                                        <input type="text" id="cvv" name="cvv" class="form-control required">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Expiration Date Month *</label>
                                        <select id="expiration_month" name="exp_month" class="form-control">
                                            <option value="01">01</option>
                                            <option value="02">02</option>
                                            <option value="03">03</option>
                                            <option value="04">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
                                            <option value="07">07</option>
                                            <option value="08">08</option>
                                            <option value="09">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>Expiration Date Year *</label>
                                        <select id="expiration_year" name="exp_year" class="form-control">
                                            <option value="2022">2022</option>
                                            <option value="2023">2023</option>
                                            <option value="2024">2024</option>
                                            <option value="2025">2025</option>
                                            <option value="2026">2026</option>
                                            <option value="2027">2027</option>
                                            <option value="2028">2028</option>
                                            <option value="2029">2029</option>                   
                                        </select>
                                    </div>
                                </div>
                                <!-- <div class="form-group col-md-12 show_gift_coupon" style="display: none;">
                                    <label>Gift Certificate/Coupon Code</label>
                                    <input type="text" id="cvv" class="form-control">
                                </div> -->
                            </div>
                        </li>
                      </ol>
                      <ul class="list-inline">
                          <li><button type="button" class="orderbtn prev-step">Previous</button></li>
                          <li class="pull-right">
                              <div>
                                  <p id="step4-error" style="color: red; display: none;">Please enter valid book details</p>
                              </div>
                              <button onclick="submit_form()" type="button" class="orderbtn">Finish</button>
                          </li>
                      </ul>
                  </div>
                      
                    <div class="clearfix"></div>
                    </div>
                    <!-- </center> -->
                  </form>
                </div>
              </section>
            </div>
          </div>
      </div>
    </section>

    <script>
        function submit_form() {
            // Step 4 fields start
            var payment_method = $('#payment_method').val();
            var card_type = $('#card_type').val();
            var name_on_card = $('#name_on_card').val();
            var credit_card_number = $('#credit_card_number').val();
            var cvv = $('#cvv').val();
            var expiration_month = $('#expiration_month').val();
            var expiration_year = $('#expiration_year').val();
            var token = "{{csrf_token()}}";
            // Step 4 fields end
            if(payment_method == 'credit_card') {
                if (card_type == '' || name_on_card == '' || credit_card_number == '' || cvv == '' || expiration_month == '' || expiration_year == '') {
                    $('#name_on_card').valid();
                    $('#credit_card_number').valid();
                    $('#cvv').valid();
                    // $('#step4-error').show();
                } else {
                    $('.overlay').show();
                    $('.loading').show();
                    // $('form#myForm').submit();
                    $.ajax({
                        type : 'POST',
                        url : "{{route('place_order_for_50_less')}}",
                        data : $('#myForm').serialize(),
                        success: function (result) {
                            // console.log(result);
                              var obj = JSON.parse(result);
                              if (obj.status == 1) {
                                // window.location.href = "{{ route('home') }}";
                                var url = "{{ route('thankyou') }}";
                                var token = "{{ csrf_token() }}";
                                var form = $('<form action="' + url + '" method="post">' +
                                  '<input type="text" name="order_no" value="' + obj.order_number + '" />' +
                                  '<input type="text" name="type" value="order" />' +
                                  '<input type="text" name="_token" value="' + token + '" />' +
                                  '</form>');
                                $('body').append(form);
                                form.submit();
                            } else {
                                $('.overlay').hide();
                                $('.loading').hide();
                                $('.payment_error').show();
                                $('.payment_error').html(obj.message);
                            }
                        }
                    });
                }
            } else {
                $('.overlay').show();
                $('.loading').show();
                $('#step4-error').hide();
                // $('form#myForm').submit();
                $.ajax({
                    type : 'POST',
                    url : "{{route('place_order_for_50_less')}}",
                    data : $('#myForm').serialize(),
                    success: function (result) {
                        // console.log(result);
                        if (result != 0) {
                            // window.location.href = "{{ route('home') }}";
                            var url = "{{ route('thankyou') }}";
                            var token = "{{ csrf_token() }}";
                            var form = $('<form action="' + url + '" method="post">' +
                              '<input type="text" name="order_no" value="' + result + '" />' +
                              '<input type="text" name="type" value="order" />' +
                              '<input type="text" name="_token" value="' + token + '" />' +
                              '</form>');
                            $('body').append(form);
                            form.submit();
                        } else {
                            $('.overlay').hide();
                            $('.loading').hide();
                            $('.payment_error').show();
                        }
                    }
                });
            }
        }

        $('.size').change(function() {
            if (this.checked) {
                $('.overlay').show();
                $('.loading').show();
                var token = "{{ csrf_token() }}";
                var size_id = this.value;
                var book_qty = $('#book_qty').val();
                var page_count = $('#page_count').val();

                if (book_qty == '' || page_count == '') {
                    $('.book_page_error').show();
                    $('.overlay').hide();
                    $('.loading').hide();
                } else {
                    $('.book_page_error').hide();
                    $('.overlay').show();
                    $('.loading').show();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('get_covers') }}",
                        data: "size_id="+size_id+"&_token="+token+'&book_qty='+book_qty+'&page_count='+page_count,
                        success: function (result) {
                            $('.overlay').hide();
                            $('.loading').hide();
                            // console.log(result);
                            if (result[0]) {
                                $('#show_hard').html(result[0]);
                            } else {
                                $('#show_hard').html('<h4><center>No size found</center></h4>');
                            }
                            if (result[1] != "") {
                                $('#show_soft').html(result[1]);
                            } else {
                                $('#show_soft').html('<h4><center>No size found</center></h4>');
                            }
                            if (result[2]) {
                                $('#show_paper_type').html(result[2]);
                            }
                            if (result[3]) {
                                $('#show_proof_options').html(result[3]);
                            }
                            if (result[4]) {
                                $('#show_endsheet_options').html(result[4]);
                            }
                        }
                    });
                }
            } else {
                $('#show_hard').html('<h4><center><br><br><br>No size found<br><br><br><br></center></h4>');
                $('#show_soft').html('<h4><center><br><br><br>No size found<br><br><br><br></center></h4>');
            }
        });

        function get_state(country_id) {
            $('.country_error').hide();
            var token = "{{csrf_token()}}";
            $.ajax({
                type: "POST",
                url: "{{ route('get_state') }}",
                data: "country_id="+country_id+"&_token="+token,
                success: function (result) {
                    // console.log(result);
                    $('#mstate').html(result);
                    if (!result) {
                        $('.state_div').hide();
                    } else {
                        $('.state_div').show();
                    }
                }
            });
        }

        function get_state1(country_id) {
            $('.scountry_error').hide();
            var token = "{{csrf_token()}}";
            $.ajax({
                type: "POST",
                url: "{{ route('get_state') }}",
                data: "country_id="+country_id+"&_token="+token,
                success: function (result) {
                    // console.log(result);
                    $('#sstate1').html(result);
                    if (!result) {
                        $('.state_div1').hide();
                    } else {
                        $('.state_div1').show();
                    }
                }
            });
        }

        function get_state2(country_id) {
            var token = "{{csrf_token()}}";
            $.ajax({
                type: "POST",
                url: "{{ route('get_state') }}",
                data: "country_id="+country_id+"&_token="+token,
                success: function (result) {
                    // console.log(result);
                    $('#pstate2').html(result);
                    if (!result) {
                        $('.state_div2').hide();
                    } else {
                        $('.state_div2').show();
                    }
                }
            });
        }

        function choose_payment_method(value) {
            if (value == 'credit_card') {
                $('.credit_card').show();
                $('.show_gift_coupon').hide();
            } else if(value == 'gift_certificate' || value == 'coupon') {
                $('.credit_card').hide();
                $('.show_gift_coupon').show();
            } else {
                $('.credit_card').hide();
                $('.show_gift_coupon').hide();
            }
        }

        function custom_size() {
            $('.size').prop("checked", false);
            $('.cust_size').toggle();
        }

        function check_quantity(book_quantities) {
            $('.size').prop("checked", false);
            $('.cust_width').val('');
            $('.cust_height').val('');
            if (book_quantities < 50) {
                $('.for_50_less').show();
                $('.for_50_more').hide();
            } else {
                $('.for_50_less').hide();
                $('.for_50_more').show();
            }
        }

        function check_page_count() {
            $('.cust_width').val('');
            $('.cust_height').val('');
            $('.size').prop("checked", false);
        }

        function mpaper_type_selected(value) {
            $('.mpaper_type').prop("checked", false);
            $(".mpaper_type:checkbox[value="+value+"]").prop("checked","true");
        }

        function cover_type_selected(value) {
            $('.cover').prop("checked", false);
            $(".cover:checkbox[value="+value+"]").prop("checked","true");
            $('.overlay').show();
            $('.loading').show();
            var token = "{{ csrf_token() }}";
            var book_qty = $('#book_qty').val();
            $.ajax({
                type: "POST",
                url: "{{ route('get_cover_finish') }}",
                data: "id="+value+"&_token="+token+"&book_qty="+book_qty,
                success: function (result) {
                    $('.overlay').hide();
                    $('.loading').hide();
                    // console.log(result);
                    $('.show_cover_finish').html(result);
                }
            });
        }

        function check_book_genre(book_genre) {
            $('.book_genre_error').hide();
            if(book_genre == 'Yearbook') {
                $('.yearbook_options').show();
            } else {
                $('.yearbook_options').hide();
            }
        }

        /*function yearbook_options_selected(value) {
            $('.yearbook_optionss').prop("checked", false);
            $(".yearbook_optionss:checkbox[value="+value+"]").prop("checked","true");
        }*/

        function proof_option_selected(value) {
            $('.proof_options').prop("checked", false);
            $(".proof_options:checkbox[value="+value+"]").prop("checked","true");
        }

        function cover_finish_selected(value) {
            $('.cover_finish').prop("checked", false);
            $(".cover_finish:checkbox[value="+value+"]").prop("checked","true");
        }

        function check_rush(value) {
            if (value == 'rush') {
                $('.rush_date').show();
            } else {
                $('.rush_date').hide();
            }
        }

        function check_content_provided(value) {
            if (value == 'other') {
                $('.content_other').show();
            } else {
                $('.content_other').hide();
            }
        }

        function change_shipping_address() {
            $('.shipping_address').toggle();
        }

        function change_proof_address() {
            $('.proof_address').toggle();
        }

        $(document).ready(function () {
          //Initialize tooltips
          $('.nav-tabs > li a[title]').tooltip();
          //Wizard
          $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
              var $target = $(e.target);
              if ($target.parent().hasClass('disabled')) {
                  return false;
              }
          });
          $(".next-step").click(function (e) {
            $(window).scrollTop($('.pricing_boxshadow').offset().top);
              var step = jQuery(".tab-pane.active").attr("id");
              if (step == 'step1') {
                var book_title = $('#book_title').val();
                var spine_text = $('#spine_text').val();
                
                if (book_title == '') {
                    $('#book_title').valid();
                    // $('#step1-error').show();
                } else {
                    // $('#step1-error').hide();
                    $('#book-qty-error').hide();
                    var $active = $('.wizard .nav-tabs li.active');
                    $active.next().removeClass('disabled');
                    nextTab($active);
                }
              }

              if (step == 'step2') {
                var book_genre = $('.book_genre:checked').val();
             //   var page_bleed = $('.page_bleed:checked').val();
                var yearbook_options = $('.yearbook_optionss:checked').val();
                var shipping_options = $('#shipping_options').val();
                var date_needed = $('#date_needed').val();
                var content_provided = $('#content_provided').val();
                var content_provided_other = $('#content_provided_other').val();
                var hear_us = $('#hear_us').val();
                var questions = $('#questions').val();

                if (book_genre == undefined) {
                    $('.book_genre_error').show();
                    // $('#step2-error').show();
                } else {
                    if (book_genre == 'Yearbook') {
                        /*if (yearbook_options == undefined) {
                            $('#step2-error').show();
                        } else {*/
                            var $active = $('.wizard .nav-tabs li.active');
                            $active.next().removeClass('disabled');
                            nextTab($active);
                        /*}*/
                    } else {
                        var $active = $('.wizard .nav-tabs li.active');
                        $active.next().removeClass('disabled');
                        nextTab($active);
                    }
                }
              }

              if (step == 'step3') {
                var first_name = $('#fn').val();
                var last_name = $('#ln').val();
                var company_org = $('#com_org').val();
                var email = $('#em').val();
                var phone = $('#ph').val();
                var address1 = $('#add1').val();
                var address2 = $('#add2').val();
                var country = $('#mcountry').val();
                var state = $('#mstate').val();
                var city = $('#mcity').val();
                var zip = $('#mzip').val();

                var saddress1 = $('#sadd1').val();
                var saddress2 = $('#sadd2').val();
                var scountry = $('#scountry').val();
                var sstate = $('#sstate1').val();
                var scity = $('#scity').val();
                var szip = $('#szip').val();

                /*var paddress1 = $('#padd1').val();
                var paddress2 = $('#padd2').val();
                var pcountry = $('#pcountry').val();
                var pstate = $('#pstate').val();
                var pcity = $('#pcity').val();
                var pzip = $('#pzip').val();*/

                var ssa = $('#ssa:checked').val();
                // var spa = $('#spa:checked').val();
                var ca1 = $('#ca1:checked').val();
                var ca2 = $('#ca2:checked').val();


                var date_needed = $('#date_needed').val();
                if (ssa != undefined) {
                    var final_state = state;
                } else {
                    var final_state = sstate;
                }

                if (final_state == 5) {
                    var sales_tax_cost = 7.25;
                    document.getElementById('sales_tax_cost').value = sales_tax_cost;
                    $('#tax_fee').html('$ 0.00');
                } else {
                    var sales_tax_cost = 0;
                    document.getElementById('sales_tax_cost').value = sales_tax_cost;
                    $('#tax_fee').html('$ 0.00');
                }

                var spine_text = $('#spine_text').val();
                if (spine_text == '') {
                    var spine_text_cost = 0;
                    document.getElementById('spine_text_cost').value = spine_text_cost;
                    $('#spine_text_fee').html('$ 0.00');
                } else {
                    var spine_text_cost = 25;
                    document.getElementById('spine_text_cost').value = spine_text_cost;
                    $('#spine_text_fee').html('$ 25.00');
                }

                var token = "{{csrf_token()}}";

                var b_size = $('#b_size').val();
                var c_type = $('#c_type').val();
                var shipping_options = $('#shipping_options').val();
                var book_qty = $('#book_qty').val();
                var page_count = $('#page_count').val();

                var shipping_options = $('#shipping_options').val();
                if (shipping_options == 'standard') {
                    $('.overlay').show();
                    $('.loading').show();
                    var description = 'normal';
                    var date_needed = '1';
                    $.ajax({
                        type: "POST",
                        url: "{{ route('get_shipping') }}",
                        data: "b_size="+b_size+"&c_type="+c_type+"&description="+description+"&book_qty="+book_qty+"&page_count="+page_count+"&date_needed="+date_needed+"&_token="+token,
                        success: function (result) {
                            $('.overlay').hide();
                            $('.loading').hide();
                            // console.log(result);
                            document.getElementById('shipping_cost').value = result;
                            $('#shipping_fee').html('$ '+result);

                            var shipping_cost = $('#shipping_cost').val();
                            var total_price_value = $('#total_price_value').val();
                            total_price_value = Number(total_price_value);
                            
                            // var grand_total = Number(spine_text_cost)+Number(shipping_cost)+Number(total_price_value);
                            var grand_total = '';
                            
                            if (sales_tax_cost != 0) {
                                var percent_amount = Number(total_price_value) + Number(spine_text_cost) + Number(shipping_cost);
                                var percent_amount = Number(percent_amount)*7.25;
                                var percent_amount = Number(percent_amount)/100;

                                grand_total = total_price_value + percent_amount;
                                grand_total = Number(spine_text_cost)+Number(shipping_cost)+Number(grand_total);
                                grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#tax_fee').html('$ '+percent_amount.toFixed(2));
                                $('#grand_total').html('$ '+grand_total);

                                /*var percent_amount = (grand_total*sales_tax_cost)/100;
                                grand_total = grand_total + percent_amount;
                                grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#grand_total').html('$ '+grand_total);*/
                            } else {
                                grand_total = Number(spine_text_cost)+Number(shipping_cost)+Number(total_price_value);
                                grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#grand_total').html('$ '+grand_total);
                                /*grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#grand_total').html('$ '+grand_total);*/
                            }
                        }
                    });
                } else {
                    var description = 'normal';
                    $('.overlay').show();
                    $('.loading').show();
                    $.ajax({
                        type: "POST",
                        url: "{{ route('get_shipping') }}",
                        data: "b_size="+b_size+"&c_type="+c_type+"&description="+description+"&book_qty="+book_qty+"&date_needed="+date_needed+"&_token="+token,
                        success: function (result) {
                            $('.overlay').hide();
                            $('.loading').hide();
                            // console.log(result);
                            document.getElementById('shipping_cost').value = result;
                            $('#shipping_fee').html('$ '+result);

                            var shipping_cost = $('#shipping_cost').val();
                            var total_price_value = $('#total_price_value').val();
                            
                            var grand_total = Number(spine_text_cost)+Number(shipping_cost)+Number(total_price_value);
                            
                            if (sales_tax_cost != 0) {
                                var percent_amount = (grand_total*sales_tax_cost)/100;
                                // console.log(percent_amount+'-'+grand_total);
                                grand_total = grand_total + percent_amount;
                                grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#grand_total').html('$ '+grand_total);
                            } else {
                                grand_total = (grand_total).toFixed(2);
                                document.getElementById('grand_total_cost').value = grand_total;
                                $('#grand_total').html('$ '+grand_total);
                            }
                        }
                    });
                }




                if (first_name == '' || last_name == '' || email == '' || phone == '' || address1 == '' || country == '' || state == '' || city == '' || zip == '' || ca1 == undefined || ca2 == undefined) {
                    $('#fn').valid();
                    $('#ln').valid();
                    // $('#com_org').valid();
                    $('#em').valid();
                    $('#ph').valid();
                    $('#add1').valid();
                    $('#mcity').valid();
                    $('#mzip').valid();
                    if (country == "") {
                      $('.country_error').show();
                    }
                    if (state == "") {
                      $('.state_error').show();
                    }
                    if (ca1 == undefined) {
                      $('.customer_aggrement_1').show();
                    }
                    if (ca2 == undefined) {
                      $('.customer_aggrement_2').show();
                    }
                    // $('#step3-error').show();
                } else {
                    $('.country_error').hide();
                    $('.state_error').hide();
                    $('.customer_aggrement_1').hide()
                    $('.customer_aggrement_2').hide()
                    if (ssa == undefined/* || spa == undefined*/) {
                        if (ssa == undefined) {
                            if (saddress1 == '' || scountry == '' || sstate == '' || scity == '' || szip == '') {
                                $('#sadd1').valid();
                                $('#scity').valid();
                                $('#szip').valid();
                                if (scountry == "") {
                                  $('.scountry_error').show();
                                }
                                if (sstate == "") {
                                  $('.sstate_error').show();
                                }
                                // $('#step3-error').show();
                            } else {
                                $('.scountry_error').hide();
                                $('.sstate_error').hide();
                                /*if (spa == undefined) {
                                    if (paddress1 == '' || pcountry == '' || pstate == '' || pcity == '' || pzip == '') {
                                        $('#step3-error').show();
                                    } else {
                                        $('#step3-error').hide();
                                        var $active = $('.wizard .nav-tabs li.active');
                                        $active.next().removeClass('disabled');
                                        nextTab($active);
                                    }
                                } else {*/
                                    $('#step3-error').hide();
                                    var $active = $('.wizard .nav-tabs li.active');
                                    $active.next().removeClass('disabled');
                                    nextTab($active);
                                /*}*/
                            }
                        }
                        /*else if (spa == undefined) {
                            if (paddress1 == '' || paddress2 == '' || pcountry == '' || pstate == '' || pcity == '' || pzip == '') {
                                $('#step3-error').show();
                            } else {
                                $('#step3-error').hide();
                                var $active = $('.wizard .nav-tabs li.active');
                                $active.next().removeClass('disabled');
                                nextTab($active);
                            }
                        }*/ else {
                            $('#step3-error').hide();
                            var $active = $('.wizard .nav-tabs li.active');
                            $active.next().removeClass('disabled');
                            nextTab($active);
                        }
                    } else {
                        $('#step3-error').hide();
                        var $active = $('.wizard .nav-tabs li.active');
                        $active.next().removeClass('disabled');
                        nextTab($active);
                    }
                }
              }

              /*var $active = $('.wizard .nav-tabs li.active');
              $active.next().removeClass('disabled');
              nextTab($active);*/
          });
          $(".prev-step").click(function (e) {
            $(window).scrollTop($('.pricing_boxshadow').offset().top);
              var $active = $('.wizard .nav-tabs li.active');
              prevTab($active);
          });
        });

        function nextTab(elem) {
            $(elem).next().find('a[data-toggle="tab"]').click();
        }
        function prevTab(elem) {
            $(elem).prev().find('a[data-toggle="tab"]').click();
        }
    </script>

    @include('frontend/includes/footer_links')

    @include('frontend/includes/footer')
@endsection