@extends('layouts.app')

@section('title', $product['name'])

@section('content')
<div class="bz-bar">
  <div class="bz-wrap">
    <h1>{{ \Illuminate\Support\Str::limit($product['name'], 60) }}</h1>
    <nav><a href="{{ route('home') }}">Home</a><i></i><a href="{{ route('collection') }}">Collection</a><i></i><span>{{ \Illuminate\Support\Str::limit($product['name'], 40) }}</span></nav>
  </div>
</div>

<main class="container section pd2-page">
  <div class="pd2">
    {{-- gallery: vertical thumbnails + main image --}}
    <div class="pd2-gallery">
      @if (count($product['images']) > 1)
      <div class="pd2-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"></button>
        @endforeach
      </div>
      @endif
      <div class="ph pd2-main p{{ $product['id'] % 4 + 1 }}" id="main">
        @if ($product['image'])<img id="mainImg" src="{{ $product['image'] }}" alt="{{ $product['name'] }}">@endif
        <span class="badge" id="saleBadge" hidden>Sale</span>
      </div>
    </div>

    {{-- details --}}
    <div class="pd2-info">
      @if (count($product['cats']))<small class="pd2-cat">{{ $categoryNames[$product['cats'][0]] ?? $product['cats'][0] }}</small>@endif
      <h1>{{ $product['name'] }}</h1>
      <div class="pd2-price" id="price"></div>
      @if ($product['desc'])<p class="pd2-short">{{ \Illuminate\Support\Str::limit($product['desc'], 200) }}</p>@endif

      <ul class="pd2-meta">
        <li>SKU: <b id="sku">{{ $product['sku'] }}</b></li>
        @if (count($product['cats']))
        <li>Category:
          @foreach ($product['cats'] as $slug)
            <a href="{{ collection_filter_url(['cat' => [$slug]]) }}">{{ $categoryNames[$slug] ?? $slug }}</a>@if (!$loop->last), @endif
          @endforeach
        </li>
        @endif
        <li>Availability: <b id="stock"></b></li>
      </ul>

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

      <div class="pd2-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>
        <button class="btn" id="wish"></button>
      </div>

      <ul class="pd2-trust">
        <li><svg viewBox="0 0 24 24"><path d="M2 6h12v10H2z"/><path d="M14 9h4l3 3v4h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>Free shipping on selected orders</li>
        <li><svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 10-2.3 5.7"/><path d="M20 5v5h-5"/></svg>{{ $company->return_days ?: 30 }} days easy returns</li>
        <li><svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="1"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>Secure payments</li>
        <li><svg viewBox="0 0 24 24"><rect x="4" y="9" width="16" height="11"/><path d="M12 9v11M4 13h16M12 9c-2-4-6-3-5 0M12 9c2-4 6-3 5 0"/></svg>Gift-ready packaging</li>
      </ul>

      <div class="pd2-ship">
        <p><b>Orders ship within 5 to 10 business days.</b></p>
        <p>Free shipping on selected orders &middot; {{ $company->return_days ?: 30 }} days return</p>
      </div>
    </div>
  </div>

  {{-- tabs --}}
  <div class="tabs" id="tabsBar">
    <button class="on" data-t="0">Description</button>
    <button data-t="1">Delivery policy</button>
    <button data-t="2">Returns &amp; Exchanges</button>
  </div>
  <div class="tab-body" id="tab"></div>

  @if (count($related))
  <div class="sec-head pd2-rel"><div><small>More to explore</small><h2 class="title">You may also like</h2></div><a href="{{ route('collection') }}" class="sec-link">View all <svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
  <div class="grid" id="related"></div>
  @endif
</main>
<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));
var TAB_DESC = @json($product['longDesc'] ?: $product['desc']);
var RETURN_DAYS = @json($company->return_days ?: 30);
</script>
<script src="{{ asset_v('js/data.js') }}"></script>
<script src="{{ asset_v('js/product.js') }}"></script>
@endpush