@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;
        $totalemitido = 0;
        @endphp
        <h1><strong>Reporte General</strong></h1>
        <h4>INSTITUCIONES {{strtoupper($tipo )}} {{$tipo != "PLANTA" && $tipo !="TODAS" ? "(ES)" : "" }}</h4>
        <hr>
        <div class="border p-2">
            <figure>
                <blockquote class="blockquote">
                    <p class="fs-6 ps-2">Al hacer clic en el número de votantes, se desplegará un reporte detallado que presenta la lista completa de trabajadores asociados, incluyendo sus nombres completos y otros datos relevantes. Esta funcionalidad permite a los usuarios revisar de manera clara y organizada la información correspondiente a cada trabajador, facilitando la auditoría y el análisis de los registros de votantes por institución.</p>
                </blockquote>
                <figcaption class="blockquote-footer">
                    Dirección General de Informática
                </figcaption>
            </figure>
        </div>
        <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)
                    @if($institucion->nomina > 0)
                    <tr>
                        {{-- <td>{!!($institucion->acronimo) ? $institucion->acronimo : $institucion->nombre!!}</td> --}}
                        <td>{!!($institucion->acronimo) ? "(<b>".$institucion->acronimo."</b>)" . " " .$institucion->nombre : $institucion->nombre!!}</td>
                        <td>{{$institucion->nomina}}</td>
                        <td>
                            @php
                            if($institucion->trabajadores->where('voto', 'SI')->count() <= $institucion->nomina){
                                echo "<a class='text-decoration-none text-dark' href='instituciones/$institucion->id/trabajadores' target='_blank'>".$institucion->trabajadores->where('voto', 'SI')->count()."</a>";
                            }else{
                                echo "<a class='text-decoration-none text-dark' href='instituciones/$institucion->id/trabajadores' target='_blank'>".$institucion->nomina."</a>";
                            }
                            @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();
                    if($institucion->trabajadores->where('voto', 'SI')->count() >= $institucion->nomina){
                        $totalemitido += $institucion->nomina;
                    }else{
                        $totalemitido += $institucion->trabajadores->where('voto', 'SI')->count();
                    }
                   
                    @endphp
                    @endif
                @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($totalemitido)}}</td>
                    <td>{{number_format($total_nomina - $totalemitido)}}</td>
                    <td>{{($division = ($totalemitido / $total_nomina) * 100) ? number_format($division, 2) : 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 src="{{asset("electoral/public/assets/js/dataTable-report.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');
    }

    window.leftImageBase64 = "{!! $leftImagePath !!}";
    window.rightImageBase64 = "{!! $rightImagePath !!}";
    window.totalNomina = {{ $total_nomina }};
    window.votosEmitidos = {{ $totalemitido }};

    $("#general-instituciones").DataTable(t);



    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