@extends('layouts.app')

@section('title', 'My Cart')

@section('content')
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>Shopping cart</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><span>Cart</span></nav>
  </div>
</div>

<main class="container section cart-page">
  <ol class="co-steps" aria-label="Progress">
    <li class="on"><span>1</span>Cart</li>
    <li><span>2</span>Checkout</li>
    <li><span>3</span>Confirmation</li>
  </ol>

  <div id="empty" class="cart-empty" hidden>
    <span class="ce-ic"><svg viewBox="0 0 24 24"><path d="M5 8h14l-1 12H6z"/><path d="M9 8V6a3 3 0 016 0v2"/></svg></span>
    <h2>Your cart is empty</h2>
    <p>Looks like you have not added anything yet. Explore our collection and find something you love.</p>
    <a href="{{ route('collection') }}" class="btn">Start shopping</a>
  </div>

  <div id="full" class="cart-grid" hidden>
    <div class="cart-items">
      <table class="cart-table">
        <thead><tr><th></th><th>Product</th><th>Price</th><th>Quantity</th><th>Total</th><th></th></tr></thead>
        <tbody id="rows"></tbody>
      </table>
      <a href="{{ route('collection') }}" class="cart-back"><svg viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Continue shopping</a>
    </div>

    <aside class="cart-total">
      <h3>Order summary</h3>
      <div class="sum"><span>Subtotal</span><b id="sub"></b></div>
      <div class="sum"><span>Shipping</span><b>At checkout</b></div>
      <p class="muted">Taxes and delivery are confirmed at checkout.</p>
      <a href="{{ route('checkout') }}" class="btn block"><svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="1"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>Check out</a>
      <ul class="co-trust">
        <li><svg viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>Secure, encrypted payment</li>
        <li><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.3 5.7"/><path d="M20 5v5h-5"/></svg>Easy returns within {{ $company->return_days ?: 30 }} days</li>
      </ul>
    </aside>
  </div>
</main>
@endsection

@push('scripts')
<script>
function render() {
  var cart = Store.get('cart');
  document.getElementById('empty').hidden = cart.length > 0;
  document.getElementById('full').hidden = cart.length === 0;
  document.getElementById('rows').innerHTML = cart.map(function (p, i) {
    var img = p.image ? '<img src="' + p.image + '" alt="">' : '';
    var nm = p.url ? '<a href="' + p.url + '">' + p.name + '</a>' : p.name;
    return '<tr><td><div class="ph p' + (i % 4 + 1) + ' thumb">' + img + '</div></td><td><b>' + nm + '</b></td>' +
      '<td>' + Store.money(p.price) + '</td>' +
      '<td><div class="qty"><button data-i="' + i + '" data-d="-1">&minus;</button><span>' + p.qty + '</span><button data-i="' + i + '" data-d="1">+</button></div></td>' +
      '<td><b>' + Store.money(p.price * p.qty) + '</b></td>' +
      '<td class="x"><button type="button" class="x-btn rm" data-i="' + i + '" aria-label="Remove ' + p.name.replace(/"/g, '&quot;') + '" title="Remove"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></td></tr>';
  }).join('');
  document.getElementById('sub').textContent = Store.money(cart.reduce(function (n, p) { return n + p.price * p.qty; }, 0));
}
document.addEventListener('click', function (e) {
  var b = e.target.closest('[data-d]'), r = e.target.closest('.rm');
  if (b) Store.changeQty(+b.dataset.i, parseInt(b.dataset.d, 10));
  else if (r) { e.preventDefault(); Store.removeCart(+r.dataset.i); }
  else return;
  render();
});
render();
document.addEventListener('cart:changed', render);
</script>
@endpush