@extends('frontend.main_master')

@php
    $primary = $product->images->firstWhere('is_primary', true) ?? $product->images->first();
    [$minPrice, $maxPrice] = $product->effectivePriceRange();

    $galleryImages = $product->images->count()
        ? collect([$primary])->merge($product->images->reject(fn ($img) => $primary && $img->id === $primary->id))->filter()->values()
        : collect();

    $galleryImagesForJs = $galleryImages->map(fn ($img) => [
        'src' => asset($img->path),
        'alt' => $product->name,
    ])->values();

    $axisLabels = ['size' => 'Talla', 'color' => 'Color'];
    $axes = [];
    foreach ($product->variants as $variant) {
        foreach ((array) $variant->options as $key => $value) {
            $axes[$key][$value] = $value;
        }
    }
@endphp

@section('body-class', 'store-page-shell')
@section('title', ($product->meta_title ?: $product->name) . ' | ' . t('site-title'))
@section('meta_description', $product->meta_description ?: \Illuminate\Support\Str::limit(strip_tags((string) $product->short_description), 155))

@push('schema')
<x-seo.schema-breadcrumb :items="[
    ['name' => 'Home', 'url' => route('index')],
    ['name' => 'Shop', 'url' => route('store.index')],
    ['name' => $product->name, 'url' => url()->current()],
]" />
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/store-page.css') }}">
@endpush

@section('content')
<div class="store-detail-page py-5">
    <div class="container">
        <nav class="mb-4" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('store.index') }}">Shop</a></li>
                @if ($product->category)
                    <li class="breadcrumb-item"><a href="{{ route('store.category', $product->category) }}">{{ $product->category->name }}</a></li>
                @endif
                <li class="breadcrumb-item active" aria-current="page">{{ $product->name }}</li>
            </ol>
        </nav>

        <div class="store-detail-panel">
            <div class="row g-5">
                <div class="col-lg-6">
                    <div class="store-gallery-main-wrap">
                        @if ($primary)
                            <img src="{{ asset($primary->path) }}" alt="{{ $product->name }}"
                                 class="store-product-gallery-main" id="mainProductImage"
                                 data-current-index="0" role="button" tabindex="0"
                                 aria-label="Haz clic para ampliar la imagen">
                            <span class="store-gallery-zoom-hint"><i class="fa-solid fa-magnifying-glass-plus"></i></span>
                        @else
                            <div class="store-product-gallery-main d-flex align-items-center justify-content-center bg-light text-muted">
                                Sin imagen
                            </div>
                        @endif
                    </div>

                    @if ($galleryImages->count() > 1)
                        <div class="store-product-thumbs">
                            @foreach ($galleryImages as $index => $image)
                                <img src="{{ asset($image->path) }}" alt="{{ $product->name }}"
                                     class="store-product-thumb {{ $loop->first ? 'active' : '' }}"
                                     data-thumb-index="{{ $index }}">
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-lg-6">
                    @if ($product->category)
                        <span class="product-category-badge mb-2 d-inline-block">{{ $product->category->name }}</span>
                    @endif

                    <h1 class="store-title" style="font-size:1.8rem;">{{ $product->name }}</h1>

                    @if (!$product->has_variants && $product->sku)
                        <div class="store-sku-line text-muted small mb-2">Código SKU: {{ $product->sku }}</div>
                    @endif

                    @if ($product->short_description)
                        <p class="text-muted">{{ $product->short_description }}</p>
                    @endif

                    <div class="product-card-price mb-3" id="productPriceDisplay" style="font-size:1.6rem;">
                        @if ($minPrice == $maxPrice)
                            {{ number_format($minPrice, 2, ',', '.') }} €
                        @else
                            {{ number_format($minPrice, 2, ',', '.') }} € – {{ number_format($maxPrice, 2, ',', '.') }} €
                        @endif
                    </div>

                    <form action="{{ route('cart.add') }}" method="POST" id="addToCartForm">
                        @csrf
                        <input type="hidden" name="type" value="store_product">
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="product_variant_id" id="selectedVariantId" value="{{ $product->has_variants ? '' : '' }}">

                        @if ($product->has_variants)
                            @foreach ($axes as $axisKey => $values)
                                <div class="mb-3">
                                    <label class="form-label fw-semibold d-block">{{ $axisLabels[$axisKey] ?? ucfirst($axisKey) }}</label>
                                    @foreach ($values as $value)
                                        <span class="store-variant-option" data-axis="{{ $axisKey }}" data-value="{{ $value }}">{{ $value }}</span>
                                    @endforeach
                                </div>
                            @endforeach

                            <div id="variantStatus" class="small text-muted mb-3">Por favor, selecciona una opción.</div>
                        @else
                            <div class="mb-3" id="variantStatus">
                                @if ($product->isInStock())
                                    <span class="text-success"><i class="fa-solid fa-check-circle"></i> En stock ({{ $product->stock }} unidades)</span>
                                @else
                                    <span class="text-danger"><i class="fa-solid fa-xmark-circle"></i> Agotado</span>
                                @endif
                            </div>
                        @endif

                        <div class="d-flex align-items-center gap-3 mb-3">
                            <label for="quantity" class="form-label mb-0 fw-semibold">Cantidad</label>
                            <div class="store-qty-stepper">
                                <button type="button" class="store-qty-btn" id="qtyDecreaseBtn" aria-label="Disminuir">−</button>
                                <input type="number" name="quantity" id="quantity" value="1" min="1">
                                <button type="button" class="store-qty-btn" id="qtyIncreaseBtn" aria-label="Aumentar">+</button>
                            </div>
                        </div>

                        <button type="submit" class="product-cta-btn" style="max-width:280px;" id="addToCartBtn" {{ $product->has_variants ? 'disabled' : ($product->isInStock() ? '' : 'disabled') }}>
                            <i class="fa-solid fa-cart-plus"></i> Añadir al Carrito
                        </button>
                    </form>

                    <div class="store-trust-badges">
                        <div class="store-trust-badge">
                            <i class="fa-solid fa-lock"></i>
                            <span>Pago 100% Seguro</span>
                        </div>
                        <a href="{{ route('legal.delivery') }}" class="store-trust-badge">
                            <i class="fa-solid fa-truck-fast"></i>
                            <span>Envío y Entrega</span>
                        </a>
                        <a href="{{ route('legal.refund') }}" class="store-trust-badge">
                            <i class="fa-solid fa-rotate-left"></i>
                            <span>Garantía de Devolución</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="store-detail-accordion mt-5 pt-4 border-top">
                <div class="accordion" id="storeDetailAccordion">
                    @if ($product->description)
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accDescription">
                                    <i class="fa-solid fa-file-lines me-2"></i> Descripción del Producto
                                </button>
                            </h2>
                            <div id="accDescription" class="accordion-collapse collapse show" data-bs-parent="#storeDetailAccordion">
                                <div class="accordion-body store-article-content">{!! $product->description !!}</div>
                            </div>
                        </div>
                    @endif

                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button {{ $product->description ? 'collapsed' : '' }}" type="button" data-bs-toggle="collapse" data-bs-target="#accShipping">
                                <i class="fa-solid fa-truck-fast me-2"></i> Información de Entrega
                            </button>
                        </h2>
                        <div id="accShipping" class="accordion-collapse collapse {{ !$product->description ? 'show' : '' }}" data-bs-parent="#storeDetailAccordion">
                            <div class="accordion-body">
                                Una vez confirmado el pedido, los productos digitales se activan de inmediato en tu cuenta. Para productos físicos, el paquete se prepara con esmero y se entrega a la empresa de mensajería con código de seguimiento.
                                Para más información, consulta nuestras
                                <a href="{{ route('legal.delivery') }}">Condiciones de Entrega</a>.
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accReturns">
                                <i class="fa-solid fa-rotate-left me-2"></i> Devoluciones y Cambios
                            </button>
                        </h2>
                        <div id="accReturns" class="accordion-collapse collapse" data-bs-parent="#storeDetailAccordion">
                            <div class="accordion-body">
                                Si no quedas plenamente satisfecho, puedes ejercer tu derecho de desistimiento conforme a la normativa aplicable. Para conocer los plazos y condiciones completas, consulta nuestra
                                <a href="{{ route('legal.refund') }}">Refund Policy</a>.
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accPayment">
                                <i class="fa-solid fa-lock me-2"></i> Pago Seguro
                            </button>
                        </h2>
                        <div id="accPayment" class="accordion-collapse collapse" data-bs-parent="#storeDetailAccordion">
                            <div class="accordion-body">
                                Tus transacciones se procesan a través de una conexión cifrada SSL de 256 bits compatible con autenticación 3D Secure. Los datos bancarios nunca se almacenan en nuestros servidores.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if ($relatedProducts->count() > 0)
            <section class="related-products mt-5 pt-4 border-top">
                <h2 class="h4 mb-4">Productos Relacionados</h2>
                <div class="row g-4">
                    @foreach ($relatedProducts as $related)
                        <div class="col-12 col-sm-6 col-lg-3">
                            @include('frontend.store.partials.product-card', ['product' => $related])
                        </div>
                    @endforeach
                </div>
            </section>
        @endif
    </div>
</div>

@if ($galleryImages->count() > 0)
<div class="modal fade store-lightbox-modal" id="storeLightboxModal" tabindex="-1" aria-hidden="true" aria-labelledby="storeLightboxLabel">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
        <div class="modal-content">
            <span id="storeLightboxLabel" class="visually-hidden">Galería de imágenes de {{ $product->name }}</span>
            <button type="button" class="store-lightbox-close" data-bs-dismiss="modal" aria-label="Close">
                <i class="fa-solid fa-xmark"></i>
            </button>

            @if ($galleryImages->count() > 1)
                <button type="button" class="store-lightbox-nav store-lightbox-prev" id="storeLightboxPrev" aria-label="Imagen anterior">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
            @endif

            <div class="store-lightbox-body">
                <img id="storeLightboxImage" src="" alt="{{ $product->name }}">
            </div>

            @if ($galleryImages->count() > 1)
                <button type="button" class="store-lightbox-nav store-lightbox-next" id="storeLightboxNext" aria-label="Siguiente imagen">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
                <div class="store-lightbox-counter" id="storeLightboxCounter"></div>
            @endif
        </div>
    </div>
</div>

@php
    $galleryImagesForJsJson = $galleryImagesForJs;
@endphp
<script>
(function () {
    const images = @json($galleryImagesForJsJson);
    const mainImage = document.getElementById('mainProductImage');
    const modalEl = document.getElementById('storeLightboxModal');
    const lightboxImage = document.getElementById('storeLightboxImage');
    const counterEl = document.getElementById('storeLightboxCounter');
    const prevBtn = document.getElementById('storeLightboxPrev');
    const nextBtn = document.getElementById('storeLightboxNext');

    let current = 0;
    let bsModal = null;

    function renderLightbox() {
        if (!images.length) return;
        lightboxImage.src = images[current].src;
        lightboxImage.alt = images[current].alt;
        if (counterEl) counterEl.textContent = (current + 1) + ' / ' + images.length;
    }

    function openLightboxAt(index) {
        current = ((index % images.length) + images.length) % images.length;
        renderLightbox();
        if (!bsModal) bsModal = new bootstrap.Modal(modalEl);
        bsModal.show();
    }

    function setMainImage(index) {
        if (!images[index]) return;
        mainImage.src = images[index].src;
        mainImage.setAttribute('data-current-index', String(index));
        document.querySelectorAll('.store-product-thumb').forEach(function (t) {
            t.classList.toggle('active', Number(t.dataset.thumbIndex) === index);
        });
    }

    if (mainImage) {
        mainImage.addEventListener('click', function () {
            openLightboxAt(Number(mainImage.getAttribute('data-current-index')) || 0);
        });
        mainImage.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                openLightboxAt(Number(mainImage.getAttribute('data-current-index')) || 0);
            }
        });
    }

    document.querySelectorAll('.store-product-thumb').forEach(function (thumb) {
        thumb.addEventListener('click', function () {
            setMainImage(Number(thumb.dataset.thumbIndex));
        });
    });

    if (prevBtn) prevBtn.addEventListener('click', function () { openLightboxAt(current - 1); });
    if (nextBtn) nextBtn.addEventListener('click', function () { openLightboxAt(current + 1); });

    document.addEventListener('keydown', function (e) {
        if (!modalEl.classList.contains('show')) return;
        if (e.key === 'ArrowLeft') openLightboxAt(current - 1);
        if (e.key === 'ArrowRight') openLightboxAt(current + 1);
    });
})();
</script>
@endif

<script>
(function () {
    const qtyInput = document.getElementById('quantity');
    const decBtn = document.getElementById('qtyDecreaseBtn');
    const incBtn = document.getElementById('qtyIncreaseBtn');

    if (decBtn && qtyInput) {
        decBtn.addEventListener('click', function () {
            const value = Math.max(1, (parseInt(qtyInput.value, 10) || 1) - 1);
            qtyInput.value = value;
        });
    }
    if (incBtn && qtyInput) {
        incBtn.addEventListener('click', function () {
            const value = (parseInt(qtyInput.value, 10) || 1) + 1;
            qtyInput.value = value;
        });
    }
})();
</script>

@if ($product->has_variants)
@php
    $variantsForJs = $product->variants->map(function ($v) {
        return [
            'id' => $v->id,
            'options' => (object) $v->options,
            'price' => $v->effectivePrice(),
            'stock' => $v->stock,
        ];
    })->values();
@endphp
<script>
(function () {
    const variants = @json($variantsForJs);

    const selected = {};
    const priceDisplay = document.getElementById('productPriceDisplay');
    const statusEl = document.getElementById('variantStatus');
    const hiddenInput = document.getElementById('selectedVariantId');
    const addBtn = document.getElementById('addToCartBtn');

    function findMatch() {
        return variants.find(function (v) {
            return Object.keys(v.options).every(function (key) {
                return selected[key] === v.options[key];
            }) && Object.keys(selected).length === Object.keys(v.options).length;
        });
    }

    function refresh() {
        const match = findMatch();
        if (!match) {
            statusEl.textContent = 'Por favor, selecciona una opción.';
            statusEl.className = 'small text-muted mb-3';
            hiddenInput.value = '';
            addBtn.disabled = true;
            return;
        }

        hiddenInput.value = match.id;
        priceDisplay.textContent = new Intl.NumberFormat('es-ES', { minimumFractionDigits: 2 }).format(match.price) + ' €';

        if (match.stock > 0) {
            statusEl.textContent = 'En stock (' + match.stock + ' unidades)';
            statusEl.className = 'small text-success mb-3';
            addBtn.disabled = false;
        } else {
            statusEl.textContent = 'Esta opción está agotada.';
            statusEl.className = 'small text-danger mb-3';
            addBtn.disabled = true;
        }
    }

    document.querySelectorAll('.store-variant-option').forEach(function (el) {
        el.addEventListener('click', function () {
            const axis = el.dataset.axis;
            document.querySelectorAll('.store-variant-option[data-axis="' + axis + '"]').forEach(function (sib) {
                sib.classList.remove('selected');
            });
            el.classList.add('selected');
            selected[axis] = el.dataset.value;
            refresh();
        });
    });
})();
</script>
@endif
@endsection