@extends('layouts.app')
@section('title', $product->name . ' | Saree Store')

@section('content')
@include('layouts.breadcrumb', [
    'title' => $product->name, 
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')], 
        ['name' => 'Shop Sarees', 'url' => route('shop')],
        ['name' => $product->name, 'url' => null]
    ]
])

<div class="ul-container py-5">
    <div class="row g-5 align-items-start">
        <!-- LEFT: PRODUCT MAIN IMAGE & GALLERY THUMBNAILS -->
        <div class="col-lg-6">
            <div class="product-gallery-wrapper sticky-top" style="top: 120px; z-index: 10;">
                <!-- Main Featured Cover Photo -->
                <div class="main-image-container border rounded-4 overflow-hidden shadow-sm mb-3 bg-white" style="aspect-ratio: 4/5; max-height: 580px;">
                    <img id="mainProductImage" src="{{ asset($product->image) }}" alt="{{ $product->name }}" class="w-100 h-100" style="object-fit: cover;">
                </div>

                <!-- 5 Gallery Thumbnails Grid -->
                @if(is_array($product->gallery_images) && count($product->gallery_images) > 0)
                    <div class="d-flex gap-2 overflow-x-auto pb-2">
                        <!-- Cover Image Thumbnail -->
                        <div class="gallery-thumb-item border rounded-3 overflow-hidden cursor-pointer flex-shrink-0 border-danger" onclick="changeMainImage('{{ asset($product->image) }}', this)" style="width: 80px; height: 80px; cursor: pointer;">
                            <img src="{{ asset($product->image) }}" alt="{{ $product->name }}" class="w-100 h-100" style="object-fit: cover;">
                        </div>

                        @foreach($product->gallery_images as $index => $gImg)
                            @if(!empty($gImg))
                                <div class="gallery-thumb-item border rounded-3 overflow-hidden cursor-pointer flex-shrink-0" onclick="changeMainImage('{{ asset($gImg) }}', this)" style="width: 80px; height: 80px; cursor: pointer;">
                                    <img src="{{ asset($gImg) }}" alt="{{ $product->name }} Photo {{ $index + 1 }}" class="w-100 h-100" style="object-fit: cover;">
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- RIGHT: PRODUCT DETAILS & BUY ACTIONS -->
        <div class="col-lg-6">
            <div class="product-info-wrapper ps-lg-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="badge bg-light text-secondary border px-3 py-2 rounded-pill small">{{ $product->category }}</span>
                    @if($product->brand)
                        <span class="badge bg-light text-secondary border px-3 py-2 rounded-pill small"><i class="flaticon-shop me-1"></i>{{ $product->brand }}</span>
                    @endif
                    <span class="badge bg-warning-subtle text-dark border border-warning px-3 py-2 rounded-pill small fw-bold">
                        ★ {{ $product->averageRating() }} / 5 ({{ $product->reviewsCount() }} reviews)
                    </span>
                </div>

                <h1 class="fw-bold mb-3" style="color: #2B1820; font-size: clamp(1.8rem, 2.5vw, 2.5rem);">{{ $product->name }}</h1>

                <!-- Price Block -->
                <div class="d-flex align-items-baseline gap-3 mb-4 pb-3 border-bottom">
                    <span class="fs-2 fw-bold text-danger">₹{{ number_format($product->sale_price ?: $product->price, 2) }}</span>
                    @if($product->sale_price && $product->sale_price < $product->price)
                        <span class="fs-5 text-muted text-decoration-line-through">₹{{ number_format($product->price, 2) }}</span>
                        <span class="badge bg-danger rounded-pill px-3 py-1">Save ₹{{ number_format($product->price - $product->sale_price, 2) }}</span>
                    @endif
                </div>

                <!-- Stock Status -->
                <div class="mb-4">
                    <span class="fw-semibold text-dark me-2">Availability:</span>
                    @if($product->stock > 0)
                        <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 rounded-pill">
                            ● In Stock ({{ $product->stock }} units ready to ship)
                        </span>
                    @else
                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-1 rounded-pill">
                            ○ Out of Stock
                        </span>
                    @endif
                </div>

                <!-- Action Buttons: Add to Cart & Wishlist -->
                <div class="d-flex gap-3 mb-4 pb-4 border-bottom">
                    <form method="POST" action="{{ route('cart.add', $product) }}" class="flex-grow-1">
                        @csrf
                        <button type="submit" class="btn btn-danger w-100 py-3 rounded-3 fw-bold fs-6 shadow-sm d-flex align-items-center justify-content-center gap-2" {{ $product->stock <= 0 ? 'disabled' : '' }}>
                            <i class="flaticon-shopping-bag"></i>
                            <span>Add to Cart</span>
                        </button>
                    </form>

                    <form method="POST" action="{{ route('wishlist.toggle', $product) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger p-3 rounded-3 d-flex align-items-center justify-content-center" title="Save to Wishlist" style="width: 54px; height: 54px;">
                            <i class="flaticon-heart fs-5"></i>
                        </button>
                    </form>
                </div>

                <!-- Description -->
                <div class="mb-4">
                    <h5 class="fw-bold mb-2" style="color: #2B1820;">Product Specifications & Weave Details</h5>
                    <p class="text-secondary" style="line-height: 1.8;">
                        {{ $product->description ?: 'Exquisite handcrafted saree designed with traditional artistry, premium gold zari borders, and soft luxurious texture.' }}
                    </p>
                </div>

                <!-- Shipping Perks -->
                <div class="p-4 bg-light rounded-4 border">
                    <div class="row row-cols-1 row-cols-sm-3 g-3 text-center small text-secondary">
                        <div class="col d-flex align-items-center gap-2">
                            <i class="flaticon-truck text-danger fs-5"></i>
                            <span>100% Authentic Handloom Silk</span>
                        </div>
                        <div class="col d-flex align-items-center gap-2">
                            <i class="flaticon-return text-danger fs-5"></i>
                            <span>7-Day Easy Return Policy</span>
                        </div>
                        <div class="col d-flex align-items-center gap-2">
                            <i class="flaticon-padlock text-danger fs-5"></i>
                            <span>Secure Encrypted Checkout</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CUSTOMER REVIEWS LIST DISPLAY -->
    <div class="mt-5 pt-4 border-top">
        <div class="p-4 bg-white rounded-4 border shadow-sm">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1" style="color: #2B1820;">Customer Ratings & Reviews</h4>
                    <p class="small text-muted mb-0">Verified customer feedback from delivered saree orders</p>
                </div>
                <span class="badge bg-warning text-dark fw-bold fs-6 px-4 py-2 rounded-pill">
                    ★ {{ $product->averageRating() }} / 5.0 Average ({{ $product->reviewsCount() }} reviews)
                </span>
            </div>

            <div class="row row-cols-1 row-cols-md-2 g-3">
                @forelse($product->reviews as $rev)
                    <div class="col">
                        <div class="p-3 bg-light rounded-3 border h-100">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <strong class="text-dark small">{{ $rev->user->name ?? 'Verified Buyer' }}</strong>
                                <span class="small text-muted">{{ $rev->created_at->format('d M Y') }}</span>
                            </div>
                            <div class="mb-2" style="color: #FFB800;">
                                @for($i = 1; $i <= 5; $i++)
                                    <span>{{ $i <= $rev->rating ? '★' : '☆' }}</span>
                                @endfor
                                <span class="small text-muted ms-1">({{ $rev->rating }}/5)</span>
                            </div>
                            @if($rev->comment)
                                <p class="small text-secondary mb-0" style="line-height: 1.6;">{{ $rev->comment }}</p>
                            @else
                                <span class="small text-muted italic"><em>(Rated 5 stars without written comment)</em></span>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-4 text-muted">
                        <div class="mb-2">
                            <i class="flaticon-star" style="font-size: 2.5rem; color: #E5D5DD;"></i>
                        </div>
                        No customer reviews yet for this saree.
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- RELATED SAREES SECTION -->
    @if(count($relatedProducts) > 0)
        <div class="mt-5 pt-5 border-top">
            <h3 class="fw-bold mb-4" style="color: #2B1820;">You May Also Like</h3>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
                @foreach($relatedProducts as $rel)
                    <div class="col">
                        <div class="ul-product border rounded-4 overflow-hidden h-100 bg-white shadow-sm">
                            <div class="ul-product-heading">
                                <span class="ul-product-price">₹{{ number_format($rel->sale_price ?: $rel->price, 2) }}</span>
                            </div>
                            <div class="ul-product-img">
                                <a href="{{ route('product.details', $rel->slug) }}">
                                    <img src="{{ asset($rel->image) }}" alt="{{ $rel->name }}" style="height: 260px; object-fit: cover; width: 100%;">
                                </a>
                            </div>
                            <div class="ul-product-txt p-3 text-center">
                                <h4 class="ul-product-title mb-1 fs-6">
                                    <a href="{{ route('product.details', $rel->slug) }}" class="text-dark text-decoration-none fw-semibold">{{ $rel->name }}</a>
                                </h4>
                                <p class="small text-muted mb-0">{{ $rel->category }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif
</div>

<script>
    function changeMainImage(src, element) {
        const mainImg = document.getElementById('mainProductImage');
        if (mainImg) {
            mainImg.src = src;
        }
        document.querySelectorAll('.gallery-thumb-item').forEach(el => {
            el.classList.remove('border-danger');
        });
        element.classList.add('border-danger');
    }
</script>
@endsection