@php
    $colors = $product->variants->pluck('color')->filter()->unique()->values();
    $sizes = $product->variants->pluck('size')->filter()->unique()->values();
    $inStock = $product->variants->contains(fn ($v) => $v->stock_status !== 'out_of_stock');
    $defaultVariant = $product->variants->first(fn ($v) => $v->stock_status !== 'out_of_stock') ?? $product->variants->first();
    // The default-selected swatches must match $defaultVariant (preferring
    // an in-stock variant), not just "first in the list" — otherwise the
    // page can load with Add to Cart already disabled because the first
    // color/size combo happens to be out of stock while others aren't.
    $defaultColor = $defaultVariant?->color ?? $colors->first();
    $defaultSize = $defaultVariant?->size ?? $sizes->first();
    $variantOptions = $product->variants->map(fn ($v) => [
        'id' => $v->id,
        'color' => $v->color,
        'size' => $v->size,
        'in_stock' => $v->stock_status !== 'out_of_stock',
    ])->values();
@endphp
<x-store-layout :title="$product->title">

<main class="container py-4">

  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb small mb-0">
      <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted-slate text-decoration-none">Home</a></li>
      @if ($product->category)
        <li class="breadcrumb-item"><a href="{{ route('products.index', ['cat' => $product->category->slug]) }}" class="text-muted-slate text-decoration-none">{{ $product->category->name }}</a></li>
      @endif
      <li class="breadcrumb-item active">{{ $product->title }}</li>
    </ol>
  </nav>

  <div class="row g-5">
    <div class="col-lg-6">
      <div class="pdp-gallery-main mb-3">
        @if (! empty($product->images[0]))
          <img src="{{ $product->images[0] }}" data-gallery-main style="max-width:90%;max-height:90%;object-fit:contain">
        @else
          <div class="ph-icon-wrap" style="width:100%;height:100%" data-gallery-main><i class="bi bi-box-seam"></i></div>
        @endif
      </div>
      @if (count($product->images ?? []) > 1)
        <div class="d-flex gap-2">
          @foreach ($product->images as $image)
            <img src="{{ $image }}" class="pdp-gallery-thumb @if ($loop->first) active @endif" data-gallery-thumb>
          @endforeach
        </div>
      @endif
      @if ($product->video_path)
        <video src="{{ asset('storage/'.$product->video_path) }}" controls style="width:100%;border-radius:10px" class="mt-3"></video>
      @endif
    </div>

    <div class="col-lg-6">
      <h1 class="h3 mb-2">{{ $product->title }}</h1>
      <div class="d-flex align-items-center gap-2 mb-3">
        @if ($inStock)
          <span class="text-success small"><i class="bi bi-check-circle-fill"></i> In Stock</span>
        @else
          <span class="text-danger small"><i class="bi bi-x-circle-fill"></i> Out of Stock</span>
        @endif
      </div>

      <div class="mb-4">
        <span class="product-card__price-current fs-2">${{ number_format($product->price, 2) }}</span>
        @if ($product->compare_at_price && $product->compare_at_price > $product->price)
          @php $percentOff = round((1 - $product->price / $product->compare_at_price) * 100); @endphp
          <span class="product-card__price-original fs-5 ms-2">${{ number_format($product->compare_at_price, 2) }}</span>
          <span class="badge-sale ms-2">{{ $percentOff }}% OFF</span>
        @endif
      </div>

      <form action="{{ route('cart.store') }}" method="POST" id="addToCartForm">
        @csrf
        <input type="hidden" name="product_variant_id" id="selectedVariantId" value="{{ $defaultVariant?->id }}">

        @if ($colors->isNotEmpty())
          <div class="mb-4">
            <div class="small fw-semibold mb-2">Color</div>
            <div class="d-flex flex-wrap gap-2" data-swatch-group="color">
              @foreach ($colors as $color)
                @php $cssColor = \App\Services\Html\ColorSwatch::resolve($color); @endphp
                @if ($cssColor)
                  <span class="swatch-option swatch-color @if ($color === $defaultColor) active @endif" data-color="{{ $color }}" title="{{ $color }}"><span class="swatch-color-fill" style="background:{{ $cssColor }}"></span></span>
                @else
                  {{-- Not a real CSS color (e.g. a finish like "Glossy", or a compound name like "Rose Gold") — a colored dot would render invisible, so show the name as a text pill instead. --}}
                  <span class="swatch-option swatch-color swatch-color--label @if ($color === $defaultColor) active @endif" data-color="{{ $color }}" title="{{ $color }}">{{ $color }}</span>
                @endif
              @endforeach
            </div>
          </div>
        @endif

        @if ($sizes->isNotEmpty())
          <div class="mb-4">
            <label for="variationSelect" class="small fw-semibold mb-2 d-block">Variation</label>
            <select id="variationSelect" class="form-select" data-swatch-group="size">
              @foreach ($sizes as $size)
                <option value="{{ $size }}" @selected($size === $defaultSize)>{{ $size }}</option>
              @endforeach
            </select>
          </div>
        @endif

        <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
          <div class="qty-stepper" data-qty-wrap>
            <button type="button" data-action="qty-decrease">&minus;</button>
            <input type="text" value="1" name="quantity" data-qty-input>
            <button type="button" data-action="qty-increase">+</button>
          </div>
          <button type="submit" class="btn btn-accent flex-grow-1" @disabled(! $inStock || ! $defaultVariant)>
            <i class="bi bi-cart-plus me-1"></i> Add to Cart
          </button>
          <button type="button" class="product-card__wishlist position-static" style="width:44px;height:44px"><i class="bi bi-heart"></i></button>
        </div>
      </form>

      <div class="card-surface p-3 mb-4">
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-truck text-accent"></i>
          <div class="small">Fast &amp; reliable delivery across USA</div>
        </div>
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-shield-check text-accent"></i>
          <div class="small">Secure checkout via Stripe</div>
        </div>
        <div class="d-flex align-items-start gap-2">
          <i class="bi bi-arrow-counterclockwise text-accent"></i>
          <div class="small">Free cancellation within 2 hours of order placement</div>
        </div>
      </div>
    </div>
  </div>

  @if ($product->description)
    <div class="mt-5">
      <h2 class="h5 mb-3">Description</h2>
      <div class="vendor-description text-muted-slate">{!! $product->description !!}</div>
    </div>
  @endif

  @if ($related->isNotEmpty())
    <section class="mt-5">
      <h2 class="h4 mb-3">You May Also Like</h2>
      <div class="row g-4">
        @foreach ($related as $relatedProduct)
          <div class="col-6 col-md-3">
            <x-product-card :product="$relatedProduct" />
          </div>
        @endforeach
      </div>
    </section>
  @endif
</main>

<script>
  (function () {
    var variants = @json($variantOptions);
    var hiddenInput = document.getElementById('selectedVariantId');
    var submitBtn = document.querySelector('#addToCartForm button[type="submit"]');
    if (!hiddenInput) return;

    function currentSelection() {
      var colorEl = document.querySelector('[data-swatch-group="color"] .swatch-option.active');
      var sizeSelect = document.querySelector('select[data-swatch-group="size"]');
      return {
        color: colorEl ? colorEl.dataset.color : null,
        size: sizeSelect ? sizeSelect.value : null,
      };
    }

    function updateSelectedVariant() {
      var selection = currentSelection();
      var match = variants.find(function (v) {
        return (!selection.color || v.color === selection.color) && (!selection.size || v.size === selection.size);
      });
      if (match) {
        hiddenInput.value = match.id;
        if (submitBtn) submitBtn.disabled = !match.in_stock;
      } else if (submitBtn) {
        submitBtn.disabled = true;
      }
    }

    document.querySelectorAll('[data-swatch-group] .swatch-option').forEach(function (el) {
      el.addEventListener('click', updateSelectedVariant);
    });

    var sizeSelect = document.querySelector('select[data-swatch-group="size"]');
    if (sizeSelect) sizeSelect.addEventListener('change', updateSelectedVariant);

    updateSelectedVariant();
  })();
</script>

</x-store-layout>