@extends('app')
@section('title', (app()->getLocale() === 'en' && $product->name_en ? $product->name_en : $product->name).' – Verve')

@push('styles')
<style>
    .product-3d {
        padding: 6rem 4rem;
        background: radial-gradient(ellipse at top, var(--secondary-gray) 0%, var(--primary-black) 100䢪);
        min-height: calc(100vh - 80px); /* Account for fixed header */
    }
    .product-3d-inner {
        transform-style: preserve-3d;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .product-3d-inner:hover {
        transform: rotateY(-6deg) rotateX(3deg) scale(1.03);
    }
    .product-img {
        width: 100%;
        max-width: 600px;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border-radius: 1.5rem;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
        filter: saturate(1.15);
    }
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
        margin-top: 1rem;
    }
    .gallery-thumb {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .gallery-thumb:hover {
        transform: scale(1.05);
        border-color: rgba(255, 255, 255, 0.5);
    }
    .gallery-thumb.active {
        border-color: var(--text-white);
        box-shadow: 0 6px 16px rgba(255, 255, 255, 0.4);
    }
    .product-glow {
        position: absolute;
        inset: 0;
        border-radius: 1.5rem;
        background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), transparent 70%);
        opacity: 0;
        transition: opacity 0.3s var(--transition);
        pointer-events: none;
    }
    .product-3d-inner:hover .product-glow {
        opacity: 0.5;
    }
    .product-card {
        background: var(--glass-bg);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        border: 1px solid var(--glass-border);
        border-radius: 1.5rem;
        padding: 2rem;
        box-shadow: var(--glass-shadow);
        position: relative;
        overflow: visible;
        z-index: 1;
    }
    .product-title {
        font-family: 'Poppins', sans-serif;
        font-size: clamp(2rem, 4.5vw, 3.5rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        background: linear-gradient(45deg, var(--text-white), #d1d1d1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 2;
        opacity: 1;
        transform: translateY(0);
    }
    .product-price {
        font-size: clamp(1.5rem, 3vw, 1.75rem);
        color: #ffffff !important;
        font-weight: 600;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        margin-top: 0.5rem;
        z-index: 2;
        opacity: 1;
        transform: translateY(0);
    }
    .product-desc {
        color: #ffffff !important;
        line-height: 1.7;
        font-size: clamp(1rem, 2vw, 1.125rem);
        margin-top: 1rem;
        z-index: 2;
        opacity: 1;
        transform: translateY(0);
    }
    .add-btn {
        background: linear-gradient(45deg, var(--text-white), #e0e0e0);
        color: var(--primary-black);
        font-weight: 600;
        padding: 0.875rem 1.5rem;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: 0 8px 16px -8px rgba(255, 255, 255, 0.5);
        width: 100%;
        z-index: 2;
        opacity: 1;
        transform: translateY(0);
    }
    .add-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -8px rgba(255, 255, 255, 0.7);
    }
    .add-btn:focus {
        outline: 2px solid var(--text-white);
        outline-offset: 2px;
    }
    .product-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 2rem;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .product-3d-inner {
        flex: 1;
        max-width: 600px;
    }
    .product-card {
        flex: 1;
        max-width: 600px;
    }
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: var(--glass-bg);
        color: var(--text-white);
        padding: 1rem 2rem;
        border-radius: 0.75rem;
        box-shadow: var(--glass-shadow);
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 3000;
    }
    .notification.show {
        opacity: 1;
        transform: translateY(0);
    }
    .remove-btn {
        background: #ff4757;
        color: var(--text-white);
        border: none;
        border-radius: 5px;
        padding: 0.5rem;
        cursor: pointer;
        transition: var(--transition);
    }
    .remove-btn:hover {
        background: #e63946;
        transform: scale(1.1);
    }
    
    .product-sections {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1.5rem;
    }
    .section-item {
        background: rgba(255, 255, 255, 0.03);
        padding: 1rem 1.25rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .section-title {
        font-family: 'Poppins', sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 0.5rem;
    }
    .section-content {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-white);
    }
    
    @media (max-width: 1023px) {
        .product-3d {
            padding: 3rem 1rem;
        }
        .product-container {
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }
        .product-3d-inner {
            max-width: 400px;
            width: 100%;
           
        }
        .product-card {
            width: 100%;
            max-width: 400px;
              
        
        }
    }
    @media (max-width: 640px) {
        .product-3d {
            padding: 2rem 0.5rem;
        }
        .product-card {
            padding: 1.5rem;
            border-radius: 1rem;
        }
        .product-img {
            border-radius: 1rem;
            max-width: 100%;
            object-position: center top;
        }
        .product-title {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
        }
        .product-price {
            font-size: clamp(1.25rem, 2.5vw, 1.5rem);
        }
        .product-desc {
            font-size: clamp(0.9rem, 1.8vw, 1rem);
        }
        .gallery-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
        }
    }
</style>
@endpush

@section('content')

@if(session('error'))
    <div style="position: fixed; top: 100px; right: 20px; z-index: 9999; background: rgba(220, 38, 38, 0.95); color: white; padding: 1rem 1.5rem; border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(10px);">
        {{ session('error') }}
    </div>
    <script>
        setTimeout(() => {
            document.querySelector('[style*="rgba(220, 38, 38"]')?.remove();
        }, 5000);
    </script>
@endif

<div class="product-3d">
    <div class="product-container">
        <!-- Product Image with 3D Hover -->
        <div class="product-3d-inner">
            <div class="relative">
                <img src="{{ asset('storage/' . $product->main_img) }}" alt="{{ app()->getLocale() === 'en' && $product->name_en ? $product->name_en : $product->name }}" class="product-img" id="mainProductImg" aria-describedby="product-desc-{{ $product->slug }}">
                <div class="product-glow"></div>
            </div>
        </div>

        <!-- Product Card -->
        <div class="product-card">
            <h1 class="product-title">{{ app()->getLocale() === 'en' && $product->name_en ? $product->name_en : $product->name }}</h1>
            <p class="product-price">
                {{ number_format($product->price/100, 2) }} PLN
                <span style="color: rgba(255,255,255,0.6); font-size: 0.9em; margin-left: 0.5rem;">(≈ {{ number_format(($product->price/100) / 4.3, 2) }} EUR)</span>
            </p>
            <p class="product-desc" id="product-desc-{{ $product->slug }}">{{ $product->getTranslatedDescription() }}</p>
            
            {{-- DEBUG --}}
            @if(config('app.debug'))
            <div style="background: rgba(255,0,0,0.2); padding: 0.5rem; margin: 0.5rem 0; font-size: 0.8rem; color: #ff9999;">
                <strong>DEBUG:</strong>
                <br>Slug: {{ $product->slug }}
                <br>Translation key: products.{{ $product->slug }}
                <br>Has value: {{ strlen($product->getTranslatedDescription()) > 0 ? 'YES' : 'NO' }}
                <br>Value length: {{ strlen($product->getTranslatedDescription()) }}
                <br>Raw: {{ __('products.' . $product->slug) }}
            </div>
            @endif
            
            @php
                $sections = is_array($product->description_sections) ? $product->description_sections : (is_string($product->description_sections) ? json_decode($product->description_sections, true) : []);
            @endphp
            
            @if($sections && count($sections) > 0)
                <div class="product-sections" style="margin-top: 1.5rem;">
                    @foreach($sections as $section)
                        <div class="section-item" style="margin-bottom: 1rem;">
                            <h3 class="section-title">{{ $section['title'] }}</h3>
                            <p class="section-content">{{ $section['content'] }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
            
            <form method="POST" action="{{ route('cart.add') }}" class="add-to-cart-form" style="margin-top: 1.5rem;">
                @csrf
                <input type="hidden" name="id" value="{{ $product->slug }}">
                <button class="add-btn"
                    data-id="{{ $product->id }}"
                    data-slug="{{ $product->slug }}"
                    data-name="{{ app()->getLocale() === 'en' && $product->name_en ? $product->name_en : $product->name }}"
                    data-price="{{ $product->price }}"
                    data-image="{{ $product->main_img }}">
                    {{ __('shop.add_to_cart') }}
                </button>
            </form>
            
            @php
                $gallery = is_array($product->gallery) ? $product->gallery : (is_string($product->gallery) ? json_decode($product->gallery, true) : []);
            @endphp
            
            @if($gallery && count($gallery) > 0)
                <div class="gallery-grid" style="margin-top: 2rem;">
                    <!-- Main image thumbnail -->
                    <img src="{{ asset('storage/' . $product->main_img) }}" 
                         alt="{{ $product->name }}" 
                         class="gallery-thumb active" 
                         data-img-src="{{ asset('storage/' . $product->main_img) }}">
                    
                    <!-- Gallery thumbnails -->
                    @foreach($gallery as $galleryImg)
                        <img src="{{ asset('storage/' . $galleryImg) }}" 
                             alt="{{ $product->name }}" 
                             class="gallery-thumb" 
                             data-img-src="{{ asset('storage/' . $galleryImg) }}">
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Gallery image switching with event delegation
    document.addEventListener('DOMContentLoaded', () => {
        // Gallery click handler
        document.querySelectorAll('.gallery-thumb').forEach(thumb => {
            thumb.addEventListener('click', function(e) {
                e.preventDefault();
                const newSrc = this.getAttribute('data-img-src');
                const mainImg = document.getElementById('mainProductImg');
                
                if (mainImg && newSrc) {
                    mainImg.src = newSrc;
                    
                    // Update active state
                    document.querySelectorAll('.gallery-thumb').forEach(t => {
                        t.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            });
        });

    // Ensure price and description are visible on load
        // Sync with global cart if it exists from js.js, else init from localStorage
        if (typeof window.cart !== 'undefined') {
            // Global cart Map already initialized by js.js
            window.CART = [...window.cart.values()];
        } else if (typeof window.CART === 'undefined' || !Array.isArray(window.CART)) {
            const raw = localStorage.getItem('verve-cart');
            window.CART = raw ? JSON.parse(raw) : [];
        }
        // Always normalize to single-qty
        unifyCart();
        
        const price = document.querySelector('.product-price');
        const desc = document.querySelector('.product-desc');
        const title = document.querySelector('.product-title');
        const btn = document.querySelector('.add-btn');
        if (price) {
            price.style.opacity = '1';
            price.style.transform = 'translateY(0)';
        }
        if (desc) {
            desc.style.opacity = '1';
            desc.style.transform = 'translateY(0)';
        }
        if (title) {
            title.style.opacity = '1';
            title.style.transform = 'translateY(0)';
        }
        if (btn) {
            btn.style.opacity = '1';
            btn.style.transform = 'translateY(0)';
        }

        // Add to cart handler
        document.querySelector('.add-to-cart-form').addEventListener('submit', e => {
            e.preventDefault();
            const keySlug = '{{ $product->slug }}';
            const keyId = {{ $product->id }};
            const name = '{{ app()->getLocale() === 'en' && $product->name_en ? $product->name_en : $product->name }}';
            const price = {{ $product->price }}; // CENA W CENTACH (groszach)
            const mainImg = '{{ asset('storage/'.$product->main_img) }}';
            // Find by slug OR numeric id OR legacy string id === slug
            const idx = CART.findIndex(p => (p.slug && p.slug === keySlug) || (p.id === keyId) || (p.id === keySlug));
            if (idx === -1) {
                CART.push({ id: keyId, slug: keySlug, name, price, qty: 1, mainImg });
                unifyCart();
                showNotif('Dodano do koszyka!', 'success');
            } else {
                // Only one piece available – show alert and do not increase qty
                showNotif('Dostępna jest tylko jedna sztuka tego produktu', 'warn');
            }
            localStorage.setItem('verve-cart', JSON.stringify(CART));
            updateCartDisplay();
            // Optionally submit to Laravel server
            // e.target.submit();
        });
    });

    function updateCartDisplay() {
        const cartCount = document.querySelector('.cart-count');
        const cartItems = document.querySelector('.cart-items');
        
        if (cartCount) {
            cartCount.textContent = CART.length;
        }
        
        if (cartItems) {
            cartItems.innerHTML = CART.map((item, idx) => `
                <div class="cart-item">
                    <img src="${item.mainImg || '/img/placeholder.jpg'}" alt="${item.name}" class="cart-item-image">
                    <div class="cart-item-details">
                        <h3 class="cart-item-name">${item.name}</h3>
                        <p class="cart-item-price">${(item.price / 100).toFixed(2)} PLN <span style="color: rgba(255,255,255,0.6); font-size: 0.85em;">(≈ ${((item.price / 100) / 4.3).toFixed(2)} EUR)</span></p>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn decrease" onclick="changeQty(${idx}, -1)">-</button>
                            <span class="quantity">${item.qty}</span>
                            <button class="quantity-btn increase" onclick="changeQty(${idx}, 1)">+</button>
                        </div>
                        <button class="remove-btn" onclick="removeItem(${idx})">{{ __('shop.remove') }}</button>
                    </div>
                </div>
            `).join('');
        }

        updateCartTotal();
    }

    function updateCartTotal() {
        const total = CART.reduce((sum, item) => sum + (item.price * item.qty), 0);
        const totalElement = document.querySelector('.cart-total-amount');
        if (totalElement) {
            totalElement.textContent = `${(total / 100).toFixed(2)} PLN (≈ ${((total / 100) / 4.3).toFixed(2)} EUR)`;
        }
    }

    function saveCartToLocalStorage() {
        localStorage.setItem('verve-cart', JSON.stringify(CART));
    }

    function unifyCart() {
        // Deduplicate by slug (preferred) or id, clamp qty=1
        const map = {};
        for (const it of (Array.isArray(CART) ? CART : [])) {
            const slug = it.slug || (typeof it.id === 'string' ? it.id : null);
            const idNum = typeof it.id === 'number' ? it.id : null;
            const key = slug || (idNum !== null ? String(idNum) : (it.name || Math.random().toString(36).slice(2)));
            if (!map[key]) {
                map[key] = {
                    id: idNum !== null ? idNum : (typeof it.id === 'number' ? it.id : null),
                    slug: slug,
                    name: it.name ?? '',
                    price: typeof it.price === 'number' ? it.price : parseFloat(it.price) || 0,
                    qty: 1,
                    mainImg: it.mainImg || it.img || null,
                };
            }
        }
        CART = Object.values(map);
        saveCartToLocalStorage();
    }

    window.changeQty = (idx, delta) => {
        // Enforce max quantity = 1
        if (delta > 0 && CART[idx].qty >= 1) {
            showNotif('Dostępna jest tylko jedna sztuka tego produktu', 'warn');
            return;
        }
        CART[idx].qty = 1; // clamp to 1 always
        saveCartToLocalStorage();
        updateCartDisplay();
    };

    window.removeItem = (idx) => {
        CART.splice(idx, 1);
        saveCartToLocalStorage();
        updateCartDisplay();
    };

    function openCart() {
        const sidebar = document.querySelector('.cart-sidebar');
        const overlay = document.querySelector('.cart-overlay');
        if (sidebar && overlay) {
            sidebar.classList.add('active');
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
    }

    function closeCart() {
        const sidebar = document.querySelector('.cart-sidebar');
        const overlay = document.querySelector('.cart-overlay');
        if (sidebar && overlay) {
            sidebar.classList.remove('active');
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }
    }

    function showNotif(message = 'Dodano do koszyka!', type = 'success') {
        const n = document.createElement('div');
        n.className = 'notification show';
        n.textContent = message;
        // basic styling variants
        if (type === 'warn') {
            n.style.background = 'rgba(255, 193, 7, 0.15)';
            n.style.borderColor = 'rgba(255, 193, 7, 0.35)';
            n.style.color = '#ffd166';
        } else if (type === 'error') {
            n.style.background = 'rgba(230, 57, 70, 0.15)';
            n.style.borderColor = 'rgba(230, 57, 70, 0.35)';
            n.style.color = '#e63946';
        }
        document.body.appendChild(n);
        setTimeout(() => n.remove(), 2500);
    }
</script>
@endpush