@extends('layouts.app')
@section('content')
<section class="main-container col1-layout">
    <div class="main container">
      <div class="col-main">
        <form class="cart" id="form-cart" method="POST" action="{{ url('checkout') }}">
          @csrf
          
          <div class="page-content page-order"><div class="page-title">
            <h2>Cart</h2>
          </div>
            
            
            <div class="order-detail-content">
              <div class="table-responsive">
                <table class="table table-bordered cart_summary">
                  <thead>
                    <tr>
                      <th class="cart_product">Product</th>
                      <th>Description</th>
                      <th>Unit price</th>
                      <th>Qty</th>
                      <th>Total</th>
                      <th  class="action"><i class="fa fa-trash-o"></i></th>
                    </tr>
                  </thead>
                  <tbody id="body">
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="3"><strong>Total</strong></td>
                      <td colspan="3"><strong id="total"></strong></td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="cart_navigation"> <a class="continue-btn" href="{{ url('/') }}"><i class="fa fa-arrow-left"> </i>&nbsp; Continue shopping</a> <a class="checkout-btn" href="javascript:void(0);" onclick="submit_form()"><i class="fa fa-check"></i> Confirm Order</a> </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>
@endsection
@section("customjs")
<script type="text/javascript">
	$(document).ready(function(){
		displayCart();
	});

	function displayCart(){
		let cart = JSON.parse(localStorage.getItem("cart"));
	    if (cart.length <= 0) {
	      $(".cart-total").text("");
	    }else{
	      $(".cart-total").text(cart.length+" items");
	    }

	    $("#cart-sidebar").html("")
	    var sub_total = 0;
	    for(var i = 0; i < cart.length; i ++)
	    {
	    	var total = cart[i].price * cart[i].qty;
        var pic = cart[i].pic;
	      sub_total += total;
	      $("#body").append('<tr><td class="cart_product"><a href="#"><img src="{{ asset('storage/items') }}/'+pic+'" alt="Product"></a></td><td class="cart_description"><p class="product-name"><a href="#">'+cart[i].name+' </a></p></td><td class="price"><span>'+cart[i].price+'</span></td><td class="qty"><input class="form-control input-sm" type="text" name="item['+i+'][qty]" value="'+cart[i].qty+'" required><input type="hidden" name="item['+i+'][id]" value="'+cart[i].id+'"></td><td class="price"><span>'+total+'</span></td><td class="action"><a href="#"><i class="icon-close"></i></a></td></tr>');
	    }

	    $("#total").text(sub_total);
	}

  function submit_form(){
    $("#form-cart").submit();
  }
</script>
@endsection