<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="public/css/style.css">

    <title>Reporte de documentos recividos</title>
</head>

<body>

    <div class="container pt-5">
        <div class="row">
            <div class="col-2">
                <img src="public/galeria/{{empresa.logo}}" class="img-fluid" alt="logo de la empresa">
            </div>
            <div class="col">
                <div class="row h-100">
                    <div class="col">
                        <h6 class="text-center">{{empresa.nombre}}</h6>
                        <h5 class="text-center">REPORTE DE DOCUMENTOS RECIBIDOS POR LA PLATAFORMA MESA DE PARTES VIRTUAL.</h5>
                    </div>
                    <div class="col-2">
                        <p class="text-right" style="font-size: 10px;">
                            <strong>Fecha</strong>: {{fecha}} <br>
                            <strong>Hora</strong>: {{hora}}
                        </p>
                    </div>
                    <div class="col-12 align-self-end">
                        <div class="row" style="font-size: 12px;">
                            <div class="col-6">
                                <p>De: <strong>{{fecha_de}}</strong> Hasta: <strong>{{fecha_asta}}</strong></p>
                            </div>
                            <div class="col-6">
                                <p class="text-right">Generado por <strong>{{user.nombre}}</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="table-responsive mt-2">
            <table class="table-sm table-bordered table-striped w-100" style="font-size: 10px;">
                <thead class="text-center text-uppercase">
                    <tr>
                        <th scope="col">ITEM</th>
                        <th>Empresa</th>
                        <th>Responsable</th>
                        <th>Asunto</th>
                        <th>Folio</th>
                        <th>Fecha</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    {% set numero = 1 %}
                    {% for solicitante in solicitantes %}
                    <tr>
                        <th scope="row">{{numero}}</th>
                        <td>{{solicitante.razon_social}}</td>
                        <td>{{solicitante.nombres}}
                            {{solicitante.apellido_paterno}}
                            {{solicitante.apellido_materno}}</td>
                        <td>{{solicitante.asunto}}</td>
                        <td>{{solicitante.numero_folio}}</td>
                        <td class="text-right">{{solicitante.getFecha()}} <br> {{solicitante.getHora()}}</td>
                        <td>
                            {% if solicitante.estado == 'pendiente' %}
                            <b class="text-danger">Pendiente</b>
                            {% else %}
                            <b class="text-success">Revisado</b>
                            {% endif %}
                        </td>
                    </tr>
                    {% set numero = numero + 1 %}
                    {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <div class="d-flex justify-content-center py-3">
        <button class="btn btn-sm btn-verdedark d-print-none" id="btn-imprimir">Imprimir</button>
    </div>
</body>

</html>
</div><!-- Optional JavaScript -->
<!-- jQuery first, then Bootstrap JS -->
<script src="public/js/jquery-3.5.1.min.js"></script>
<script src="public/js/bootstrap.min.js"></script>
<script src="public/js/main.js"></script>
</body>

</html>