templates/receta/receta_pdf_new_version.html.twig line 1

Open in your IDE?
  1. <html>
  2.     <head>
  3.         <title>Receta {{ recetum.paciente.apellido1 }} {{ recetum.paciente.nombre1 }}</title>
  4.         <link rel="shortcut icon" href="{{ app.request.getSchemeAndHttpHost() }}{{ asset('assets/images/favicon.png') }}">
  5.         <style>
  6.             /** Set the margins of the page to 0, so the footer and the header can be of the full height and width **/
  7.             @page {
  8.                 margin: 10px 10px;
  9.             }
  11.             /** Define now the real margins of every page in the PDF **/
  12.             
  13.             body{
  14.             margin-top: 100px;     /* tu header fijo ya lo controla */
  15.             margin-left: 15px;
  16.             margin-right: 10px;
  18.             /* RESERVA abajo: 30% dx + 10% footer */
  19.             margin-bottom: 9cm; /* 8.3 + 3.0 aprox */
  20.             font-size: 12px;
  21.             }
  23.             /** Define the header rules **/
  24.            /* header {
  25.                 position: fixed;
  26.                 top: 0cm;
  27.                 left: 0.2cm;
  28.                 right: 0cm;
  29.                 height: 8cm;
  30.             }*/
  33.             header{
  34.                 position: fixed;
  35.                 top: 0cm;
  36.                 left: 0.2cm;
  37.                 right: 0cm;
  38.                 height: 8cm;
  39.                 z-index: 10;
  40.             }
  42.             /* evita espacio entre inline-block */
  43.             .hdr-wrap{
  44.                 font-size: 0;
  45.             }
  47.             /* 2 columnas estables (sin float, sin table) */
  48.             .hdr-col{
  49.                 display: inline-block;
  50.                 width: 49.8%;
  51.                 vertical-align: top;
  52.                 position: relative; /* CLAVE: referencia del absolute */
  53.                 font-size: 12px;    /* devuelve tamaño normal */
  54.             }
  56.             .hdr-img{
  57.                 width: 100%;
  58.                 height: auto;
  59.                 display: block;
  60.                 image-rendering: -webkit-optimize-contrast;
  61.             }
  63.             .hdr-overlay{
  64.                 position: absolute;
  65.                 top: 1mm;
  66.                 font-size: 12px;
  67.                 line-height: 1.1;
  68.                 z-index: 999;
  69.                 color: #0F402D;
  71.                 /* --- CAMBIOS --- */
  72.                 width: auto;           /* no lo limites */
  73.                 max-width: 95mm;       /* ancho suficiente dentro de cada mitad */
  74.                 white-space: nowrap;   /* una sola línea */
  75.                 overflow: visible;     /* NO recortes */
  76.                 text-overflow: unset;  /* NO ... */
  77.                 font-family: Inter, Roboto, "Open Sans", Arial, sans-serif;
  78.             }
  81.             /* en la izquierda, texto pegado al lado interno (hacia el centro) */
  82.             .hdr-left .hdr-overlay{
  83.                 left: 65mm;         /* ajusta hacia el centro */
  84.                 text-align: left;
  85.             }
  87.             /* en la derecha, texto pegado al lado interno (hacia el centro) */
  88.             /* DERECHA: alejar del logo (mover hacia el centro de la página) */
  89.             .hdr-right .hdr-overlay{
  90.                 right:-5mm;      /* antes 6mm -> súbelo (18-30mm según tu cabecera) */
  91.                 text-align: left;
  92.             }
  96.           
  99.             /** Define the footer rules **/
  100.             /* 10% final */
  101.             footer{
  102.             position: fixed;
  103.             left: 0.2cm;
  104.             right: 0;
  105.             bottom: 0;
  106.             height: 1.0cm;         /* ~10% */
  107.             }
  109.             /* 30% arriba del footer */
  110.             .footer2{
  111.             position: fixed;
  112.             left: 0.2cm;
  113.             right: 0;
  114.             bottom: 1.0cm;         /* pegado encima del footer */
  115.             height: 8.0cm;         /* ~30% */
  116.             overflow: hidden;      /* evita que invada el cuerpo */
  117.             }
  119.             /** Define the main content rules **/
  120.             main{
  121.   position: relative;
  122.   z-index: 1;
  123.   padding-top: 15px;   /* ajusta 6–15px */
  124. }
  126.             /** Background images on left and right **/
  127.             .background-left {
  128.                 position: fixed;
  129.                 top: 100px;
  130.                 left: 0;
  131.                 width: 50%;
  132.                 height: 90%;
  133.                 background-image: url("{{ app.request.getSchemeAndHttpHost() ~ asset('assets/images/nmed_fondo.png') }}"); 
  134.                 background-size: contain;
  135.                 background-repeat: no-repeat;
  136.                 background-position: left top;
  137.                 z-index: 0;
  138.                  opacity: 0.1; /* Ajusta la opacidad según sea necesario */
  139.             }
  141.             .background-right {
  142.                 position: fixed;
  143.                 top: 100px;
  144.                 right: 0;
  145.                 width: 50%;
  146.                 height: 90%;
  147.                 background-image: url("{{ app.request.getSchemeAndHttpHost() ~ asset('assets/images/nmed_fondo.png') }}"); 
  148.                 background-size: contain;
  149.                 background-repeat: no-repeat;
  150.                 background-position: right top;
  151.                 z-index: 0;
  152.                  opacity: 0.1; /* Ajusta la opacidad según sea necesario */
  153.             }
  154.         </style>
  155.     </head>
  157.     <body>
  158.         <div class="background-left"></div>
  159.         <div class="background-right"></div>
  161.         <!-- Define header and footer blocks before your content -->
  162.         {% set unidad = recetum.historia.agenda.sala.unidad %}
  163.         <!--header>
  164.             <div style="text-align: left; width: 49%; float: left;">
  165.                 <img src="{{ app.request.getSchemeAndHttpHost() }}{{ asset('assets/images/nueva_cabecera.png') }}" style="width:100%;height:auto;image-rendering: -webkit-optimize-contrast;">
  166.             </div>
  167.             <div style="text-align: left; width: 49%; float: left;">
  168.                 <img src="{{ app.request.getSchemeAndHttpHost() }}{{ asset('assets/images/nueva_cabecera.png') }}" style="width:100%;height:auto;image-rendering: -webkit-optimize-contrast;">
  169.             </div>
  170.             
  171.         </header-->
  173.         <header>
  174.             <div class="hdr-wrap">
  175.                 <div class="hdr-col hdr-left">
  176.                     <img class="hdr-img"
  177.                         src="{{ app.request.getSchemeAndHttpHost() }}{{ asset('assets/images/nueva_cabecera.png') }}">
  178.                     <div class="hdr-overlay">
  179.                         <b>{{ empresa.telefono ?? '' }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ empresa.correo2 ?? '' }}
  180.                         <br><br>
  181.                         <span style="font-size:11px">{{ empresa.direccion ?? '' }}</span></b>
  182.                     </div>
  183.                 </div>
  185.                 <div class="hdr-col hdr-right">
  186.                     <img class="hdr-img"
  187.                         src="{{ app.request.getSchemeAndHttpHost() }}{{ asset('assets/images/nueva_cabecera.png') }}">
  188.                     <div class="hdr-overlay">
  189.                         <b>{{ empresa.telefono ?? '' }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ empresa.correo2 ?? '' }}
  190.                         <br><br>
  191.                         <span style="font-size:11px">{{ empresa.direccion ?? '' }}</span></b>
  192.                     </div>
  193.                 </div>
  194.             </div>
  195.         </header>
  198.         <div class="footer2">
  199.             <div style="width: 50%; float: left; text-align: left; font-size: 14px;">
  200.                 <b>Diagnósticos:</b><br>
  201.                 {% for dx in dxs %}
  202.                 {{ dx.cie10.codigo }} &nbsp;&nbsp; {{ dx.cie10.nombre }}<br>
  203.                 {% endfor %}
  204.                 <br>
  205.                 {# AGRUPAR POR TIPO #}
  206.                 {% for tipo, rows in agrupado %}
  207.                 <div style="border:1px solid #d1d5db;border-radius:10px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:13px;">
  208.                     <div style="background:#e5e7eb;padding:1px 10px;font-weight:700;">
  209.                     {{ tipo }}
  210.                     </div>
  212.                     <table style="border-collapse:collapse;">
  213.                     <thead>
  214.                         <tr style="background:#f9fafb;">
  215.                         <th style="text-align:left;padding:1px 10px;border-bottom:1px solid #e5e7eb;width:70px;">Cant</th>
  216.                         <th style="text-align:left;padding:1px 10px;border-bottom:1px solid #e5e7eb;">Procedimiento</th>
  217.                         </tr>
  218.                     </thead>
  219.                     <tbody>
  220.                         {% for row in rows %}
  221.                         <tr>
  222.                             <td style="padding:1px 10px;border-bottom:1px solid #f1f5f9;font-weight:700;">{{ row.cant }}</td>
  223.                             <td style="padding:1px 10px;border-bottom:1px solid #f1f5f9;">{{ row.nombre }}</td>
  224.                         </tr>
  225.                         {% endfor %}
  226.                     </tbody>
  227.                     </table>
  228.                 </div>
  229.                 {% endfor %}
  230.                 <br>
  231.             </div>
  232.             <div style="width: 50%; float: right; text-align: left; font-size: 14px;">
  233.                 <b>Diagnósticos:</b><br>
  234.                 {% for dx in dxs %}
  235.                 {{ dx.cie10.codigo }}&nbsp;&nbsp; {{ dx.cie10.nombre }}<br>
  236.                 {% endfor %}
  237.                 {# AGRUPAR POR TIPO #}
  238.                 <br>
  239.                 {% for tipo, rows in agrupado %}
  240.                 <div style="border:1px solid #d1d5db;border-radius:10px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;font-size:13px;">
  241.                     <div style="background:#e5e7eb;padding:1px 10px;font-weight:700;">
  242.                     {{ tipo }}
  243.                     </div>
  245.                     <table style="border-collapse:collapse;">
  246.                     <thead>
  247.                         <tr style="background:#f9fafb;">
  248.                         <th style="text-align:left;padding:1px 10px;border-bottom:1px solid #e5e7eb;width:70px;">Cant</th>
  249.                         <th style="text-align:left;padding:1px 10px;border-bottom:1px solid #e5e7eb;">Procedimiento</th>
  250.                         </tr>
  251.                     </thead>
  252.                     <tbody>
  253.                         {% for row in rows %}
  254.                         <tr>
  255.                             <td style="padding:1px 10px;border-bottom:1px solid #f1f5f9;font-weight:700;">{{ row.cant }}</td>
  256.                             <td style="padding:1px 10px;border-bottom:1px solid #f1f5f9;">{{ row.nombre }}: {{ row.obs }}</td>
  257.                         </tr>
  258.                         {% endfor %}
  259.                     </tbody>
  260.                     </table>
  261.                 </div>
  262.                 {% endfor %}
  263.                 <br>
  264.             </div>
  265.             <div style="clear: both;"></div>
  266.         </div>
  268.         <footer>
  269.             <div style="text-align: left; width: 50%; float: left; font-size: 12px;" class="ftr">
  270.                 <b>Firma y Sello:</b>
  271.             </div>
  272.             <div style="text-align: left; width: 50%; float: right; font-size: 12px;" class="ftr">
  273.                 <b>Próxima Cita</b>
  274.             </div>
  275.             <div style="clear: both;"></div>
  276.         </footer>
  278.         <!-- Wrap the content of your PDF inside a main tag -->
  279.         <main>
  280.             <div style="clear: both;"></div>
  281.             {% set ames = {'01': 'ENERO', '02': 'FEBRERO', '03': 'MARZO', '04': 'ABRIL', '05': 'MAYO', '06': 'JUNIO', '07': 'JULIO', '08': 'AGOSTO', '09': 'SEPTIEMBRE', '10': 'OCTUBRE', '11': 'NOVIEMBRE', '12': 'DICIEMBRE'} %}
  282.             {% set tmes = ames[recetum.fecha|date("m")] %}
  283.             <div style="width: 50%; float: left; text-align: left;font-size: 16px;">
  284.                 <!--b>Fecha:</b> {{ recetum.historia.agenda.inicio|date('d') }}/{{ tmes }}/{{ recetum.historia.agenda.inicio|date('Y') }}<br-->
  285.                 <b>Fecha:</b> {{ recetum.fecha|date('d') }}/{{ tmes }}/{{ recetum.fecha|date('Y') }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Receta No:</b>{{ recetum.id }}<br>
  286.                 <b>Paciente:</b> {{ recetum.paciente.cedula }} - {{ recetum.paciente.apellido1 }} {{ recetum.paciente.apellido2 }} {{ recetum.paciente.nombre1 }} {{ recetum.paciente.nombre2 }}<br>
  287.                 <!--b>Alergias: </b> {{recetum.paciente.alergias}}<br-->
  288.                 {% set preparacion = recetum.historia.agenda.preparacion %}
  289.                 {% if(preparacion != null) %}
  290.                 <!--b>Peso: </b> {{preparacion.peso}} Kg &nbsp;&nbsp;<b>Talla: </b> {{preparacion.estatura}} cm<br-->
  291.                 {% endif %}
  292.             </div>
  294.             <div style="width: 50%; float: left; text-align: left;font-size: 16px;">
  295.                 <b>Indicaciones:</b>
  296.             </div>
  297.             <div style="clear: both;"></div>
  298.             <br>
  299.             <div style="width: 48%; float: left; text-align: left; font-size: 16px;">
  300.                 {% set cont = 0 %}
  301.                 {% for detalle in recetum.recetaDetalles %}
  302.                 {% set cont = cont + 1 %}
  303.                 <div style="text-align: left; font-size: 16px;">
  304.                     {{ cont }}&nbsp;&nbsp;{{ detalle.nombre }}
  305.                 </div>
  306.                 <div style="text-align: left; font-size: 16px;">
  307.                     &nbsp;&nbsp;&nbsp;&nbsp;Cantidad: {{ detalle.cantidad }}
  308.                 </div>
  309.                 {% endfor %}
  310.             </div>
  311.             <br>
  312.             <div style="width: 48%; float: right; text-align: left;">
  313.                 {% set cont = 0 %}
  314.                 {% for detalle in recetum.recetaDetalles %}
  315.                 {% set cont = cont + 1 %}
  316.                 <div style="text-align: left; font-size: 16px;">
  317.                     {{ cont }}&nbsp;&nbsp;{{ detalle.nombre }}
  318.                 </div>
  319.                 <div style="text-align: left; font-size: 16px;">
  320.                     &nbsp;&nbsp;&nbsp;&nbsp;Indicacion: {{ detalle.indicacion }}
  321.                 </div>
  322.                 {% endfor %}
  323.             </div>
  324.             <div style="clear: both;"></div>
  325.             <div style="width: 48%; float: left; text-align: left;font-size:14px;">
  326.                 {{ recetum.rp | raw }}
  327.             </div>
  328.             <div style="width: 48%; float: right; text-align: left;font-size:14px;">
  329.                 {{ recetum.prescripcion | raw }}
  330.             </div>
  332.             <div style="clear: both;"></div>
  333.             
  334.             
  335.         </main>
  336.     </body>
  337. </html>