@extends('layouts.app')

@section('content')
<div class="product-detail-container">
    <!-- Breadcrumbs -->
    <nav class="breadcrumb-nav" aria-label="breadcrumb">
        <a href="{{ route('shop.index') }}">Tienda</a>
        <span class="breadcrumb-separator">›</span>
        @if($product->category)
            <a href="{{ route('shop.index', ['category' => $product->category->slug]) }}">
                {{ $product->category->icon }} {{ $product->category->name }}
            </a>
            <span class="breadcrumb-separator">›</span>
        @endif
        <span class="breadcrumb-current">{{ $product->name }}</span>
    </nav>

    <div class="product-detail-layout">
        <!-- Columna Izquierda: Slider / Galería de Fotos -->
        <div class="product-gallery-section">
            @php 
                $allImages = $product->getAllImagesList();
            @endphp

            <div class="product-slider-wrapper glass">
                <!-- Main Image Stage -->
                <div class="product-main-image-container" id="mainImageContainer">
                    <img id="mainProductImage" src="{{ $allImages[0]['url'] }}" alt="{{ $product->name }}" class="product-main-image">
                    
                    @if(count($allImages) > 1)
                        <button type="button" class="slider-arrow slider-arrow-prev" onclick="prevSlide()" aria-label="Foto anterior">
                            ‹
                        </button>
                        <button type="button" class="slider-arrow slider-arrow-next" onclick="nextSlide()" aria-label="Siguiente foto">
                            ›
                        </button>
                        <div class="slider-counter" id="sliderCounter">
                            1 / {{ count($allImages) }}
                        </div>
                    @endif

                    @if($product->stock <= 0)
                        <span class="product-badge-stock" style="background-color: var(--color-error); top: 1rem; right: 1rem;">Agotado</span>
                    @elseif($product->stock <= 5)
                        <span class="product-badge-stock" style="background-color: var(--color-warning); top: 1rem; right: 1rem;">¡Últimas {{ $product->stock }} unidades!</span>
                    @endif
                </div>

                <!-- Thumbnails Strip -->
                @if(count($allImages) > 1)
                    <div class="product-thumbnails-strip" id="thumbnailsStrip">
                        @foreach($allImages as $idx => $img)
                            <div class="thumbnail-item {{ $idx === 0 ? 'active' : '' }}" onclick="goToSlide({{ $idx }})" data-index="{{ $idx }}">
                                <img src="{{ $img['url'] }}" alt="Miniatura {{ $idx + 1 }}">
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        <!-- Columna Derecha: Información del Producto y Acciones -->
        <div class="product-info-section glass">
            <!-- Categoría y SKU Header -->
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;">
                @if($product->category)
                    <a href="{{ route('shop.index', ['category' => $product->category->slug]) }}" class="category-badge">
                        {{ $product->category->icon }} {{ $product->category->name }}
                    </a>
                @else
                    <span class="category-badge" style="background: rgba(148, 163, 184, 0.15); color: var(--text-muted);">General</span>
                @endif

                <div class="sku-badge" title="Código Único de Producto">
                    <span style="opacity: 0.7; font-weight: normal;">SKU:</span> <strong>{{ $product->sku ?: 'EB-' . str_pad($product->id, 4, '0', STR_PAD_LEFT) }}</strong>
                </div>
            </div>

            <!-- Título y Precio -->
            <h1 class="product-detail-title">{{ $product->name }}</h1>
            
            <div class="product-detail-price-box">
                <span class="product-detail-price">${{ number_format($product->price, 2) }}</span>
                <span class="product-stock-status {{ $product->stock > 0 ? 'status-available' : 'status-out' }}">
                    @if($product->stock > 0)
                        ● En Stock ({{ $product->stock }} disponibles)
                    @else
                        ● Sin stock disponible
                    @endif
                </span>
            </div>

            <!-- Descripción -->
            <div class="product-detail-description">
                <h4 style="font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;">Descripción</h4>
                <p>{{ $product->description ?: 'Prenda confeccionada con los más altos estándares de calidad y diseño exclusivo para Evelyn Boutique.' }}</p>
            </div>

            <!-- Formulario de Compra / Añadir al Carrito -->
            @if($product->stock > 0)
                <form action="{{ route('cart.add', $product) }}" method="POST" style="margin-top: 1.5rem;">
                    @csrf
                    
                    <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem;">
                        <label for="quantity" style="font-weight: 600; font-size: 0.95rem; color: var(--text-secondary);">Cantidad:</label>
                        <div class="quantity-control">
                            <button type="button" class="quantity-btn" onclick="decrementQty()">-</button>
                            <input type="number" id="quantity" name="quantity" value="1" min="1" max="{{ $product->stock }}" class="quantity-input" readonly>
                            <button type="button" class="quantity-btn" onclick="incrementQty({{ $product->stock }})">+</button>
                        </div>
                    </div>

                    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
                        <button type="submit" class="btn btn-primary btn-lg" style="flex: 1; min-width: 200px; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                            <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                            Añadir al Carrito
                        </button>
                    </div>
                </form>
            @else
                <div style="margin-top: 1.5rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: var(--radius-sm); text-align: center;">
                    <p style="color: var(--color-error); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem;">Este producto se encuentra agotado temporalmente.</p>
                    <p style="color: var(--text-secondary); font-size: 0.85rem;">Puedes consultarnos vía WhatsApp para encargar una confección bajo pedido.</p>
                </div>
            @endif

            <!-- Botón Consultar por WhatsApp -->
            @php
                $waMessage = rawurlencode("Hola Evelyn Boutique, quisiera consultar sobre el producto: *" . $product->name . "* (SKU: *" . ($product->sku ?: 'EB-'.$product->id) . "*) - Precio: $" . number_format($product->price, 2) . " - " . url()->current());
                $waPhone = !empty($settings['social_whatsapp']) ? preg_replace('/[^0-9]/', '', $settings['social_whatsapp']) : '';
            @endphp

            @if($waPhone)
                <div style="margin-top: 1rem;">
                    <a href="https://wa.me/{{ $waPhone }}?text={{ $waMessage }}" target="_blank" class="btn btn-whatsapp" style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                        <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.513 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.455L0 24zm6.59-4.846c1.6.95 3.197 1.451 4.821 1.452 5.513 0 9.997-4.493 10.001-10.022.002-2.678-1.04-5.197-2.937-7.097-1.897-1.898-4.414-2.943-7.098-2.944-5.52 0-10.005 4.496-10.01 10.028-.002 2.043.535 4.037 1.553 5.795L1.03 21.14l4.792-1.25c1.688.921 3.513 1.408 5.4 1.408zm11.026-7.514c-.244-.122-1.45-.714-1.674-.796-.224-.082-.387-.122-.55.122-.163.245-.632.796-.775.959-.143.163-.285.183-.53.061-.244-.122-.962-.355-1.832-1.132-.678-.605-1.135-1.353-1.267-1.599-.133-.245-.014-.378.109-.5.11-.11.244-.285.367-.428.122-.143.163-.245.244-.408.082-.163.041-.306-.02-.428-.061-.122-.55-1.326-.753-1.816-.199-.48-.4-.414-.55-.422-.142-.008-.306-.01-.47-.01-.163 0-.428.061-.652.306-.224.245-.856.837-.856 2.041 0 1.204.877 2.367.999 2.53.122.163 1.725 2.634 4.179 3.692.583.252 1.038.403 1.393.516.586.186 1.12.16 1.54.097.469-.071 1.45-.592 1.653-1.163.204-.571.204-1.061.143-1.163-.061-.102-.224-.163-.468-.285z" />
                        </svg>
                        Consultar por WhatsApp
                    </a>
                </div>
            @endif

            <!-- Garantías / Beneficios -->
            <div class="product-features-list">
                <div class="feature-item">
                    <span class="feature-icon">✨</span>
                    <div>
                        <strong>Confección Exclusiva</strong>
                        <p>Diseños artesanales y finos detalles hechos con amor.</p>
                    </div>
                </div>
                <div class="feature-item">
                    <span class="feature-icon">📦</span>
                    <div>
                        <strong>Envíos Nacionales</strong>
                        <p>Despachos rápidos y seguros a todo el país.</p>
                    </div>
                </div>
                <div class="feature-item">
                    <span class="feature-icon">💬</span>
                    <div>
                        <strong>Asesoría Personalizada</strong>
                        <p>Atención directa para resolver cualquier duda sobre tallas.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Productos Relacionados -->
    @if(!$relatedProducts->isEmpty())
        <div class="related-products-section">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;">
                <h3 style="font-size: 1.5rem; font-weight: 800; color: var(--text-primary);">
                    También te podría encantar
                </h3>
                @if($product->category)
                    <a href="{{ route('shop.index', ['category' => $product->category->slug]) }}" style="color: var(--primary-color); font-weight: 600; font-size: 0.9rem; text-decoration: none;">
                        Ver más en {{ $product->category->name }} →
                    </a>
                @endif
            </div>

            <div class="catalog-grid">
                @include('shop.partials.product_cards', ['products' => $relatedProducts])
            </div>
        </div>
    @endif
</div>

<!-- Script para el Slider y Selector de Cantidad -->
<script>
    var imagesList = @json($allImages);
    var currentSlideIndex = 0;

    function updateSlide() {
        if (imagesList.length === 0) return;
        
        var mainImg = document.getElementById('mainProductImage');
        var counter = document.getElementById('sliderCounter');
        
        if (mainImg) {
            mainImg.style.opacity = '0.4';
            setTimeout(function() {
                mainImg.src = imagesList[currentSlideIndex].url;
                mainImg.style.opacity = '1';
            }, 150);
        }

        if (counter) {
            counter.textContent = (currentSlideIndex + 1) + ' / ' + imagesList.length;
        }

        // Update thumbnails active state
        var thumbs = document.querySelectorAll('.thumbnail-item');
        thumbs.forEach(function(thumb, idx) {
            if (idx === currentSlideIndex) {
                thumb.classList.add('active');
                thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
            } else {
                thumb.classList.remove('active');
            }
        });
    }

    function goToSlide(index) {
        if (index >= 0 && index < imagesList.length) {
            currentSlideIndex = index;
            updateSlide();
        }
    }

    function nextSlide() {
        currentSlideIndex = (currentSlideIndex + 1) % imagesList.length;
        updateSlide();
    }

    function prevSlide() {
        currentSlideIndex = (currentSlideIndex - 1 + imagesList.length) % imagesList.length;
        updateSlide();
    }

    // Cantidad Controls
    function incrementQty(maxStock) {
        var input = document.getElementById('quantity');
        var current = parseInt(input.value) || 1;
        if (current < maxStock) {
            input.value = current + 1;
        }
    }

    function decrementQty() {
        var input = document.getElementById('quantity');
        var current = parseInt(input.value) || 1;
        if (current > 1) {
            input.value = current - 1;
        }
    }

    // Touch / Swipe support for slider
    document.addEventListener('DOMContentLoaded', function() {
        var container = document.getElementById('mainImageContainer');
        if (!container) return;

        var startX = 0;
        var endX = 0;

        container.addEventListener('touchstart', function(e) {
            startX = e.changedTouches[0].screenX;
        }, { passive: true });

        container.addEventListener('touchend', function(e) {
            endX = e.changedTouches[0].screenX;
            if (startX - endX > 40) {
                nextSlide();
            } else if (endX - startX > 40) {
                prevSlide();
            }
        }, { passive: true });
    });
</script>
@endsection