@extends('layouts.app')

@section('title', 'TemTechnik | ' . $product->getTranslation('name', app()->getLocale()) . ' - ' . __('general.page_title_product_detail'))

@section('content')
<div class="bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12">
            <div>
                <div class="relative w-full overflow-hidden rounded-lg bg-gray-200" style="max-width: 500px; margin: 0 auto;">
                    <img id="main-product-image"
                         src="{{ $product->mainImage ? asset('storage/' . $product->mainImage->image_path) : ($product->images->first() ? asset('storage/' . $product->images->first()->image_path) : 'https://via.placeholder.com/600') }}"
                         alt="{{ $product->name }}"
                         class="w-full h-auto object-contain object-center transition-transform duration-300 hover:scale-150" />
                    @if($product->images->count() > 1)
                        <button id="arrow-left" type="button"
                            class="absolute left-2 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-gray-700 rounded-full p-2 shadow focus:outline-none z-20">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <button id="arrow-right" type="button"
                            class="absolute right-2 top-1/2 -translate-y-1/2 bg-white/90 hover:bg-white text-gray-700 rounded-full p-2 shadow focus:outline-none z-20">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                    @endif
                </div>
                @if($product->images->count() > 1)
                <div class="flex gap-2 mt-4">
                    @foreach($product->images as $img)
                        <img src="{{ asset('storage/' . $img->image_path) }}" 
                             alt="{{ $product->name }} thumbnail" 
                             class="w-16 h-16 object-cover rounded border cursor-pointer thumbnail-image {{ $img->is_main ? 'ring-2 ring-indigo-500' : '' }}"
                             data-full="{{ asset('storage/' . $img->image_path) }}">
                    @endforeach
                </div>
                @endif
            </div>
            <div class="mt-8 md:mt-0">
                <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">{{ $product->getTranslation('name', app()->getLocale()) }}</h1>
                <div class="mt-4">
                    @php
                        $currency = session('currency', 'AZN');
                        $price = $product->getPriceInCurrency($currency);
                        $finalPrice = $product->getFinalPriceInCurrency($currency);
                        $symbol = $product->getCurrencySymbol($currency);
                    @endphp
                    <p class="text-3xl tracking-tight text-gray-900 dark:text-white">
                        @if($product->isDiscounted())
                            <span class="line-through text-gray-500">{{ $symbol }}{{ number_format($price, 2) }}</span>
                            <span class="text-red-600 font-bold">{{ $symbol }}{{ number_format($finalPrice, 2) }}</span>
                        @else
                            <span>{{ $symbol }}{{ number_format($price, 2) }}</span>
                        @endif
                    </p>
                </div>
                @if($product->category)
                <div class="mt-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">
                        {{ ucfirst(__('general.category')) }}: <a href="{{ route('products.index', ['category[]' => $product->category->slug, 'lang' => app()->getLocale()]) }}" class="font-medium text-indigo-600 hover:text-indigo-500">{{ $product->category ? $product->category->getTranslation('name', app()->getLocale()) : '' }}</a>
                    </span>
                </div>
                @endif
                <div class="mt-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ __('general.description') }}</h3>
                    <div class="space-y-6 text-base text-gray-700 dark:text-gray-300 mt-4">
                        @if($product->getTranslation('description', app()->getLocale()))
                            <p>{!! nl2br(e($product->getTranslation('description', app()->getLocale()))) !!}</p>
                        @else
                            <p class="text-gray-500 italic">{{ __('general.no_description') }}</p>
                        @endif
                    </div>
                </div>
                <div class="mt-6">
                    @if($product->inStock())
                        <p class="text-sm text-green-600 dark:text-green-400">
                            <svg class="inline-block h-5 w-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.052-.143z" clip-rule="evenodd" />
                            </svg>
                            {{ __('general.in_stock') }} ({{ $product->stock_quantity }} {{ __('general.available') }})
                        </p>
                    @else
                        <p class="text-sm text-red-600 dark:text-red-400">
                            <svg class="inline-block h-5 w-5 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                            </svg>
                            {{ __('general.out_of_stock') }}
                        </p>
                    @endif
                </div>
                @if($product->inStock())
                    <form id="add-to-cart-form" action="{{ route('cart.add') }}" method="POST" class="mt-10">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center">
                                <label for="quantity" class="sr-only">{{ __('quantity') }}</label>
                                <button type="button" class="decrement-qty px-2 py-1 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="Decrease quantity">-</button>
                                <input type="number" name="quantity" id="quantity" value="1" min="1" max="{{ $product->stock_quantity }}" class="w-20 rounded-md border border-gray-300 py-1.5 px-2 text-base leading-5 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white text-center cart-qty-input" autocomplete="off">
                                <button type="button" class="increment-qty px-2 py-1 rounded bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="Increase quantity">+</button>
                            </div>
                            <button type="submit" class="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full transform hover:scale-105 transition-all duration-200">{{ __('general.add_to_cart') }}</button>
                            @auth
                                @if(!Auth::user()->isAdmin())
                                    <button type="button"
                                        class="inline-flex items-center justify-center w-12 h-12 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 ml-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900 transition"
                                        x-data="{favourited: {{ optional(Auth::user()->favourites)->contains('product_id', $product->id) ? 'true' : 'false' }}, loading: false}"
                                        :class="favourited ? 'text-pink-500' : 'text-gray-400'"
                                        @click.prevent="
                                            if (loading) return;
                                            loading = true;
                                            fetch(favourited ? '{{ route('favourites.destroy') }}' : '{{ route('favourites.store') }}', {
                                                method: favourited ? 'DELETE' : 'POST',
                                                headers: {
                                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                                    'Content-Type': 'application/json',
                                                },
                                                body: JSON.stringify({ product_id: {{ $product->id }} })
                                            })
                                            .then(r => r.json())
                                            .then(data => {
                                                if(data.success) favourited = !favourited;
                                                if(typeof updateFavouritesCount === 'function') updateFavouritesCount();
                                            })
                                            .finally(() => loading = false);
                                        "
                                        title="{{ __('general.add_to_favourites') }}">
                                        <template x-if="!favourited">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-7 h-7">
                                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="currentColor" stroke-width="2" fill="none"/>
                                            </svg>
                                        </template>
                                        <template x-if="favourited">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-7 h-7">
                                                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                            </svg>
                                        </template>
                                    </button>
                                @endif
                            @endauth
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

@if($relatedProducts->count() > 0)
<div class="bg-gray-50 dark:bg-gray-800">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <h2 class="text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-20 leading-tight">{{ __('general.related_products') }}</h2>
        <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
            @foreach($relatedProducts as $relatedProduct)
                <x-product-card :product="$relatedProduct" />
            @endforeach
        </div>
    </div>
</div>
@endif

@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ url('/') }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ $product->category ? $product->category->getTranslation('name', app()->getLocale()) : 'Uncategorized' }}",
      "item": "{{ $product->category ? route('products.category', $product->category) : url('/') }}"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "{{ $product->getTranslation('name', app()->getLocale()) }}",
      "item": "{{ url()->current() }}"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ $product->getTranslation('name', app()->getLocale()) }}",
  "description": "{{ strip_tags($product->getTranslation('description', app()->getLocale())) }}",
  "sku": "{{ $product->sku ?? $product->id }}",
  "mpn": "{{ $product->sku ?? $product->id }}",
  "brand": {
    "@type": "Brand",
    "name": "{{ $product->vendor ? $product->vendor->name : 'Temtechnik' }}"
  },
  "category": "{{ $product->category ? $product->category->getTranslation('name', app()->getLocale()) : 'Technical Equipment' }}",
  "image": [
    "{{ $product->mainImage ? asset('storage/' . $product->mainImage->image_path) : ($product->images->first() ? asset('storage/' . $product->images->first()->image_path) : 'https://via.placeholder.com/600') }}"
  ],
  "additionalProperty": [
    {
      "@type": "PropertyValue",
      "name": "Stock Quantity",
      "value": "{{ $product->stock_quantity }}"
    }
    @if($product->weight)
    ,{
      "@type": "PropertyValue",
      "name": "Weight",
      "value": "{{ $product->weight }} kg"
    }
    @endif
    @if($product->dimensions)
    ,{
      "@type": "PropertyValue",
      "name": "Dimensions",
      "value": "{{ $product->dimensions }}"
    }
    @endif
  ],
  "offers": {
    "@type": "Offer",
    "priceCurrency": "AZN",
    "price": "{{ $product->getFinalPriceInCurrency('AZN') }}",
    "priceValidUntil": "{{ now()->addYear()->toISOString() }}",
    "availability": "{{ $product->inStock() ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
    "url": "{{ url()->current() }}",
    "seller": {
      "@type": "Organization",
      "name": "Temtechnik"
    }
    @if($product->isDiscounted())
    ,"highPrice": "{{ $product->getPriceInCurrency('AZN') }}",
    "lowPrice": "{{ $product->getFinalPriceInCurrency('AZN') }}"
    @endif
  }
  @if($product->tags->count() > 0)
  ,"keywords": "{{ $product->tags->pluck('name')->implode(', ') }}"
  @endif
}
</script>
<style>
/* ... existing styles ... */
/* Modal styles for zoom */
#zoom-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
}
#zoom-modal.active { display: flex; }
#zoom-modal .zoom-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
#zoom-modal img {
  width: 100%;
  height: 80vh;
  object-fit: contain;
  cursor: grab;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  background: white;
}
#zoom-modal .zoom-close {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
}
#zoom-modal .zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
}
#zoom-modal .zoom-nav.left { left: 10px; }
#zoom-modal .zoom-nav.right { right: 10px; }
</style>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@9.4.0/dist/panzoom.min.js"></script>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('add-to-cart-form');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            const button = form.querySelector('button[type="submit"]');
            const originalButtonText = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '{{ __("general.adding_to_cart") }}';
            const formData = new FormData(form);
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                }
            })
            .then(async response => {
                let data;
                try {
                    data = await response.json();
                } catch (err) {
                    throw { message: 'Unexpected server response.' };
                }
                if (!response.ok) {
                    throw data;
                }
                return data;
            })
            .then(data => {
                if (data.success) {
                    updateCartCount();
                    
                    const message = document.createElement('div');
                    message.textContent = '{{ __("general.added_to_cart") }}';
                    message.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 opacity-0 translate-y-[-20px]';
                    message.style.fontWeight = '600';
                    message.style.fontSize = '16px';
                    document.body.appendChild(message);
                    
                    setTimeout(() => {
                        message.classList.remove('opacity-0', 'translate-y-[-20px]');
                        message.classList.add('opacity-100', 'translate-y-0');
                    }, 10);
                    
                    setTimeout(() => {
                        message.classList.add('opacity-0', 'translate-y-[-20px]');
                        setTimeout(() => {
                            if (message.parentNode) {
                                message.parentNode.removeChild(message);
                            }
                        }, 300);
                    }, 2000);
                    
                    setTimeout(() => {
                        button.disabled = false;
                        button.innerHTML = originalButtonText;
                    }, 2000);
                } else {
                    button.disabled = false;
                    button.innerHTML = originalButtonText;
                    alert(data.message || 'An error occurred.');
                }
            })
            .catch(error => {
                button.disabled = false;
                button.innerHTML = originalButtonText;
                alert((error && error.message) || 'An error occurred while adding the item to the cart.');
            });
        });
    }
    if (!document.getElementById('zoom-modal')) {
        const modal = document.createElement('div');
        modal.id = 'zoom-modal';
        modal.innerHTML = `
          <div class="zoom-modal-content">
            <button class="zoom-close" title="Close">&times;</button>
            <button class="zoom-nav left" style="display:none;">&#8592;</button>
            <img src="" alt="Zoomed" id="zoom-modal-img" draggable="false" />
            <button class="zoom-nav right" style="display:none;">&#8594;</button>
          </div>
        `;
        document.body.appendChild(modal);
    }
    const modal = document.getElementById('zoom-modal');
    const modalImg = document.getElementById('zoom-modal-img');
    const closeBtn = modal.querySelector('.zoom-close');
    const leftBtn = modal.querySelector('.zoom-nav.left');
    const rightBtn = modal.querySelector('.zoom-nav.right');

    const thumbs = Array.from(document.querySelectorAll('.thumbnail-image'));
    const mainImg = document.getElementById('main-product-image');
    let images = thumbs.map(t => t.getAttribute('data-full'));
    if (!images.includes(mainImg.src)) images.unshift(mainImg.src);
    let currentIdx = 0;
    let panzoomInstance = null;

    function openModal(idx) {
        currentIdx = idx;
        modalImg.src = images[currentIdx];
        modal.classList.add('active');
        leftBtn.style.display = (images.length > 1 && currentIdx > 0) ? 'flex' : 'none';
        rightBtn.style.display = (images.length > 1 && currentIdx < images.length - 1) ? 'flex' : 'none';
        if (panzoomInstance) panzoomInstance.destroy();
        panzoomInstance = Panzoom(modalImg, {
            maxScale: 5,
            minScale: 1,
            contain: 'outside',
        });
        modalImg.parentElement.onwheel = null;
        modalImg.parentElement.addEventListener('wheel', panzoomInstance.zoomWithWheel);
    }
    function closeModal() {
        modal.classList.remove('active');
        if (panzoomInstance) panzoomInstance.destroy();
    }
    function showPrev() {
        if (currentIdx > 0) openModal(currentIdx - 1);
    }
    function showNext() {
        if (currentIdx < images.length - 1) openModal(currentIdx + 1);
    }
    mainImg.addEventListener('click', function() {
        openModal(images.indexOf(mainImg.src));
    });
    thumbs.forEach((thumb, idx) => {
        thumb.addEventListener('click', function(e) {
            if (!modal.classList.contains('active')) {
                setActive(idx);
            }
        });
        thumb.addEventListener('dblclick', function(e) {
            e.preventDefault();
            openModal(idx);
        });
    });
    closeBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', function(e) {
        if (e.target === modal) closeModal();
    });
    leftBtn.addEventListener('click', function(e) { e.stopPropagation(); showPrev(); });
    rightBtn.addEventListener('click', function(e) { e.stopPropagation(); showNext(); });
    document.addEventListener('keydown', function(e) {
        if (!modal.classList.contains('active')) return;
        if (e.key === 'Escape') closeModal();
        if (e.key === 'ArrowLeft') showPrev();
        if (e.key === 'ArrowRight') showNext();
    });
    const qtyInput = document.getElementById('quantity');
    const incBtn = document.querySelector('.increment-qty');
    const decBtn = document.querySelector('.decrement-qty');
    if (qtyInput && incBtn && decBtn) {
        incBtn.addEventListener('click', function() {
            let val = parseInt(qtyInput.value) || 1;
            const max = parseInt(qtyInput.getAttribute('max')) || 9999;
            if (val < max) {
                qtyInput.value = val + 1;
            }
        });
        decBtn.addEventListener('click', function() {
            let val = parseInt(qtyInput.value) || 1;
            if (val > 1) {
                qtyInput.value = val - 1;
            }
        });
        qtyInput.addEventListener('change', function() {
            let val = parseInt(qtyInput.value) || 1;
            const max = parseInt(qtyInput.getAttribute('max')) || 9999;
            if (val < 1) val = 1;
            if (val > max) val = max;
            qtyInput.value = val;
        });
    }

    const leftArrow = document.getElementById('arrow-left');
    const rightArrow = document.getElementById('arrow-right');
    let galleryIdx = 0;
    let galleryImages = thumbs.map(t => t.getAttribute('data-full'));
    if (!galleryImages.includes(mainImg.src)) galleryImages.unshift(mainImg.src);
    function setActive(idx) {
        galleryIdx = idx;
        mainImg.src = galleryImages[galleryIdx];
        thumbs.forEach((thumb, i) => {
            if (i === galleryIdx) {
                thumb.classList.add('ring-2', 'ring-indigo-500');
            } else {
                thumb.classList.remove('ring-2', 'ring-indigo-500');
            }
        });
    }
    if (leftArrow && rightArrow) {
        leftArrow.addEventListener('click', function(e) {
            e.preventDefault();
            if (galleryIdx > 0) {
                setActive(galleryIdx - 1);
            } else {
                setActive(galleryImages.length - 1);
            }
        });
        rightArrow.addEventListener('click', function(e) {
            e.preventDefault();
            if (galleryIdx < galleryImages.length - 1) {
                setActive(galleryIdx + 1);
            } else {
                setActive(0);
            }
        });
    }
    thumbs.forEach((thumb, idx) => {
        thumb.addEventListener('click', function(e) {
            if (!modal.classList.contains('active')) {
                setActive(idx);
            }
        });
        thumb.addEventListener('dblclick', function(e) {
            e.preventDefault();
            openModal(idx);
        });
    });
    setActive(0);
});
</script>
@endpush
@endsection