@extends('layouts.tienda')

@section('content')

<div class="container-fluid mt-3">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-11">
            <div class="row">
                
                <!-- 1. GALERÍA DE MINIATURAS (A la izquierda en PC, abajo de la foto en Móvil) -->
                <div class="col-md-2 col-12 order-2 order-md-1 mb-3">
                    @if($imagenes->count() > 0)
                        <div class="body-scroll px-1">
                            @foreach($imagenes as $imagen)
                            <div class="mb-2 flex-shrink-0">
                                <a href="{{ asset('adicional/'.$imagen->foto) }}" data-fancybox="gallery" data-caption="{{$productos->title}}">
                                    <img class="img-mini rounded border shadow-sm" src="{{ asset('adicional/'.$imagen->foto) }}" style="width: 100%; height: 120px; object-fit: cover;">
                                </a>  
                            </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <!-- 2. IMAGEN PRINCIPAL -->
                <div class="col-md-5 col-12 order-1 order-md-2 mb-3 text-center">
                    <a href="{{$productos->img}}" data-fancybox="gallery" data-caption="{{$productos->title}}">
                        <img class="img-fluid rounded" src="{{$productos->img}}" alt="{{$productos->title}}" style="max-height: 500px; width: 100%;">
                    </a>
                </div>

                <!-- 3. PANEL DE COMPRA -->
                <div class="col-md-5 col-12 order-3 mb-3">
                    <form method="POST" action="{{ route('tienda-externa-save') }}">
                        @csrf 
                        <input type="hidden" name="id" value="{{$productos->id}}">
                        <input type="hidden" name="cantidad" class="cantidad" value="1">
                        <input type="hidden" name="precio" value="{{ $productos->precio_publico }}">

                        <div class="card border-0 shadow-sm">
                            <div class="card-body">
                                <h2 class="h3 fw-bold">{{ $productos->title }}</h2>
                                <div class="mb-3">{!! $productos->corta !!}</div>

                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <div class="text-warning">
                                        @for($i=1; $i<=$productos->estrellas; $i++)
                                            <i class="fa fa-star"></i>
                                        @endfor
                                    </div>
                                    <h3 class="fw-bold mb-0 text-dark">
                                        {{ $moneda->mostrar_a_d ? $moneda->simbolo.' '.$productos->precio_publico : $productos->precio_publico.' '.$moneda->simbolo }}
                                    </h3>
                                </div>

                                <!-- CONTROLES DE CANTIDAD Y BOTONES -->
                                <div class="row g-2 align-items-center mb-3">
                                    <div class="col-md-4 col-12 d-flex justify-content-start align-items-center mb-2 mb-md-0">
                                        <div class="cantidad-btn" onclick="restar()"><i class="fa fa-minus"></i></div>
                                        <span class="mx-3 fw-bold fs-5 cantidad-text">1</span>
                                        <div class="cantidad-btn" onclick="sumar()"><i class="fa fa-plus"></i></div>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <a class="btn btn-outline-danger w-100 rounded-pill" href="{{ route('tienda-externa-index') }}">Regresar</a>
                                    </div>
                                    <div class="col-6 col-md-4">
                                        <button class="btn btn-info text-white w-100 rounded-pill" type="submit">Añadir</button>
                                    </div>
                                </div>

                                <!-- DESGLOSE -->
                                <div class="bg-light p-3 rounded">
                                    <div class="d-flex justify-content-between small text-muted mb-1">
                                        <span>Subtotal (<span class="cantidad-text">1</span> unid.)</span>
                                        <span class="valor-general">
                                            {{ $moneda->mostrar_a_d ? $moneda->simbolo.' '.$productos->precio_publico : $productos->precio_publico.' '.$moneda->simbolo }}
                                        </span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                                        <h4 class="fw-bold mb-0">Total</h4>
                                        <h4 class="fw-bold mb-0 text-primary valor-total">
                                            {{ $moneda->mostrar_a_d ? $moneda->simbolo.' '.$productos->precio_publico : $productos->precio_publico.' '.$moneda->simbolo }}
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 4. PESTAÑAS DE INFORMACIÓN (Ocupa todo el ancho) -->
                <div class="col-12 order-4 mt-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <ul class="nav nav-tabs mb-3" role="tablist">
                                <li class="nav-item"><a href="#desc" data-bs-toggle="tab" class="nav-link active" role="tab">Descripción</a></li>
                                <li class="nav-item"><a href="#deta" data-bs-toggle="tab" class="nav-link" role="tab">Detalles</a></li>
                                <li class="nav-item"><a href="#comen" data-bs-toggle="tab" class="nav-link" role="tab">Comentarios ({{$comentarios->count()}})</a></li>
                            </ul>

                            <div class="tab-content p-2">
                                <div class="tab-pane fade show active" id="desc" role="tabpanel">{!! $productos->descripcion_larga !!}</div>
                                <div class="tab-pane fade" id="deta" role="tabpanel">{!! $productos->detalles !!}</div>
                                <div class="tab-pane fade" id="comen" role="tabpanel">
                                    <div class="row g-3">
                                        @forelse($comentarios as $comen)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="d-flex align-items-center p-3 border rounded shadow-xs">
                                                <img src="{{ asset('/fondo/'.$comen->user->avatar) }}" class="rounded-circle me-3" style="width:50px; height:50px; object-fit: cover;">
                                                <div>
                                                    <h6 class="mb-0 fw-bold">{{ $comen->user->usercampo->firstname }}</h6>
                                                    <p class="mb-0 small text-muted">{{ $comen->comentario }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @empty
                                        <p class="text-center text-muted">Aún no hay comentarios para este producto.</p>
                                        @endforelse
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- row end -->
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    
   function sumar(){
     var cantidad = $('.cantidad').val();

     $('.cantidad').val(parseFloat(cantidad) + 1)
     $('.cantidad-text').text(parseFloat(cantidad) + 1)
     $('.valor-total').text(parseFloat(((parseFloat(cantidad) + 1) * '{{$productos->precio_publico}}')).toFixed(2) + '$')
     $('.valor-general').text('{{$productos->precio_publico}} $ ' + ' x ' + (parseFloat(cantidad) + 1))
     
   }

   function restar(){
    var cantidad = $('.cantidad').val();
    
    if(cantidad > 1){
     $('.cantidad').val(parseFloat(cantidad) - 1)
     $('.cantidad-text').text(parseFloat(cantidad) - 1)
     $('.valor-total').text(parseFloat(((parseFloat(cantidad) - 1) * '{{$productos->precio_publico}}')).toFixed(2) + '$')
     $('.valor-general').text('{{$productos->precio_publico}} $ ' + ' x ' + (parseFloat(cantidad) - 1))
     
    }

   }
</script>
@endpush