@extends('layouts.dashboardnew')

@section('content')

<div class="row justify-content-center">
    <div class="col-12">
        <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('carrito-guardar') }}">
                        {{ csrf_field() }} 

                        <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 }}">

                        <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">
                                        @if ($moneda->mostrar_a_d)
                                           {{$moneda->simbolo}} {{$productos->precio}}
                                        @else
                                           {{$productos->precio}} {{$moneda->simbolo}}
                                        @endif 
                                    </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-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 al carrito</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">
                                            @if ($moneda->mostrar_a_d)
                                              {{$moneda->simbolo}} {{ $productos->precio }}
                                            @else
                                              {{ $productos->precio }} {{$moneda->simbolo}}
                                            @endif
                                        </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">
                                            @if ($moneda->mostrar_a_d)
                                              {{$moneda->simbolo}} {{ $productos->precio }}
                                            @else
                                              {{ $productos->precio }} {{$moneda->simbolo}}
                                            @endif
                                        </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 nav-bordered mb-3" role="tablist">
                                <li class="nav-item" role="descripcion">
                                    <a href="#descripcion-b2" data-bs-toggle="tab" aria-expanded="true" class="nav-link active" aria-selected="true" tabindex="-1" role="tab">
                                       Descripción
                                    </a>
                                </li>
                                <li class="nav-item" role="detalles">
                                    <a href="#detalles-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" role="tab">
                                        Detalles
                                    </a>
                                </li>
                                <li class="nav-item" role="comentarios">
                                    <a href="#comentarios-b2" data-bs-toggle="tab" aria-expanded="false" class="nav-link" aria-selected="false" tabindex="-1" role="tab">
                                        Comentarios
                                    </a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane show active" id="descripcion-b2" role="tabpanel">
                                    {!! $productos->descripcion_larga !!}                    
                                </div>
                                <div class="tab-pane" id="detalles-b2" role="tabpanel">
                                    {!! $productos->detalles !!}                    
                                </div>
                                <div class="tab-pane" id="comentarios-b2" role="tabpanel">
                                    @livewire('comentariotienda', ['idproducto' => $productos->id])
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

        </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}}')).toFixed(2) + '$')
     $('.valor-general').text('{{$productos->precio}} $ ' + ' 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}}')).toFixed(2) + '$')
     $('.valor-general').text('{{$productos->precio}} $ ' + ' x ' + (parseFloat(cantidad) - 1))
     
    }

   }
</script>
@endpush