@extends('layouts.main')
@section('title')
    <title>{{ $formattedProduct['meta_title'] ?? $formattedProduct['product_title'] }} | Fit Sport Hub</title>
@endsection

@section('meta_description')
    <meta name="description" content="{{ $formattedProduct['meta_desc'] ?? \Illuminate\Support\Str::limit(strip_tags($formattedProduct['description'] ?? ''), 160) }}">
@endsection

@section('meta_keywords')
    <meta name="keywords" content="{{ $formattedProduct['meta_keywords'] ?? ($formattedProduct['product_title'] ?? '') }}">
@endsection

@section('og_image')
    <meta property="og:image" content="{{ $formattedProduct['og_image'] ?? $main_image }}">
@endsection

@push('meta')
    <meta property="og:type" content="product">
    <meta property="og:title" content="{{ $formattedProduct['og_title'] ?? ($formattedProduct['meta_title'] ?? $formattedProduct['product_title']) }}">
    <meta property="og:description" content="{{ $formattedProduct['og_desc'] ?? ($formattedProduct['meta_desc'] ?? \Illuminate\Support\Str::limit(strip_tags($formattedProduct['description'] ?? ''), 160)) }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="Fit Sport Hub">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $formattedProduct['og_title'] ?? ($formattedProduct['meta_title'] ?? $formattedProduct['product_title']) }}">
    <meta name="twitter:description" content="{{ $formattedProduct['og_desc'] ?? ($formattedProduct['meta_desc'] ?? \Illuminate\Support\Str::limit(strip_tags($formattedProduct['description'] ?? ''), 160)) }}">
    <meta name="twitter:image" content="{{ $formattedProduct['og_image'] ?? $main_image }}">
@endpush



@section('main-section')

<style>
    #variant-notification {
    padding: 0.5rem 1rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}
</style>
    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-slate-200">
            <div class="flex flex-col md:flex-row gap-8">
                
        <div class="flex-shrink-0 w-full md:w-1/2">
            <div class="relative zoom-container rounded-xl shadow-lg border border-slate-200 overflow-hidden mb-4">
                <!-- Main Product Image -->
                <img id="main-product-image" 
                    src="{{ $main_image }}" 
                    alt="{{ $product_title }}"
                    class="w-full h-auto zoom-image">
                
                @if ($sale_price > 0 && $price > $sale_price)
                    @php
                        $discount = (($price - $sale_price) / $price) * 100;
                    @endphp
                    <span class="discount-badge">{{ round($discount) }}% OFF</span>
                @endif
            </div>
            
            <!-- Thumbnail Gallery -->
            @if($has_multiple_images)
                <div class="flex gap-4 overflow-x-auto justify-center mt-4" id="thumbnail-gallery">
                    @foreach($gallery_images as $index => $image)
                        <img src="{{ $image }}" 
                            alt="Thumbnail"
                            class="thumbnail w-16 h-16 md:w-20 md:h-20 rounded-lg cursor-pointer border-2 {{ $index === 0 ? 'border-yellow-500' : 'border-transparent' }} hover:border-yellow-500 transition-colors object-cover"
                            data-image-src="{{ $image }}"
                            onclick="changeImage(this)">
                    @endforeach
                </div>
            @endif
        </div>

                

                <!-- Product Details -->
                <div class="flex-grow space-y-6">
                    <h1 class="text-4xl font-extrabold">{{ $product_title }}</h1>
                    
                    <!-- Price Display -->
                    <div class="flex items-center gap-4">
                        @if ($sale_price > 0)
                            <div class="flex flex-col">
                                <div class="text-3xl font-bold text-yellow-500">
                                    ₹<span id="display-price">{{ $sale_price }}</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="text-sm text-gray-500">M.R.P:</span>
                                    <span id="mrp-price" class="text-sm line-through text-gray-400">₹{{ $price }}</span>
                                    @php
                                        $discountPercent = round(100 - ($sale_price / $price) * 100);
                                    @endphp
                                    <span id="discount-percent" class="text-xs bg-red-100 text-red-600 px-1.5 py-0.5 rounded">
                                        {{ $discountPercent }}% OFF
                                    </span>
                                </div>
                            </div>
                        @else
                            <div class="flex flex-col">
                                <div class="text-3xl font-bold text-yellow-500">
                                    ₹<span id="display-price">{{ $price }}</span>
                                </div>
                                <div class="text-sm text-gray-500">
                                    Inclusive of all taxes
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Product Description -->
                    <h3 class="text-xl font-semibold mt-4">Product Description</h3>
                    <p class="text-blue-700">
                        {!! $description !!}
                    </p>

                    <!-- Variant Notification -->
                    <div id="variant-notification" class="hidden text-red-600 font-medium mb-4"></div>
                    <!-- Variant Selection -->
                    @if(!empty($attributes))
                        <div class="variant-selection space-y-4">
                            @foreach($attributes as $attribute)
                                <div class="attribute-group">

                                    <h4 class="font-medium text-lg capitalize">{{ str_replace('_', ' ', $attribute['name']) }}</h4>
                                    <div class="flex flex-wrap gap-2 mt-2">

                                        @foreach($attribute['options'] as $option)
                                            <button type="button"
                                                class="attribute-option px-4 py-2 border rounded-full hover:bg-gray-100 transition"
                                                data-attribute="{{ $attribute['name'] }}"
                                                data-value="{{ $option['value'] }}"
                                                onclick="selectAttribute(this, '{{ $attribute['name'] }}', '{{ $option['value'] }}')">

                                                {{ $option['value'] }}

                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <!-- Add to Cart Form -->

                <form action="{{ route('cart.store', ['product' => $id, 'variant' => '']) }}" 
                    method="POST" 
                    id="add-to-cart-form">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $id }}">
                    <input type="hidden" name="variant_id" id="variant-id" value="">
                    <input type="hidden" name="product_price" id="product-price" value="{{ $sale_price ?? $price }}">
                    <input type="hidden" name="user_email" value="{{ auth()->user() ? auth()->user()->email : '' }}">
                    
                    <button type="submit" id="add-to-cart-btn"
                        class="yellow-gradient w-full text-blue-900 font-bold text-lg py-4 px-12 rounded-full shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-105 shine-effect"
                        data-product-id="{{ $id }}"
                        data-product-price="{{ $sale_price ?? $price }}"
                        {{ $variants && count($variants) > 0 ? 'disabled' : '' }}>
                        Add to Cart
                    </button>
                </form>
                </div>
            </div>
        </div>
    </main>
@endsection


@section('extrascripts')
<script>
    // Current selected attributes and DOM elements
    let selectedAttributes = {};
    const variants = @json($variants);
    const mainImage = document.getElementById('main-product-image');
    const notification = document.getElementById('variant-notification');
    const addToCartBtn = document.getElementById('add-to-cart-btn');
    const priceDisplay = document.getElementById('display-price');
    const priceMrp = document.getElementById('mrp-price');
    const priceInput = document.getElementById('product-price');
    const variantIdInput = document.getElementById('variant-id');

    function updateFormAction(variantId = '') {
        const form = document.getElementById('add-to-cart-form');
        form.action = "{{ route('cart.store', ['product' => $id, 'variant' => '']) }}".replace('/variant/', '/variant/' + variantId);
    }

    function changeMainImage(newSrc, updateThumbnails = true) {
        mainImage.classList.add('opacity-50', 'transition-opacity', 'duration-300');
        const img = new Image();
        img.src = newSrc;
        img.onload = function() {
            mainImage.src = newSrc;
            mainImage.classList.remove('opacity-50');
            if (updateThumbnails) {
                document.querySelectorAll('.thumbnail').forEach(thumb => {
                    const isActive = thumb.getAttribute('data-image-src') === newSrc;
                    thumb.classList.toggle('border-yellow-500', isActive);
                    thumb.classList.toggle('border-transparent', !isActive);
                });
            }
        };
        img.onerror = function() {
            mainImage.classList.remove('opacity-50');
            console.error('Failed to load image:', newSrc);
        };
    }

    function changeImage(thumbnailElement) {
        const newSrc = thumbnailElement.getAttribute('data-image-src');
        changeMainImage(newSrc);
    }

    function selectAttribute(element, attributeName, attributeValue) {
        const options = document.querySelectorAll(`[data-attribute="${attributeName}"]`);
        
        if (selectedAttributes[attributeName] === attributeValue) {
            delete selectedAttributes[attributeName];
            element.classList.remove('bg-yellow-500', 'text-white');
            element.classList.add('border', 'hover:bg-gray-100');
        } else {
            selectedAttributes[attributeName] = attributeValue;
            options.forEach(opt => {
                opt.classList.remove('bg-yellow-500', 'text-white');
                opt.classList.add('border', 'hover:bg-gray-100');
            });
            element.classList.add('bg-yellow-500', 'text-white');
            element.classList.remove('border', 'hover:bg-gray-100');
        }
        
        findMatchingVariant();
    }

function findMatchingVariant() {
    const selectedCount = Object.keys(selectedAttributes).length;
    const discountElement = document.getElementById('discount-percent');
    
    if (selectedCount === 0) {
        // Base product case
        const basePrice = parseFloat("{{ $sale_price ?? $price }}");
        const baseMrp = parseFloat("{{ $mrp_price ?? $price }}");
        const discountPercent = Math.round(100 - (basePrice / baseMrp) * 100);
        
        priceDisplay.textContent = basePrice.toFixed(2);
        priceMrp.textContent = baseMrp.toFixed(2);
        discountElement.textContent = `${discountPercent}% OFF`;
        priceInput.value = basePrice.toFixed(2);
        variantIdInput.value = "";
        notification.textContent = "";
        notification.classList.add('hidden');
        
        addToCartBtn.disabled = false;
        changeMainImage("{{ $main_image }}");
        updateFormAction();
        return;
    }
    
    // Variant selection case
    const matchingVariant = variants.find(variant => {
        return Object.keys(selectedAttributes).every(key => {
            return variant.attributes[key] && variant.attributes[key].value === selectedAttributes[key];
        });
    });
    
    if (matchingVariant) {
        const variantPrice = parseFloat(matchingVariant.price);
        const variantMrp = parseFloat(matchingVariant.mrp_price);
        const discountPercent = Math.round(100 - (variantPrice / variantMrp) * 100);
        
        priceDisplay.textContent = variantPrice.toFixed(2);
        priceMrp.textContent = variantMrp.toFixed(2);
        discountElement.textContent = `${discountPercent}% OFF`;
        priceInput.value = variantPrice.toFixed(2);
        variantIdInput.value = matchingVariant.id;
        
        if (matchingVariant.image) {
            changeMainImage(matchingVariant.image, false);
        }
        
        if (matchingVariant.quantity <= 0) {
            notification.textContent = "This variant is out of stock";
            notification.classList.remove('hidden');
            addToCartBtn.disabled = true;
        } else {
            notification.textContent = "";
            notification.classList.add('hidden');
            addToCartBtn.disabled = false;
        }

        updateFormAction(matchingVariant.id);
    } else {
        const basePrice = parseFloat("{{ $sale_price ?? $price }}");
        const baseMrp = parseFloat("{{ $mrp_price ?? $price }}");
        const discountPercent = Math.round(100 - (basePrice / baseMrp) * 100);
        
        priceDisplay.textContent = basePrice.toFixed(2);
        priceMrp.textContent = baseMrp.toFixed(2);
        discountElement.textContent = `${discountPercent}% OFF`;
        priceInput.value = basePrice.toFixed(2);
        variantIdInput.value = "";
        notification.textContent = "This combination is not available";
        notification.classList.remove('hidden');
        addToCartBtn.disabled = true;
        updateFormAction();
    }
}

    // Initialize the page
    document.addEventListener('DOMContentLoaded', function() {
        const firstThumbnail = document.querySelector('.thumbnail');
        if (firstThumbnail) {
            firstThumbnail.classList.add('border-yellow-500');
            firstThumbnail.classList.remove('border-transparent');
        }
        
        // Initialize button state
        // Enable immediately if no variants exist
        // OR if variants exist but none are required
        addToCartBtn.disabled = false;
        
        updateFormAction(); 
    });
</script>
@endsection