<div class="row">
  <div class="col-sm-12 text-left">
    <h2 class="title">Zamówienie</h2>
  </div>
</div>
<hr class="spacer-5"><hr class="spacer-20 no-border">
<% if @cart.blank? || @cart.cart_products.size == 0 %>
<div class="row">
  <div class="col-sm-12">
    <%= render partial: '/checkout/partials/order_error' %>
  </div>
</div>
<% else %>
<% content_for :header_scripts do %>
  <script src='https://www.google.com/recaptcha/api.js?onload=onRecaptchaElementLoad&render=explicit' async="async" defer="defer"></script>
<% end %>
<div class="row">
  <div class="col-sm-12">
    <div id="error"></div>
    <%= form_tag({controller: :checkout, action: :end_order}, remote: true, novalidate: 'novalidate') do %>
    <ul class="nav nav-pills style2 nav-justified" id="checkout_tabs">
      <li class="active">
        <a href="#shopping-cart" data-toggle="tab">
          1. Koszyk
          <div class="icon">
            <i class="fa fa-check"></i>
          </div>
        </a>
      </li>
      <li>
        <a href="#billing-info" data-toggle="tab">
          2. Dane dostawy
          <div class="icon">
            <i class="fa fa-home"></i>
          </div>
        </a>
      </li>
      <li>
        <a href="#payment" data-toggle="tab">
          3. Płatność
          <div class="icon">
            <i class="fa fa-credit-card"></i>
          </div>
        </a>
      </li>
    </ul>

    <div class="tab-content pills">
      <div class="tab-pane active" id="shopping-cart">
        <div id="shopping-cart-products">
          <%= render partial: '/cart/partials/cart_products_lg', locals: { ca: 'order' } %>
        </div>
        <a href="#" id="changetabbutton1" class="btn btn-default btn-md round pull-right">Dalej</a>
      </div>
      <!-- end tab-pane -->
      <div class="tab-pane" id="billing-info">
        <%= render partial: '/checkout/partials/shipping_address' %>
        <a href="#" id="changetabbutton2" class="btn btn-default btn-md round pull-right">Dalej</a>
      </div>
      <!-- end tab-pane -->
      <div class="tab-pane" id="payment">
        <%= render partial: '/checkout/partials/payment_methods' %>
      </div>
      <!-- end tab-pane -->
    </div>
    <!-- end pills content -->

    <hr class="spacer-30">

    <div class="row">
      <div class="col-sm-7 text-left">
      </div>
      <!-- end col -->

      <div class="col-sm-5" id="order-summary">
        <%= render partial: '/checkout/partials/order_summary' %>
      </div>
      <!-- end col -->
    </div>
    <!-- end row -->
    <% end %>
  </div>
  <!-- end col -->
</div>
<!-- end row -->
<%= javascript_tag do %>
var onRecaptchaElementLoad = function() { grecaptcha.render('recaptcha', { 'sitekey' : '<%= j ENV["REACAPTCHA_SITE_KEY"]%>', 'hl': 'pl' }); };
$('#changetabbutton1').click(function(e){
  e.preventDefault();
  $('#checkout_tabs a[href="#billing-info"]').tab('show');
});
$('#changetabbutton2').click(function(e){
  e.preventDefault();
  $('#checkout_tabs a[href="#payment"]').tab('show');
});
<% end %>
<% content_for :footer_scripts do %>
<%= javascript_include_tag 'order' %>
<% end %>
<% end %>
