@extends('layouts.app')

@section('content')
<section class="mt-5 shadow-lg border rounded p-4 bg-light">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="fw-bold">Registro de Votantes Reportados</h4>
    @if(auth()->user()->email == "admin@mail.com")
    <button class="btn btn-dark" id="btn-graphics">
      <i class="fas fa-chart-bar"></i> Ver Estadísticas
    </button>
    @endif
  </div>

  <div class="row g-3">
    <div class="col-md-6" id="success">
      <div class="alert alert-success text-center shadow-sm">
        <h2><i class="fas fa-check-circle"></i></h2>
        <p class="fw-bold">Cédulas procesadas con éxito</p>
        <p>Estas cédulas se han ingresado sin errores.</p>
      </div>
    </div>
    <div class="col-md-6" id="errores">
      <div class="alert alert-danger text-center shadow-sm">
        <h2><i class="fas fa-times-circle"></i></h2>
        <p class="fw-bold">Cédulas con errores</p>
        <p>Verifique el formato en la casilla de texto.</p>
      </div>
    </div>
  </div>
  <hr>
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        <i class="fas fa-file-excel text-success border rounded-circle border-success p-2"></i>
        <span class="ms-2">Subir Excel</span>
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
      <form id="form-excel">
              <div class="alert alert-info">
                <p><i class="fas fa-info-circle"></i> Esta sección te permitirá cargar la data suministrada por los jefes de la sala situacional.</p>
              </div>
              <div class="row my-3 ">
                <div class="col-12 col-sm-12 col-md-12" id="success-excel">
                    <div class="container border-dark bg-warning text-white p-3 rounded text-center">
                      <h2><i class="fas fa-check-circle"></i></h2>
                      <p><b> Cédulas procesadas con éxito</b>
                        <br>
                        Estas cédulas se han ingresado sin errores.
                      </p>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12" id="errores-excel">
                    <div class="container border-dark bg-danger text-white p-3 rounded text-center">
                      <h2><i class="fas fa-times-circle"></i></h2>
                      <p> <b>Cédulas con errores.</b> <br>
                        Deben verificar que el formato sea el correcto en el archivo excel que han subido.
                      </p>
                      <p><b>Error(es):</b></p>
                      <ul id="cedulas-error-excel">

                      </ul>
                    </div>
                </div>
              </div>

            
              <div class="mb-3">
                <label for="select2" class="form-label fw-bold">Seleccione una institución:</label>
                <select name="institucion_id" id="select2" class="form-select select2" style="width: 100% !important" required></select>
                <!-- <div id="new-institution-container"></div> -->
              </div>
     
              <div class="input-group mb-3">
                <input type="file" class="form-control" id="inputGroupFile02" name="file" required>
                <label class="input-group-text" for="inputGroupFile02"><i class="fas fa-file-excel"></i></label>
              </div>
              
              <button class="btn btn-primary" id="btn-excel"><i class="fas fa-upload"></i> Cargar archivo</button>
            </form>    
    </div>
    </div>
  </div>
</div>

  <hr>
     
  <div class="mt-3 p-4 border rounded bg-white shadow-sm">
    <div class="alert alert-info d-flex align-items-center" role="alert">
        <p class="fs-6"><i class="fas fa-info-circle my-auto"></i> Ingrese las cédulas de los trabajadores reportados en el grupo de <b>WhatsApp</b>. Copie y pegue el mensaje en el campo de texto.</p>
    </div>
    <form id="form-ws">
      <div class="mb-3">
        <label for="institucion_id" class="form-label fw-bold">Seleccione una institución:</label>
        <select name="institucion_id" id="institucion_id" class="form-select select2" style="width: 100% !important"></select>
        <div id="new-institution-container"></div>
      </div>

      <div class="d-flex align-items-center mb-3">
        <input type="checkbox" checked id="tipo-voto" class="form-check-input me-2">
        <label for="tipo-voto" class="form-check-label me-3">Voto en SI</label>
        <label for="cantidad_nomina" class="fw-bold me-2">Total de Nómina:</label>
        <input type="number" id="cantidad_nomina" name="cantidad_nomina" class="form-control w-auto" readonly>
      </div>

      <div class="mb-3">
        <label for="mensaje" class="form-label fw-bold">Ingrese cédulas:</label>
        <textarea name="mensaje" id="mensaje" class="form-control" rows="6" placeholder="Pegue aquí el mensaje..."></textarea>
      </div>

      <div class="d-flex justify-content-between">
        <button type="reset" class="btn btn-dark text-white">
          <i class="fas fa-broom"></i> Limpiar
        </button>
        <button class="btn btn-primary" id="btn-ws">
          <i class="fas fa-paper-plane"></i> Enviar
        </button>
      </div>
    </form>
  </div>
</section>


<section id="div-graphics" class="mt-5 p-4 bg-light shadow-sm rounded">
  <div class="row border-bottom pb-4">
    <div class="col-md-6 p-4 border-end">
      <button class="btn btn-dark mb-3" id="refresh">
        <i class="fas fa-sync-alt"></i> Actualizar
      </button>
      <div class="barra p-3 bg-white rounded shadow-sm">
        <canvas id="bar-chart" width="800" height="450"></canvas>
      </div>
    </div>
    <div class="col-md-6 p-4">
      <div class="row text-center mb-3">
        <div class="col-md-4">
          <p class="fw-bold">Votos Emitidos: <span id="v-g-emitidos-planta" class="text-primary"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Votos Faltantes: <span id="v-g-faltantes-planta" class="text-warning"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Total Votantes: <span id="v-g-planta" class="text-success"></span></p>
        </div>
      </div>
      <div class="pie p-3 bg-white rounded shadow-sm">
        <canvas id="pie-chart" width="800" height="450"></canvas>
      </div>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 p-4 border-end">
      <div class="row text-center mb-3">
        <div class="col-md-4">
          <p class="fw-bold">Votos Emitidos: <span id="v-g-emitidos" class="text-primary"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Votos Faltantes: <span id="v-g-faltantes" class="text-warning"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Total Votantes: <span id="v-g" class="text-success"></span></p>
        </div>
      </div>
      <div class="dona p-3 bg-white rounded shadow-sm">
        <canvas id="doughnut-chart" width="800" height="450"></canvas>
      </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 p-4 border-end">
      <div class="row text-center mb-3">
        <div class="col-md-4">
          <p class="fw-bold">Votos Emitidos: <span id="v-n-emitidos" class="text-primary"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Votos Faltantes: <span id="v-n-faltantes" class="text-warning"></span></p>
        </div>
        <div class="col-md-4">
          <p class="fw-bold">Total Votantes: <span id="v-n" class="text-success"></span></p>
        </div>
      </div>
      <div class="dona p-3 bg-white rounded shadow-sm">
        <canvas id="doughnut-chart-nac" width="800" height="450"></canvas>
      </div>
    </div>
  </div>
</section>


@endsection

@section('scripts')
<script>
  $('#div-graphics').hide();
  $('#success').hide();
  $('#errores').hide();

  $('#success-excel').hide();
  $('#errores-excel').hide();

  $('#btn-graphics').click(function(){
    $('#div-graphics').show();
  });
   // Obtener el formulario y los elementos de mensaje
  //  const form = document.querySelector("form"),
  //       submitButton = document.querySelector('input[type="submit"]'),
  //       successMessage = document.getElementById("successMessage"),
  //       errorMessage = document.getElementById("errorMessage");

  // // Agregar un evento de envío al formulario
  // form.addEventListener("submit", function (event) {
  //   // Prevenir el envío del formulario por defecto
  //   event.preventDefault();

  //   // Simulando un envío fallido (puedes modificar esta lógica según tu aplicación)
  //   const enviadoExitosamente = false;

  //   if (enviadoExitosamente) {
  //     // Mostrar el mensaje de éxito y ocultar el mensaje de error
  //     successMessage.style.display = "block";
  //     errorMessage.style.display = "none";
  //   } else {
  //     // Mostrar el mensaje de error y ocultar el mensaje de éxito
  //     successMessage.style.display = "none";
  //     errorMessage.style.display = "block";
  //   }

  //   // Limpiar el formulario después de mostrar el mensaje
  //   form.reset();

  //   // Ocultar los mensajes después de 3 segundos
  //   setTimeout(() => {
  //     successMessage.style.display = "none";
  //     errorMessage.style.display = "none";
  //   }, 3000);
  //     });


    getVotesByTime();
    getAllWorkers();
    getAllWorkersByIns();
    getInstitutes();
    getAllWorkersByNac();
    // setInterval(() => {
    //   getVotesByTime()
    //   getAllWorkers()
    //   getAllWorkersByIns()
    // }, 50000);

    document.getElementById('refresh').addEventListener("click", function () {
      getVotesByTime()
      getAllWorkers()
      getAllWorkersByIns()
    })
    // Bar chart
    async function getVotesByTime(){
      return await fetch('api/reporte/barras')
                  .then(response => response.json())
                  .then(function(data) {
                    console.log(data)
                    new Chart(document.getElementById("bar-chart"), {
                        type: "bar",
                        data: {
                          labels: [
                            "11:00am",
                            "02:00pm",
                            "06:00pm"
                          ],
                          datasets: [
                            {
                              label: "Votos",
                              backgroundColor: [
                                "#0f4c81",
                                "#b71a2f",
                                "#b87333"
                              ],
                              data: [data.corte1, data.corte2, data.corte3],
                            },
                          ],
                        },
                        options: {
                          responsive: true,
                          legend: { display: false },
                          title: {
                            display: true,
                            text: "Votos emitidos según cortes",
                          },
                          scales: {
             
                              yAxes: [{
                                      display: true,
                                      ticks: {
                                          beginAtZero: true,
                                          steps: 10,
                                          stepValue: 5,
                                          max: 8456
                                      }
                                  }]
                          }
                        },
                      });  
                
                  });

    }

async function getAllWorkers() {
            return await fetch('api/reporte/votantes')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data.data || !Array.isArray(data.data)) {
                        console.error('Invalid API response for planta:', data);
                        $('#v-g-emitidos-planta').html('Error');
                        $('#v-g-faltantes-planta').html('Error');
                        $('#v-g-planta').html('Error');
                        return;
                    }

                    let verificados = 0, total_trabajadores = 0;

                    data.data.forEach(e => {
                        if (!e.planta) return; // Skip non-planta institutions
                        const nomina = Number(e.nomina) || 0;
                        if (nomina < 0) {
                            console.warn(`Invalid nomina value for planta institution ${e.id || 'unknown'}: ${nomina}`);
                            return;
                        }
                        total_trabajadores += nomina;
                        const trabajadoresToProcess = (Array.isArray(e.trabajadores) ? 
                            e.trabajadores.slice(0, nomina) : []
                        );
                        let institutionVerificados = 0;
                        trabajadoresToProcess.forEach(f => {
                            if (f.voto && f.voto.toUpperCase() === 'SI') {
                                verificados += 1;
                                institutionVerificados += 1;
                            }
                        });
                        console.log(`Planta Institution: ${e.id || 'unknown'}, Nomina: ${nomina}, Workers Processed: ${trabajadoresToProcess.length}, Votes Counted: ${institutionVerificados}`);
                    });

                    console.log(`Planta Total Votos Emitidos: ${verificados}, Total Votantes: ${total_trabajadores}`);

                    $('#v-g-emitidos-planta').html(verificados);
                    $('#v-g-faltantes-planta').html(total_trabajadores - verificados);
                    $('#v-g-planta').html(total_trabajadores);

                    new Chart(document.getElementById("pie-chart"), {
                        type: "pie",
                        data: {
                            labels: ["Votos emitidos", "Votos faltantes"],
                            datasets: [{
                                label: "Votos Planta",
                                backgroundColor: ["#b71a2f", "#808080"],
                                data: [verificados, total_trabajadores - verificados]
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: "Votos de GOB - Planta",
                                    color: "#333",
                                    font: { size: 18 }
                                },
                                legend: { position: "top" }
                            },
                           
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing planta data:', error);
                    $('#v-g-emitidos-planta').html('Error');
                    $('#v-g-faltantes-planta').html('Error');
                    $('#v-g-planta').html('Error');
                });
        }

        async function getAllWorkersByIns() {
            return await fetch('api/reporte/institutos/todos')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    // Validate API response
                    if (!data.data || !Array.isArray(data.data)) {
                        console.error('Invalid API response:', data);
                        $('#v-g-emitidos').html('Error');
                        $('#v-g-faltantes').html('Error');
                        $('#v-g').html('Error');
                        return;
                    }

                    let verificados = 0, total_trabajadores = 0;

                    // Process each institution
                    data.data.forEach(e => {
                        // Ensure nomina is a valid number
                        const nomina = Number(e.nomina) || 0;
                        if (nomina < 0) {
                            console.warn(`Invalid nomina value for institution ${e.id || 'unknown'}: ${nomina}`);
                            return;
                        }
                        total_trabajadores += nomina;
                        const trabajadoresToProcess = (Array.isArray(e.trabajadores) ? 
                            e.trabajadores.slice(0, nomina) : 
                            []
                        );

                        let institutionVerificados = 0;
                        trabajadoresToProcess.forEach(f => {
                            if (f.voto && f.voto.toUpperCase() === 'SI') {
                                verificados += 1;
                                institutionVerificados += 1;
                            }
                        });

                        // Detailed debug log
                        console.log(`Institution: ${e.id || 'unknown'}, Nomina: ${nomina}, Workers Processed: ${trabajadoresToProcess.length}, Votes Counted: ${institutionVerificados}`);
                    });

                    // Log total counts for debugging
                    console.log(`Total Votos Emitidos: ${verificados}, Total Votantes: ${total_trabajadores}`);

                    // Update HTML elements
                    $('#v-g-emitidos').html(verificados);
                    $('#v-g-faltantes').html(total_trabajadores - verificados);
                    $('#v-g').html(total_trabajadores);

                    // Doughnut chart
                    new Chart(document.getElementById("doughnut-chart"), {
                        type: "doughnut",
                        data: {
                            labels: ["Votos emitidos", "Votos faltantes"],
                            datasets: [{
                                label: "Votos",
                                backgroundColor: ["#b71a2f", "#808080"],
                                data: [verificados, total_trabajadores - verificados]
                            }]
                        },
                        options: {
                            plugins: {
                                title: {
                                    display: true,
                                    text: "Votos de GOB - Globales",
                                    color: "#333",
                                    font: { size: 18 } // Larger title font
                                },
                                legend: { position: "top" }
                            },
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing data:', error);
                    $('#v-g-emitidos').html('Error');
                    $('#v-g-faltantes').html('Error');
                    $('#v-g').html('Error');
                });
        }


    async function getAllWorkersByNac(){
      return await fetch('api/reporte/instituto/nacionales')
                  .then(response => response.json())
                  .then(function(data) {
                    console.log(data)
                    let verificados = 0,
                        total_trabajadores = 0;
                    
                    data.data.forEach(e => {
                        e.trabajadores.forEach(f => {
                          if(f.voto == "SI"){
                            verificados += 1;
                          }
                        })
                        total_trabajadores += e.nomina;
                    });

                    $('#v-n-emitidos').html(verificados);
                    $('#v-n-faltantes').html((total_trabajadores - verificados));
                    $('#v-n').html(total_trabajadores);
                    // Doughnut chart
                    new Chart(document.getElementById("doughnut-chart-nac"), {
                      type: "doughnut",
                      data: {
                        labels: [
                          "Votos emitidos",
                          "Votos faltantes",
                        ],
                        datasets: [
                          {
                            label: "Votos",
                            backgroundColor: [
                              "#b71a2f",
                              "grey",
                              // "#b87333",
                              // "#800020",
                              // "#2c395d",
                              // "#f5c068",
                              // "#122857",
                            ],
                            data: [verificados, (total_trabajadores - verificados)],
                          },
                        ],
                      },
                      options: {
                        title: {
                          display: true,
                          text: "Votos Nacionales",
                        },
                      },
                    });
                
                  });

    }

    


    $(document).on('submit', '#form-ws', async function(e) {
    e.preventDefault();
    
    const form = new FormData(this);

  
    const tipoVoto = $('#tipo-voto').is(':checked') ? 'SI' : 'NO';
    form.set('tipo_voto', tipoVoto); 

  
    const cantidadNomina = $('#cantidad_nomina').val();
    if (cantidadNomina) {
        form.append('cantidad_nomina', cantidadNomina);
    }

    let timerInterval;
    Swal.fire({
        title: "Procesando datos...",
        html: "La ventana se cerrará en <b></b> milisegundos.",
        timer: 500,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft()}`;
            }, 100);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    });

    return fetch('api/whatsapp', {
        method: 'POST',
        body: form
    })
    .then(response => response.json())
    .then(res => {
        if (cantidadNomina) {
            getInstitutes();
        }
        $('#form-ws').trigger('reset');
        $('#mensaje').val("")
        $('#institucion_id').val(null).trigger('change');
        document.getElementById('tipo-voto').checked = true;
        if (res.data.errores.length > 0) {
            let errores = '';

            res.data.errores.forEach(e => {
                errores += `${e}\n`;
            });

            $('#mensaje').val(errores);
            $('#errores').show();
        } else {
            $('#errores').hide();
            $('#success').show();
        }

        setTimeout(() => {
            $('#success').hide();
        }, 10000);
    });
});
 
  async function getInstitutes() {
    
  let correoSesion = "{{ Auth::user()->email }}";
    return await fetch('api/institutos')
        .then(response => response.json())
        .then(function (data) {
            let template = "<option value>--- SELECCIONE UNA INSTITUCIÓN ---</option>",
                user = "{{ auth()->user()->email }}";

            data.forEach(e => {
              if(user == "nacional@mail.com"){
                  if(e.tipo == "NACIONAL"){
                    template += `<option value="${e.id}">${(e.acronimo) ? "("+e.acronimo+")" : ""} ${e.nombre} (Nomina Total ${e.nomina}) (Tipo: ${e.tipo})</option>`;
                  }
              }else{
                  if(e.tipo == "REGIONAL"){
                    template += `<option value="${e.id}">${(e.acronimo) ? "("+e.acronimo+")" : ""} ${e.nombre} (Nomina Total ${e.nomina}) (Tipo: ${e.tipo})</option>`;
                  }
              }
            });

            $('.select2').html(template).select2({
                language: {
                    noResults: function () {
                        return (correoSesion=="admin@mail.com") ? $('<button id="add-new-institution" class="btn btn-primary btn-sm mt-2">+ Agregar Nueva Institución</button>') : "";
                    }
                },
                escapeMarkup: function (markup) {
                    return markup;
                }
            });
        });
}

$(document).on('submit', '#form-excel', async function(e){
    e.preventDefault();
    const form = new FormData(this);
    return await fetch('http://172.16.1.21:5015/api/cargar_excel', {
      method: 'POST',
      body: form
    })
    .then(response => response.json())
    .then(res => {
      console.log(res)
      if(res.errores.length > 0){
        let errores = '';
        res.errores.forEach(e => {
          errores += `<li>${e}</li>`;
        });
        $('#cedulas-error-excel').html(errores);
        $('#errores-excel').show();
      }else{
        $('#errores-excel').hide();
        $('#success-excel').show();
      }

      $('#form-excel').trigger('reset');
      setTimeout(() => {
        $('#success-excel').hide();
      }, 3000);
    })
  })


// Evento para detectar cuando se hace clic en "Agregar Nueva Institución"
$(document).on('click', '#add-new-institution', function () {
    $('#new-institution-modal').modal('show'); // Abre un modal para ingresar la nueva institución
});

// Llamar a la función para obtener las instituciones al cargar la página
$(document).ready(function () {
    getInstitutes();
});

$(document).on('click', '#save-new-institution', async function () {
    let newInstitutionName = $('#new-institution-name').val().trim();
    let newNominaName = $('#new-institution-nomina').val().trim();
    let newType = $('#new-institution-type').val().trim();
    let newPlanta = $('#new-institution-planta').prop('checked') ? 1 : 0;

    
    if (newInstitutionName === "") {
        Swal.fire({
          title: "Información Incompleta",
          html: "Por favor, ingresa un nombre válido."
        
        });
        return;
    }
    if (newNominaName === "") {
      Swal.fire({
        title: "Información Incompleta",
        html: "Por favor, ingresa una nómina válida."
        
      });
        return;
    }
    if (newType === "") {
      Swal.fire({
        title: "Información Incompleta",
        html: "Por favor, selecciona un tipo."
        
      });
        return;
    }
    // Enviar la nueva institución al servidor
    let response = await fetch('api/institutos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nombre: newInstitutionName, nomina:newNominaName, tipo:newType, planta: newPlanta })
    });
  console.log(newPlanta);
    if (response.ok) {
        let newInstitution = await response.json();
        
        // Agregar la nueva institución al select
        let newOption = new Option(newInstitution.nombre, newInstitution.id, true, true);
        $('#institucion_id').append(newOption).trigger('change');

        // Cerrar el modal
        $('#new-institution-modal').modal('hide');
        $('#new-institution-name').val(''); // Limpiar el campo del modal
    } else {
        alert("Hubo un error al guardar la institución. Intenta de nuevo.");
    }
});


  </script>
@endsection