erp-imprimelibros/src/main/resources/templates/imprimelibros/facturas/partials/factura-cabecera.html

<div th:fragment="factura-cabecera (factura)">

    <h3>
        <span th:class="|text-${factura.estado.name() == 'borrador' ? 'warning' : 'success'}|"
            th:text="#{|facturas.estado.${factura.estado.name()}|}">
        </span>
        /
        <span th:class="|text-${factura.estadoPago.name() == 'pendiente' ? 'warning' : 'success'}|"
            th:text="#{|facturas.estado-pago.${factura.estadoPago.name()}|}">
        </span>
    </h3>

    <!-- flag readonly -->
    <th:block th:with="isReadonly=${factura.estado.name() == 'validada'}">

        <div class="row g-3">

            <!-- Número (solo lectura siempre, normalmente) -->
            <div th:if="${factura.numeroFactura != null}" class="col-md-3">
                <label class="form-label" th:text="#{facturas.form.numero-factura}">Número de factura</label>
                <input id="facturaNumero" type="text" class="form-control" th:value="${factura.numeroFactura}" readonly>
            </div>
            <div th:if="${factura.numeroFactura == null}" class="col-md-3">
                <label class="form-label" th:text="#{facturas.form.id}">ID de la factura</label>
                <input id="facturaId" type="text" class="form-control" th:value="${factura.id}" readonly>
            </div>

            <!-- Serie -->
            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.form.serie}">Serie</label>
                <select id="facturaSerieId" class="form-control js-select2-factura"
                    data-url="/configuracion/series-facturacion/api/get-series" th:attr="disabled=${isReadonly}">
                    <option th:value="${factura.serie != null ? factura.serie.id : ''}"
                        th:text="${factura.serie != null ? factura.serie.nombreSerie : ''}" selected>
                    </option>
                </select>
            </div>

            <!-- Cliente -->
            <div class="col-md-6">
                <label class="form-label" th:text="#{facturas.form.cliente}">Cliente</label>
                <select id="facturaClienteId" class="form-control js-select2-factura" data-url="/users/api/get-users"
                    th:attr="disabled=${isReadonly}">
                    <option th:value="${factura.cliente != null ? factura.cliente.id : ''}"
                        th:text="${factura.cliente != null ? factura.cliente.fullName : ''}" selected>
                    </option>
                </select>
            </div>

            <!-- Factura rectificada -->
             <div th:if="${factura.facturaRectificada != null}" class="w-100 d-md-block"></div>
            <div th:if="${factura.facturaRectificada != null}" class="col-md-3">
                <label class="form-label" th:text="#{facturas.form.factura-rectificada}">Factura rectificada</label>
                <input readonly id="facturaRectificadaId" class="form-control"
                    th:value="${factura.facturaRectificada.numeroFactura}" />
            </div>
            <div th:if="${factura.facturaRectificada != null}" class="w-100 d-md-block"></div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.form.fecha-emision}">Fecha</label>

                <input id="facturaFechaEmision" type="text" class="form-control"
                    th:value="${factura.fechaEmision != null ? #temporals.format(factura.fechaEmision, 'dd/MM/yyyy') : ''}"
                    th:attr="readonly=${isReadonly}, data-estado=${factura.estado.name()}">
            </div>

            <!-- Notas -->
            <div class="col-md-9">
                <label class="form-label" th:text="#{facturas.form.notas}">Notas</label>
                <textarea class="form-control" rows="3" name="notas" th:text="${factura.notas}">
                </textarea>
            </div>

        </div>

        <div class="row g-3">

            <div class="col-md-12">
                <h5 class="mt-4" th:text="#{facturas.direccion.titulo}">Dirección de facturación</h5>
            </div>

            <div class="col-md-6">
                <label class="form-label" th:text="#{facturas.direccion.razon-social}">Razón Social</label>
                <input type="text" id="dirRazonSocial" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.razonSocial
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>

            <div class="col-md-6">
                <label class="form-label" th:text="#{facturas.direccion.identificacion-fiscal}">Identificacion
                    Fiscal</label>
                <input type="text" id="dirIdentificacionFiscal" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.identificacionFiscal
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>


            <div class="col-md-9">
                <label class="form-label" th:text="#{facturas.direccion.direccion}">Dirección</label>
                <input type="text" id="dirDireccion" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.direccion
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.direccion.codigo-postal}">Código Postal</label>
                <input type="text" id="dirCp" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.cp
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.direccion.ciudad}">Ciudad</label>
                <input type="text" id="dirCiudad" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.ciudad
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.direccion.provincia}">Provincia</label>
                <input type="text" id="dirProvincia" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.provincia
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.direccion.pais}">País</label>
                <select id="dirPais" class="form-control js-select2-factura" data-url="/api/paises"
                    th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
                    <option th:value="${direccionFacturacion != null
                        ? direccionFacturacion.pais.code3
                        : ''}" th:text="${direccionFacturacion != null
                        ? #messages.msg('paises.' + direccionFacturacion.pais.keyword)
                        : ''}" selected>
                    </option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label" th:text="#{facturas.direccion.telefono}">Teléfono</label>
                <input type="text" id="dirTelefono" class="form-control" th:value="${direccionFacturacion != null
                            ? direccionFacturacion.telefono
                            : ''}" th:attrappend="readonly=${isReadonly} ? 'readonly' : null">
            </div>
        </div>

        <div class="row g-3 mt-4 justify-content-end">

            <div class="col-md-12 text-end">
                <th:block th:if="${factura.estado.name() == 'borrador'}">
                    <button type="button" class="btn btn-secondary me-2" id="btn-validar-factura"
                        th:text="#{facturas.form.btn.validar}">Validar factura</button>
                    <button type="button" class="btn btn-secondary me-2" id="btn-guardar-factura"
                        th:text="#{facturas.form.btn.guardar}">Guardar</button>
                </th:block>
                <th:block th:if="${factura.estado.name() == 'validada'}">
                    <button type="button" class="btn btn-secondary me-2" id="btn-borrador-factura"
                        th:text="#{facturas.form.btn.borrador}">Pasar a borrador</button>
                </th:block>
                <button type="button" class="btn btn-secondary me-2" id="btn-imprimir-factura"
                    th:text="#{facturas.form.btn.imprimir}">Imprimir factura</button>
            </div>
        </div>
    </th:block>
</div>