{{-- filepath: resources\views\AutoGestionCliente\items.blade.php --}}
<div class="row w-100">
    @forelse($items as $item)
        <div class="col-lg-4 col-md-6 col-12 mb-3 d-flex" style="margin-bottom: 4%;">
            <div class="card shadow-sm border-0 flex-fill d-flex flex-column" style="background: rgba(0,0,0,0.03); border-radius: 10px;">
                <div class="card-body text-center d-flex flex-column">
                    <h5 class="card-title-clamped">
                        @if($tipo === 'producto')
                            {{ $item->Nombre_Produc }}
                        @else
                            {{ $item->nombre_combo }}
                        @endif
                    </h5>

                    <p class="card-text fw-bold text-success mb-2">
                        @if($tipo === 'producto')
                            ${{ number_format($item->valor_unitario, 0, ',', '.') }}
                        @else
                            ${{ number_format($item->valor_combo, 0, ',', '.') }}
                        @endif
                    </p>

                    <div class="mt-auto">
                        <button class="btn btn-primary btn-agregar-item w-100"
                                data-id="{{ $item->getKey() }}"
                                data-tipo="{{ $tipo }}"
                                @if(!session('cliente_autogestion')) disabled title="Inicie pedido primero" @endif>
                            <i class="fas fa-cart-plus"></i> Agregar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="alert alert-warning text-center mb-0">
                No hay {{ $tipo }} disponibles por el momento.
            </div>
        </div>
    @endforelse
</div>

<style>
    .card-title-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /*
     * ESTABLECER UNA ALTURA Y LINE-HEIGHT FIJOS
     * Esto reserva un espacio consistente para dos líneas de texto,
     * asegurando que tanto los precios como los botones de abajo se alineen
     * perfectamente entre las tarjetas.
     */
    height: 3em; /* Se calcula: 2 líneas * 1.5em de interlineado */
    line-height: 1.5em; /* Un valor de interlineado estándar y legible */
}
</style>