@extends('layouts.store')

@section('title', $product->name)

@section('content')
    @php
        $slideCount = count($images) + ($youtubeEmbedUrl ? 1 : 0);
        $compareAtPrice = $product->compareAtPrice();
        $discountPercent = $product->displayDiscountPercent();
    @endphp

    <section class="product-detail">
        <div class="detail-gallery" data-product-slider>
            <div class="slider-frame">
                <div class="slider-track" data-slider-track>
                    @foreach ($images as $image)
                        <div
                            class="slider-slide"
                            data-slide
                            data-active="{{ $loop->first ? 'true' : 'false' }}"
                            aria-hidden="{{ $loop->first ? 'false' : 'true' }}"
                        >
                            <img
                                class="detail-main-image"
                                src="{{ $image }}"
                                alt="{{ $product->name }} image {{ $loop->iteration }}"
                            >
                        </div>
                    @endforeach

                    @if ($youtubeEmbedUrl)
                        <div
                            class="slider-slide video-slide"
                            data-slide
                            data-active="false"
                            aria-hidden="true"
                        >
                            <iframe
                                src="{{ $youtubeEmbedUrl }}"
                                title="{{ $product->name }} video"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen
                            ></iframe>
                        </div>
                    @endif
                </div>

                @if ($slideCount > 1)
                    <button class="slider-control prev" type="button" data-slide-prev aria-label="Previous image">&lt;</button>
                    <button class="slider-control next" type="button" data-slide-next aria-label="Next image">&gt;</button>
                @endif
            </div>

            @if ($slideCount > 1)
                <div class="detail-thumbs">
                    @foreach ($images as $image)
                        <button class="thumb-button {{ $loop->first ? 'active' : '' }}" type="button" data-slide-thumb="{{ $loop->index }}">
                            <img src="{{ $image }}" alt="{{ $product->name }} image {{ $loop->iteration }}">
                        </button>
                    @endforeach

                    @if ($youtubeEmbedUrl)
                        <button class="thumb-button video-thumb" type="button" data-slide-thumb="{{ count($images) }}">
                            <span>Video</span>
                        </button>
                    @endif
                </div>
            @elseif ($product->youtube_url)
                <a class="auth-link" href="{{ $product->youtube_url }}" target="_blank" rel="noopener">Watch on YouTube</a>
            @endif
        </div>

        <article class="detail-summary">
            <a class="auth-link" href="{{ route('storefront.home') }}">Back to products</a>
            <span class="eyebrow">{{ $product->category->name }}</span>
            <h1>{{ $product->name }}</h1>
            <div class="price-row detail-price">
                <div class="price-stack">
                    <span class="price">{{ \App\Models\SiteSetting::formatPrice($product->sellingPrice()) }}</span>
                    @if ($compareAtPrice)
                        <small><s>{{ \App\Models\SiteSetting::formatPrice($compareAtPrice) }}</s></small>
                    @endif
                </div>
                @if ($discountPercent > 0)
                    <small class="discount-badge">{{ rtrim(rtrim(number_format($discountPercent, 2), '0'), '.') }}% off</small>
                @endif
                <small>{{ $reviewCount > 0 ? $averageRating : $product->rating }} rating</small>
            </div>

            <dl class="account-details">
                <div>
                    <dt>Stock</dt>
                    <dd>{{ $product->stock }} available</dd>
                </div>
                <div>
                    <dt>Status</dt>
                    <dd>{{ $product->is_active ? 'Available' : 'Unavailable' }}</dd>
                </div>
                @if ($product->youtube_url)
                    <div>
                        <dt>Video</dt>
                        <dd><a class="auth-link" href="{{ $product->youtube_url }}" target="_blank" rel="noopener">Open on YouTube</a></dd>
                    </div>
                @endif
            </dl>

            @if ($product->description)
                <div class="detail-description">
                    <h2>Description</h2>
                    <p>{{ $product->description }}</p>
                </div>
            @endif

            <div class="product-actions">
                <form method="POST" action="{{ route('customer.cart.store', $product) }}">
                    @csrf
                    @if ($variants->isNotEmpty())
                        <label class="variant-select">
                            <span>Variant</span>
                            <select name="product_variant_id" required>
                                <option value="">Select variant</option>
                                @foreach ($variants as $variant)
                                    <option value="{{ $variant->id }}">
                                        {{ $variant->label() }} - {{ \App\Models\SiteSetting::formatPrice($variant->effectivePrice()) }}@if ($variant->compareAtPrice()) ({{ \App\Models\SiteSetting::formatPrice($variant->compareAtPrice()) }} before)@endif ({{ $variant->stock }} stock)
                                    </option>
                                @endforeach
                            </select>
                        </label>
                    @endif
                    <button class="button primary" type="submit">Add to bag</button>
                </form>
                <form method="POST" action="{{ route('customer.favorites.toggle', $product) }}">
                    @csrf
                    <button class="button ghost" type="submit">Favorite</button>
                </form>
            </div>
        </article>
    </section>

    <section class="panel product-reviews-panel">
        <div class="reviews-head">
            <div>
                <span class="eyebrow">Customer Feedback</span>
                <h2>Product Reviews</h2>
            </div>
            <div class="rating-summary">
                <strong>{{ $reviewCount > 0 ? $averageRating : '0.0' }}</strong>
                <span>out of 5</span>
                <small>{{ $reviewCount }} {{ \Illuminate\Support\Str::plural('review', $reviewCount) }}</small>
            </div>
        </div>

        @if ($reviews->isNotEmpty())
            <div class="review-list">
                @foreach ($reviews as $review)
                    <article class="review-card">
                        <div class="review-card-head">
                            <div>
                                <strong>{{ $review->customer->name }}</strong>
                                <small>{{ $review->created_at->format('M d, Y') }}</small>
                            </div>
                            <span class="review-stars">{{ str_repeat('*', $review->rating) }}</span>
                        </div>

                        @if ($review->comment)
                            <p>{{ $review->comment }}</p>
                        @endif

                        <div class="review-media">
                            @if ($review->imageUrl())
                                <img src="{{ $review->imageUrl() }}" alt="{{ $product->name }} review image">
                            @endif
                            @if ($review->videoUrl())
                                <video controls src="{{ $review->videoUrl() }}"></video>
                            @endif
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            <p class="empty-state">No product reviews yet.</p>
        @endif
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const slider = document.querySelector('[data-product-slider]');

            if (!slider) {
                return;
            }

            const slides = [...slider.querySelectorAll('[data-slide]')];
            const thumbs = [...slider.querySelectorAll('[data-slide-thumb]')];
            const prev = slider.querySelector('[data-slide-prev]');
            const next = slider.querySelector('[data-slide-next]');
            const track = slider.querySelector('[data-slider-track]');
            let current = 0;

            const showSlide = (index) => {
                if (slides.length === 0) {
                    return;
                }

                current = (index + slides.length) % slides.length;

                if (track) {
                    track.style.transform = `translateX(-${current * 100}%)`;
                }

                slides.forEach((slide, slideIndex) => {
                    const isActive = slideIndex === current;
                    slide.dataset.active = isActive ? 'true' : 'false';
                    slide.setAttribute('aria-hidden', isActive ? 'false' : 'true');
                });

                thumbs.forEach((thumb, thumbIndex) => {
                    thumb.classList.toggle('active', thumbIndex === current);
                    thumb.setAttribute('aria-current', thumbIndex === current ? 'true' : 'false');
                });
            };

            prev?.addEventListener('click', () => showSlide(current - 1));
            next?.addEventListener('click', () => showSlide(current + 1));
            thumbs.forEach((thumb) => {
                thumb.addEventListener('click', () => showSlide(Number(thumb.dataset.slideThumb)));
            });

            showSlide(0);
        });
    </script>
@endpush