@extends('frontend.layout.template')
  @section('content')
  <div class="tt-breadcrumb">
      <div class="container">
          <ul>
              <li><a href="{{route('home')}}">Home</a></li>
              <li>Shopping Cart</li>
          </ul>
      </div>
  </div>
  <div id="tt-pageContent">
      <div class="container-indent" id="carttable">
          @if(!empty($cart))
          <div class="container">
              <h1 class="tt-title-subpages noborder">SHOPPING CART</h1>
              <div class="row">
                  <div class="col-sm-12 col-xl-8">
                      <div class="tt-shopcart-table">
                          <table>
                              <tbody>
                                  @php
                                  $discount=0;
                                  $tax=0;
                                  $subtotal=0;
                                  $total=0;
                                  @endphp
                                  @foreach($cart as $key=>$item)
                                  @php
                                  $discount=$discount+$item['discount'];
                                  $tax=$tax+$item['tax'];
                                  $subtotal=$subtotal+($item['price']*$item['quantity']);
                                  $total=$total+$item['total'];
                                  $product=App\Models\Product::where('id',$item['product_id'])->first();
                                  @endphp
                                  <tr id="cart-row-{{$key}}">
                                      <td>
                                          <a href="javascript:void(0);" class="tt-btn-close" id="remove-from-cart" data-id="{{$key}}"></a>
                                      </td>
                                      <td>
                                          <div class=" tt-product-img">
                                              <img src="{{ asset('uploads/product/'.$item['photo']) }}" data-src="{{ asset('uploads/product/'.$item['photo']) }}" alt="">
                                          </div>
                                      </td>
                                      <td>
                                          <h2 class="tt-title">
                                              <a href="{{route('product', ['slug' => $product->slug])}}">{{$item['name']}}</a>
                                          </h2>
                                          @if(!empty($item['attribute']))
                                          <label>
                                              @foreach(json_decode($item['attribute']) as $key=>$attr)
                                              {{$key}} : <span class="fw-medium">{{ $attr}}</span>
                                              </span><br>
                                              @endforeach

                                          </label>
                                          @endif
                                      </td>
                                      <td>
                                          <div class="tt-price">
                                              ₹{{$item['price']}}
                                          </div>
                                      </td>
                                      <td>
                                          <div class="detach-quantity-desctope">
                                              <div class="tt-input-counter style-01">
                                                  <span class="minus-btn"></span>
                                                  <!-- <span class="minus-btn" id="qtymin" data-id="{{$item['product_id']}}"></span> -->
                                                  <input type="text" id="qtyvalue" value="{{$item['quantity']}}" data-id="{{$item['product_id']}}" data-value="{{$item['price']}}" size="100">
                                                  <!-- <span class="plus-btn" id="qtyvalue" data-id="{{$item['product_id']}}"></span> -->
                                                  <span class="plus-btn"></span>
                                              </div>
                                          </div>
                                      </td>
                                      <td>
                                          <div class="tt-price">
                                              <p id="row-subtotal{{$item['product_id']}}"> ₹{{$item['price']*$item['quantity']}}</p>
                                          </div>
                                      </td>
                                  </tr>
                                  @endforeach

                              </tbody>
                          </table>
                          <div class=" tt-shopcart-btn">
                              <div class="col-left">
                                  <a class="btn-link" href="{{route('all-products')}}"><i class="icon-e-19"></i>CONTINUE SHOPPING</a>
                              </div>
                              <!-- <div class="col-right">
                                  <a class="btn-link" href="clearCart()" id="clear"><i class="icon-h-02"></i>CLEAR SHOPPING CART</a>
                                  <a class="btn-link" href="javascript:void(0);"><i class="icon-h-48"></i>UPDATE CART</a>
                              </div> -->
                          </div>
                      </div>
                  </div>
                  <div class="col-sm-12 col-xl-4">
                      <div class="tt-shopcart-wrapper">
                          <div class="tt-shopcart-box tt-boredr-large">
                              <table class="tt-shopcart-table01" id="cart-price-details">
                                  <tbody>
                                      <!-- <tr>
                                          <th>DISCOUNT</th>
                                          <td id="subtotal">{{$discount}}%</td>
                                      </tr> -->
                                      <tr>
                                          <th>TAX</th>
                                          <td id="tax">{{$tax}}%</td>
                                      </tr>
                                      <tr>
                                          <th>SUBTOTAL</th>
                                          <td id="subtotal">₹{{$subtotal}}</td>
                                      </tr>
                                  </tbody>
                                  <tfoot>
                                      <tr>
                                          <th>GRAND TOTAL</th>
                                          <td id="total">₹{{$total}}</td>
                                      </tr>
                                  </tfoot>
                              </table>
                              <a href="{{route('checkout')}}" class="btn btn-lg"><span class="icon icon-check_circle"></span>PROCEED TO CHECKOUT</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          @else
          <div class="container-indent nomargin">
              <div class="tt-empty-cart">
                  <span class="tt-icon icon-f-39"></span>
                  <h1 class="tt-title">SHOPPING CART IS EMPTY</h1>
                  <p>You have no items in your shopping cart.</p>
                  <a href="{{route('all-products')}}" class="btn">CONTINUE SHOPPING</a>
              </div>
          </div>
          @endif
      </div>
  </div>
  <script>
      // $("#remove-from-cart").click(function(e) {
      $('body').on('click', '#remove-from-cart', function(e) {
          e.preventDefault();
          var id = $(this).data('id');
          $.ajax({
              url: "{{ route('remove.from.cart') }}",
              method: "DELETE",
              data: {
                  _token: '{{ csrf_token() }}',
                  id: id
              },
              success: function(response) {
                  $("#cart-row-" + id).hide("slow");
                  $("#carttable").load(" #carttable");
                  $("#cartlist").load(" #cartlist");
                  $("#cart-header").load(" #cart-header");
              }
          });
      });

      //  $("#qtyvalue").change(function(e) {
      $('body').on('change', '#qtyvalue', function(e) {
          e.preventDefault();
          var id = $(this).data('id');
          var price = $(this).data('value');
          var qty = $(this).val();
          var subtotal = price * qty;
          $.ajax({
              url: "{{ route('update-cart-quantity') }}",
              method: "GET",
              data: {
                  //   _token: '{{ csrf_token() }}',
                  id: id,
                  quantity: qty,
                  price: price
              },
              success: function(data) {
                  $('#row-subtotal' + id).text(subtotal);
                  $("#cart-price-details").html(data.html);
                  $("#cartlist").load(" #cartlist");
                  $("#cart-header").load(" #cart-header");
              }
          });
      });
  </script>
  @endsection