@extends('layouts.app')
<title>Reporte {{strtoupper($tipo )}} </title>
@section('content')
<div class="container-fluid my-5">
         @php
        $votos_emitidos = 0;
        $votos_faltantes = 0;
        $total_nomina = 0;
        $porcentaje_ejecutado = 0;
        @endphp
        <h1><strong>Reporte General</strong></h1>
        <h4>INSTITUCIONES {{strtoupper($tipo )}} {{$tipo != "PLANTA" && $tipo !="TODAS" ? "(ES)" : "" }}</h4>
        <hr>
        <table id="general-instituciones" class="table table-bordered text-center">
            <thead>
                <tr>
                    <th scope="col">Nombre</th>
                    <th scope="col">Total Nomina</th>
                    <th scope="col">Votos Emitidos</th>
                    <th scope="col">Votos Faltantes</th>
                    <th scope="col">Porcentaje</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data as $institucion)
                    <tr>
                        <td>{{$institucion->nombre}}</td>
                        <td>{{$institucion->nomina}}</td>
                        <td>
                            @php
                            if($institucion->trabajadores->where('voto', 'SI')->count() <= $institucion->nomina){
                                echo $institucion->trabajadores->where('voto', 'SI')->count();
                            }else{
                                echo $institucion->nomina;
                            }
                            @endphp
                        </td>
                        <td>
                            @php
                            if(($institucion->nomina - $institucion->trabajadores->where('voto', 'SI')->count()) <= 0){
                                echo 0;
                            }else{
                                echo $institucion->nomina - $institucion->trabajadores->where('voto', 'SI')->count();
                            }
                            @endphp
                        </td>
                        <td>
                            @php
                            if((($institucion->trabajadores->where('voto', 'SI')->count() / $institucion->nomina) * 100) > 100){
                                echo number_format(100,2);
                            }else{
                                echo number_format(($institucion->trabajadores->where('voto', 'SI')->count() / $institucion->nomina) * 100, 2);
                            }
                            @endphp
                            %
                        </td>
                    </tr>

                    @php
                    $total_nomina += $institucion->nomina;
                    $votos_emitidos += $institucion->trabajadores->where('voto', 'SI')->count();
                    
                    @endphp
                @endforeach
            </tbody>
        </table>
        <hr>
        <table class="table table-bordered text-center">
            <thead class="bg-dark text-white">
                <tr>
                    <th>Total Nominas</th>
                    <th>Total Votos Emitidos</th>
                    <th>Total Votos Faltantes</th>
                    <th>% Ejecutado</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{number_format($total_nomina)}}</td>
                    <td>{{number_format($votos_emitidos)}}</td>
                    <td>{{number_format($total_nomina - $votos_emitidos)}}</td>
                    <td>{{(number_format(($division = $votos_emitidos / $total_nomina) * 100, 2)) ? $division : 0}} %</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">Grafica Institución</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <canvas
                        id="pie"
                        class="chart"
                        style="width: 100%;"
                    ></canvas>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
          </div>
        </div>
      </div>
@endsection

@section('styles')
<style>
    .container{
        margin-top: 0rem;
        display: flex;
        justify-content: center;
    }
    h1{
        text-align: center;
    }
    th{
        background-color: #aaccff;
        padding: 1rem;
    }

    td{
        padding: 0.5rem;
        text-align: center;
    }
    .chart-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50rem;
      margin: 0 auto;
      padding: 1rem;
    }
    canvas{
        width: 50rem;
    }
</style>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<!-- DataTables Buttons CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.0/css/buttons.dataTables.min.css">
@endsection

@section('scripts') 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
   <script src="https://cdn.datatables.net/2.1.2/js/dataTables.min.js"></script>

    <!-- DataTables Buttons JS -->
    <script src="https://cdn.datatables.net/buttons/2.2.0/js/dataTables.buttons.min.js"></script>

    <!-- JSZip (para exportar a Excel) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>

    <!-- pdfMake (para exportar a PDF) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

    <!-- jQuery (necesario para DataTables) -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>



    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- DataTables Buttons JS -->
    <script src="https://cdn.datatables.net/buttons/2.2.0/js/dataTables.buttons.min.js"></script>

    <!-- JSZip (para exportar a Excel) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>

    <!-- pdfMake (para exportar a PDF) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

    <!-- DataTables Buttons PDF JS (necesario para la exportación en PDF) -->
    <script src="https://cdn.datatables.net/buttons/2.2.0/js/buttons.html5.min.js"></script>

    <script>
    function generatePDF() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();

        // Selecciona la tabla
        const table = document.getElementById('general-instituciones');
        const table2 = document.querySelectorAll('table')[1];

           // Configuración para centrar el texto en las tablas
    const options = {
        styles: { halign: "center" } // Alinea el texto horizontalmente al centro
    };
        // Obtiene el contenido de la tabla (puedes agregar más lógica si lo necesitas)
        doc.autoTable({ html: '#general-instituciones' });
        doc.addPage(); // Agrega una nueva página para la segunda tabla
        doc.autoTable({ html: table2 });

        // Descarga el PDF
        doc.save('reporte.pdf');
    }

    $("#general-instituciones").DataTable({
        language: {
            "aria": {
                "sortAscending": "Activar para ordenar la columna de manera ascendente",
                "sortDescending": "Activar para ordenar la columna de manera descendente"
            },
            "autoFill": {
                "cancel": "Cancelar",
                "fill": "Rellene todas las celdas con <i>%d<\/i>",
                "fillHorizontal": "Rellenar celdas horizontalmente",
                "fillVertical": "Rellenar celdas verticalmente"
            },
            "buttons": {
                "collection": "Colección",
                "colvis": "Visibilidad",
                "colvisRestore": "Restaurar visibilidad",
                "copy": "Copiar",
                "copyKeys": "Presione ctrl o u2318 + C para copiar los datos de la tabla al portapapeles del sistema. <br \/> <br \/> Para cancelar, haga clic en este mensaje o presione escape.",
                "copySuccess": {
                    "1": "Copiada 1 fila al portapapeles",
                    "_": "Copiadas %d fila al portapapeles"
                },
                "copyTitle": "Copiar al portapapeles",
                "csv": "CSV",
                "excel": "Excel",
                "pageLength": {
                    "-1": "Mostrar todas las filas",
                    "_": "Mostrar %d filas"
                },
                "pdf": "PDF",
                "print": "Imprimir",
                "createState": "Crear Estado",
                "removeAllStates": "Borrar Todos los Estados",
                "removeState": "Borrar Estado",
                "renameState": "Renombrar Estado",
                "savedStates": "Guardar Estado",
                "stateRestore": "Restaurar Estado",
                "updateState": "Actualizar Estado"
            },
            "infoThousands": ",",
            "loadingRecords": "Cargando...",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            },
            "processing": "Procesando...",
            "search": "Buscar:",
            "searchBuilder": {
                "add": "Añadir condición",
                "button": {
                    "0": "Constructor de búsqueda",
                    "_": "Constructor de búsqueda (%d)"
                },
                "clearAll": "Borrar todo",
                "condition": "Condición",
                "deleteTitle": "Eliminar regla de filtrado",
                "leftTitle": "Criterios anulados",
                "logicAnd": "Y",
                "logicOr": "O",
                "rightTitle": "Criterios de sangría",
                "title": {
                    "0": "Constructor de búsqueda",
                    "_": "Constructor de búsqueda (%d)"
                },
                "value": "Valor",
                "conditions": {
                    "date": {
                        "after": "Después",
                        "before": "Antes",
                        "between": "Entre",
                        "empty": "Vacío",
                        "equals": "Igual a",
                        "not": "Diferente de",
                        "notBetween": "No entre",
                        "notEmpty": "No vacío"
                    },
                    "number": {
                        "between": "Entre",
                        "empty": "Vacío",
                        "equals": "Igual a",
                        "gt": "Mayor a",
                        "gte": "Mayor o igual a",
                        "lt": "Menor que",
                        "lte": "Menor o igual a",
                        "not": "Diferente de",
                        "notBetween": "No entre",
                        "notEmpty": "No vacío"
                    },
                    "string": {
                        "contains": "Contiene",
                        "empty": "Vacío",
                        "endsWith": "Termina con",
                        "equals": "Igual a",
                        "not": "Diferente de",
                        "startsWith": "Inicia con",
                        "notEmpty": "No vacío",
                        "notContains": "No Contiene",
                        "notEndsWith": "No Termina",
                        "notStartsWith": "No Comienza"
                    },
                    "array": {
                        "equals": "Igual a",
                        "empty": "Vacío",
                        "contains": "Contiene",
                        "not": "Diferente",
                        "notEmpty": "No vacío",
                        "without": "Sin"
                    }
                },
                "data": "Datos"
            },
            "searchPanes": {
                "clearMessage": "Borrar todo",
                "collapse": {
                    "0": "Paneles de búsqueda",
                    "_": "Paneles de búsqueda (%d)"
                },
                "count": "{total}",
                "emptyPanes": "Sin paneles de búsqueda",
                "loadMessage": "Cargando paneles de búsqueda",
                "title": "Filtros Activos - %d",
                "countFiltered": "{shown} ({total})",
                "collapseMessage": "Colapsar",
                "showMessage": "Mostrar Todo"
            },
            "select": {
                "cells": {
                    "1": "1 celda seleccionada",
                    "_": "%d celdas seleccionadas"
                },
                "columns": {
                    "1": "1 columna seleccionada",
                    "_": "%d columnas seleccionadas"
                },
                "rows": {
                    "1": "1 fila seleccionada",
                    "_": "%d filas seleccionadas"
                }
            },
            "thousands": ",",
            "datetime": {
                "previous": "Anterior",
                "hours": "Horas",
                "minutes": "Minutos",
                "seconds": "Segundos",
                "unknown": "-",
                "amPm": [
                    "am",
                    "pm"
                ],
                "next": "Siguiente",
                "months": {
                    "0": "Enero",
                    "1": "Febrero",
                    "10": "Noviembre",
                    "11": "Diciembre",
                    "2": "Marzo",
                    "3": "Abril",
                    "4": "Mayo",
                    "5": "Junio",
                    "6": "Julio",
                    "7": "Agosto",
                    "8": "Septiembre",
                    "9": "Octubre"
                },
                "weekdays": [
                    "Domingo",
                    "Lunes",
                    "Martes",
                    "Miércoles",
                    "Jueves",
                    "Viernes",
                    "Sábado"
                ]
            },
            "editor": {
                "close": "Cerrar",
                "create": {
                    "button": "Nuevo",
                    "title": "Crear Nuevo Registro",
                    "submit": "Crear"
                },
                "edit": {
                    "button": "Editar",
                    "title": "Editar Registro",
                    "submit": "Actualizar"
                },
                "remove": {
                    "button": "Eliminar",
                    "title": "Eliminar Registro",
                    "submit": "Eliminar",
                    "confirm": {
                        "_": "¿Está seguro que desea eliminar %d filas?",
                        "1": "¿Está seguro que desea eliminar 1 fila?"
                    }
                },
                "multi": {
                    "title": "Múltiples Valores",
                    "restore": "Deshacer Cambios",
                    "noMulti": "Este registro puede ser editado individualmente, pero no como parte de un grupo.",
                    "info": "Los elementos seleccionados contienen diferentes valores para este registro. Para editar y establecer todos los elementos de este registro con el mismo valor, haga click o toque aquí, de lo contrario conservarán sus valores individuales."
                },
                "error": {
                    "system": "Ha ocurrido un error en el sistema (<a target=\"\\\" rel=\"\\ nofollow\" href=\"\\\"> Más información<\/a>)."
                }
            },
            "decimal": ".",
            "emptyTable": "No hay datos disponibles en la tabla",
            "zeroRecords": "No se encontraron coincidencias",
            "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
            "infoFiltered": "(Filtrado de _MAX_ total de entradas)",
            "lengthMenu": "Mostrar _MENU_ entradas",
            "stateRestore": {
                "removeTitle": "Eliminar",
                "creationModal": {
                    "search": "Buscar",
                    "button": "Crear",
                    "columns": {
                        "search": "Columna de búsqueda",
                        "visible": "Columna de visibilidad"
                    },
                    "name": "Nombre:",
                    "order": "Ordenar",
                    "paging": "Paginar",
                    "scroller": "Posición de desplazamiento",
                    "searchBuilder": "Creador de búsquedas",
                    "select": "Selector",
                    "title": "Crear nuevo",
                    "toggleLabel": "Incluye:"
                },
                "duplicateError": "Ya existe un valor con el mismo nombre",
                "emptyError": "No puede ser vacío",
                "emptyStates": "No se han guardado",
                "removeConfirm": "Esta seguro de eliminar %s?",
                "removeError": "Fallo al eliminar",
                "removeJoiner": "y",
                "removeSubmit": "Eliminar",
                "renameButton": "Renombrar",
                "renameLabel": "Nuevo nombre para %s:",
                "renameTitle": "Renombrar"
            },
            "infoEmpty": "No hay datos para mostrar"
        },
        dom: 'Bfrtip', // Esta opción coloca los botones en la parte superior de la tabla
            buttons: [
                {
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    title: 'REPORTE EXCEL',
                },
                {
                    extend: 'pdf',
                    text: 'Exportar a PDF',
                    title: 'REPORTE PDF',
                    orientation: 'landscape', // Opcional, ajusta la orientación del PDF
                    pageSize: 'A4' // Opcional, ajusta el tamaño de la página
                }
            ]
    });



    var xValues = ["Personal Desconocido", "Votos Faltantes","Total Votos Emitidos"];
    var yValues = [ 25, 20, 25];
    var barColors = [
        "#CDCDCD",
        "#087C14",
        "#B20505",
    ];

    new Chart(document.getElementById("pie"), {
        type: "pie",
        data: {
            labels: xValues,
            datasets: [
                {
                    backgroundColor: barColors,
                    data: yValues,
                },
            ],
        },
        options: {
            title: {
                display: true,
                text: "Votantes por instituciones nacionales",
            },
        },
    },

);

</script>
@endsection