@extends('layouts.app')

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

@section('content')
<div class="page-head"><div class="container"><h1>My Wishlist</h1><p><a href="{{ route('home') }}">Home</a> / Wishlist</p></div></div>

<main class="container section">
  <div id="wishList" class="grid"></div>
  <div id="empty" class="empty" hidden>
    <p>Your wishlist is empty.</p>
    <a href="{{ route('home') }}#products" class="btn">Continue shopping</a>
  </div>
</main>
@endsection

@push('scripts')
<script>
function attr(s) { return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;'); }
function render() {
  var list = Store.get('wish'), box = document.getElementById('wishList');
  document.getElementById('empty').hidden = list.length > 0;
  box.innerHTML = list.map(function (p, i) {
    var img = p.image ? '<img src="' + attr(p.image) + '" alt="">' : '';
    var name = p.url ? '<a href="' + attr(p.url) + '">' + attr(p.name) + '</a>' : attr(p.name);
    var action;
    if (p.multi && p.url) {
      action = '<a class="btn small" href="' + attr(p.url) + '">Choose options</a>';
    } else {
      var inCart = Store.cartQty(p.name) > 0;
      action = '<button class="btn small add-cart' + (inCart ? ' in' : '') + '" data-name="' + attr(p.name) + '" data-price="' + p.price + '" data-image="' + attr(p.image || '') + '" data-url="' + attr(p.url || '') + '">' +
        (inCart ? 'Remove from cart' : 'Add to cart') + '</button>';
    }
    return '<div class="card"><div class="ph p' + (i % 4 + 1) + '">' + img +
      (p.url ? '<a href="' + attr(p.url) + '" class="cover" aria-label="' + attr(p.name) + '"></a>' : '') +
      '<button class="wish on" data-name="' + attr(p.name) + '" aria-label="Remove from wishlist"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>' +
      '<h4>' + name + '</h4><div class="pr">' + Store.money(p.price) + '</div>' + action + '</div>';
  }).join('');
}
document.addEventListener('click', function (e) {
  var r = e.target.closest('.wish');
  if (r) { Store.toggleWish(r.dataset.name); render(); return; }
  var a = e.target.closest('.add-cart');
  if (a) {
    if (Store.cartQty(a.dataset.name) > 0) Store.setCart(a.dataset.name, 0, 0);
    else Store.addCart(a.dataset.name, parseFloat(a.dataset.price), 1, { image: a.dataset.image || null, url: a.dataset.url || null });
    render();
  }
});
document.addEventListener('cart:changed', render);
render();
</script>
@endpush