@extends(theme_view('layouts.app'))

@php
    // Obtener SEO para la página de producto
    $seo = \App\Helpers\SeoHelper::getSeoForPage('product', [
        'product' => $product,
        'subcategory' => $product->subcategoria_correcta ?? null,
        'category' => $product->categoria ?? null
    ]);
@endphp

@section('title', $seo['title'])

@section('meta_description', $seo['description'])

@section('meta_keywords', $seo['keywords'])

{{-- Open Graph específico para productos --}}
@section('og_title', $product->name . ' | ' . getSiteName())
@section('og_description', Str::limit(strip_tags($product->DE_COMPLE ?? $product->ai_description ?? $product->name), 160))
@php
    $productImage = $product->stock_images->first();
    $ogImageUrl = $productImage
        ? asset('uploads/product/large/' . $productImage->image)
        : asset('uploads/logos/logo.png');
@endphp
@section('og_image', $ogImageUrl)
@section('og_type', 'product')

@section('content')
<div class="page-heading">
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
            <li class="home"> <a href="{{ route('front.home') }}" title="Ir al Inicio">Inicio</a> <span>&rsaquo; </span> </li>
            <li class="category1601"> <a href="{{ route('front.shop') }}" title="Tienda">Tienda</a> <span>&rsaquo; </span> </li>
            <li> <strong>{{ $product->name }}</strong> </li>
          </ul>
        </div>
        <!--col-xs-12--> 
      </div>
      <!--row--> 
    </div>
    <!--container--> 
  </div>
  <div class="page-title">
    <h2>{{ $product->name }}</h2>
  </div>
</div>
<!-- BEGIN Main Container -->
<div class="main-container col1-layout wow bounceInUp animated">
  <div class="main">
    <div class="col-main">
      <!-- Endif Next Previous Product -->
      <div class="product-view wow bounceInUp animated" itemscope="" itemtype="http://schema.org/Product" itemid="#product_base">
        <div id="messages_product_view"></div>
        <!--product-next-prev-->
        <div class="product-essential container">
          <div class="row">
            
            <form action="{{ route('front.addToCart') }}" method="post" id="product_addtocart_form">
              @csrf
              <input type="hidden" name="id" value="{{ $product->CO_ARTI }}">
              
              <!-- Product Images -->
              <div class="product-img-box col-lg-5 col-sm-5 col-xs-12">
                @if($product->NOVEDAD == 'S')
                  <div class="new-label new-top-left">New</div>
                @endif
                @if($product->VA_OFER1 == 'S' && $product->PS_OFER1 > 0)
                  @php
                    $discount = round((($product->IM_UNITA - $product->PS_OFER1) / $product->IM_UNITA) * 100);
                  @endphp
                  <div class="sale-label sale-top-left">-{{ $discount }}%</div>
                @endif
                
                <div class="product-image">
                  <div class="product-full">
                    @php
                      $firstImage = $product->stock_images()->first();
                      $mainImage = $firstImage ? asset('uploads/product/large/' . $firstImage->image) : asset('uploads/product/no_image.png');
                    @endphp
                    <img id="product-zoom" src="{{ $mainImage }}" data-zoom-image="{{ $mainImage }}" alt="{{ $product->name }}"/>
                  </div>
                  
                  @if($product->stock_images->count() > 0)
                  <div class="more-views">
                    <div class="slider-items-products">
                      <div id="gallery_01" class="product-flexslider hidden-buttons product-img-thumb">
                        <div class="slider-items slider-width-col4 block-content owl-carousel owl-theme">
                          @foreach($product->stock_images as $index => $image)
                          <div class="more-views-items">
                            <a href="#" data-image="{{ asset('uploads/product/large/' . $image->image) }}" data-zoom-image="{{ asset('uploads/product/large/' . $image->image) }}">
                              <img id="product-zoom{{ $index }}" src="{{ asset('uploads/product/small/' . $image->image) }}" alt="{{ $product->name }}">
                            </a>
                          </div>
                          @endforeach
                        </div>
                      </div>
                    </div>
                  </div>
                  @elseif(!$firstImage)
                  <!-- Si no hay imágenes, mostrar solo no_image.png -->
                  <div class="more-views">
                    <div class="slider-items-products">
                      <div id="gallery_01" class="product-flexslider hidden-buttons product-img-thumb">
                        <div class="slider-items slider-width-col4 block-content owl-carousel owl-theme">
                          <div class="more-views-items">
                            <a href="#" data-image="{{ asset('uploads/product/no_image.png') }}" data-zoom-image="{{ asset('uploads/product/no_image.png') }}">
                              <img id="product-zoom0" src="{{ asset('uploads/product/no_image.png') }}" alt="{{ $product->name }}">
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @endif
                </div>
                <!-- end: more-images --> 
              </div>
              
              <!-- Product Shop -->
              <div class="product-shop col-lg-7 col-sm-7 col-xs-12">
                <div class="product-next-prev">
                  @if($nextProduct)
                    @php
                      $nextSlug = Str::slug($nextProduct->DE_ARTI);
                    @endphp
                    <a class="product-next" href="{{ route('front.product', $nextSlug) }}" title="{{ $nextProduct->DE_ARTI }}"><span></span></a>
                  @endif
                  @if($prevProduct)
                    @php
                      $prevSlug = Str::slug($prevProduct->DE_ARTI);
                    @endphp
                    <a class="product-prev" href="{{ route('front.product', $prevSlug) }}" title="{{ $prevProduct->DE_ARTI }}"><span></span></a>
                  @endif
                </div>
                
                @if($product->CO_MARCA)
                <div class="brand">{{ $product->marca->DE_MARCA ?? $product->CO_MARCA }}</div>
                @endif
                
                <div class="product-name">
                  <h1>{{ $product->name }}</h1>
                </div>

                @if(reviewsEnabled())
                <div class="ratings">
                  <div class="rating-box">
                    <div style="width:{{ $avgRatingPer }}%" class="rating"></div>
                  </div>
                  <p class="rating-links">
                    <a href="#reviews">{{ $product->product_ratings_count }} Reseña(s)</a>
                    <span class="separator">|</span>
                    <a href="#review-form" id="add-review-link">Agregar tu Reseña</a>
                  </p>
                </div>
                @endif
                
                {{-- Breadcrumb de categoría/subcategoría --}}
                @if($product->categoria || $product->subcategoria)
                <p class="rating-links" style="margin-top: 10px;">
                  @php
                    $categorySlug = $product->categoria ? strtolower($product->categoria->CO_CATEGOR) : '';
                    $subcategorySlug = $product->subcategoria ? strtolower($product->subcategoria->CO_SUBCATE) : '';
                    $categoryName = $product->categoria ? formatMenuTitle($product->categoria->DE_CATEGOR) : '';
                    $subcategoryName = $product->subcategoria ? formatMenuTitle($product->subcategoria->DE_SUBCATE) : '';
                  @endphp
                  
                  @if($product->categoria && $product->subcategoria)
                    <a href="{{ route('front.shop', [$categorySlug, $subcategorySlug]) }}">
                      {{ $categoryName }}/{{ $subcategoryName }}
                    </a>
                  @elseif($product->categoria)
                    <a href="{{ route('front.shop', $categorySlug) }}">
                      {{ $categoryName }}
                    </a>
                  @endif
                </p>
                @endif
                
                <div class="price-block">
                  <div class="price-box">
                    <p class="availability @if($product->WW_STCK > 0) in-stock @else out-of-stock @endif">
                      <span>@if($product->WW_STCK > 0) En Stock @else Sin Stock @endif</span>
                    </p>
                    
                    @if($product->VA_OFER1 == 'S' && $product->PS_OFER1 > 0)
                      <p class="old-price">
                        <span class="price-label">Precio Regular:</span>
                        <span class="price">${{ number_format($product->IM_UNITA, 2) }}</span>
                      </p>
                      <p class="special-price">
                        <span class="price-label">Precio Especial</span>
                        <span id="product-price-48" class="price">${{ number_format($product->PS_OFER1, 2) }}</span>
                      </p>
                    @else
                      <p class="special-price">
                        <span id="product-price-48" class="price">${{ number_format($product->IM_UNITA, 2) }}</span>
                      </p>
                    @endif
                  </div>
                </div>
                
                <div class="add-to-box">
                  <div class="add-to-cart">
                    <div class="pull-left">
                      <div class="custom pull-left">
                        <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 0 ) result.value--;return false;" class="reduced items-count" type="button">
                          <i class="fa fa-minus">&nbsp;</i>
                        </button>
                        <input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="quantity">
                        <button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button">
                          <i class="fa fa-plus">&nbsp;</i>
                        </button>
                      </div>
                    </div>
                    @if($product->WW_STCK > 0)
                    <button type="button" class="button btn-cart" title="Agregar al Carrito" onclick="addToCart('{{ $product->CO_ARTI }}')">Agregar al Carrito</button>
                    @else
                    <button type="button" class="button btn-cart" disabled title="Sin Stock">Sin Stock</button>
                    @endif
                  </div>
                </div>
                
                <div class="short-description">
                  <p>{{ $product->DESCRIPCIO ?? 'Producto de alta calidad disponible en nuestro catálogo.' }}</p>
                  @if($product->CO_ARTI)
                  <p><strong>Código:</strong> {{ $product->CO_ARTI }}</p>
                  @endif
                  @if($product->CO_BARRAS)
                  <p><strong>Código de Barras:</strong> {{ $product->CO_BARRAS }}</p>
                  @endif
                </div>
                
                <div class="email-addto-box">
                  <ul class="add-to-links">
                    <li><a class="link-wishlist" href="javascript:void(0);" onclick="addToWishlist('{{ $product->CO_ARTI }}')"><span>Agregar a Favoritos</span></a></li>
                    @if(showCompareFeature())
                    <li><span class="separator">|</span> <a class="link-compare" href="javascript:void(0);" onclick="addToCompare('{{ $product->CO_ARTI }}')"><span>Comparar</span></a></li>
                    @endif
                  </ul>
                  {{-- Enviar a un Amigo - SIN FUNCIONALIDAD
                  <p class="email-friend"><a href="#" class=""><span>Enviar a un Amigo</span></a></p>
                  --}}
                </div>
                
                <div class="social">
                  <ul class="link">
                    @if($settings && !empty($settings->facebook_url))
                      <li class="fb"><a href="{{ $settings->facebook_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->twitter_url))
                      <li class="tw"><a href="{{ $settings->twitter_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->instagram_url))
                      <li class="googleplus"><a href="{{ $settings->instagram_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->tiktok_url))
                      <li class="rss"><a href="{{ $settings->tiktok_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->pinterest_url))
                      <li class="pintrest"><a href="{{ $settings->pinterest_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->linkedin_url))
                      <li class="linkedin"><a href="{{ $settings->linkedin_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif

                    @if($settings && !empty($settings->youtube_url))
                      <li class="youtube"><a href="{{ $settings->youtube_url }}" target="_blank" rel="noopener noreferrer"></a></li>
                    @endif
                  </ul>
                </div>

                {{-- Shipping Features - COMENTADO POR PEDIDO DEL CLIENTE
                <ul class="shipping-pro">
                  <li>Free Shipping</li>
                  <li>Free Return</li>
                  <li>Genuine Product</li>
                </ul>
                --}}
              </div>
            </form>
          </div>
        </div>
        
        <!-- Product Tabs -->
        <div class="product-collateral container">
          <div class="col-sm-12 wow bounceInUp animated">
            <ul id="product-detail-tab" class="nav nav-tabs product-tabs">
              <li class="active"> <a href="#product_tabs_description" data-toggle="tab"> Descripción del Producto </a> </li>
              <li><a href="#product_tabs_tags" data-toggle="tab">Etiquetas</a></li>
              @if(reviewsEnabled())
              <li> <a href="#reviews_tabs" data-toggle="tab">Reseñas</a> </li>
              @endif
              <li> <a href="#product_tabs_custom" data-toggle="tab">Información Adicional</a> </li>
            </ul>
            
            <div id="productTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="product_tabs_description">
                <div class="std">
                  <h2>Descripción del Producto</h2>

                  @if($product->ai_description)
                    {{-- Descripción web editada desde CodeIgniter --}}
                    {!! $product->ai_description !!}
                  @else
                    {{-- Fallback a campos del sistema de gestión --}}
                    <p>{{ $product->DE_ARTI_LARGA ?: $product->name }}</p>

                    @if($product->DESCRIPCIO)
                    <h3>Detalles</h3>
                    <p>{{ $product->DESCRIPCIO }}</p>
                    @endif

                    @if($product->OBSERVACIO)
                    <h3>Observaciones</h3>
                    <p>{{ $product->OBSERVACIO }}</p>
                    @endif
                  @endif
                </div>
              </div>
              
              <div class="tab-pane fade" id="product_tabs_tags">
                <div class="box-collateral box-tags">
                  <div class="tags">
                    <h3>Etiquetas del Producto</h3>
                    <ul class="tags-list">
                      @php
                        $tags = [];
                        
                        // Agregar marca como etiqueta
                        if($product->marca) {
                            $tags[] = $product->marca->DE_MARCA;
                        }
                        
                        // Agregar categoría como etiqueta
                        if($product->categoria) {
                            $tags[] = $product->categoria->DE_CATEGOR;
                        }
                        
                        // Agregar subcategoría como etiqueta
                        $subcategoria = $product->subcategoria_correcta;
                        if($subcategoria) {
                            $tags[] = $subcategoria->DE_SUBCATE;
                        }
                        
                        // Agregar código de producto
                        $tags[] = $product->CO_ARTI;
                        
                        // Agregar palabras clave del nombre del producto (opcional)
                        $palabras = explode(' ', $product->DE_ARTI);
                        foreach($palabras as $palabra) {
                            if(strlen($palabra) > 3 && !in_array($palabra, $tags)) {
                                $tags[] = $palabra;
                            }
                        }
                      @endphp
                      
                      @if(count($tags) > 0)
                        @foreach($tags as $tag)
                          <li class="tag-item">
                            <a href="{{ route('front.shop') }}?search={{ urlencode($tag) }}">
                              {{ $tag }}
                            </a>
                          </li>
                        @endforeach
                      @else
                        <li>No hay etiquetas disponibles para este producto.</li>
                      @endif
                    </ul>
                  </div>
                </div>
              </div>

              @if(reviewsEnabled())
              <div class="tab-pane fade" id="reviews_tabs">
                <div class="box-collateral box-reviews" id="customer-reviews">
                  <div class="box-reviews1">
                    <div class="form-add">
                      <form id="review-form" method="post" action="{{ route('front.saveRating', $product->CO_ARTI) }}">
                        @csrf
                        <h3>Escribe tu Reseña</h3>
                        <fieldset>
                          <h4>¿Cómo calificas este producto? <em class="required">*</em></h4>
                          <span id="input-message-box"></span>
                          <table id="product-review-table" class="data-table">
                            <thead>
                              <tr class="first last">
                                <th>&nbsp;</th>
                                <th><span class="nobr">1 *</span></th>
                                <th><span class="nobr">2 *</span></th>
                                <th><span class="nobr">3 *</span></th>
                                <th><span class="nobr">4 *</span></th>
                                <th><span class="nobr">5 *</span></th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr class="first odd">
                                <th>Calidad</th>
                                <td class="value"><input type="radio" class="radio" value="1" name="rating"></td>
                                <td class="value"><input type="radio" class="radio" value="2" name="rating"></td>
                                <td class="value"><input type="radio" class="radio" value="3" name="rating"></td>
                                <td class="value"><input type="radio" class="radio" value="4" name="rating"></td>
                                <td class="value last"><input type="radio" class="radio" value="5" name="rating"></td>
                              </tr>
                            </tbody>
                          </table>
                          
                          <div class="review1">
                            <ul class="form-list">
                              <li>
                                <label class="required" for="name_field">Nombre<em>*</em></label>
                                <div class="input-box">
                                  <input type="text" class="input-text required-entry" id="name_field" name="name">
                                </div>
                              </li>
                              <li>
                                <label class="required" for="email_field">Correo<em>*</em></label>
                                <div class="input-box">
                                  <input type="text" class="input-text required-entry validate-email" id="email_field" name="email">
                                </div>
                              </li>
                              <li>
                                <label class="required" for="review_field">Reseña<em>*</em></label>
                                <div class="input-box">
                                  <textarea class="required-entry" rows="3" cols="5" id="review_field" name="comment"></textarea>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </fieldset>
                        <div class="buttons-set">
                          <button class="button submit" type="submit"><span>Enviar Reseña</span></button>
                        </div>
                      </form>
                    </div>
                  </div>
                  
                  <div class="box-reviews2">
                    <h3>Reseñas de Clientes</h3>
                    <div class="box visible">
                      @if($product->product_ratings->count() > 0)
                        <ul>
                          @foreach($product->product_ratings as $rating)
                          <li>
                            <div class="review">
                              <h6><a href="#">{{ $rating->username }}</a></h6>
                              <small>{{ $rating->created_at->format('M d, Y') }}</small>
                              <div class="rating-box">
                                <div style="width:{{ ($rating->rating * 20) }}%" class="rating"></div>
                              </div>
                              <div class="review-txt">{{ $rating->comment }}</div>
                            </div>
                          </li>
                          @endforeach
                        </ul>
                      @else
                        <p>Aún no hay reseñas. ¡Sé el primero en reseñar este producto!</p>
                      @endif
                    </div>
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
              @endif

              <div class="tab-pane fade" id="product_tabs_custom">
                <div class="product-tabs-content-inner clearfix">
                  <h3>Información del Producto</h3>
                  <table class="table table-bordered">
                    <tbody>
                      @if($product->CO_ARTI)
                      <tr>
                        <th style="width: 30%;">SKU</th>
                        <td>{{ $product->CO_ARTI }}</td>
                      </tr>
                      @endif

                      @if($product->CO_MARCA && $product->marca)
                      <tr>
                        <th>Marca</th>
                        <td>{{ $product->marca->DE_MARCA }}</td>
                      </tr>
                      @endif

                      @if($product->WW_CATEGOR && $product->categoria)
                      <tr>
                        <th>Categoría</th>
                        <td>{{ $product->categoria->DE_CATEGOR }}</td>
                      </tr>
                      @endif

                      @php
                        $subcategoria = $product->subcategoria_correcta;
                      @endphp
                      @if($subcategoria)
                      <tr>
                        <th>Subcategoría</th>
                        <td>{{ $subcategoria->DE_SUBCATE }}</td>
                      </tr>
                      @endif

                      @if($product->CO_UNIDAD)
                      <tr>
                        <th>Unidad</th>
                        <td>{{ $product->CO_UNIDAD }}</td>
                      </tr>
                      @endif

                      @if($product->WW_STCK)
                      <tr>
                        <th>Disponibilidad</th>
                        <td>
                          @if($product->WW_STCK > 0)
                            <span class="text-success">✓ En Stock</span>
                          @else
                            <span class="text-danger">Sin Stock</span>
                          @endif
                        </td>
                      </tr>
                      @endif
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Box Additional -->
          <div class="box-additional">
            <!-- BEGIN RELATED PRODUCTS -->
            @if(count($relatedProducts) > 0)
            <div class="related-pro container">
              <div class="slider-items-products">
                <div class="new_title center">
                  <h2>Productos Relacionados</h2>
                </div>
                <div id="related-slider" class="product-flexslider hidden-buttons">
                  <div class="slider-items slider-width-col4 products-grid owl-carousel owl-theme">
                    @foreach($relatedProducts as $related)
                      @php
                        $relatedSlug = Str::slug($related->DE_ARTI);
                        $relatedImage = $related->stock_images()->first();
                      @endphp
                    <div class="item">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info">
                            <a href="{{ route('front.product', $relatedSlug) }}" title="{{ $related->name }}" class="product-image">
                              @if($relatedImage)
                                <img src="{{ asset('uploads/product/small/' . $relatedImage->image) }}" alt="{{ $related->name }}">
                              @else
                                <img src="{{ asset('uploads/product/no_image.png') }}" alt="{{ $related->name }}">
                              @endif
                            </a>
                            @if($related->NOVEDAD == 'S')
                            <div class="new-label new-top-left">New</div>
                            @endif
                            @if($related->VA_OFER1 == 'S')
                            <div class="sale-label sale-top-right">Sale</div>
                            @endif
                            <div class="item-box-hover">
                              <div class="box-inner">
                                <div class="product-detail-bnt"><a href="#" class="button detail-bnt" onclick="quickView('{{ $related->CO_ARTI }}'); return false;"><span>Vista Rápida</span></a></div>
                                <div class="actions"><span class="add-to-links"><a href="javascript:void(0);" onclick="addToWishlist('{{ $related->CO_ARTI }}')" class="link-wishlist" title="Agregar a Favoritos"><span>Agregar a Favoritos</span></a> @if(showCompareFeature())<a href="javascript:void(0);" onclick="addToCompare('{{ $related->CO_ARTI }}')" class="link-compare add_to_compare" title="Comparar"><span>Comparar</span></a>@endif</span> </div>
                              </div>
                            </div>
                          </div>
                          <div class="add_cart">
                            <button class="button btn-cart" type="button" onclick="addToCart('{{ $related->CO_ARTI }}')"><span>Agregar al Carrito</span></button>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title">
                              <a href="{{ route('front.product', $relatedSlug) }}" title="{{ $related->name }}" style="display: block;">
                                <div style="min-height: 45px; line-height: 1.3;">
                                  {{ $related->name }}
                                </div>
                                <span style="color: #f75215; font-size: 12px">SKU: {{ $related->CO_ARTI }}</span>
                                @if($related->WW_STCK > 0)
                                  <p class="availability in-stock"><span>En Stock</span></p>
                                @else
                                  <p class="availability out-stock"><span>No hay Stock</span></p>
                                @endif
                              </a>
                            </div>

                            {{-- Breadcrumb de categoría --}}
                            @if($related->categoria)
                              <p class="product-breadcrumb text-muted" style="font-size: 11px; margin: 5px 0;">
                                {{ $related->categoria->DE_CATEGOR }}
                              </p>
                            @endif

                            <div class="item-content">
                              @if(reviewsEnabled())
                              @php
                                $avgRatingPer = 0;
                                if ($related->product_ratings_count > 0) {
                                    $avgRating = $related->product_ratings_sum_rating / $related->product_ratings_count;
                                    $avgRatingPer = ($avgRating * 100) / 5;
                                }
                              @endphp
                              <div class="rating">
                                <div class="ratings">
                                  <div class="rating-box">
                                    <div class="rating" style="width:{{ $avgRatingPer }}%"></div>
                                  </div>
                                  <p class="rating-links">
                                    <a href="{{ route('front.product', $related->CO_ARTI) }}#reviews">
                                      {{ $related->product_ratings_count }} Reseña(s)
                                    </a>
                                  </p>
                                </div>
                              </div>
                              @endif
                              <div class="item-price">
                                <div class="price-box">
                                  @if($related->VA_OFER1 == 'S' && $related->PS_OFER1 > 0)
                                    <p class="old-price"><span class="price">${{ number_format($related->IM_UNITA, 2) }}</span></p>
                                    <p class="special-price"><span class="price">${{ number_format($related->PS_OFER1, 2) }}</span></p>
                                  @else
                                    <span class="regular-price"><span class="price">${{ number_format($related->IM_UNITA, 2) }}</span></span>
                                  @endif
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endforeach
                  </div>
                </div>
              </div>
            </div>
            @else
            <!-- Si no hay productos relacionados, mostrar productos de la misma categoría -->
            @php
              $categoryProducts = \App\Models\Stock::where('WW_CATEGOR', $product->WW_CATEGOR)
                                ->where('CO_ARTI', '!=', $product->CO_ARTI)
                                ->where('WEB_VTA', 'S')
                                ->where('BORRADO', 'N')
                                ->orderByRaw('CASE WHEN WW_STCK > 0 THEN 0 ELSE 1 END')
                                ->withCount('product_ratings')
                                ->withSum('product_ratings', 'rating')
                                ->with('stock_images')
                                ->with('categoria')
                                ->limit(8)
                                ->get();
            @endphp
            @if($categoryProducts->count() > 0)
            <div class="related-pro container">
              <div class="slider-items-products">
                <div class="new_title center">
                  <h2>Productos Relacionados</h2>
                </div>
                <div id="related-slider" class="product-flexslider hidden-buttons">
                  <div class="slider-items slider-width-col4 products-grid owl-carousel owl-theme">
                    @foreach($categoryProducts as $related)
                      @php
                        $relatedSlug = Str::slug($related->DE_ARTI);
                        $relatedImage = $related->stock_images()->first();
                      @endphp
                    <div class="item">
                      <div class="item-inner">
                        <div class="item-img">
                          <div class="item-img-info">
                            <a href="{{ route('front.product', $relatedSlug) }}" title="{{ $related->name }}" class="product-image">
                              @if($relatedImage)
                                <img src="{{ asset('uploads/product/small/' . $relatedImage->image) }}" alt="{{ $related->name }}">
                              @else
                                <img src="{{ asset('uploads/product/no_image.png') }}" alt="{{ $related->name }}">
                              @endif
                            </a>
                            @if($related->NOVEDAD == 'S')
                            <div class="new-label new-top-left">New</div>
                            @endif
                            @if($related->VA_OFER1 == 'S')
                            <div class="sale-label sale-top-right">Sale</div>
                            @endif
                            <div class="item-box-hover">
                              <div class="box-inner">
                                <div class="product-detail-bnt"><a href="#" class="button detail-bnt" onclick="quickView('{{ $related->CO_ARTI }}'); return false;"><span>Vista Rápida</span></a></div>
                                <div class="actions"><span class="add-to-links"><a href="javascript:void(0);" onclick="addToWishlist('{{ $related->CO_ARTI }}')" class="link-wishlist" title="Agregar a Favoritos"><span>Agregar a Favoritos</span></a> @if(showCompareFeature())<a href="javascript:void(0);" onclick="addToCompare('{{ $related->CO_ARTI }}')" class="link-compare add_to_compare" title="Comparar"><span>Comparar</span></a>@endif</span> </div>
                              </div>
                            </div>
                          </div>
                          <div class="add_cart">
                            <button class="button btn-cart" type="button" onclick="addToCart('{{ $related->CO_ARTI }}')"><span>Agregar al Carrito</span></button>
                          </div>
                        </div>
                        <div class="item-info">
                          <div class="info-inner">
                            <div class="item-title">
                              <a href="{{ route('front.product', $relatedSlug) }}" title="{{ $related->name }}" style="display: block;">
                                <div style="min-height: 45px; line-height: 1.3;">
                                  {{ $related->name }}
                                </div>
                                <span style="color: #f75215; font-size: 12px">SKU: {{ $related->CO_ARTI }}</span>
                                @if($related->WW_STCK > 0)
                                  <p class="availability in-stock"><span>En Stock</span></p>
                                @else
                                  <p class="availability out-stock"><span>No hay Stock</span></p>
                                @endif
                              </a>
                            </div>

                            {{-- Breadcrumb de categoría --}}
                            @if($related->categoria)
                              <p class="product-breadcrumb text-muted" style="font-size: 11px; margin: 5px 0;">
                                {{ $related->categoria->DE_CATEGOR }}
                              </p>
                            @endif

                            <div class="item-content">
                              @if(reviewsEnabled())
                              @php
                                $avgRatingPer = 0;
                                if ($related->product_ratings_count > 0) {
                                    $avgRating = $related->product_ratings_sum_rating / $related->product_ratings_count;
                                    $avgRatingPer = ($avgRating * 100) / 5;
                                }
                              @endphp
                              <div class="rating">
                                <div class="ratings">
                                  <div class="rating-box">
                                    <div class="rating" style="width:{{ $avgRatingPer }}%"></div>
                                  </div>
                                  <p class="rating-links">
                                    <a href="{{ route('front.product', $related->CO_ARTI) }}#reviews">
                                      {{ $related->product_ratings_count }} Reseña(s)
                                    </a>
                                  </p>
                                </div>
                              </div>
                              @endif
                              <div class="item-price">
                                <div class="price-box">
                                  @if($related->VA_OFER1 == 'S' && $related->PS_OFER1 > 0)
                                    <p class="old-price"><span class="price">${{ number_format($related->IM_UNITA, 2) }}</span></p>
                                    <p class="special-price"><span class="price">${{ number_format($related->PS_OFER1, 2) }}</span></p>
                                  @else
                                    <span class="regular-price"><span class="price">${{ number_format($related->IM_UNITA, 2) }}</span></span>
                                  @endif
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endforeach
                  </div>
                </div>
              </div>
            </div>
            @endif
            @endif
            <!-- end related product -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script>
// Product image zoom and gallery
jQuery(document).ready(function($) {
    // Inicializar carousel de galería de imágenes
    if ($('#gallery_01 .owl-carousel').length) {
        $('#gallery_01 .owl-carousel').owlCarousel({
            items: 5,
            itemsDesktop: [1199, 4],
            itemsDesktopSmall: [991, 3],
            itemsTablet: [767, 3],
            itemsMobile: [480, 2],
            navigation: true,
            navigationText: ['<a class="flex-prev"></a>', '<a class="flex-next"></a>'],
            slideSpeed: 500,
            pagination: false,
            autoPlay: false
        });
    }
    
    // Product zoom
    $("#product-zoom").elevateZoom({
        gallery: 'gallery_01',
        cursor: 'pointer',
        galleryActiveClass: 'active',
        imageCrossfade: true,
        scrollZoom: true,
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
    });
    
    // Gallery thumbnails click handler
    $(document).on("click", "#gallery_01 .more-views-items a", function(e) {
        e.preventDefault();
        var newImage = $(this).data("image");
        var newZoom = $(this).data("zoom-image");
        
        // Cambiar imagen principal
        $("#product-zoom").attr("src", newImage);
        $("#product-zoom").data("zoom-image", newZoom);
        
        // Actualizar zoom
        var ez = $('#product-zoom').data('elevateZoom');
        if(ez) {
            ez.swaptheimage(newImage, newZoom);
        }
        
        // Marcar thumbnail como activo
        $("#gallery_01 .more-views-items a").removeClass("active");
        $(this).addClass("active");
    });
    
    // Review form submission
    $("#review-form").on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function(response) {
                if(response.status) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    var errors = response.errors;
                    var errorMessage = '';
                    $.each(errors, function(key, value) {
                        errorMessage += value[0] + '<br>';
                    });
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: errorMessage
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Hubo un problema al enviar su reseña. Por favor, intente nuevamente.'
                });
            }
        });
    });
    
    // Add to cart form submission
    $("#product_addtocart_form").on("submit", function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(),
            success: function(response) {
                if(response.status) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Producto agregado',
                        text: 'El producto se agregó al carrito exitosamente',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error al agregar el producto'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Hubo un problema al agregar el producto. Por favor, intente nuevamente.'
                });
            }
        });
    });
    
    // Inicializar carousel de productos relacionados
    if ($('#related-slider .owl-carousel').length) {
        $('#related-slider .owl-carousel').owlCarousel({
            items: 4,
            itemsDesktop: [1199, 4],
            itemsDesktopSmall: [991, 3],
            itemsTablet: [767, 2],
            itemsMobile: [480, 1],
            navigation: true,
            navigationText: ['<a class="flex-prev"></a>', '<a class="flex-next"></a>'],
            slideSpeed: 500,
            pagination: false,
            autoPlay: false
        });
    }
    
    // La función addToCart ahora está definida globalmente en el layout
});

// Las funciones addToWishlist y addToCompare ya están globales en el layout
// Solo mantenemos código específico de la página del producto
/*
function addToWishlist(codigo) {
    jQuery.ajax({
        url: '{{ route("front.addToWishlist") }}',
        type: 'POST',
        data: {
            codigo: codigo,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });
            
            if(response.status) {
                Toast.fire({
                    icon: 'success',
                    title: response.message
                });
                
                // Actualizar contador si existe
                if(response.wishlistCount) {
                    jQuery('#wishlist-count').text(response.wishlistCount);
                }
            } else {
                Toast.fire({
                    icon: response.status === false && response.message.includes('iniciar sesión') ? 'warning' : 'error',
                    title: response.message
                });
                
                if(response.message && response.message.includes('iniciar sesión')) {
                    setTimeout(function() {
                        window.location.href = '{{ route("account.login") }}';
                    }, 2000);
                }
            }
        },
        error: function() {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            
            Toast.fire({
                icon: 'error',
                title: 'Error al procesar la solicitud'
            });
        }
    });
}

// Función para agregar a comparación
function addToCompare(codigo) {
    jQuery.ajax({
        url: '{{ route("front.addToCompare") }}',
        type: 'POST',
        data: {
            codigo: codigo,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });
            
            if(response.status) {
                Toast.fire({
                    icon: 'success',
                    title: response.message || 'Producto agregado a comparación'
                });
                
                // Actualizar contador si existe
                if(response.compareCount) {
                    jQuery('#compare-count').text(response.compareCount);
                }
                
                // Si ya tiene 4 productos, mostrar botón para comparar
                if(response.compareCount >= 2) {
                    setTimeout(function() {
                        Swal.fire({
                            title: 'Productos listos para comparar',
                            text: 'Ya tienes ' + response.compareCount + ' productos en tu lista de comparación',
                            icon: 'info',
                            showCancelButton: true,
                            confirmButtonColor: '#28a745',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Ver Comparación',
                            cancelButtonText: 'Continuar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = '{{ route("front.compare") }}';
                            }
                        });
                    }, 500);
                }
            } else {
                Toast.fire({
                    icon: 'warning',
                    title: response.message
                });
            }
        },
        error: function() {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true
            });
            
            Toast.fire({
                icon: 'error',
                title: 'Error al procesar la solicitud'
            });
        }
    });
}
*/

// Manejar click en "Agregar tu Reseña"
jQuery(document).ready(function($) {
    $('#add-review-link').on('click', function(e) {
        e.preventDefault();

        // Activar la pestaña de reviews
        $('a[href="#reviews_tabs"]').tab('show');

        // Esperar a que la pestaña se active completamente
        setTimeout(function() {
            // Hacer scroll al formulario
            $('html, body').animate({
                scrollTop: $('#review-form').offset().top - 100
            }, 500);

            // Opcional: dar foco al primer campo
            $('#review-form input[name="rating"]:first').focus();
        }, 300);
    });
});

</script>
@endpush