{{-- resources/views/livewire/user-landing-page.blade.php --}}
@php use Illuminate\Support\Str; @endphp

<div id="pl-root" class="pl-root" data-pl>
    <div class="pl-grid" data-grid>
        @forelse ($properties as $property)
            <a href="{{ route('property.landing', $property->PropertyID) }}"
               class="pl-tile"
               aria-label="Open {{ $property->PropertyName }}"
               data-tile>
                <div class="pl-logo-box">
                    <figure class="pl-logo-wrap" data-wrap>
                        <img
                            src="{{ asset('storage/assets/img/' . Str::slug($property->PropertyName) . '.png') }}"
                            alt="{{ $property->PropertyName }} logo"
                            class="pl-logo"
                            loading="lazy"
                            decoding="async"
                            onerror="this.onerror=null;this.src='{{ asset('storage/assets/img/placeholder.png') }}';"
                        >
                    </figure>
                </div>
                <div class="pl-title">{{ $property->PropertyName }}</div>
            </a>
        @empty
            <p class="pl-empty">No properties available.</p>
        @endforelse
    </div>
</div>

<style>
/* ===================== LIGHT THEME / KIOSK SAFE ===================== */
:root { color-scheme: light; }
#pl-root.pl-root{
  /* palette (near-white) */
  --bg1:#f8fafc;            /* base background */
  --bg2:#f1f5f9;            /* subtle gradient end */
  --fg:#0f172a;             /* slate-900 */
  --muted:#475569;          /* slate-600 */

  --tile-bg:#ffffff;
  --tile-border1:rgba(15,23,42,.08);
  --tile-border2:rgba(15,23,42,.12);
  --tile-shadow1:0 1px 1px rgba(15,23,42,.08);
  --tile-shadow2:0 10px 24px rgba(15,23,42,.08);

  --panel-bg1:#f6f7fb;      /* uniform logo panel */
  --panel-bg2:#eef2f7;
  --panel-border:rgba(15,23,42,.08);

  --ring:rgba(37,99,235,.50); /* focus */

  /* layout */
  --gap: clamp(14px,2.0vmin,28px);
  --pad: clamp(16px,3vmin,40px);
  --cols: 1;
  --vh: 100svh;             /* set by JS for kiosk/webviews */
  --footer-gap: 72px;       /* reserved space if footer is visible */

  color:var(--fg);
  background:
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:var(--vh);
  padding:var(--pad);
}

/* ensure body behind matches theme to avoid dark edges on kiosk */
body{ background:#f8fafc; }

/* GRID: fills viewport minus padding & optional footer gap */
#pl-root [data-grid]{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
  width:min(1600px, 96vw);
  margin-inline:auto;
  height: calc(var(--vh) - var(--pad) * 2 - var(--footer-gap));
  align-content:stretch;
}

/* Footer style (light) + kiosk hide */
#pl-root ~ footer.footer{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background: rgba(255,255,255,.85);
  border-top:1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){
  #pl-root ~ footer.footer{ background:#ffffff; }
}
/* hide footer in kiosk mode entirely */
html.kiosk #pl-root ~ footer.footer{ display:none !important; }

/* ===================== TILES ===================== */
#pl-root .pl-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:180px;
  text-decoration:none !important; color:inherit !important;
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.98)) padding-box,
    linear-gradient(180deg, var(--tile-border1), var(--tile-border2)) border-box;
  border:1px solid transparent;
  box-shadow: var(--tile-shadow1), var(--tile-shadow2);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  overflow:hidden;
}
#pl-root .pl-tile:hover{
  transform:translateY(-4px);
  box-shadow:
    0 2px 2px rgba(15,23,42,.08),
    0 16px 40px rgba(15,23,42,.12);
}
#pl-root .pl-tile:focus-visible{
  outline:3px solid var(--ring); outline-offset:3px; border-radius:22px;
}

/* Uniform logo panel (no plates). Keeps logos aligned visually */
#pl-root .pl-logo-box{
  width:100%;
  display:grid; place-items:center;
  padding: clamp(10px, 2vmin, 18px);
}
#pl-root .pl-logo-wrap{
  width: 92%;
  max-width: 620px;
  aspect-ratio: 16 / 11;          /* same panel across tiles */
  border-radius: 14px;
  display:grid; place-items:center;
  background:
    linear-gradient(180deg, var(--panel-bg1), var(--panel-bg2));
  border: 1px solid var(--panel-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* Logos max out inside the panel */
#pl-root .pl-logo{
  width: 88%;
  height: 88%;
  object-fit: contain;
  transition: transform .16s ease, filter .16s ease;
}
#pl-root .pl-tile:hover .pl-logo{ transform:scale(1.02); }

/* Simple contrast shadows only */
#pl-root .pl-logo-wrap.is-light .pl-logo{
  filter: drop-shadow(0 0 1px rgba(15,23,42,.30)) drop-shadow(0 8px 18px rgba(15,23,42,.10));
}
#pl-root .pl-logo-wrap.is-dark .pl-logo{
  filter: drop-shadow(0 0 1px rgba(255,255,255,.50)) drop-shadow(0 6px 14px rgba(15,23,42,.12));
}

/* Titles */
#pl-root .pl-title{
  margin-top: clamp(8px, 1.2vmin, 12px);
  font-weight:700;
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  line-height:1.2; text-align:center;
  color: var(--fg);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

#pl-root .pl-empty{ color:var(--muted); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #pl-root .pl-tile, #pl-root .pl-logo{ transition:none !important; }
}
</style>

<script>
/* ===================== JS: kiosk-safe viewport, smart columns, logo contrast ===================== */
(function(){
  const CARD_ASPECT = 16/10;

  // Detect kiosk (Fully Kiosk Browser has "fully" in UA) or ?kiosk=1
  const ua = (navigator.userAgent || '').toLowerCase();
  if (ua.includes('fully') || new URLSearchParams(location.search).has('kiosk')) {
    document.documentElement.classList.add('kiosk');
  }

  // Robust vh for webviews/kiosks
  function setVH(){
    const vh = window.innerHeight || document.documentElement.clientHeight || 800;
    document.querySelector('#pl-root')?.style.setProperty('--vh', vh + 'px');
  }

  // Light/dark logo classification (for subtle shadow tuning)
  function classifyLogo(img){
    const wrap = img.closest('[data-wrap]');
    if(!wrap) return;
    try{
      const W = Math.max(1, Math.min(img.naturalWidth || 256, 256));
      const H = Math.max(1, Math.round((img.naturalHeight || 128) * (W / (img.naturalWidth || 256))));
      const c = document.createElement('canvas');
      c.width = W; c.height = H;
      const ctx = c.getContext('2d', { willReadFrequently: true });
      ctx.drawImage(img, 0, 0, W, H);
      const d = ctx.getImageData(0, 0, W, H).data;

      let lum = 0, n = 0;
      const stepX = Math.max(1, Math.floor(W / 32));
      const stepY = Math.max(1, Math.floor(H / 32));
      for (let y=0; y<H; y+=stepY){
        for (let x=0; x<W; x+=stepX){
          const i = (y*W + x) * 4;
          const a = d[i+3]; if (a < 48) continue;
          const r = d[i], g = d[i+1], b = d[i+2];
          lum += 0.2126*r + 0.7152*g + 0.0722*b; n++;
        }
      }
      wrap.classList.remove('is-light','is-dark');
      wrap.classList.add((n ? lum/n : 0) >= 170 ? 'is-light' : 'is-dark');
    }catch(_){}
  }

  // Pick best columns for available area (left->right, top->down)
  function bestColumnsFor(container, count, gapPx){
    const W = container.clientWidth;
    const H = container.clientHeight;
    let bestCols = 1, bestScore = -Infinity;
    for (let cols=1; cols<=count; cols++){
      const rows = Math.ceil(count / cols);
      const tileW = (W - (cols - 1) * gapPx) / cols;
      const tileH = (H - (rows - 1) * gapPx) / rows;
      const aspect = tileW / tileH;
      const aspectPenalty = Math.abs(Math.log(aspect / CARD_ASPECT));
      const size = Math.min(tileW, tileH);
      const score = size - aspectPenalty * 80;
      if (score > bestScore){ bestScore = score; bestCols = cols; }
    }
    return bestCols;
  }
  function setGridColumns(){
    const root = document.querySelector('#pl-root');
    const grid = root?.querySelector('[data-grid]');
    if(!grid) return;
    const gap = parseFloat(getComputedStyle(root).getPropertyValue('--gap')) || 16;
    const count = grid.querySelectorAll('[data-tile]').length;
    const cols = bestColumnsFor(grid, count, gap);
    root.style.setProperty('--cols', cols);
  }

  function init(scope){
    setVH();
    setGridColumns();
    (scope || document).querySelectorAll('#pl-root .pl-logo').forEach(img=>{
      const run = () => classifyLogo(img);
      if (img.complete && img.naturalWidth) run(); else img.addEventListener('load', run, { once:true });
    });
  }

  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', ()=>init(document)); }
  else init(document);

  // Resize/orientation throttled
  let raf = null;
  function onResize(){ if (raf) return; raf = requestAnimationFrame(()=>{ raf=null; setVH(); setGridColumns(); }); }
  window.addEventListener('resize', onResize);
  window.addEventListener('orientationchange', ()=>{ setTimeout(()=>{ setVH(); setGridColumns(); }, 100); });

  // Livewire patch re-run
  document.addEventListener('livewire:load', () => {
    if (window.Livewire?.hook) {
      Livewire.hook('message.processed', (_message, component) => init(component?.el || document));
    }
  });
})();
</script>