@extends('master')
@section('main_content')



@if (count($cart) != 0)

  @php
  $sum = 0;
  @endphp

  <section class="hero hero-page gray-bg padding-small">
    <div class="container">
      <div class="row d-flex">
        <div class="col-lg-9 order-2 order-lg-1">
          <h1>Checkout</h1><p class="lead">You currently have {{count($cart)}} item(s) in your basket</p>
        </div>
        <div class="col-lg-3 text-right order-1 order-lg-2">
          <ul class="breadcrumb justify-content-lg-end">
            <li class="breadcrumb-item"><a href="{{url('')}}">Home</a></li>
            <li class="breadcrumb-item active">Checkout</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- Checout Forms-->
  <section class="checkout">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <ul class="nav nav-pills">
            <li class="nav-item"><div class="nav-link">Address</li>
            <li class="nav-item"><div class="nav-link">Delivery Method </li>
            <li class="nav-item"><div class="nav-link">Payment Method </li>
            <li class="nav-item"><div class="nav-link active">Order Review</li>

          </ul>
          <div class="tab-content">
            <div id="order-review" class="tab-block">
              <div class="cart">
                <div class="cart-holder">
                  <div class="basket-header">
                    <div class="row">
                      <div class="col-6">Product/Erase</div>
                      <div class="col-2">Price</div>
                      <div class="col-2">Quantity</div>
                      <div class="col-2">Unit Price</div>
                    </div>
                  </div>
                  <div class="basket-body">
                    <!-- Product-->
                    @foreach ($cart as $product)
                      <div class="item row d-flex align-items-center">
                        <div class="col-6">
                          <div class="d-flex align-items-center">
                            <img src="{{asset('images').'/' . $product['attributes']['img']}}" alt="{{$product['name']}}" class="img-fluid">
                            <a href="{{ url('shop/remove-item/' . $product['id']) }}" style="background-color:red;">
                              <img src="{{asset('images/close.png')}}" alt="">
                            </a>
                            <div class="title"><a href="{{url('') }}">
                              <h6>{{ $product['name'] }}</h6><span class="text-muted">Size: {{$product['attributes']['size']}}</span></a></div>
                            </div>
                          </div>
                          
                          <div class="col-2"><span>${{$product['price']}} </span></div>
                          <div class="col-2"><span>{{$product['quantity']}}</span></div>
                          <div class="col-2"><span>${{$totle =  $product['price'] * $product['quantity'] }} </span></div>
                        </div>
                        @php

                        $sum = $sum +$totle;
                        @endphp
                    @endforeach
                  </div>
                </div>
                <div class="total row"><span class="col-md-10 col-2">Total</span><span class="col-md-2 col-10 text-primary"> ${{$sum}}</span></div>
              </div>
              <div class="CTAs d-flex justify-content-between flex-column flex-lg-row"><a href="{{ url('shop') }}" class="btn btn-template-outlined wide prev"><i class="fa fa-angle-left"></i>Back to Shop</a>



                <a href="{{url('shop') .'/' . 'pre-place-order'}}" class="btn btn-template wide next">Place an order<i class="fa fa-angle-right">

                </i>
              </a>
            </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="block-body order-summary">
            <h6 class="text-uppercase">Order Summary</h6>
            <p>Shipping and additional costs are calculated based on values you have entered</p>
            <ul class="order-menu list-unstyled">
              <li class="d-flex justify-content-between"><span>Order Subtotal </span><strong>${{$sum}}</strong></li>
              <li class="d-flex justify-content-between"><span>Shipping and handling</span><strong>$10.00</strong></li>
              <li class="d-flex justify-content-between"><span>Tax</span><strong>$0.00</strong></li>
              <li class="d-flex justify-content-between"><span>Total</span><strong class="text-primary price-total">${{$sum + 10}}</strong></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
@else
  <p style="margin-left:8px">nothing to show get in to the <a href="{{url('shop')}}">Shop</a></p>
@endif

















  <!-- <div  style="margin-left:30px" class="wrraper">

<div class="row">
  <div class="col-md-10">
    <h1>Eshopers Check out Page</h1>
  </div>
</div>
<div class="row">
  <div class="col-md-11">
    @if ($cart)
      <table style="text-align: center" class="table table-bordered">
        <thead class="text-center">
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Sub Total</th>
            <th>Size</th>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($cart as $item)
            {{-- {{dd($item)}} --}}
            {{-- {{dd(asset('images') .'/'. $item['attributes']['img'])}} --}}
            <tr>
              <td><img width="100" src="{{asset('images').'/' . $item['attributes']['img']}}" alt=""> {{ $item['name'] }}</td>
              <td>
                <input type="button" data-id="{{$item['id']}}" value="-" class="update-cart">
                <input class="text-center" type="text" size="1" value="{{ $item['quantity'] }}">
                <input type="button" value="+" class="update-cart" data-id="{{$item['id']}}">
              </td>
              <td>{{$item['price']}}</td>
              <td>{{$item['quantity'] * $item['price']}}</td>
              <td>{{$item['attributes']['size']}}</td>
              <td  class="text-center">
                <a href="{{ url('shop/remove-item/' . $item['id']) }}" style="background-color:red;">
                  <img src="{{asset('images/close.png')}}" alt="">
                </a>
              </td>
            </tr>
          @endforeach
        </tbody>
      </table>
      <li>totle in Cart : </li>
      {{ Cart::getTotal() }}$
      <span class=" pull-right">
        <a class="btn btn-default" href="{{ url('shop/clearcart') }}">Clear Cart</a>
      </span>
    @else
      <p><li>No Items in Cart........</li></p>
    @endif
  </div>
</div>
</div> -->
@endsection