@php
  $locale = app()->getLocale();
  $name = $collection->getTranslation('name', $locale);
  $products = $collection->activeProducts;

  $gallery = collect([
    $collection->hero_image,
    $collection->cover_image,
  ])
    ->merge($products->pluck('cover_image'))
    ->merge($products->flatMap(fn ($product) => $product->images->pluck('path')))
    ->merge($collection->galleryImages->pluck('path'))
    ->filter()
    ->unique()
    ->values();
@endphp
@extends('layouts.app')

@section('title', 'Çisa Salotti — '.$name)

@section('content')
<main class="collection-detail" id="collectionDetail">
  <section class="collection-detail__hero">
    <img class="collection-detail__hero-image" id="pageHeroImage" src="{{ media_url($collection->hero_image ?: $collection->cover_image) }}" alt="{{ $name }}" loading="eager" decoding="async">
    <div class="collection-detail__hero-overlay"></div>
    <div class="container collection-detail__hero-content reveal">
      <a href="{{ menu_route('collections.index', $locale) }}" class="collection-detail__back">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M13 8H3M7 4l-4 4 4 4" stroke="currentColor" stroke-width="1.2"/></svg>
        {{ __('site.collection.back') }}
      </a>
      <p class="section-label collection-detail__category">{{ $collection->category?->getTranslation('name', $locale) }}</p>
      <h1 class="collection-detail__title">{{ $name }}</h1>
    </div>
  </section>

  <section class="collection-detail__overview catalog-section">
    <div class="catalog-section__rule container" aria-hidden="true"></div>
    <div class="container">
      <header class="catalog-section__head reveal">
        <span class="catalog-section__num">01</span>
        <p class="catalog-section__label section-label">{{ __('site.collection.overview') }}</p>
      </header>
      <div class="collection-detail__overview-grid reveal">
        <div class="collection-detail__overview-media catalog-frame">
          <button type="button" class="lightbox-trigger" data-lightbox-index="0" aria-label="{{ __('site.lightbox.open') }}">
            <img src="{{ media_url($collection->cover_image) }}" alt="{{ $name }}" loading="lazy" decoding="async">
            <span class="lightbox-trigger__icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" stroke="currentColor" stroke-width="1.5"/></svg>
            </span>
          </button>
        </div>
        <div class="collection-detail__overview-content">
          <p class="collection-detail__desc">{{ $collection->getTranslation('description', $locale) }}</p>
          <p class="collection-detail__lead">{{ __('site.collection.lead') }}</p>
          <ul class="collection-detail__specs">
            @foreach([
              ['site.collection.spec1.title', 'site.collection.spec1.text'],
              ['site.collection.spec2.title', 'site.collection.spec2.text'],
              ['site.collection.spec3.title', 'site.collection.spec3.text'],
            ] as $spec)
              <li class="collection-detail__spec">
                <span class="collection-detail__spec-title">{{ __($spec[0]) }}</span>
                <span class="collection-detail__spec-text">{{ __($spec[1]) }}</span>
              </li>
            @endforeach
          </ul>
          <button type="button" class="btn-primary collection-detail__cta" id="quoteOpenBtn">{{ __('site.collection.cta') }}</button>
        </div>
      </div>
    </div>
  </section>

  @if($products->isNotEmpty())
    <section class="collection-detail__products catalog-section catalog-section--dark">
      <div class="catalog-section__rule container" aria-hidden="true"></div>
      <div class="container">
        <header class="catalog-section__head reveal">
          <span class="catalog-section__num">02</span>
          <p class="catalog-section__label section-label">{{ __('site.collection.products') }}</p>
        </header>
        <div class="collection-detail__products-list">
          @foreach($products as $index => $product)
            @php
              $productName = $product->getTranslation('name', $locale);
              $productType = $product->getTranslation('type', $locale);
              $productDesc = $product->getTranslation('description', $locale);
              $productImage = $product->cover_image;
              $productThumbs = $product->images;
              $productImageIndex = $productImage ? ($gallery->search($productImage) !== false ? $gallery->search($productImage) : 0) : 0;
              $dimensions = $product->formattedDimensions($locale);
            @endphp
            <article class="collection-product reveal">
              <div class="collection-product__media catalog-frame">
                @if($productImage)
                  <button type="button" class="lightbox-trigger" data-lightbox-index="{{ $productImageIndex }}" aria-label="{{ __('site.lightbox.open') }}">
                    <img src="{{ media_url($productImage) }}" alt="{{ $productName }}" loading="lazy" decoding="async">
                    <span class="lightbox-trigger__icon" aria-hidden="true">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" stroke="currentColor" stroke-width="1.5"/></svg>
                    </span>
                  </button>
                @endif
              </div>
              <div class="collection-product__content">
                <span class="collection-product__num">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                @if($productType)
                  <p class="collection-product__type">{{ $productType }}</p>
                @endif
                <h2 class="collection-product__name">{{ $productName }}</h2>
                @if($productDesc)
                  <p class="collection-product__desc">{{ $productDesc }}</p>
                @endif
                @if($dimensions)
                  <p class="collection-product__dimensions">{{ $dimensions }}</p>
                @endif
                @if($productThumbs->isNotEmpty())
                  <div class="collection-product__thumbs">
                    @foreach($productThumbs->take(4) as $image)
                      @php $thumbIndex = $gallery->search($image->path) !== false ? $gallery->search($image->path) : 0; @endphp
                      <button type="button" class="lightbox-trigger" data-lightbox-index="{{ $thumbIndex }}" aria-label="{{ __('site.lightbox.open') }}">
                        <img src="{{ media_url($image->path) }}" alt="{{ $productName }}" loading="lazy" decoding="async">
                        <span class="lightbox-trigger__icon" aria-hidden="true">
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" stroke="currentColor" stroke-width="1.5"/></svg>
                        </span>
                      </button>
                    @endforeach
                  </div>
                @endif
              </div>
            </article>
          @endforeach
        </div>
      </div>
    </section>
  @endif

  <section class="collection-detail__gallery catalog-section" aria-label="{{ __('site.collection.gallery') }}">
    <div class="catalog-section__rule container" aria-hidden="true"></div>
    <div class="container">
      <header class="catalog-section__head reveal">
        <span class="catalog-section__num">{{ $products->isNotEmpty() ? '03' : '02' }}</span>
        <p class="catalog-section__label section-label">{{ __('site.collection.gallery') }}</p>
      </header>
      <div class="collection-detail__visuals">
        @foreach($collection->galleryImages->take(8) as $index => $image)
          @php
            $wide = $index === 0 || $index === 5 ? ' collection-visual--wide' : '';
            $galleryIndex = $gallery->search($image->path) !== false ? $gallery->search($image->path) : 0;
          @endphp
          <figure class="collection-visual reveal{{ $wide }}">
            <button type="button" class="lightbox-trigger" data-lightbox-index="{{ $galleryIndex }}" aria-label="{{ __('site.lightbox.open') }}">
              <img src="{{ media_url($image->path) }}" alt="{{ $name }}" loading="lazy" decoding="async">
              <span class="lightbox-trigger__icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" stroke="currentColor" stroke-width="1.5"/></svg>
              </span>
            </button>
          </figure>
        @endforeach
      </div>
    </div>
  </section>
</main>

@include('partials.lightbox')
@include('partials.quote-modal', ['collectionName' => $name])

<script type="application/json" id="lightboxGalleryData">
  {!! json_encode($gallery->map(fn ($path) => media_url($path))->values(), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}
</script>
@endsection

@push('scripts')
  <script src="{{ asset('js/collection-detail.js') }}"></script>
@endpush