@extends('layouts.app')

@section('title', 'Collection')

@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 id="crumb">Products</span></nav>
  </div>
</div>

<main class="container section shop2">
  <h1 class="sr-only" id="pageTitle">All Products</h1>
  <div class="sh-bar">
    <div class="sh-left">
      <button type="button" class="sh-fbtn" id="fbtn"><svg viewBox="0 0 24 24"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/></svg> Filter</button>
      <div class="sh-views" id="views" role="group" aria-label="Layout">
        <button type="button" data-v="2" aria-label="2 columns"><svg viewBox="0 0 24 24"><path d="M8 4v16M16 4v16"/></svg></button>
        <button type="button" data-v="3" class="on" aria-label="3 columns"><svg viewBox="0 0 24 24"><path d="M5 4v16M12 4v16M19 4v16"/></svg></button>
        <button type="button" data-v="4" aria-label="4 columns"><svg viewBox="0 0 24 24"><path d="M3 4v16M9 4v16M15 4v16M21 4v16"/></svg></button>
      </div>
    </div>
    <div class="sh-right">
      <label class="sh-sort" for="sort">Sort by:</label>
      <select id="sort" aria-label="Sort by">
        <option value="featured">Featured</option>
        <option value="best">Best selling</option>
        <option value="new">Date, new to old</option>
        <option value="low">Price, low to high</option>
        <option value="high">Price, high to low</option>
        <option value="az">Alphabetically, A-Z</option>
      </select>
      <span class="sh-count" id="count" aria-live="polite"></span>
    </div>
  </div>

  <div class="sh-wrap">
    <aside class="side2" id="filters" aria-label="Filters"></aside>
    <div class="sh-main">
      <div class="grid g3" id="grid"></div>
      <p class="empty" id="none" hidden>No products match your filters.</p>
      <div class="pg" id="pager"></div>
    </div>
  </div>
</main>
@endsection

@push('scripts')
<script>
var PRODUCTS = @json($products);
var CATS = @json(collect($categories)->pluck('name', 'slug'));
var COLS = @json(collect($collections)->pluck('name', 'slug'));
var COLIMG = @json(collect($collections)->pluck('image', 'slug'));
var INITIAL = @json($initial);                    // filters resolved from ?f=<uuid>
var FILTER_URL = @json(route('collection.filters'));
</script>
<script src="{{ asset_v('js/data.js') }}"></script>
<script>
// Shop filters: everything runs in the page (no reload); the URL keeps cat / col / stock / sort for sharing.
var MAXP = Math.ceil(Math.max.apply(null, [0].concat(PRODUCTS.map(function (p) { return p.price; }))));
var DEFV = '3';                                  // default layout: 3 columns
var state = { cat: [], col: [], stock: [], brand: [], min: 0, max: MAXP, sort: 'featured', view: DEFV, page: 1 };
var PER = 12;
var shut = {};                                   // collapsed filter sections
var grid = document.getElementById('grid'), box = document.getElementById('filters');
var SORTS = ['best', 'featured', 'new', 'low', 'high', 'az'], VIEWS = ['4', '3', '2', 'list'];

function inStock(p) { return (p.variants || []).some(function (v) { return v.stock > 0; }); }
var BRANDS = {};
PRODUCTS.forEach(function (p) { if (p.brand) BRANDS[p.brand] = (BRANDS[p.brand] || 0) + 1; });
var hasBrands = Object.keys(BRANDS).length > 1;

function setView(v) {
  state.view = v;
  grid.className = 'grid g' + v;
  document.querySelectorAll('#views button').forEach(function (b) { b.classList.toggle('on', b.dataset.v === v); });
}
// filters <-> plain object (what is stored behind the UUID)
function applyState(f) {
  f = f || {};
  state.cat = (f.cat || []).filter(function (k) { return CATS[k] !== undefined; });
  state.col = (f.col || []).filter(function (k) { return COLS[k] !== undefined; });
  state.stock = (f.stock || []).filter(function (k) { return k === 'in' || k === 'out'; });
  state.brand = (f.brand || []).filter(function (k) { return BRANDS[k] !== undefined; });
  state.min = f.min > 0 ? +f.min : 0;
  state.max = f.max > 0 ? +f.max : MAXP;
  state.sort = SORTS.indexOf(f.sort) > -1 ? f.sort : 'featured';
  state.page = 1;
  document.getElementById('sort').value = state.sort;
  setView(VIEWS.indexOf(String(f.view)) > -1 ? String(f.view) : DEFV);
}
function snapshot() {
  return { cat: state.cat.slice(), col: state.col.slice(), stock: state.stock.slice(), brand: state.brand.slice(),
    min: state.min > 0 ? state.min : 0, max: state.max < MAXP ? state.max : 0, sort: state.sort, view: state.view };
}
// The URL never shows readable filters: the filter set is saved on the server and referenced as ?f=<uuid>.
var syncSeq = 0;
function commit(snap, url, replace) { history[replace ? 'replaceState' : 'pushState'](snap, '', url); }
function sync(replace) {
  var snap = snapshot(), seq = ++syncSeq;
  var plain = !snap.cat.length && !snap.col.length && !snap.stock.length && !snap.brand.length && !snap.min && !snap.max && snap.sort === 'featured' && snap.view === DEFV;
  if (plain) { commit(snap, BASE + '/collection', replace); return; }
  fetch(FILTER_URL, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
    body: JSON.stringify(snap)
  }).then(function (r) { return r.json(); }).then(function (res) {
    if (seq !== syncSeq || !res.id) return;           // a newer change already replaced this one
    commit(snap, BASE + '/collection?f=' + res.id, replace);
  }).catch(function () {});
}
function push() { state.page = 1; sync(false); }

function count(fn) { return PRODUCTS.filter(fn).length; }
function checks(key, map, countFn) {
  return Object.keys(map).map(function (k) {
    return '<label class="fc"><input type="checkbox" data-f="' + key + '" value="' + esc(k) + '"' + (state[key].indexOf(k) > -1 ? ' checked' : '') + '><span>' + esc(map[k]) + '</span><em>' + countFn(k) + '</em></label>';
  }).join('');
}
function section(id, title, body, reset) {
  return '<div class="fs' + (shut[id] ? ' shut' : '') + '" data-sec="' + id + '"><button type="button" class="fs-h">' + title + '<i></i></button><div class="fs-b">' + body +
    (reset ? '<div class="fs-r"><button type="button" data-reset="' + id + '">Reset</button></div>' : '') + '</div></div>';
}
function drawFilters() {
  var html = '<button type="button" class="fb-clear" id="clearAll">Clear all filters</button>';
  html += section('stock', 'Availability',
    checks('stock', { in: 'In stock', out: 'Out of stock' }, function (k) { return count(function (p) { return k === 'in' ? inStock(p) : !inStock(p); }); }), true);
  html += section('price', 'Price',
    '<div class="fp"><label>From<input type="number" id="pmin" min="0" max="' + MAXP + '" value="' + state.min + '" aria-label="Minimum price"></label><span>&mdash;</span><label>To<input type="number" id="pmax" min="0" max="' + MAXP + '" value="' + state.max + '" aria-label="Maximum price"></label></div>', false);
  html += section('cat', 'Category', checks('cat', CATS, function (k) { return count(function (p) { return p.cats.indexOf(k) > -1; }); }), true);
  if (Object.keys(COLS).length) html += section('col', 'Collection', checks('col', COLS, function (k) { return count(function (p) { return p.cols.indexOf(k) > -1; }); }), true);
  if (hasBrands) {
    var bm = {}; Object.keys(BRANDS).forEach(function (b) { bm[b] = b; });
    html += section('brand', 'Brand', checks('brand', bm, function (k) { return BRANDS[k]; }), true);
  }
  box.innerHTML = html;
}

function drawGrid() {
  var items = PRODUCTS.filter(function (p) {
    if (state.cat.length && !state.cat.some(function (c) { return p.cats.indexOf(c) > -1; })) return false;
    if (state.col.length && !state.col.some(function (c) { return p.cols.indexOf(c) > -1; })) return false;
    if (state.brand.length && state.brand.indexOf(p.brand) < 0) return false;
    if (state.stock.length && !state.stock.some(function (s) { return s === 'in' ? inStock(p) : !inStock(p); })) return false;
    return p.price >= state.min && p.price <= state.max;
  });
  var s = state.sort;
  items.sort(function (a, b) {
    if (s === 'low') return a.price - b.price;
    if (s === 'high') return b.price - a.price;
    if (s === 'az') return a.name.localeCompare(b.name);
    if (s === 'new') return (b.isNew - a.isNew) || (b.id - a.id);
    if (s === 'featured') return (b.featured - a.featured) || (b.id - a.id);
    return (b.bestSeller - a.bestSeller) || (b.featured - a.featured) || (b.id - a.id);     // best selling
  });
  grid.innerHTML = items.slice(0, state.page * PER).map(Shop.card).join('');
  drawMore(items.length - state.page * PER);
  document.getElementById('count').textContent = items.length + (items.length === 1 ? ' product' : ' products');
  document.getElementById('none').hidden = items.length > 0;
  Shop.paintAll();

  var one = state.cat.length + state.col.length === 1;
  var title = one ? (state.cat.length ? CATS[state.cat[0]] : COLS[state.col[0]]) : 'All Products';
  document.getElementById('pageTitle').textContent = title;
  document.getElementById('crumb').textContent = one ? title : 'Products';
  document.title = title + ' - ' + SITE_NAME;
}
// "Load more": shows the next PER products in the same grid (no reload, no page change)
function drawMore(left) {
  document.getElementById('pager').innerHTML = left > 0
    ? '<button type="button" class="btn light" id="more">Load more <em>(' + left + ' left)</em></button>' : '';
}
document.getElementById('pager').addEventListener('click', function (e) {
  if (!e.target.closest('#more')) return;
  state.page++;
  drawGrid();
});
function drawAll() { drawFilters(); drawGrid(); }

// checkboxes
box.addEventListener('change', function (e) {
  var c = e.target.closest('input[data-f]');
  if (!c) return;
  var list = state[c.dataset.f], i = list.indexOf(c.value);
  if (c.checked && i < 0) list.push(c.value);
  if (!c.checked && i > -1) list.splice(i, 1);
  push(); drawGrid();
});
// price
box.addEventListener('input', function (e) {
  if (e.target.id !== 'pmin' && e.target.id !== 'pmax') return;
  var lo = parseFloat(document.getElementById('pmin').value), hi = parseFloat(document.getElementById('pmax').value);
  state.min = isNaN(lo) ? 0 : lo; state.max = isNaN(hi) ? MAXP : hi;
  clearTimeout(window.__pt); window.__pt = setTimeout(function () { sync(true); }, 450);
  drawGrid();
});
// collapse / reset / clear all
box.addEventListener('click', function (e) {
  var h = e.target.closest('.fs-h'), r = e.target.closest('[data-reset]'), all = e.target.closest('#clearAll');
  if (h) { var id = h.parentNode.dataset.sec; shut[id] = !shut[id]; h.parentNode.classList.toggle('shut', !!shut[id]); }
  if (r) {
    var k = r.dataset.reset;
    state[k] = [];
    push(); drawAll();
  }
  if (all) {
    state.cat = []; state.col = []; state.stock = []; state.brand = []; state.min = 0; state.max = MAXP;
    push(); drawAll();
  }
});
// sort, layout, mobile filter button
document.getElementById('sort').onchange = function () { state.sort = this.value; push(); drawGrid(); };
document.getElementById('views').addEventListener('click', function (e) {
  var b = e.target.closest('button'); if (!b) return;
  setView(b.dataset.v);
  push();
});
document.getElementById('fbtn').onclick = function () { box.classList.toggle('open'); };

// header "Shop" menu / footer links to this page act as filters too (each link carries its filter set)
document.addEventListener('click', function (e) {
  var a = e.target.closest('a[href]');
  if (!a || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey) return;
  var u;
  try { u = new URL(a.href, location.href); } catch (err) { return; }
  if (u.origin !== location.origin || !/\/collection\/?$/.test(u.pathname)) return;
  if (u.search && !a.dataset.filter) return;            // a link to some other saved filter set: let the page load normally
  e.preventDefault();
  var f = {};
  try { f = JSON.parse(a.dataset.filter || '{}'); } catch (err) {}
  state.cat = (f.cat || []).filter(function (k) { return CATS[k] !== undefined; });
  state.col = (f.col || []).filter(function (k) { return COLS[k] !== undefined; });
  push(); drawAll();
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
window.addEventListener('popstate', function (e) { applyState(e.state || INITIAL); drawAll(); });   // back / forward

applyState(INITIAL);
history.replaceState(snapshot(), '', location.href);
drawAll();
</script>
@endpush