@extends('layouts.app')

@section('title', $product['name'])
@section('description', \Illuminate\Support\Str::limit($product['desc'] ?: $product['name'], 155))

@section('content')
@php
    $plus = '<svg viewBox="0 0 24 24" aria-hidden="true"><path class="h" d="M5 12h14"/><path class="v" d="M12 5v14"/></svg>';
    $stars = fn ($n) => str_repeat('&#9733;', (int) round($n)) . str_repeat('&#9734;', 5 - (int) round($n));
    $firstCat = $product['cats'][0] ?? null;
    $shareUrl = urlencode(url()->current());
    $shareText = urlencode($product['name']);
    $desc = trim((string) ($product['longDesc'] ?: $product['desc']));
@endphp

<main class="container pdx">
  <div class="pdx-grid">
    {{-- gallery: big image + a row of thumbnails --}}
    <div class="pdx-gallery">
      <div class="pdx-main" id="main">
        @if ($product['image'])<img id="mainImg" src="{{ $product['image'] }}" alt="{{ $product['name'] }}" onerror="this.remove()">@endif
        <span class="tag sale pdx-badge" id="saleBadge" hidden>Sale</span>
      </div>
      @if (count($product['images']) > 1)
      <div class="pdx-thumbs" id="thumbs">
        @foreach ($product['images'] as $i => $img)
          <button type="button" class="ph {{ $i === 0 ? 'on' : '' }}" data-src="{{ $img }}" aria-label="Image {{ $i + 1 }}"><img src="{{ $img }}" alt="" loading="lazy" onerror="this.remove()"></button>
        @endforeach
      </div>
      @endif
    </div>

    {{-- details --}}
    <div class="pdx-info">
      <nav class="pdx-crumb" aria-label="Breadcrumb">
        <a href="{{ route('home') }}">Home</a><i>/</i>
        @if ($firstCat)<a href="{{ collection_filter_url(['cat' => [$firstCat]]) }}">{{ $categoryNames[$firstCat] ?? $firstCat }}</a><i>/</i>@endif
        <span>{{ \Illuminate\Support\Str::limit($product['name'], 40) }}</span>
      </nav>
      <p class="pdx-sku">SKU: <b id="sku">{{ $product['sku'] }}</b></p>
      @if ($reviews['count'])
        <a class="pdx-rate" href="#reviews" aria-label="{{ $reviews['avg'] }} out of 5, {{ $reviews['count'] }} {{ \Illuminate\Support\Str::plural('review', $reviews['count']) }}">
          <span class="stars">{!! $stars($reviews['avg']) !!}</span><em>({{ $reviews['count'] }})</em></a>
      @endif
      <h1>{{ $product['name'] }}</h1>
      <div class="pdx-price" id="price"></div>

      <div class="pdx-stock" id="stockBox">
        <p id="stock"></p>
        <div class="pdx-bar" aria-hidden="true"><i id="stockBar"></i></div>
      </div>

      <div id="options"></div>
      @if (collect($product['options'])->contains(fn ($o) => stripos($o['name'], 'size') !== false))
        <a class="pdx-sizelink" href="{{ route('size-guide') }}">Size Chart</a>
      @endif

      <p class="pdx-label">Quantity</p>
      <div class="pdx-buy">
        <div class="qty"><button type="button" id="minus" aria-label="Decrease">&minus;</button><span id="q">1</span><button type="button" id="plus" aria-label="Increase">+</button></div>
        <button class="btn" id="add">Add to cart</button>
      </div>
      <button class="btn pdx-now" id="buyNow" type="button">Buy it now</button>
      <button type="button" class="pdx-wish" id="wish"></button>

      <div class="fq-acc pdx-acc" data-acc>
        <div class="fq-item open">
          <h3><button type="button" aria-expanded="true" aria-controls="pa0" id="ph0"><span>Product description</span>{!! $plus !!}</button></h3>
          <div class="fq-a" id="pa0" role="region" aria-labelledby="ph0"><div>
            @if ($desc !== '')
              @foreach (preg_split('/\n{2,}/', $desc) as $para)<p>{{ trim($para) }}</p>@endforeach
            @else
              <p>Details for this product will be added soon.</p>
            @endif
          </div></div>
        </div>
        <div class="fq-item">
          <h3><button type="button" aria-expanded="false" aria-controls="pa1" id="ph1"><span>Delivery policy</span>{!! $plus !!}</button></h3>
          <div class="fq-a" id="pa1" role="region" aria-labelledby="ph1"><div><p>Orders ship within 5 to 10 business days. Standard delivery is free on selected orders; you will receive a tracking link by email as soon as your parcel leaves us.</p></div></div>
        </div>
        <div class="fq-item">
          <h3><button type="button" aria-expanded="false" aria-controls="pa2" id="ph2"><span>Returns &amp; exchanges</span>{!! $plus !!}</button></h3>
          <div class="fq-a" id="pa2" role="region" aria-labelledby="ph2"><div><p>Not completely happy? Return unworn items in their original packaging within {{ $company->return_days ?: 30 }} days of delivery for an exchange or refund.</p></div></div>
        </div>
      </div>

      <div class="pdx-share">
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ $shareUrl }}" target="_blank" rel="noopener"><i class="fa-brands fa-facebook-f"></i> Facebook</a>
        <a href="https://twitter.com/intent/tweet?url={{ $shareUrl }}&text={{ $shareText }}" target="_blank" rel="noopener"><i class="fa-brands fa-x-twitter"></i> Twitter</a>
        <a href="https://wa.me/?text={{ $shareText }}%20{{ $shareUrl }}" target="_blank" rel="noopener"><i class="fa-brands fa-whatsapp"></i> WhatsApp</a>
        <button type="button" id="copyLink"><i class="fa-regular fa-copy"></i> Copy link</button>
      </div>
    </div>
  </div>
</main>

{{-- customer reviews --}}
@if ($reviews['count'])
<section class="container pdx-sec" id="reviews">
  <h2 class="pdx-h">Customer Reviews</h2>
  <div class="pdx-rev">
    <aside class="pdx-sum">
      <b class="pdx-avg">{{ number_format($reviews['avg'], 1) }}</b>
      <span class="stars">{!! $stars($reviews['avg']) !!}</span>
      <p>{{ $reviews['count'] }} {{ \Illuminate\Support\Str::plural('review', $reviews['count']) }}</p>
      <ul>
        @foreach ($reviews['dist'] as $s => $n)
          @php $pct = $reviews['count'] ? round($n / $reviews['count'] * 100) : 0; @endphp
          <li><span>{{ $s }}&#9733;</span><i><b style="width:{{ $pct }}%"></b></i><em>{{ $pct }}%</em></li>
        @endforeach
      </ul>
    </aside>
    <div class="pdx-list">
      @forelse ($reviews['items'] as $r)
        <article class="pdx-review">
          <header><span class="fq-av" aria-hidden="true">{{ mb_strtoupper(mb_substr($r['author'], 0, 1)) }}</span><b>{{ $r['author'] }}</b><time>Review on {{ $r['date'] }}</time></header>
          <span class="stars" aria-label="{{ $r['rating'] }} out of 5">{!! $stars($r['rating']) !!}</span>
          <p>{{ $r['text'] }}</p>
        </article>
      @empty
        <p class="pdx-norev">{{ $reviews['count'] }} {{ \Illuminate\Support\Str::plural('customer', $reviews['count']) }} rated this product. Written reviews will appear here.</p>
      @endforelse
    </div>
  </div>
</section>
@endif

{{-- why choose us --}}
<section class="container pdx-sec pdx-why">
  <div class="pdx-why-img">@if ($photoWhy)<img src="{{ $photoWhy }}" alt="" loading="lazy" onerror="this.remove()">@endif</div>
  <div class="pdx-why-txt">
    <h2 class="pdx-h">Why Choose Us?</h2>
    <p>We believe you get out what you put in &mdash; that is why everything at {{ $company->name }} is made to the highest standards of quality.</p>
    <h3>Premium quality</h3>
    <p>Every piece is checked by hand before it is packed, so what reaches you looks and feels exactly as it should.</p>
    <h3>Trust &amp; transparency</h3>
    <p>Clear details, honest prices and {{ $company->return_days ?: 30 }} days easy returns, so you can order with confidence.</p>
  </div>
</section>

{{-- related products --}}
@if (count($related))
<section class="container pdx-sec">
  <h2 class="pdx-h center">You May Also Like</h2>
  <div class="a-grid" id="related"></div>
</section>
@endif

{{-- questions --}}
@include('partials.faq-block')

<div class="pd2-sticky" id="sticky" aria-hidden="true">
  <div><b>{{ \Illuminate\Support\Str::limit($product['name'], 34) }}</b><span id="stickyPrice"></span></div>
  <button type="button" class="btn" id="stickyAdd">Add to cart</button>
</div>
@endsection

@push('scripts')
<script>
var PRODUCT = @json($product);
var PRODUCTS = @json(array_merge([$product], $related));
</script>
<script src="{{ asset_v('js/data.js') }}"></script>
<script src="{{ asset_v('js/product.js') }}"></script>
@endpush