@extends('layouts.app')

@php
    $ogProductImage = $product->getPrimaryImage();
    if ($ogProductImage && !filter_var($ogProductImage, FILTER_VALIDATE_URL)) {
        $ogProductImage = url($ogProductImage);
    }
@endphp

@section('meta_title', $product->name . ' - Buy Online at Gletra')
@section('meta_description', Str::limit(strip_tags($product->description), 160))
@section('meta_image', $ogProductImage)

@push('styles')
<link rel="stylesheet" href="{{ asset('css/product.css') }}">
@endpush

@push('scripts')
@include('partials.product-share')
<script src="{{ asset('js/product.js') }}"></script>
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ $product->name }}",
  "image": [
    @foreach($product->images as $img)
      "{{ media_url($img->image_path) ?? \App\Support\MediaUrl::absoluteUrl($img->image_path) }}"{{ !$loop->last ? ',' : '' }}
    @endforeach
  ],
  "description": "{{ Str::limit(strip_tags($product->description), 300) }}",
  "brand": {
    "@type": "Brand",
    "name": "{{ $product->brand ? $product->brand->name : 'Gletra' }}"
  },
  "offers": {
    "@type": "Offer",
    "url": "{{ url()->current() }}",
    "priceCurrency": "INR",
    "price": "{{ $product->sale_price ?? $product->price }}",
    "availability": "https://schema.org/{{ $product->stock_qty > 0 ? 'InStock' : 'OutOfStock' }}",
    "seller": {
      "@type": "Organization",
      "name": "{{ $product->vendor->shop_name }}"
    }
  }
}
</script>
@endpush

@section('content')
<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-decoration-none text-muted">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ url('shop') }}" class="text-decoration-none text-muted">Shop</a></li>
            @if($product->category)
                <li class="breadcrumb-item"><a href="{{ route('category', $product->category->slug) }}" class="text-decoration-none text-muted">{{ $product->category->name }}</a></li>
            @endif
            <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($product->name, 40) }}</li>
        </ol>
    </nav>

    <div class="product-main-card">
        <div class="row g-5">
            <!-- Left: Gallery -->
            <div class="col-lg-6 col-md-5">
                <div class="gallery-sticky">
                    <div class="main-image-viewport shadow-sm mb-3" id="mainSliderContainer">
                        @if($product->sale_price && $product->price > $product->sale_price)
                            <div class="position-absolute top-0 start-0 m-3 z-10" style="z-index: 5;">
                                <span class="badge bg-danger px-3 py-2 rounded-pill shadow-sm">
                                    -{{ round((($product->price - $product->sale_price) / $product->price) * 100) }}% Off
                                </span>
                            </div>
                        @endif

                        <div class="slider w-100 h-100" id="slider">
                            {{-- Primary Image --}}
                            @if($product->primary_image)
                                <img src="{{ $product->getPrimaryImage() }}" class="slide active" alt="{{ $product->name }}">
                            @endif

                            {{-- Gallery Images --}}
                            @foreach($product->galleries as $g)
                                <img src="{{ $g->getUrl() }}" class="slide {{ (!$product->primary_image && $loop->first) ? 'active' : '' }}" alt="{{ $product->name }}">
                            @endforeach

                            {{-- Legacy Images --}}
                            @if(!$product->primary_image && $product->galleries->count() == 0)
                                @forelse($product->images as $img)
                                    <img src="{{ $img->getUrl() }}" class="slide {{ $loop->first ? 'active' : '' }}" alt="{{ $product->name }}">
                                @empty
                                    <img src="https://placehold.co/600x600?text={{ urlencode($product->name) }}" class="slide active">
                                @endforelse
                            @endif
                        </div>
                    </div>

                    {{-- Thumbnails --}}
                    @php 
                        $hasGallery = $product->primary_image || $product->galleries->count() > 0;
                    @endphp

                    @if($hasGallery || $product->images->count() > 1)
                    <div class="thumb-strip">
                        @if($product->primary_image)
                            <div class="thumb-box active" onclick="showSlide(0)">
                                <img src="{{ $product->getPrimaryImage() }}" alt="Thumb">
                            </div>
                        @endif

                        @foreach($product->galleries as $g)
                            @php $idx = ($product->primary_image ? $loop->iteration : $loop->index); @endphp
                            <div class="thumb-box {{ (!$product->primary_image && $loop->first) ? 'active' : '' }}" onclick="showSlide({{ $idx }})">
                                <img src="{{ $g->getUrl() }}" alt="Thumb">
                            </div>
                        @endforeach

                        @if(!$hasGallery)
                            @foreach($product->images as $img)
                                <div class="thumb-box {{ $loop->first ? 'active' : '' }}" onclick="showSlide({{ $loop->index }})">
                                    <img src="{{ $img->getUrl() }}" alt="Thumb">
                                </div>
                            @endforeach
                        @endif
                    </div>
                    @endif
                </div>
            </div>

            <!-- Right: Details -->
            <div class="col-lg-6 col-md-7 product-details-pnl">
                @if($product->category)
                    <span class="product-label-badge">{{ $product->category->name }}</span>
                @endif
                
                <h1 class="product-main-title">{{ $product->name }}</h1>
                
                <div class="rating-summary">
                    <div class="rating-pill">
                        {{ number_format($product->reviews->avg('rating') ?? 4.2, 1) }} <i class="bi bi-star-fill"></i>
                    </div>
                    <span class="text-muted fw-medium">{{ $product->reviews->count() }} Verified Ratings</span>
                    <span class="text-muted">|</span>
                    <span class="text-muted">SKU: <span class="text-dark fw-bold">{{ $product->sku ?? 'N/A' }}</span></span>
                </div>

                <div class="price-display-box">
                    <div class="d-flex align-items-baseline">
                        <span class="current-price">₹{{ number_format($product->sale_price ?? $product->price, 0) }}</span>
                        @if($product->sale_price && $product->price > $product->sale_price)
                            <span class="original-price">₹{{ number_format($product->price, 0) }}</span>
                            <span class="discount-tag">-{{ round((($product->price - $product->sale_price) / $product->price) * 100) }}% OFF</span>
                        @endif
                    </div>
                    <div class="mt-2">
                        <span class="text-success fw-bold small"><i class="bi bi-truck me-1"></i> Free Express Delivery</span>
                    </div>
                </div>

                <!-- Offers Selection -->
                <div class="mb-4">
                    <h6 class="fw-bold text-dark mb-3">Special Product Offers</h6>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="p-3 border rounded-4 bg-light h-100">
                                <i class="bi bi-bank2 text-primary d-block mb-1"></i>
                                <p class="mb-0 small fw-bold">Bank Offer</p>
                                <p class="mb-0 x-small text-muted">5% Cashback on Axis Bank</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded-4 bg-light h-100">
                                <i class="bi bi-shield-check text-success d-block mb-1"></i>
                                <p class="mb-0 small fw-bold">Warranty</p>
                                <p class="mb-0 x-small text-muted">1 Year Brand Warranty</p>
                            </div>
                        </div>
                    </div>
                </div>

                @if($product->stock_qty > 0)
                <form action="{{ route('cart.add') }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    
                    @if($product->variants->count() > 0)
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase mb-3">Select Variant</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($product->variants as $variant)
                                <input type="radio" class="btn-check" name="variant_id" id="v-{{ $variant->id }}" value="{{ $variant->id }}" {{ $loop->first ? 'checked' : '' }}>
                                <label class="btn btn-outline-dark rounded-pill px-4 py-2" for="v-{{ $variant->id }}">
                                    {{ $variant->name }}
                                </label>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <div class="qty-selector">
                        <div class="qty-input-group">
                            <button type="button" class="qty-btn" onclick="decrementQty()"><i class="bi bi-dash"></i></button>
                            <input type="number" name="qty" id="qtyInput" class="qty-val" value="1" min="1" max="{{ $product->stock_qty }}" readonly>
                            <button type="button" class="qty-btn" onclick="incrementQty()"><i class="bi bi-plus"></i></button>
                        </div>
                        <span class="text-muted small fw-bold"><i class="bi bi-layers-fill me-1"></i> {{ $product->stock_qty }} Units available</span>
                    </div>

                    <div class="cart-actions mb-4">
                        <button type="submit" class="btn-add-cart btn-lg">
                            <i class="bi bi-cart3 me-2"></i> Add to Cart
                        </button>
                        <button type="submit" name="buy_now" value="1" class="btn-buy-now btn-lg">
                            <i class="bi bi-lightning-fill me-2"></i> Buy Now
                        </button>
                    </div>
                </form>

                <div class="d-flex flex-wrap gap-2 mt-4 pt-3 border-top">
                    <form action="{{ route('customer.wishlist.add') }}" method="POST" class="flex-grow-1">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <button class="btn btn-outline-dark w-100 rounded-pill py-2 fw-bold border-2">
                            <i class="bi bi-heart me-2"></i> Save to Wishlist
                        </button>
                    </form>
                    
                    @if($product->vendor && $product->vendor->user_id != auth()->id())
                        <a href="{{ route('gc.chat.start', $product->vendor->user_id) }}" class="btn btn-outline-primary rounded-pill px-4 fw-bold border-2">
                            <i class="bi bi-chat-dots me-2"></i> Chat with Seller
                        </a>
                    @endif

                    <button class="btn btn-dark rounded-pill px-4" onclick="shareProduct()">
                        <i class="bi bi-share-fill"></i>
                    </button>
                </div>
                @else
                <div class="alert alert-danger rounded-4 py-3 text-center fw-bold">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i> Currently Unavailable
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Details Tabs -->
    <div class="card info-tabs-card mb-5">
        <div class="card-header bg-white pt-4">
            <ul class="nav nav-tabs tab-nav-premium" id="productTab" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button">Product Information</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button">Specifications</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button">Customer Reviews ({{ $product->reviews->count() }})</button>
                </li>
            </ul>
        </div>
        <div class="card-body p-4">
            <div class="tab-content" id="productTabContent">
                <div class="tab-pane fade show active" id="desc">
                    <h5 class="fw-bold mb-4">Complete Description</h5>
                    <div class="text-muted leading-relaxed" style="white-space: pre-line; line-height: 1.8;">{{ $product->description }}</div>
                </div>

                <div class="tab-pane fade" id="specs">
                    <h5 class="fw-bold mb-4">Technical Details</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered rounded-4 overflow-hidden" style="max-width: 700px;">
                            <tbody>
                                <tr>
                                    <th class="bg-light w-25">Product Name</th>
                                    <td>{{ $product->name }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Brand</th>
                                    <td>{{ $product->brand ? $product->brand->name : 'Gletra Originals' }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Category</th>
                                    <td>{{ $product->category ? $product->category->name : 'General' }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Item SKU</th>
                                    <td>{{ $product->sku ?? 'GLETRA-'.strtoupper(Str::random(6)) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="reviews">
                    <div class="row g-4">
                        <div class="col-md-7">
                            <h5 class="fw-bold mb-4">User Testimonials</h5>
                            @forelse($product->reviews as $review)
                                <div class="p-3 border rounded-4 mb-3 bg-light">
                                    <div class="d-flex align-items-center gap-2 mb-2">
                                        <div class="bg-success text-white px-2 rounded-pill small fw-bold">
                                            {{ $review->rating }} <i class="bi bi-star-fill"></i>
                                        </div>
                                        <span class="fw-bold text-dark">{{ $review->user->name }}</span>
                                        <span class="text-muted small ms-auto">{{ $review->created_at->format('M d, Y') }}</span>
                                    </div>
                                    <p class="mb-0 text-muted">{{ $review->review }}</p>
                                </div>
                            @empty
                                <div class="text-center py-5">
                                    <i class="bi bi-chat-dots fs-1 text-muted opacity-25"></i>
                                    <p class="text-muted mt-2">No reviews for this product yet.</p>
                                </div>
                            @endforelse
                        </div>
                        <div class="col-md-5">
                            <div class="p-4 border rounded-4 sticky-top" style="top: 120px;">
                                <h6 class="fw-bold mb-3">Rate this Product</h6>
                                @auth
                                    <form action="{{ route('reviews.store', $product->id) }}" method="POST">
                                        @csrf
                                        <div class="mb-3">
                                            <select name="rating" class="form-select rounded-4">
                                                <option value="5">Excellent ★★★★★</option>
                                                <option value="4">Great ★★★★</option>
                                                <option value="3">Good ★★★</option>
                                                <option value="2">Fair ★★</option>
                                                <option value="1">Poor ★</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <textarea name="comment" class="form-control rounded-4" rows="4" placeholder="How was your experience?" required></textarea>
                                        </div>
                                        <button class="btn btn-primary w-100 rounded-pill py-2 fw-bold">Post Review</button>
                                    </form>
                                @else
                                    <div class="text-center p-3">
                                        <p class="small text-muted mb-3">Please sign in to share your feedback.</p>
                                        <a href="{{ url('login') }}" class="btn btn-outline-primary rounded-pill w-100">Login Now</a>
                                    </div>
                                @endauth
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Related Products -->
    <div class="mb-5">
        <h4 class="fw-bold mb-4">Recommended for You</h4>
        <div class="row g-4">
            @foreach($relatedProducts as $related)
                <div class="col-lg-3 col-md-4 col-6">
                    @include('front.partials.product-card', ['product' => $related])
                </div>
            @endforeach
        </div>
    </div>
</div>

<style>
    .x-small { font-size: 0.7rem; }
</style>

<script>
    function incrementQty() {
        var input = document.getElementById('qtyInput');
        var max = parseInt(input.max);
        if (parseInt(input.value) < max) {
            input.value = parseInt(input.value) + 1;
        }
    }

    function decrementQty() {
        var input = document.getElementById('qtyInput');
        if (parseInt(input.value) > 1) {
            input.value = parseInt(input.value) - 1;
        }
    }
</script>

@endsection