@extends('layouts.app')

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

@section('content')
<div class="fq-band">
  <div class="container">
    <nav class="pb-crumb" aria-label="Breadcrumb"><a href="{{ route('home') }}">Home</a><i>/</i><span>Wishlist</span></nav>
  </div>
</div>

<main class="container wl-main">
  <h1 class="sr-only">My wishlist</h1>
  <p class="wl-count" id="wlCount" hidden></p>
  <div id="wishList" class="a-grid" aria-live="polite"></div>

  <div id="empty" class="wl-empty" hidden>
    <svg viewBox="0 0 80 80" aria-hidden="true"><path d="M40 36L14 24v28l26 14 26-14V24z"/><path d="M14 24l26 14 26-14M40 38v28"/><path d="M26 18l14-8 14 8"/><circle cx="40" cy="26" r="3"/><path d="M18 12l3 3M21 12l-3 3M60 8l3 3M63 8l-3 3"/><circle cx="62" cy="16" r="2"/></svg>
    <h2>Your wishlist is empty</h2>
    <p>No products were added to the wishlist page.</p>
    <a href="{{ route('collection') }}" class="btn">Back to 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'), count = document.getElementById('wlCount');
  document.getElementById('empty').hidden = list.length > 0;
  count.hidden = list.length === 0;
  count.textContent = list.length + (list.length === 1 ? ' saved item' : ' saved items');
  box.innerHTML = list.map(function (p, i) {
    var img = p.image ? '<img src="' + attr(p.image) + '" alt="' + attr(p.name) + '" loading="lazy" onerror="this.remove()">' : '';
    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 wl-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 ' + attr(p.name) + ' from wishlist" title="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('.wl-card .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