@extends('frontend.layouts.app')

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

@section('content')
<div class="container py-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('products.index') }}">Products</a></li>
            @if($product->category)
            <li class="breadcrumb-item"><a href="{{ route('products.index', ['category_id' => $product->category_id]) }}">{{ $product->category->name }}</a></li>
            @endif
            <li class="breadcrumb-item active">{{ $product->name }}</li>
        </ol>
    </nav>

    @php
        $mainImage = $product->image ? asset('storage/'.$product->image) : 'https://via.placeholder.com/300x200?text=No+Product+Image';
        
        // Colors from product_colors
        $productColors = $product->productColors; 
        
        // Variants from product_variants
        $productVariants = $product->variants;

        // Group images by color for the gallery
        $imagesByColor = [];
        foreach($product->productColors as $pc) {
            foreach($pc->images as $imgRecord) {
                $imagesByColor[$pc->color_id][] = asset('storage/' . $imgRecord->image);
            }
        }
        
        // Prepare Variant-Color Stock Data for JS
        $variantStocks = [];
        foreach($product->variants as $variant) {
            $variantStocks[$variant->id] = [];
            foreach($variant->productVariantColors as $vColor) {
                $variantStocks[$variant->id][$vColor->productColor->color_id] = $vColor->stock;
            }
        }
    @endphp

    <div class="row g-4">
        <!-- Image Gallery -->
        <div class="col-lg-6">
            <div class="product-gallery sticky-top" style="top: 100px;">
                <div class="main-image-container mb-3 card border-0 shadow-sm overflow-hidden" style="border-radius:16px; background: #f8f9fa;">
                    <img id="mainDisplayImage" src="{{ $mainImage }}" class="img-fluid w-100" style="aspect-ratio: 1/1; object-fit: contain;" alt="{{ $product->name }}">
                </div>
                
                <div class="thumbnail-wrapper position-relative">
                    <div class="thumbnail-slider d-flex gap-2 overflow-auto pb-2 scroll-smooth" id="thumbnailContainer" style="scrollbar-width: none; -ms-overflow-style: none;">
                        @if($product->image)
                        <div class="thumb-item active flex-shrink-0" data-color-id="default" onclick="selectThumbnail('{{ asset('storage/'.$product->image) }}', this)">
                            <img src="{{ asset('storage/'.$product->image) }}" class="img-thumbnail rounded" style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;">
                        </div>
                        @endif

                        @foreach($product->productColors as $pc)
                            @foreach($pc->images as $imgRecord)
                            <div class="thumb-item flex-shrink-0" data-color-id="{{ $pc->color_id }}" onclick="selectThumbnail('{{ asset('storage/' . $imgRecord->image) }}', this)">
                                <img src="{{ asset('storage/' . $imgRecord->image) }}" class="img-thumbnail rounded" style="width: 80px; height: 80px; object-fit: cover; cursor: pointer;">
                            </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Details -->
        <div class="col-lg-6">
            <div class="ps-lg-3">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span class="badge bg-soft-primary text-primary px-3 py-2" style="background-color: #e7f1ff;">{{ optional($product->category)->name }}</span>
                    @if($product->brand)
                    <span class="badge bg-soft-secondary text-secondary px-3 py-2" style="background-color: #f8f9fa; border: 1px solid #dee2e6;">{{ $product->brand->name }}</span>
                    @endif
                </div>
                
                <h1 class="fw-bold fs-2 mb-2">{{ $product->name }}</h1>
                
                <div class="mb-3 d-flex align-items-center gap-2">
                    <div class="text-warning">
                        @for($i=1; $i<=5; $i++)
                            <i class="bi bi-star{{ $i <= $product->average_rating ? '-fill' : '' }}"></i>
                        @endfor
                    </div>
                    <span class="text-muted small">({{ $product->reviews->count() }} Reviews)</span>
                </div>

                <!-- Price Block -->
                <div class="mb-4" id="priceContainer">
                    <div class="d-flex align-items-center gap-3">
                        <span class="text-primary fw-bold fs-1" id="displayPrice">Rs. {{ number_format($product->effective_price, 2) }}</span>
                        @if($product->effective_discount > 0)
                        <span class="text-muted text-decoration-line-through fs-5" id="originalPrice">Rs. {{ number_format($product->price, 2) }}</span>
                        <span class="badge bg-danger px-2" id="discountBadge">-{{ round($product->effective_discount) }}%</span>
                        @endif
                    </div>
                </div>

                <hr class="my-4 opacity-10">

                <!-- Variant Selection -->
                @if($productVariants->count() > 0)
                <div class="mb-4">
                    <label class="form-label fw-bold small text-uppercase tracking-wider">Select Variant</label>
                    <div class="d-flex flex-wrap gap-2" id="variantList">
                        @foreach($productVariants->sortByDesc('stock') as $variant)
                        <button type="button" 
                                class="btn btn-outline-secondary variant-selector px-4 py-2 {{ $variant->stock <= 0 ? 'opacity-50' : '' }}" 
                                data-variant-id="{{ $variant->id }}"
                                data-price="{{ $variant->price }}"
                                data-discount="{{ $variant->discount ?? 0 }}"
                                data-final-price="{{ $variant->final_price ?? $variant->price }}"
                                data-stock="{{ $variant->stock }}"
                                onclick="selectVariant(this)">
                            {{ $variant->name }}
                            @if($variant->stock <= 0) <span class="badge bg-danger ms-1 small">OOS</span> @endif
                        </button>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Color Selection -->
                @if($productColors->count() > 0)
                <div class="mb-4">
                    <label class="form-label fw-bold small text-uppercase tracking-wider">Available Colors</label>
                    <div class="d-flex flex-wrap gap-2" id="colorList">
                        @foreach($productColors as $pc)
                        <button type="button" 
                                class="btn btn-outline-secondary color-selector px-4 py-2" 
                                data-color-id="{{ $pc->color_id }}"
                                onclick="selectColor('{{ $pc->color_id }}', this)">
                            <span class="color-dot me-1" style="background-color: {{ $pc->color->hex_value }}; width: 12px; height: 12px; border-radius: 50%; display: inline-block; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1);"></span>
                            {{ $pc->color->name }}
                        </button>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Stock Label -->
                <div class="mb-4" id="stockStatus">
                    @if($product->available_qty > 0)
                    <div class="text-success small fw-bold"><i class="bi bi-check-circle-fill me-2"></i>IN STOCK</div>
                    @else
                    <div class="text-danger small fw-bold"><i class="bi bi-x-circle-fill me-2"></i>OUT OF STOCK</div>
                    @endif
                </div>

                <!-- Action Buttons -->
                <div class="actions-group mt-4">
                    <form action="{{ route('cart.add') }}" method="POST" id="addToCartForm" onsubmit="return validateProductSelection()">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="variant_id" id="selectedVariantInput" value="">
                        <input type="hidden" name="color" id="selectedColorInput" value="">
                        
                        <div class="row g-3">
                            <div class="col-md-4 col-12">
                                <div class="input-group input-group-lg border rounded-3 overflow-hidden">
                                    <button type="button" class="btn btn-white border-0 px-3" onclick="updateQty(-1)"><i class="bi bi-dash"></i></button>
                                    <input type="number" id="qtyInput" name="quantity" class="form-control border-0 text-center fw-bold" value="1" min="1" max="{{ $product->available_qty }}">
                                    <button type="button" class="btn btn-white border-0 px-3" onclick="updateQty(1)"><i class="bi bi-plus"></i></button>
                                </div>
                            </div>
                            
                            <div class="col-md-8 col-12">
                                <div class="d-flex gap-2 h-100">
                                    <button type="submit" id="cartBtn" class="btn btn-primary flex-grow-1 py-3 fw-bold shadow-sm" {{ $product->available_qty <= 0 ? 'disabled' : '' }}>
                                        <i class="bi bi-cart-plus-fill me-2"></i>ADD TO CART
                                    </button>
                                    
                                    @auth
                                    <button type="button" class="btn btn-outline-danger py-3 px-4 shadow-sm" onclick="document.getElementById('wishlist-form').submit()">
                                        <i id="wishlistIcon" class="bi bi-heart{{ $product->is_in_wishlist ? '-fill' : '' }}"></i>
                                    </button>
                                    @else
                                    <a href="{{ route('login') }}" class="btn btn-outline-danger py-3 px-4 shadow-sm"><i class="bi bi-heart"></i></a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </form>
                    @auth
                    <form id="wishlist-form" action="{{ route('wishlist.toggle') }}" method="POST" class="d-none">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                    </form>
                    @endauth
                </div>
            </div>
        </div>
    </div>
    <!-- Brief Features -->
    <div class="mt-5 p-4 bg-light rounded-4 border-0">
        <div class="row g-4 text-center">
            <div class="col-6 col-md-3">
                <i class="bi bi-truck text-primary fs-3 mb-2 d-block"></i>
                <span class="small fw-bold">Free Shipping</span>
                <p class="text-muted extra-small mb-0">On orders over Rs. 5000</p>
            </div>
            <div class="col-6 col-md-3">
                <i class="bi bi-shield-check text-primary fs-3 mb-2 d-block"></i>
                <span class="small fw-bold">Secure Payment</span>
                <p class="text-muted extra-small mb-0">100% safe checkout</p>
            </div>
            <div class="col-6 col-md-3">
                <i class="bi bi-arrow-repeat text-primary fs-3 mb-2 d-block"></i>
                <span class="small fw-bold">Easy Returns</span>
                <p class="text-muted extra-small mb-0">7-day return policy</p>
            </div>
            <div class="col-6 col-md-3">
                <i class="bi bi-headset text-primary fs-3 mb-2 d-block"></i>
                <span class="small fw-bold">24/7 Support</span>
                <p class="text-muted extra-small mb-0">Direct line to help</p>
            </div>
        </div>
    </div>

    <!-- Features/Description Tabs -->
    <div class="mt-5 pt-4">
        <ul class="nav nav-pills gap-2 mb-4" id="productTab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active px-4 py-2 fw-bold" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button">Product Description</button>
            </li>
            @if($product->specifications->count() > 0)
            <li class="nav-item">
                <button class="nav-link px-4 py-2 fw-bold" id="spec-tab" data-bs-toggle="tab" data-bs-target="#spec" type="button">Technical Details</button>
            </li>
            @endif
        </ul>
        <div class="tab-content border-0">
            <div class="tab-pane fade show active" id="desc">
                <div class="card border-0 shadow-sm p-4 rounded-4">
                    {!! nl2br(e($product->description)) !!}
                </div>
            </div>
            <div class="tab-pane fade" id="spec">
                <div class="card border-0 shadow-sm p-4 rounded-4">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <tbody>
                                @foreach($product->specifications as $spec)
                                <tr>
                                    <th class="py-3 text-muted" style="width: 30%;">{{ $spec->header->name ?? 'Feature' }}</th>
                                    <td class="py-3 fw-semibold">{{ $spec->specification }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.main-image-container { transition: all 0.3s ease; }
.thumb-item { transition: all 0.2s ease; border: 2px solid transparent; border-radius: 8px; cursor: pointer; }
.thumb-item.active { border-color: var(--bs-primary); }
.thumb-item:hover { transform: scale(1.05); }
.color-selector.active { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.variant-selector.active { background-color: var(--bs-dark); color: #fff; border-color: var(--bs-dark); }
.btn-outline-secondary { border-color: #dee2e6; color: #444; }
.scroll-smooth { scroll-behavior: smooth; }
#thumbnailContainer::-webkit-scrollbar { display: none; }
</style>
@endsection

@section('scripts')
<script>
// Data from Backend
const variantStocks = @json($variantStocks);
const productTotalStock = {{ $product->available_qty }};

// State
let currentVariantId = null;
let currentColorId = null;
let autoScrollInterval = null;

document.addEventListener('DOMContentLoaded', () => {
    // 1. Auto-select first variant
    const firstVariant = document.querySelector('.variant-selector');
    if (firstVariant) selectVariant(firstVariant);

    startAutoScroll();
});

function startAutoScroll() {
    stopAutoScroll();
    autoScrollInterval = setInterval(() => {
        const container = document.getElementById('thumbnailContainer');
        const thumbs = Array.from(container.querySelectorAll('.thumb-item:not(.d-none)'));
        if (thumbs.length <= 1) return;

        const currentIdx = thumbs.findIndex(t => t.classList.contains('active'));
        const nextIdx = (currentIdx + 1) % thumbs.length;
        
        thumbs[nextIdx].click();
        
        // Ensure scroll into view
        thumbs[nextIdx].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }, 3000);
}

function stopAutoScroll() {
    if (autoScrollInterval) clearInterval(autoScrollInterval);
}

function selectThumbnail(url, el) {
    if (!el) return;
    
    document.getElementById('mainDisplayImage').src = url;
    document.querySelectorAll('.thumb-item').forEach(item => item.classList.remove('active'));
    el.classList.add('active');
}

// User Manual Interaction with Gallery
document.getElementById('thumbnailContainer').addEventListener('click', (e) => {
    // Only stop auto-scroll if it was a real user click (isTrusted)
    if (e.isTrusted) {
        stopAutoScroll();
    }
});

function selectVariant(btn) {
    if (!btn) return;
    document.querySelectorAll('.variant-selector').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    
    currentVariantId = btn.getAttribute('data-variant-id');
    document.getElementById('selectedVariantInput').value = currentVariantId;

    // Update Price
    const price = parseFloat(btn.getAttribute('data-price') || 0);
    const finalPrice = parseFloat(btn.getAttribute('data-final-price') || 0);
    const discount = parseFloat(btn.getAttribute('data-discount') || 0);
    
    document.getElementById('displayPrice').innerText = 'Rs. ' + finalPrice.toLocaleString(undefined, {minimumFractionDigits: 2});
    const priceBlock = document.getElementById('priceContainer').firstElementChild;
    
    if (discount > 0) {
        priceBlock.innerHTML = `
            <span class="text-primary fw-bold fs-1" id="displayPrice">Rs. ${finalPrice.toLocaleString()}</span>
            <span class="text-muted text-decoration-line-through fs-5" id="originalPrice">Rs. ${price.toLocaleString()}</span>
            <span class="badge bg-danger px-2" id="discountBadge">-${Math.round(discount)}%</span>`;
    } else {
        priceBlock.innerHTML = `<span class="text-primary fw-bold fs-1" id="displayPrice">Rs. ${finalPrice.toLocaleString()}</span>`;
    }

    updateStockAndSorting();
}

function selectColor(colorId, btn) {
    if (!btn) return;
    document.querySelectorAll('.color-selector').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    
    currentColorId = colorId;
    document.getElementById('selectedColorInput').value = colorId;

    // Filter Gallery
    const thumbnails = document.querySelectorAll('.thumb-item');
    let firstMatch = null;
    
    thumbnails.forEach(thumb => {
        const thumbColorId = thumb.getAttribute('data-color-id');
        if (thumbColorId == colorId || thumbColorId === 'default') {
            thumb.classList.remove('d-none');
            if (thumbColorId == colorId && !firstMatch) firstMatch = thumb;
        } else {
            thumb.classList.add('d-none');
        }
    });

    if (firstMatch) {
       selectThumbnail(firstMatch.querySelector('img').src, firstMatch);
       stopAutoScroll();
    }
    
    updateStockAndSorting();
}

function updateStockAndSorting() {
    let stock = 0;
    
    if (currentVariantId) {
        if (currentColorId) {
            stock = (variantStocks[currentVariantId] && variantStocks[currentVariantId][currentColorId]) ? variantStocks[currentVariantId][currentColorId] : 0;
        } else {
            const el = document.querySelector(`.variant-selector[data-variant-id="${currentVariantId}"]`);
            stock = el ? parseInt(el.getAttribute('data-stock') || 0) : 0;
        }
    } else {
        stock = productTotalStock;
    }

    const stockStatus = document.getElementById('stockStatus');
    const cartBtn = document.getElementById('cartBtn');
    const qtyInput = document.getElementById('qtyInput');

    if (stock > 0) {
        stockStatus.innerHTML = `<div class="text-success small fw-bold"><i class="bi bi-check-circle-fill me-2"></i>IN STOCK (${stock} UNITS)</div>`;
        cartBtn.disabled = false;
        cartBtn.classList.remove('btn-secondary');
        cartBtn.classList.add('btn-primary');
        cartBtn.innerText = 'ADD TO CART';
        qtyInput.max = stock;
    } else {
        stockStatus.innerHTML = `<div class="text-danger small fw-bold"><i class="bi bi-x-circle-fill me-2"></i>OUT OF STOCK</div>`;
        cartBtn.disabled = true;
        cartBtn.classList.remove('btn-primary');
        cartBtn.classList.add('btn-secondary');
        cartBtn.innerText = 'OUT OF STOCK';
        qtyInput.value = 1;
    }

    // Dynamic OOS Badges for Variants based on selected color
    document.querySelectorAll('.variant-selector').forEach(el => {
        const vId = el.getAttribute('data-variant-id');
        let isOos = false;
        if (currentColorId) {
            isOos = !(variantStocks[vId] && variantStocks[vId][currentColorId] > 0);
        } else {
            isOos = parseInt(el.getAttribute('data-stock') || 0) <= 0;
        }

        let badge = el.querySelector('.oos-badge');
        if (isOos) {
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'badge bg-danger ms-1 small oos-badge';
                badge.innerText = 'OOS';
                el.appendChild(badge);
            }
        } else if (badge) {
            badge.remove();
        }
    });

    // Dynamic OOS Badges for Colors based on selected variant
    document.querySelectorAll('.color-selector').forEach(el => {
        const cId = el.getAttribute('data-color-id');
        let isOos = false;
        if (currentVariantId) {
            isOos = !(variantStocks[currentVariantId] && variantStocks[currentVariantId][cId] > 0);
        }
        
        let badge = el.querySelector('.oos-badge');
        if (isOos) {
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'badge bg-danger ms-1 small oos-badge';
                badge.innerText = 'OOS';
                el.appendChild(badge);
            }
        } else if (badge) {
            badge.remove();
        }
    });

    sortElements('variantList', '.variant-selector', (el) => {
        const vId = el.getAttribute('data-variant-id');
        if (currentColorId) {
            return (variantStocks[vId] && variantStocks[vId][currentColorId] > 0) ? 1 : 0;
        }
        return parseInt(el.getAttribute('data-stock') || 0) > 0 ? 1 : 0;
    });

    sortElements('colorList', '.color-selector', (el) => {
        const cId = el.getAttribute('data-color-id');
        if (currentVariantId) {
            return (variantStocks[currentVariantId] && variantStocks[currentVariantId][cId] > 0) ? 1 : 0;
        }
        return 1;
    });
}

function sortElements(containerId, selector, weightFn) {
    const container = document.getElementById(containerId);
    const items = Array.from(container.querySelectorAll(selector));
    
    items.sort((a, b) => {
        const weightA = weightFn(a);
        const weightB = weightFn(b);
        return weightB - weightA; // Higher weight (in-stock) first
    });
    
    items.forEach(item => container.appendChild(item));
}

function updateQty(delta) {
    const input = document.getElementById('qtyInput');
    let val = parseInt(input.value) + delta;
    if (val < 1) val = 1;
    if (val > parseInt(input.max)) val = parseInt(input.max);
    input.value = val;
}

function validateProductSelection() {
    const colorSelectors = document.querySelectorAll('.color-selector');
    if (colorSelectors.length > 0 && !currentColorId) {
        alert('Please select a color before adding to cart.');
        return false;
    }
    return true;
}

function toggleWishlist() {
    // Basic UI Toggle, real logic handled by hidden form if needed
    const icon = document.getElementById('wishlistIcon');
    icon.classList.toggle('bi-heart');
    icon.classList.toggle('bi-heart-fill');
}
</script>
@endsection