283 lines
8.0 KiB
PHP
283 lines
8.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vale de Entrega de Constancias</title>
|
|
<style>
|
|
/* CONFIGURACIÓN DE PÁGINA */
|
|
@page {
|
|
margin: 1.2cm 1.5cm;
|
|
size: letter;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 10pt;
|
|
line-height: 1.3;
|
|
color: #000;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* HEADER */
|
|
.header {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.header-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.header-left {
|
|
width: 25%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.header-center {
|
|
width: 40%;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.header-right {
|
|
width: 35%;
|
|
text-align: right;
|
|
vertical-align: top;
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.logo {
|
|
max-height: 50px;
|
|
width: auto;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 9pt;
|
|
font-weight: bold;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
/* CUERPO DEL DOCUMENTO */
|
|
.date-location {
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 12pt;
|
|
margin: 10px 0;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.content {
|
|
text-align: justify;
|
|
margin-bottom: 12px;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* LISTA DE TAGS */
|
|
.tag-list {
|
|
margin: 10px 0;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.tag-columns {
|
|
column-count: 3;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
.tag-item {
|
|
margin: 2px 0;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
/* --- ZONA DE FIRMAS (CSS IMPORTANTE AQUÍ) --- */
|
|
.firmas-container {
|
|
margin-top: 40px; /* Más espacio antes de empezar las firmas */
|
|
width: 100%;
|
|
}
|
|
|
|
.firma-titulo {
|
|
font-weight: bold;
|
|
font-size: 10pt;
|
|
margin-bottom: 15px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Contenedor para centrar la firma única de Entrega */
|
|
.firma-entrega-wrapper {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Contenedor general de Reciben */
|
|
.reciben-wrapper {
|
|
width: 100%;
|
|
text-align: center; /* Esto centra las firmas horizontalmente */
|
|
font-size: 0; /* Truco para eliminar espacios fantasmas entre inline-blocks */
|
|
}
|
|
|
|
/* CAJA INDIVIDUAL DE FIRMA (RECIBEN) */
|
|
.firma-reciben-item {
|
|
width: 44%; /* Menos del 50% para que quepan 2 */
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
margin-bottom: 60px; /* <--- ESTO ARREGLA QUE ESTÉN PEGADOS VERTICALMENTE */
|
|
font-size: 10pt; /* Restauramos tamaño de letra */
|
|
}
|
|
|
|
/* CAJA INDIVIDUAL DE ENTREGA */
|
|
.firma-entrega-box {
|
|
display: inline-block;
|
|
width: 50%; /* Ancho controlado para que no ocupe toda la hoja */
|
|
}
|
|
|
|
.firma-linea {
|
|
border-top: 1px solid #000;
|
|
padding-top: 5px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.firma-nombre {
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.firma-cargo {
|
|
font-size: 8pt;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 7pt;
|
|
text-align: center;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 5px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<table class="header-table">
|
|
<tr>
|
|
<td class="header-left">
|
|
<?php
|
|
$imagePath = resource_path('images/logo-seguridad.png');
|
|
$imageData = base64_encode(file_get_contents($imagePath));
|
|
$imageSrc = 'data:image/png;base64,' . $imageData;
|
|
?>
|
|
<img src="{{ $imageSrc }}" alt="Logo Seguridad" class="logo">
|
|
</td>
|
|
<td class="header-center">
|
|
<p class="header-title">
|
|
<strong>SEGURIDAD</strong><br>
|
|
SECRETARIA DE SEGURIDAD<br>
|
|
Y PROTECCIÓN CIUDADANA
|
|
</p>
|
|
</td>
|
|
<td class="header-right">
|
|
<p class="header-title">
|
|
Dirección General de la Policía Estatal de Caminos<br>
|
|
Dirección de Servicios al Público<br>
|
|
Departamento del Registro Público Vehicular
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="date-location">
|
|
Villahermosa, Tabasco a {{ $fecha }}
|
|
</div>
|
|
|
|
<div class="title">
|
|
VALE DE ENTREGA
|
|
</div>
|
|
|
|
<div class="content">
|
|
Se realiza la entrega de <strong>{{ $total_tags }}</strong>
|
|
constancias de inscripción de segunda generación (moradas) para la realización de trámites del Registro
|
|
Público Vehicular, las cuales se enumeran por folios, a continuación.
|
|
</div>
|
|
|
|
<div class="tag-list">
|
|
<div class="tag-columns">
|
|
@foreach($tags as $index => $tag)
|
|
<div class="tag-item">
|
|
{{ $index + 1 }}. {{ $tag->folio }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<div class="firmas-container">
|
|
|
|
<div>
|
|
<div class="firma-titulo">ENTREGA</div>
|
|
<div class="firma-entrega-wrapper">
|
|
<div class="firma-entrega-box">
|
|
<div class="firma-linea">
|
|
<p class="firma-nombre">LIC. MARY ISABEL RAMON MADRIGAL</p>
|
|
<p class="firma-cargo">JEFA DEL DEPARTAMENTO REPUVE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="firma-titulo">RECIBEN</div>
|
|
<div class="reciben-wrapper">
|
|
@foreach($responsables as $responsable)
|
|
<div class="firma-reciben-item">
|
|
<div class="firma-linea">
|
|
<p class="firma-nombre">
|
|
{{ strtoupper($responsable->full_name) }}
|
|
</p>
|
|
<p class="firma-cargo">
|
|
{{ strtoupper($responsable->roles->first()->description ?? 'RESPONSABLE') }} MÓDULO {{ $module->id }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer">
|
|
Av. Adolfo Ruiz Cortines, S/N, Colonia Casa Blanca, C.P. 86060, Villahermosa, Tabasco, México<br>
|
|
Tel: 9933156230 | www.ssptabasco.gob.mx
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|