{{-- ========== RESUMEN DEL PEDIDO (sidebar derecho) ========== --}}
<div class="position-sticky" style="top: 1rem;">

    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0">Resumen del pedido</h5>
                <span class="badge rounded-pill bg-info">{{ count($carritos) }} ítems</span>
            </div>

            {{-- Lista de productos --}}
            <div class="overflow-auto mb-3" style="max-height: 280px;">
                <ul class="list-group list-group-flush">
                    @foreach($carritos as $carrito)
                    <li class="list-group-item px-0 py-3">
                        <div class="d-flex gap-3 align-items-center">
                            <div class="rounded-3 border overflow-hidden flex-shrink-0" style="width:64px;height:64px;">
                                <img src="{{$carrito->product->img}}" alt="{{$carrito->product->title}}" class="w-100 h-100 object-fit-cover">
                            </div>
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="mb-1 text-truncate fw-semibold">{{ $carrito->product->title }}</h6>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">Cant: <strong>{{ $carrito->cantidad }}</strong></small>
                                    <span class="fw-bold text-info">
                                        @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{ $carrito->precio }}
                                        @else {{ $carrito->precio }} {{$moneda->simbolo}} @endif
                                    </span>
                                </div>
                                <div class="d-flex gap-2 mt-2">
                                    @if($carrito->premio == 0)
                                    <button type="button" class="btn btn-sm btn-outline-info border-0 px-2 py-1"
                                        data-bs-toggle="modal" data-bs-target="#actualizar"
                                        onclick="cantidad_js('{{$carrito->id}}','{{$carrito->cantidad}}', '{{$carrito->precio}}', '{{$carrito->product->title}}', '{{$carrito->product->img}}')">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </button>
                                    @endif
                                    <a href="{{ route('carrito-delete', $carrito->id) }}" class="btn btn-sm btn-outline-danger border-0 px-2 py-1">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>

            {{-- Totales --}}
            <div class="border-top pt-3">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span class="fw-medium">
                        @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{$datos['general']}} @else {{$datos['general']}} {{$moneda->simbolo}} @endif
                    </span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Descuento</span>
                    <span class="fw-medium text-success">
                        @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{$datos['descuento']}} @else {{$datos['descuento']}} {{$moneda->simbolo}} @endif
                    </span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">IVA</span>
                    <span class="fw-medium">
                        @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{ $datos['ivatotal'] }} @else {{ $datos['ivatotal'] }} {{$moneda->simbolo}} @endif
                    </span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Costo de envío</span>
                    <span class="fw-medium costo">
                        @if(isset($costoEnvio))
                            @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{ $costoEnvio }} @else {{ $costoEnvio }} {{$moneda->simbolo}} @endif
                        @else
                            @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} 0 @else 0 {{$moneda->simbolo}} @endif
                        @endif
                    </span>
                </div>
                <hr class="my-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="fw-bold fs-5">Total</span>
                    <span class="fw-bold fs-5 text-info total">
                        @php $totalAmostrar = $totalFinal ?? $datos['montoGeneral']; @endphp
                        @if ($moneda->mostrar_a_d) {{$moneda->simbolo}} {{ $totalAmostrar }} @else {{ $totalAmostrar }} {{$moneda->simbolo}} @endif
                    </span>
                </div>

                @if($datos['puntos'] > 0)
                <div class="d-flex justify-content-between align-items-center bg-warning-subtle text-warning-emphasis rounded-3 p-2 mt-2">
                    <span class="fw-semibold"><i class="fa-solid fa-star me-1"></i> Puntos a ganar</span>
                    <span class="fw-bold">{{ $datos['puntos'] }}</span>
                </div>
                @endif
            </div>

            {{-- Trust badges --}}
            <div class="d-flex justify-content-center gap-3 flex-wrap pt-3 mt-3 border-top">
                <small class="text-muted"><i class="fa-solid fa-shield-halved text-success"></i> Pago seguro</small>
                <small class="text-muted"><i class="fa-solid fa-truck text-success"></i> Envío rápido</small>
                <small class="text-muted"><i class="fa-solid fa-headset text-success"></i> Soporte 24/7</small>
            </div>

        </div>
    </div>

</div>


{{-- ========== MODAL: Actualizar cantidad ========== --}}
<div id="actualizar" class="modal fade" tabindex="-1" aria-labelledby="actualizarLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="actualizarLabel">Actualizar cantidad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <form action="{{route('carrito-actualizar')}}" method="post">
                {{ csrf_field() }}
                <div class="modal-body p-4">
                    <input type="hidden" class="id" name="id">
                    <input type="hidden" name="cantidad" class="cantidad" value="1">
                    <input type="hidden" name="precio" class="precio">

                    <div class="d-flex gap-3 align-items-center mb-4">
                        <div class="image rounded-3 border overflow-hidden flex-shrink-0" style="width:80px;height:80px;"></div>
                        <div class="flex-grow-1">
                            <h6 class="title-product fw-semibold mb-1"></h6>
                            <p class="preciovisual text-info fw-bold mb-0"></p>
                        </div>
                    </div>

                    <div class="bg-light rounded-3 p-3 text-center mb-3">
                        <p class="small text-muted mb-2">Selecciona la cantidad</p>
                        <div class="d-inline-flex align-items-center gap-3">
                            <button type="button" class="btn btn-light border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px;" onclick="restar()">
                                <i class="fa-solid fa-minus"></i>
                            </button>
                            <span class="cantidad-text fw-bold fs-4" style="min-width:40px;">1</span>
                            <button type="button" class="btn btn-light border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px;" onclick="sumar()">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </div>
                        <p class="valor-total mt-3 mb-0 fw-semibold"></p>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-info text-white">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- ========== MODAL: Código Influencer ========== --}}
<div id="codigodescuento" class="modal fade" tabindex="-1" aria-labelledby="codigoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold" id="codigoLabel">Código Influencer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <form action="{{route('carrito-insert-codigo')}}" method="post">
                {{ csrf_field() }}
                <div class="modal-body p-4">
                    <div class="text-center mb-3">
                        <span class="badge bg-info-subtle text-info-emphasis rounded-circle p-3 fs-3">
                            <i class="fa-solid fa-user-tie"></i>
                        </span>
                    </div>
                    <p class="text-muted small text-center mb-3">Ingresa el código de tu influencer y obtén beneficios exclusivos.</p>
                    <label class="form-label small fw-semibold">Código</label>
                    <input type="text" class="form-control form-control-lg" name="codigo" required value="{{ ($codigodescuento == null) ? '' : $codigodescuento->codigo }}" placeholder="Ej: INFLU2026">
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-info text-white">Aplicar código</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- ========== JS de los modales (cantidad / sumar / restar) ========== --}}
<script>
    function cantidad_js(id, cant, precio, nombre, img){
        $('.id').val(id);
        $('.cantidad').val(cant);
        $('.cantidad-text').text(cant);
        $('.precio').val(precio);
        $('.valor-total').text('Total: ' + parseFloat(cant * precio).toFixed(2) + ' {{$moneda->simbolo}}');
        $('.image').empty();
        var image = new Image();
        image.src = img;
        image.style.width = '100%';
        image.style.height = '100%';
        image.style.objectFit = 'cover';
        $('.image').append(image);
        $('.title-product').text(nombre);
        $('.preciovisual').text(precio + ' {{$moneda->simbolo}}');
    }
    function sumar(){
        var precio = $('.precio').val();
        var cant = $('.cantidad').val();
        $('.cantidad').val(parseFloat(cant) + 1);
        $('.cantidad-text').text(parseFloat(cant) + 1);
        $('.valor-total').text('Total: ' + parseFloat(((parseFloat(cant) + 1) * precio)).toFixed(2) + ' {{$moneda->simbolo}}');
    }
    function restar(){
        var precio = $('.precio').val();
        var cant = $('.cantidad').val();
        if(cant > 1){
            $('.cantidad').val(parseFloat(cant) - 1);
            $('.cantidad-text').text(parseFloat(cant) - 1);
            $('.valor-total').text('Total: ' + parseFloat(((parseFloat(cant) - 1) * precio)).toFixed(2) + ' {{$moneda->simbolo}}');
        }
    }
</script>