<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orden de Trabajo</title>
<style>
/* Reset de box-sizing */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #333;
margin: 0;
padding: 0;
}
/* FIX WKHTMLTOPDF: Control estricto de imágenes */
img {
max-width: 100% !important;
height: auto !important;
page-break-inside: avoid !important;
page-break-before: auto !important;
page-break-after: auto !important;
display: block;
margin: 0 auto;
}
/* Contenedor */
.container {
width: 100%;
padding: 10px;
margin: 0 auto;
}
/* Clearfix para limpiar flotados */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Columnas basadas en flotantes */
[class*="col-xs-"] {
float: left;
padding: 5px;
}
.col-xs-12 { width: 100%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.666667%; }
.col-xs-4 { width: 33.333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.666667%; }
.col-xs-1 { width: 8.333333%; }
/* Paneles */
.panel {
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
background-color: #fff;
page-break-inside: avoid !important; /* Evita que el panel entero se corte */
}
.panel-heading {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
background-color: #e9ecef;
font-weight: bold;
font-size: 16px;
position: relative;
}
.panel-title {
margin: 0;
font-size: 14px;
}
/* Tablas - FIX WKHTMLTOPDF: Evitar cortes de filas entre páginas */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
thead {
display: table-header-group;
}
table th, table td {
border: 1px solid #ddd;
padding: 5px;
text-align: left;
vertical-align: top;
font-size: 12px;
}
table th {
background-color: #f2f2f2;
font-weight: bold;
font-size: 13px;
}
/* Tipografías y espaciados */
.mb-5 { margin-bottom: 5px; }
.mt-5 { margin-top: 5px; }
h3, h4, h5, h6 { margin: 5px 0; font-weight: bold; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }
/* Evitar saltos de página dentro de un servicio */
.service {
page-break-inside: avoid !important;
break-inside: avoid;
margin-bottom: 10px;
}
.service + .service {
margin-top: 10px;
}
/* Observaciones y Leyendas */
.observations {
background-color: #fff;
font-size: 12px;
/* Las observaciones pueden contener imágenes WYSIWYG, protegemos el salto */
page-break-inside: avoid !important;
}
legend {
font-size: 13px;
margin-bottom: 5px;
font-weight: bold;
}
/* Ajustes de filas */
.row, .panel .panel-body .row {
margin-left: -5px;
margin-right: -5px;
}
.panel .panel-body .col-xs-12 {
padding-left: 5px;
padding-right: 5px;
}
/* Utilidades de texto */
.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-uppercase {
text-transform: uppercase;
}
/* Tablas específicas */
.escandallos-table, .observations-table {
width: 100%;
}
.escandallos-table td, .observations-table td {
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12">
{% if ht_file is not empty %}
<div class="panel panel-default">
<div class="panel-heading">
RESUMEN
</div>
{% if ht_file.clientType is not empty %}
<div class="panel-heading">
Tipo de comensal: {{ ht_file.clientType }}
</div>
{% endif %}
<div class="panel-body">
<table>
<thead>
<tr>
<th>SERVICIO</th>
<th>HORARIO</th>
<th>PAX</th>
<th>ESPACIO/SALA</th>
</tr>
</thead>
<tbody>
{% for elem in arrayElem %}
<tr class="service">
<td>{{ loop.index }}: {{ elem.htItem.dateStart|date('l')|trans }} {{ elem.htItem.dateStart|date('j') }},
{% if elem.htItem.htMenus is not null %}
{% for menu in elem.htItem.htMenus %}
{{ menu.name }}{% if not loop.last %}, {% endif %}
{% endfor %}
{% endif %}
</td>
<td>{{ elem.htItem.dateStart|date('H:i') }} a {{ elem.htItem.hourEnd|date('H:i') }}</td>
<td>{{ elem.htItem.pax }}</td>
<td>{% if elem.htItem.loungeGp is not null %} {{ elem.htItem.loungeGp.name }} {% else %} {{ elem.htItem.loungeOther }} {% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="row clearfix">
<div class="col-xs-12">
<h5>Observaciones Sala</h5>
</div>
</div>
<div class="observations-room">
<table class="observations-table">
<tbody>
<tr>
<td>
{% if ht_file.descriptionTwo is not empty %}
{{ ht_file.descriptionTwo|raw }}
{% else %}
No hay observaciones para la sala.
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
<div class="row clearfix">
<div class="col-xs-12">
<h5>Observaciones Cocina</h5>
</div>
</div>
<div class="observations">
<table class="observations-table">
<tbody>
{# Recopilar todas las observaciones en una lista usando loop.index para mantener el ID de servicio #}
{% set observations = [] %}
{% for elem in arrayElem %}
{% if elem.htItem.observation is not empty %}
{% set observations = observations|merge([{'service': loop.index, 'obs': elem.htItem.observation|raw}]) %}
{% endif %}
{% endfor %}
{# Agrupar observaciones en pares manualmente #}
{% for elem in observations %}
{% if loop.index0 is divisible by(2) %}
<tr>
{% endif %}
<td>
<strong>Servicio {{ elem.service }}:</strong> {{ elem.obs|raw }}
</td>
{% if loop.index is divisible by(2) %}
</tr>
{% endif %}
{% endfor %}
{# Si el número de observaciones es impar, cerrar la última fila #}
{% if observations|length is odd %}
<td></td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% set dias_semana = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'] %}
{% set meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'] %}
{% set dia_semana = ht_file.updatedAt.format('w') %}
{% set dia = ht_file.updatedAt.format('j') %}
{% set mes = ht_file.updatedAt.format('n') %}
{% set year = ht_file.updatedAt.format('Y') %}
{% for elem in arrayElem %}
<div class="panel service">
<div class="panel-heading">
SERV {{ loop.index }} ({{ elem.htItem.dateStart|date('d/m/Y') }})
<span style="float: right; font-size: 10px; color: #777;">
{{ ht_file.title }} - Última actualización: {{ dias_semana[dia_semana] }} {{ dia }}, de {{ meses[mes - 1] }} de {{ year }}
</span>
</div>
<div class="panel-body">
<table>
<tr>
<td><strong>Sala:</strong> {{ elem.lounge }}</td>
<td><h4 class="text-mint_cream">Inicio:{{ elem.htItem.dateStart|date('H:i') }}</h4></td>
<td><h4 class="text-mint_cream">Fin:{{ elem.htItem.hourEnd|date('H:i') }}</h4></td>
<td><strong>Pax:</strong> {{ elem.htItem.pax }}</td>
</tr>
</table>
{% if elem.htMenus is not null %}
{% for menu in elem.htMenus %}
<legend class="text-uppercase">Menú: {{ menu.htMenu.name }}</legend>
<table class="escandallos-table">
<tbody>
{% for escan in menu.arrayEscandallos %}
{% if loop.index0 is even %}
<tr>
{% endif %}
<td>{{ escan.escandallo.nombre }}</td>
{% if loop.index0 is odd or loop.last %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
{% if reserva is not null %}
<div class="panel panel-default">
<div class="panel-heading">
Información General del Evento
</div>
<div class="panel-body">
<table>
<tr>
<td><strong>Inicio:</strong> {{ reserva.dateStart|date('l')|trans }} {{ reserva.dateStart|date('d/m/Y') }}, a las {{ reserva.dateStart|date('H:i') }}</td>
<td><strong>Fin:</strong> {{ reserva.dateEnd|date('l')|trans }} {{ reserva.dateEnd|date('d/m/Y') }}, a las {{ reserva.dateEnd|date('H:i') }}</td>
</tr>
{% if montaje is not null %}
<tr>
<td colspan="2"><strong>Montaje:</strong> {{ montaje.dateStart|date('l')|trans }} {{ montaje.dateStart|date('j') }}, desde las {{ montaje.dateStart|date('H:i') }} hasta {{ montaje.dateEnd|date('H:i') }}</td>
</tr>
{% endif %}
{% if desmontaje is not null %}
<tr>
<td colspan="2"><strong>Desmontaje:</strong> {{ desmontaje.dateStart|date('l')|trans }} {{ desmontaje.dateStart|date('j') }}, desde las {{ desmontaje.dateStart|date('H:i') }} hasta {{ desmontaje.dateEnd|date('H:i') }}</td>
</tr>
{% endif %}
</table>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</body>
</html>