erp-imprimelibros/src/main/resources/templates/imprimelibros/cart/_cartItem.html

<!-- _cartItem.html -->
<div th:fragment="cartItem(item)" class="card product mb-3 shadow-sm gy-3" th:attr="data-iva-4=${item.iva4},
              data-iva-21=${item.iva21},
              data-base=${item.base}">
    <div class="card-body">

        <input type="hidden" class="item-presupuesto-id" th:value="${item.presupuestoId}" />
        <input type="hidden" class="item-tirada" th:value="${item.tirada}" />

        <div class="step-arrow-nav mt-n3 mx-n3 mb-3">
            <ul th:class="${'nav nav-pills nav-justified custom-nav nav-product' + (cart.onlyOneShipment ? ' d-none' : '')}"
                role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link fs-15 active" th:id="${'pills-details-' + item.cartItemId + '-tab'}"
                        th:data-bs-target="${'#pills-details-' + item.cartItemId}" type="button" role="tab"
                        th:aria-controls="${'#pills-details-' + item.cartItemId}" aria-selected="true"
                        data-bs-toggle="tab">
                        <i
                            class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
                        <label class="fs-13 my-2" th:text="#{cart.tabs.details}">Detalles</label>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fs-15" th:id="${'pills-shipping-' + item.cartItemId + '-tab'}"
                        th:data-bs-target="${'#pills-shipping-' + item.cartItemId}" type="button" role="tab"
                        th:aria-controls="${'#pills-shipping-' + item.cartItemId}" aria-selected="false"
                        data-bs-toggle="tab">
                        <i
                            class="ri-truck-line fs-5 p-1 bg-soft-primary text-primary rounded-circle align-middle me-2"></i>
                        <label class="fs-13 my-2" th:text="#{cart.tabs.envio}">Envío</label>
                        <i
                            class="ri-error-warning-line fs-5 p-1 bg-soft-danger rounded-circle text-danger align-middle me-2 d-none alert-icon-shipment"></i>
                    </button>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="tab-pane fade show active tab-pane-details" th:id="${'pills-details-' + item.cartItemId}"
                role="tabpanel" th:aria-labelledby="${'pills-details-' + item.cartItemId + '-tab'}">

                <div class="row g-3 align-items-start">
                    <!-- Col 1: imagen -->
                    <div class="col-auto">
                        <div class="avatar-lg bg-light rounded p-1">
                            <img th:src="${item.imagen != null ? item.imagen : '/assets/images/products/placeholder.png'}"
                                alt="portada" class="img-fluid d-block rounded">
                        </div>
                    </div>

                    <!-- Col 2: detalles -->
                    <div class="col">
                        <h5 class="fs-18 text-truncate mb-1">
                            <a th:href="@{|presupuesto/edit/${item.presupuestoId}|}" class="text-dark"
                                th:text="${item.titulo != null ? item.titulo : 'Presupuesto #'}">Presupuesto</a>
                        </h5>
                        <h5 class="fs-14 text-truncate mb-1">
                            <span th:text="#{cart.item.presupuesto-numero}">Presupuesto #</span>
                            <span th:text="${item.presupuestoId != null ? item.presupuestoId : ''}">#</span>
                        </h5>

                        <ul class="list-unstyled text-muted mb-1 ps-0">
                            <li th:each="linea : ${item.resumen.lineas}" class="mb-1">
                                <span th:utext="${linea['descripcion']}"></span>
                            </li>
                        </ul>

                        <ul class="list-unstyled text-muted mb-1" th:if="${item.resumen.servicios != null}">
                            <li>
                                <span th:utext="#{pdf.servicios-adicionales}">Servicios adicionales:</span>
                                <span class="spec-label" th:text="${item.resumen.servicios}"></span>
                            </li>
                        </ul>

                        <ul class="list-unstyled text-muted mb-1"
                            th:if="${item.resumen != null and #maps.containsKey(item.resumen,'datosMaquetacion') and item.resumen['datosMaquetacion'] != null}">
                            <li class="spec-row mb-1">
                                <span th:text="#{pdf.datos-maquetacion}">Datos de maquetación:</span>
                                <span th:utext="${item.resumen.datosMaquetacion}"></span>
                            </li>
                        </ul>

                        <ul class="list-unstyled text-muted mb-1"
                            th:if="${item.resumen != null and #maps.containsKey(item.resumen,'datosMarcapaginas') and item.resumen['datosMarcapaginas'] != null}">
                            <li class="spec-row mb-1">
                                <span th:text="#{pdf.datos-marcapaginas}">Datos de marcapáginas:</span>
                                <span th:utext="${item.resumen.datosMarcapaginas}"></span>
                            </li>
                        </ul>
                    </div>

                    <!-- Col 3: precio -->
                    <div class="col-auto ms-auto text-end">
                        <p class="text-muted mb-1" th:text="#{cart.precio}">Precio</p>
                        <h5 class="fs-14 mb-0">
                            <span th:text="${item.baseTotal != null ? item.baseTotal : '-'}">0,00</span>
                        </h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show tab-pane-shipping" th:id="${'pills-shipping-' + item.cartItemId}"
                role="tabpanel" th:aria-labelledby="${'pills-shipping-' + item.cartItemId + '-tab'}">

                <div class="col-sm">
                    <!-- Título / enlace -->
                    <h5 class="fs-18 text-truncate my-1 p-1">
                        <a th:href="@{|presupuesto/edit/${item.presupuestoId}|}" class="text-dark"
                            th:text="${item.titulo != null ? item.titulo : 'Presupuesto #'}">
                            Presupuesto
                        </a>
                    </h5>
                    <h5 class="fs-14 text-truncate mb-1">
                        <span th:text="#{cart.item.presupuesto-numero}">Presupuesto #</span>
                        <span th:text="${item.presupuestoId != null ? item.presupuestoId : ''}">#</span>
                    </h5>
                    <h5 class="fs-14 text-truncate mb-1">
                        <span
                            th:text="#{cart.shipping.tirada} + ' ' + (${item.tirada} != null ? ${item.tirada} : '') + ' '  + #{cart.shipping.unidades} ">
                        </span>
                    </h5>

                    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
                        <div class="card-body">
                            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{cart.shipping.order}">Envio
                                del pedido
                            </div>
                        </div>
                        <div class="ribbon-content mt-4">
                            <div class="px-2 mb-2">
                                <button type="button" class="btn btn-secondary btn-add-shipping"
                                    th:text="#{cart.shipping.add}">Añadir dirección</button>

                                <div class="shipping-addresses-item d-flex flex-wrap gap-3 mt-4">
                                    <th:block th:each="dir : ${direcciones}">
                                        <th:block
                                            th:if="${dir != null and dir.unidades != null and dir.unidades > 0 and dir.presupuestoId == item.presupuestoId}">
                                            <div th:replace="~{imprimelibros/direcciones/direccionCard :: 
                                                direccionCard( 
                                                    direccion=${dir.direccion}, 
                                                    pais=${dir.pais}, 
                                                    presupuestoId=${dir.presupuestoId}, 
                                                    unidades=${dir.unidades}, 
                                                    isPalets=${dir.isPalets} )}">

                                            </div>
                                        </th:block>
                                    </th:block>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow mt-4"
                        th:if="${item.hasSample}">
                        <div class="card-body">
                            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{cart.shipping.samples}">Envio
                                de pruebas
                            </div>
                        </div>

                        <div class="ribbon-content mt-4">
                            <div class="px-2 mb-2">
                                <button type="button" class="btn btn-secondary btn-add-shipping-sample"
                                    th:text="#{cart.shipping.add}">Añadir dirección</button>

                                <div class="shipping-addresses-sample d-flex flex-wrap gap-3 mt-4">
                                    <th:block th:each="dir : ${direcciones}">
                                        <th:block
                                            th:if="${dir != null and dir.unidades == null and dir.presupuestoId == item.presupuestoId}">
                                            <div th:replace="~{imprimelibros/direcciones/direccionCard :: 
                                                direccionCard( 
                                                    direccion=${dir.direccion}, 
                                                    pais=${dir.pais}, 
                                                    presupuestoId=${dir.presupuestoId}, 
                                                    unidades=${dir.unidades}, 
                                                    isPalets=${dir.isPalets} )}">

                                            </div>
                                        </th:block>
                                    </th:block>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-auto div-shipping-product">
                </div>
            </div>
        </div>
    </div>

    <div class="card-footer bg-light">
        <div class="row align-items-center gy-3">
            <div class="col-sm">
                <div class="d-flex flex-wrap my-n1">
                    <!-- Botón eliminar -->
                    <div>
                        <a href="javascript:void(0);" class="d-block text-body p-1 px-2 delete-item"
                            th:attr="data-cart-item-id=${item.presupuestoId}">
                            <i class="ri-delete-bin-fill text-muted align-bottom me-1"></i> Eliminar
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>