@extends('layouts.storefront')

@section('title', $book->title.' — متجر الكتب')


@section('content')
  @php
    $rating = (float) $book->average_rating;

    $defaultFormat = $book->displayedFormat();

    $authorNames = $book->authors->pluck('name')->implode('، ');
    $translatorNames = $book->translators->pluck('name')->implode('، ');
    $plainDescription = $book->plainDescription();

    $previewFormats = $book->formats
        ->filter(fn (\App\Models\BookFormat $format): bool => $format->format_type->isDigital() && filled($format->sample_file))
        ->keyBy(fn (\App\Models\BookFormat $format): string => (string) $format->getKey());

    $activePreviewId = $defaultFormat && $previewFormats->has((string) $defaultFormat->getKey())
        ? (string) $defaultFormat->getKey()
        : null;

    $defaultFormatValues = [
        'pages' => $defaultFormat?->pages,
        'narrator' => $defaultFormat?->narrator?->name,
        'duration' => $defaultFormat?->humanDuration(),
        'fileFormat' => $defaultFormat?->file_format?->label(),
        'fileSize' => $defaultFormat?->humanFileSize(),
    ];

    $bookFormatTypes = $book->formats->pluck('format_type')->map->value;

    $formatSpecs = collect([
        ['key' => 'pages', 'label' => 'عدد الصفحات', 'formats' => 'physical'],
        ['key' => 'narrator', 'label' => 'الراوي', 'formats' => 'audiobook'],
        ['key' => 'duration', 'label' => 'المدة', 'formats' => 'audiobook'],
        ['key' => 'fileFormat', 'label' => 'صيغة الملف', 'formats' => 'ebook,audiobook'],
        ['key' => 'fileSize', 'label' => 'حجم الملف', 'formats' => 'ebook,audiobook'],
    ])->filter(fn (array $spec): bool => $bookFormatTypes->intersect(explode(',', $spec['formats']))->isNotEmpty())
        ->values();
  @endphp

  <div class="vs-product-wrapper space-top space-extra-bottom">
    <div class="container">
      <div class="row gx-60">
        <div class="col-lg-6">
          <div class="product-slide-row wow animate__fadeInUp" data-wow-delay="0.30s">
            <div class="product-big-img">
              <div class="img">
                <img src="{{ $book->cover_image ? asset('storage/'.$book->cover_image) : asset('assets/img/shop/product-d-1.jpg') }}"
                     alt="غلاف {{ $book->title }}">
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="product-about wow animate__fadeInUp" data-wow-delay="0.30s">
            <div class="product-rating">
              <span class="star"><i class="fas fa-star"></i> ({{ number_format($rating, 1) }})</span>
              <span class="product-rating__total">
                {{ $book->reviews_count }} {{ $book->reviews_count === 1 ? 'تقييم' : 'تقييمات' }}
              </span>
            </div>

            <h2 class="product-title">{{ $book->title }}</h2>

            @if ($authorNames)
              <span class="product-author"><strong>By:</strong> {{ $authorNames }}</span>
            @endif

            @if ($book->formats->count() > 1)
              <div class="format-switcher" role="group" aria-label="اختر نوع الكتاب">
                @foreach ($book->formats as $index => $format)
                  <button type="button"
                          class="format-btn {{ $format === $defaultFormat ? 'active' : '' }}"
                          data-format-index="{{ $index }}"
                          data-format-key="{{ $format->getKey() }}"
                          data-price="{{ number_format($format->discountedSellingPrice(), 2) }}"
                          data-original="{{ number_format((float) $format->selling_price, 2) }}"
                          data-has-discount="{{ $format->hasActiveDiscount() ? '1' : '0' }}"
                          data-stock="{{ $format->stock_quantity ?? '' }}"
                          data-format-type="{{ $format->format_type->value }}"
                          data-pages="{{ $format->pages ?? '' }}"
                          data-narrator="{{ $format->narrator?->name ?? '' }}"
                          data-duration="{{ $format->humanDuration() ?? '' }}"
                          data-file-format="{{ $format->file_format?->label() ?? '' }}"
                          data-file-size="{{ $format->humanFileSize() ?? '' }}"
                          data-sku="{{ $format->sku }}"
                          data-type="{{ $format->format_type->label() }}"
                          @disabled($format->stock_quantity !== null && $format->stock_quantity <= 0)>
                    {{ $format->format_type->label() }}
                  </button>
                @endforeach
              </div>
            @endif

            <p class="product-price">
              <span data-price-display>{{ $defaultFormat ? number_format($defaultFormat->discountedSellingPrice(), 2) : '—' }} ج.م</span>
              @if ($defaultFormat && $defaultFormat->hasActiveDiscount())
                <del data-original-display>{{ number_format((float) $defaultFormat->selling_price, 2) }} ج.م</del>
              @endif
            </p>

            @if ($previewFormats->isNotEmpty())
              <div class="preview-box"
                   data-preview-box
                   @if ($activePreviewId === null) hidden @endif>
                @foreach ($previewFormats as $previewFormatId => $previewFormat)
                  <div class="preview-box__item"
                       data-preview-format="{{ $previewFormatId }}"
                       @if ((string) $previewFormatId !== $activePreviewId) hidden @endif>
                    <p class="preview-box__title">معاينة {{ $previewFormat->format_type->label() }}</p>

                    @if ($previewFormat->format_type === \App\Enums\BookFormatType::EBOOK)
                      <a class="preview-box__link"
                         href="{{ route('products.preview', [$book, $previewFormat]) }}"
                         target="_blank"
                         rel="noopener">
                        <i class="fas fa-file-pdf"></i>
                        <span>قراءة العيّنة مجاناً</span>
                      </a>
                    @else
                      <audio class="preview-box__player"
                             controls
                             preload="none"
                             src="{{ route('products.preview', [$book, $previewFormat]) }}"></audio>
                    @endif
                  </div>
                @endforeach
              </div>
            @endif

            @if ($plainDescription)
              <p class="text">{{ \Illuminate\Support\Str::limit($plainDescription, 220) }}</p>
            @endif

            <span class="product-instock">
              <p>التوفر:</p>
              <span data-stock-display>
                @if ($defaultFormat === null)
                  <i class="fas fa-info-circle"></i>غير متاح حالياً
                @elseif ($defaultFormat->stock_quantity === null)
                  <i class="fas fa-info-circle"></i>متاح حالياً
                @elseif ($defaultFormat->stock_quantity > 0)
                  <i class="fas fa-check-square"></i>متوفر ({{ $defaultFormat->stock_quantity }} نسخة)
                @else
                  <i class="fas fa-times-circle"></i>نفدت الكمية
                @endif
              </span>
            </span>

            <div class="actions">
              <div class="quantity">
                <div class="quantity__field quantity-container">
                  <div class="quantity__buttons">
                    <button class="quantity-plus qty-btn" type="button" aria-label="زيادة الكمية">
                      <i class="fal fa-plus"></i>
                    </button>
                    <input type="number"
                           id="quantity"
                           class="qty-input"
                           step="1"
                           min="1"
                           max="100"
                           name="quantity"
                           value="1"
                           title="الكمية"
                           aria-label="الكمية">
                    <button class="quantity-minus qty-btn" type="button" aria-label="إنقاص الكمية">
                      <i class="fal fa-minus"></i>
                    </button>
                  </div>
                </div>
              </div>
              <a href="#" class="vs-btn" data-cart-placeholder>
                <i class="fa-solid fa-basket-shopping"></i>أضف إلى السلة
              </a>
              <a href="#" class="icon-btn" data-wishlist-placeholder aria-label="أضف إلى المفضلة">
                <i class="far fa-heart"></i>
              </a>
            </div>

            <div class="product_meta">
              <h4 class="h5">المعلومات:</h4>
              <span class="posted_in">
                <p>التصنيف:</p>
                <a href="{{ route('products.index', ['category' => $book->category->slug]) }}" rel="tag">{{ $book->category->name }}</a>
              </span>
              @if ($book->subcategory)
                <span class="posted_in">
                  <p>التصنيف الفرعي:</p>
                  <a href="{{ route('products.index', ['category' => $book->subcategory->slug]) }}" rel="tag">{{ $book->subcategory->name }}</a>
                </span>
              @endif
              <span>
                <p>دار النشر:</p> <span>{{ $book->publisher->name }}</span>
              </span>
              <span>
                <p>اللغة:</p> <span>{{ $book->language->name }}</span>
              </span>
              <span>
                <p>سنة النشر:</p> <span>{{ $book->publication_year }}</span>
              </span>
              <span>
                <p>الطبعة:</p> <span>{{ $book->edition_number }}</span>
              </span>
              <span>
                <p>رقم ISBN:</p> <span>{{ $book->isbn }}</span>
              </span>
              @if ($translatorNames)
                <span>
                  <p>المترجم:</p> <span>{{ $translatorNames }}</span>
                </span>
              @endif
              @if ($book->tags->isNotEmpty())
                <span>
                  <p>الوسوم:</p>
                  @foreach ($book->tags as $tag)
                    <a href="{{ route('products.index', ['tag' => $tag->slug]) }}" rel="tag">{{ $tag->name }}</a>
                  @endforeach
                </span>
              @endif

              {{-- Format specifications. Each row names the format types it describes in
                   data-when and the button property holding its value in data-info-key, so the
                   switcher reveals the right row and fills it without a branch per field. --}}
              @foreach ($formatSpecs as $spec)
                <span data-when="{{ $spec['formats'] }}"
                      data-info-key="{{ $spec['key'] }}"
                      @if (blank($defaultFormatValues[$spec['key']]) || ! in_array($defaultFormat->format_type->value, explode(',', $spec['formats']), true)) hidden @endif>
                  <p>{{ $spec['label'] }}:</p> <span data-info-value>{{ $defaultFormatValues[$spec['key']] ?? '' }}</span>
                </span>
              @endforeach
            </div>
          </div>
        </div>
      </div>

      <div class="product-description wow animate__fadeInUp" data-wow-delay="0.50s">
        <div class="product-description__tab">
          <ul class="nav nav-pills" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">الوصف</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">التقييمات ({{ $book->reviews_count }})</button>
            </li>
          </ul>
        </div>

        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
              <div class="description">
                @if ($plainDescription)
                  <p class="text">{{ $plainDescription }}</p>
                @else
                  <p class="text">لا يوجد وصف متاح لهذا الكتاب.</p>
                @endif
            </div>
          </div>

          <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
            <div class="woocommerce-reviews">
              <div class="vs-comments-wrap">
                @forelse ($book->reviews()->latest()->limit(5)->get() as $review)
                  <ul class="comment-list">
                    <li class="review vs-comment-item">
                      <div class="vs-post-comment">
                        <div class="comment-avater">
                          <img src="{{ asset('assets/img/shop/r-1-1.jpg') }}" alt="صورة القارئ">
                        </div>
                        <div class="comment-content">
                          <div class="comment-content__header">
                            <div class="review-rating">
                              <span class="star"><i class="fas fa-star"></i> ({{ number_format((float) $review->rating, 1) }})</span>
                            </div>
                            <h4 class="name h4">{{ $review->user?->name ?? 'قارئ' }}</h4>
                          </div>
                          @if ($review->comment)
                            <p class="text">{{ $review->comment }}</p>
                          @endif
                          <span class="commented-on">{{ $review->created_at?->diffForHumans() }}</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                @empty
                  <p class="text">لا توجد تقييمات لهذا الكتاب بعد.</p>
                @endforelse
              </div>
            </div>
          </div>
        </div>
      </div>

      @if ($relatedBooks->isNotEmpty())
        <div class="widget product-sidebar mt-55">
          <h3 class="widget_title title-shep">كتب ذات صلة</h3>
          <div class="row g-4">
            @foreach ($relatedBooks as $related)
              @php
                $relatedPrice = $related->displayedFormat()?->discountedSellingPrice();
              @endphp
              <div class="col-xl-3 col-md-6">
                <div class="product-style1">
                  <div class="product-img">
                    <img src="{{ $related->cover_image ? asset('storage/'.$related->cover_image) : asset('assets/img/product/product-img-5-1.jpg') }}"
                         alt="غلاف {{ $related->title }}" loading="lazy">
                  </div>
                  <div class="product-content">
                    <div class="product-rating">
                      <span class="star"><i class="fas fa-star"></i> ({{ number_format((float) $related->average_rating, 1) }})</span>
                      <ul class="price-list">
                        <li>{{ $relatedPrice !== null ? number_format($relatedPrice, 2).' ج.م' : '—' }}</li>
                      </ul>
                    </div>
                    <h2 class="product-title"><a href="{{ route('products.show', $related) }}">{{ $related->title }}</a></h2>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      @endif
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    var formatButtons = document.querySelectorAll('.format-btn');

    var previewBox = document.querySelector('[data-preview-box]');
    var previewItems = document.querySelectorAll('[data-preview-format]');

    function syncPreview(formatKey) {
      if (!previewBox) {
        return;
      }

      var matched = false;

      previewItems.forEach(function (item) {
        if (item.dataset.previewFormat === String(formatKey)) {
          item.hidden = false;
          matched = true;
        } else {
          item.hidden = true;
        }
      });

      previewBox.hidden = !matched;
    }

    var infoRows = document.querySelectorAll('[data-when]');

    function syncInfoRows(button) {
      var formatType = button.dataset.formatType;

      infoRows.forEach(function (row) {
        var applies = row.dataset.when.split(',').indexOf(formatType) !== -1;
        var value = button.dataset[row.dataset.infoKey];

        if (applies && value) {
          row.querySelector('[data-info-value]').textContent = value;
          row.hidden = false;
        } else {
          row.hidden = true;
        }
      });
    }

    formatButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        formatButtons.forEach(function (other) {
          other.classList.remove('active');
        });

        button.classList.add('active');

        syncPreview(button.dataset.formatKey);

        syncInfoRows(button);

        var priceDisplay = document.querySelector('[data-price-display]');
        var originalDisplay = document.querySelector('[data-original-display]');
        var stockDisplay = document.querySelector('[data-stock-display]');

        if (priceDisplay) {
          priceDisplay.textContent = button.dataset.price + ' ج.م';
        }

        if (originalDisplay) {
          if (button.dataset.hasDiscount === '1') {
            originalDisplay.textContent = button.dataset.original + ' ج.م';
            originalDisplay.hidden = false;
          } else {
            originalDisplay.hidden = true;
          }
        }

        if (stockDisplay) {
          if (button.dataset.stock === '') {
            stockDisplay.innerHTML = '<i class="fas fa-info-circle"></i>متاح حالياً';
          } else if (Number(button.dataset.stock) > 0) {
            stockDisplay.innerHTML = '<i class="fas fa-check-square"></i>متوفر (' + button.dataset.stock + ' نسخة)';
          } else {
            stockDisplay.innerHTML = '<i class="fas fa-times-circle"></i>نفدت الكمية';
          }
        }
      });
    });
  </script>
@endpush