@extends('layouts.storefront')

@section('title', 'المنتجات — متجر الكتب')

@section('breadcrumb')
  <div class="breadcumb-wrapper" data-bg-src="{{ asset('assets/img/bg/image_62afe66.jpg') }}">
  </div>
@endsection

@section('content')
  @php
    $currentSort = $filters['sort'] ?? 'latest';
    $baseQuery = request()->except(['page']);
    $wowDelays = ['0.30s', '0.40s', '0.50s', '0.60s', '0.70s', '0.80s', '0.90s', '0.95s'];
  @endphp

  <section class="books-layout1 space-top space-extra-bottom">
    <div class="container">
      @if ($shopTags->isNotEmpty())
        {{-- Tags are the secondary way into a book, beside the category tree. Each chip
             keeps whatever the visitor already filtered on, and the active one drops the
             tag instead of stacking a second copy of the same filter. --}}
        <nav class="shop-tags" aria-label="تصفية حسب الوسم">
          @foreach ($shopTags as $shopTag)
            @php
              $isActive = ($filters['tag'] ?? null) === $shopTag->slug;
              $tagQuery = $isActive
                  ? array_diff_key($baseQuery, ['tag' => null])
                  : array_merge($baseQuery, ['tag' => $shopTag->slug]);
            @endphp
            <a class="shop-tag @if ($isActive) active @endif"
               href="{{ route('products.index', $tagQuery) }}"
               @if ($isActive) aria-current="true" @endif>
              {{ $shopTag->name }}
              <span class="shop-tag__count">{{ $shopTag->books_count }}</span>
            </a>
          @endforeach
        </nav>
      @endif

      <div class="vs-sort-bar">
        <div class="row gap-4 align-items-center">
          <div class="col-md-auto flex-grow-1">
            <p class="woocommerce-result-count">
              عرض <span>{{ $products->firstItem() ?? 0 }}–{{ $products->lastItem() ?? 0 }} من {{ $products->total() }}</span> كتاب
            </p>
          </div>
          <div class="col-md-auto">
            <form class="woocommerce-ordering" method="get" action="{{ route('products.index') }}">
              @foreach ($baseQuery as $key => $value)
                @if ($key !== 'sort' && filled($value))
                  <input type="hidden" name="{{ $key }}" value="{{ is_array($value) ? $value[0] : $value }}">
                @endif
              @endforeach

              <select name="sort" class="orderby" data-auto-submit aria-label="ترتيب المنتجات">
                @foreach ($sortOptions as $sortValue => $sortLabel)
                  <option value="{{ $sortValue }}" @selected($currentSort === $sortValue)>{{ $sortLabel }}</option>
                @endforeach
              </select>
            </form>
          </div>
        </div>
      </div>

      @if ($products->isEmpty())
        <div class="widget">
          <h3 class="widget_title title-shep">لا توجد نتائج</h3>
          <p>لم نعثر على كتب مطابقة لفلاترك. جرّب توسيع نطاق البحث أو مسح بعض الفلاتر.</p>
          <a class="vs-btn mt-3" href="{{ route('products.index') }}">مسح الفلاتر</a>
        </div>
      @else
        <div class="row g-4">
          @foreach ($products as $book)
            @php
              $displayedFormat = $book->displayedFormat();
              $prices = $book->formats
                  ->map(fn ($format) => $format->discountedSellingPrice())
                  ->filter(fn ($price) => $price > 0)
                  ->values();

              $lowestPrice = $displayedFormat?->discountedSellingPrice();
              $highestPrice = $prices->max();
              $maxSellingPrice = (float) $book->formats->max('selling_price');
              $hasDiscount = $lowestPrice !== null && $maxSellingPrice > 0 && $lowestPrice < $maxSellingPrice;
              $discountPercent = $hasDiscount ? (int) round((1 - $lowestPrice / $maxSellingPrice) * 100) : 0;
              $hasFormats = $book->formats->isNotEmpty();
              $inStock = $book->formats->contains(fn ($format) => $format->isAvailable());
              $authorNames = $book->authors->pluck('name')->take(2)->implode('، ');
            @endphp

            <div class="col-xl-3 col-md-4 col-sm-6">
              <div class="product-style1 wow animate__fadeInUp" data-wow-delay="{{ $wowDelays[$loop->index % count($wowDelays)] }}">
                <div class="product-img">
                  <img src="{{ $book->cover_image ? asset('storage/'.$book->cover_image) : asset('assets/img/product/product-img-5-1.jpg') }}"
                       alt="غلاف {{ $book->title }}" loading="lazy">
                  <div class="product-btns">
                    <a href="#" class="icon-btn wishlist" aria-label="أضف إلى المفضلة">
                      <i class="far fa-heart"></i>
                    </a>
                    <a href="#" class="icon-btn cart" aria-label="أضف إلى السلة">
                      <i class="fa-solid fa-basket-shopping"></i>
                    </a>
                  </div>
                  <ul class="post-box">
                    @if (! $hasFormats)
                      <li>غير متاح</li>
                    @elseif (! $inStock)
                      <li>نفدت الكمية</li>
                    @endif
                    @if ($hasDiscount)
                      <li>خصم</li>
                      <li>-{{ $discountPercent }}%</li>
                    @endif
                  </ul>
                </div>
                <div class="product-content">
                  <div class="product-rating">
                    <span class="star"><i class="fas fa-star"></i> ({{ number_format((float) $book->average_rating, 1) }})</span>
                    <ul class="price-list">
                      @if ($hasDiscount)
                        <li><del>{{ number_format($maxSellingPrice, 2) }}</del></li>
                      @endif
                      <li>
                        @if ($lowestPrice === null)
                          —
                        @elseif ($lowestPrice < $highestPrice)
                          {{ $lowestPrice == $highestPrice ? '' : 'يبدأ من ' }}{{ number_format($lowestPrice, 2) }} ج.م
                        @else
                          {{ number_format($lowestPrice, 2) }} ج.م
                        @endif
                      </li>
                    </ul>
                  </div>
                  @if ($authorNames)
                    <span class="product-author"><strong>By:</strong> {{ $authorNames }}</span>
                  @endif
                  <h2 class="product-title"><a href="{{ route('products.show', $book) }}">{{ $book->title }}</a></h2>
                </div>
              </div>
            </div>
          @endforeach
        </div>

        <div class="row justify-content-center wow animate__fadeInUp" data-wow-delay="0.95s">
          <div class="col-auto">
            {{ $products->links('vendor.pagination.storefront') }}
          </div>
        </div>
      @endif
    </div>
  </section>
@endsection

@push('scripts')
  <script>
    document.querySelectorAll('[data-auto-submit]').forEach(function (element) {
      element.addEventListener('change', function () {
        var form = element.closest('form');
        if (form) {
          form.submit();
        }
      });
    });
  </script>
@endpush