<!DOCTYPE html>
<html lang="es">

<head>
  <%- include('../tools/head'); %>
  <!-- Custom styles for this page -->
  <link href="/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="/css/dropzone.css">
</head>

<body id="page-top">
  <!-- Page Wrapper -->
  <div id="wrapper">
    <!-- Sidebar -->
    <%- include('../tools/sidebarAdmin'); %>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">
      <!-- Main Content -->
      <div id="content">
        <!-- Topbar -->
        <%- include('../tools/topbar'); %>
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Bienvenido, <%= user.nombre %>
              <%= user.apellido %>
            </h1>
            <div id="btnCronograma">
              <a type="button" data-target="#changeIMGModal" data-toggle="modal" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class=" fas fa-download fa-sm text-white-50"></i> Cambiar Imagen Login</ahref=>
              </a>
            </div>
          </div>

          <!-- Content Row -->
          <div class="row">

            <!-- Vacunaciones -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                        Total Vacunaciones
                      </div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">
                        <%= vacunas %>
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-syringe fa-2x"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Consolidaciones Enviadas -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                        Consolidaciones Enviadas
                      </div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">
                        <%= consEnv %>
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-file-export fa-2x"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Consolidaciones Aceptadas -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                        Consolidaciones Aceptadas
                      </div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">
                        <%= consAcep %>
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-file-circle-check fa-2x"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Total Visitas -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                        Total Visitas
                      </div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">
                        <%= visitAcep %>
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-store fa-2x"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <!-- Visitas en el año - BarChar -->
          <div class="row">
            <div class="col-xl-12 col-md-6 mb-4">

              <!-- Bar Chart -->
              <div class="card shadow ">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Visitas En El Año</h6>
                </div>
                <div class="card-body">
                  <div class="chart-bar">
                    <canvas id="myBarChart"></canvas>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <!-- Estado Provincias - Table -->
          <div class="row">
            <div class="col-xl-12 col-md-6 mb-4">
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">
                    Estado de las Provincias
                  </h6>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-bordered table-hover display nowrap" id="dataTable" width="100%" cellspacing="0" style="font-size: 12px;  text-align: center !important;">
                      <thead>
                        <tr>
                          <th>Mes</th>
                          <th>Profesional</th>
                          <th>Provincia</th>
                          <th>Municipio</th>
                          <th>Fecha Enviado</th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <th>Mes</th>
                          <th>Profesional</th>
                          <th>Provincia</th>
                          <th>Municipio</th>
                          <th>Fecha Enviado</th>
                        </tr>
                      </tfoot>
                      <% if(estCon){ %>
                      <tbody>
                        <% estCon.forEach((estCon)=> { %>
                        <tr>
                          <td>
                            <%= estCon.ForNAdmin.mesNA %>
                          </td>
                          <td>
                            <%= estCon.responsable.nombreResponsable %>
                          </td>
                          <td>
                            <%= estCon.provincia %>
                          </td>
                          <td>
                            <%= estCon.municipio %>
                          </td>
                          <td>
                            <%= moment(estCon.createdAt,"YYYY/MM/DD").format('YYYY-MM-DD'); %>
                          </td>
                        </tr>
                        <% }); %>
                      </tbody>
                      <% } %>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- /.container-fluid -->
      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
      <%- include('../tools/footer'); %>
      <!-- End of Footer -->
    </div>
    <!-- End of Content Wrapper -->
  </div>
  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Change Image Login Modal-->
  <div class="modal fade" id="changeIMGModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Cambio de Imagen</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <form onsubmit="changeImgFrom(event)" method="POST" action="/coordinacion/changeIMG" enctype="multipart/form-data">
          <div class="modal-body">
            <div class="mb-3">
              <label for="mesCron" class="form-label">Recuerde que solo puede añadir imagenes con extensión: ".jpg"</label>
            </div>
            <div class="mb-3">
              <label class="mr-sm-2" for="fields">Adjuntar
                Imagen</label>
              <div class="drop-zone">
                <span class="drop-zone__prompt">Arrastra la imagen o da click para buscar</span>
                <input type="file" name="myFile" id="myFile" class="drop-zone__input" accept=".jpg" />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">
              Cancelar
            </button>
            <button class="btn btn-primary " type="submit">
              Enviar
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Logout Modal-->
  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Salida</h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          Seleccione "Cerrar sesión" a continuación si está listo para
          finalizar su sesión actual.
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">
            Cancelar
          </button>
          <a class="btn btn-primary" href="/coordinacion/logout">Cerrar Sesión</a>
        </div>
      </div>
    </div>
  </div>

  <script type="text/JavaScript">
    //Meses
    let barMESES = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    
    //Visitas
    <% if(barChaVisit){ %>
    var barChaVisit = []
    <% barChaVisit.forEach((barChaVisit)=> { %>
      <% if(barChaVisit._id.anno == new Date().getFullYear()){ %>
        barChaVisit.push("<%= barChaVisit._id.anno %>",barMESES[<%= barChaVisit._id.mes %>- 1], "<%= barChaVisit.count %>")
      <% } %>
    <% }) %>
    <% } %>

     //Favorable
     <% if(barChaFav){ %>
    var barChaFav = []
    <% barChaFav.forEach((barChaFav)=> { %>
      <% if(barChaFav._id.anno == new Date().getFullYear()){ %>
        barChaFav.push("<%= barChaFav._id.anno %>", barMESES[<%= barChaFav._id.mes %>- 1], "<%= barChaFav.count %>")
      <% } %>
    <% }) %>
    <% } %>

    // Desfavorable
    <% if(barChaDes){ %>
    var barChaDes = []
    <% barChaDes.forEach((barChaDes)=> { %>
      <% if(barChaDes._id.anno == new Date().getFullYear()){ %>
        barChaDes.push("<%= barChaDes._id.anno %>", barMESES[<%= barChaDes._id.mes %>- 1], "<%= barChaDes.count %>")
      <% } %>
    <% }) %>
    <% } %>

    // Favorable Con Requerimientos
    <% if(barChaFavRe){ %>
    var barChaFavRe = []
    <% barChaFavRe.forEach((barChaFavRe)=> { %>
      <% if(barChaFavRe._id.anno == new Date().getFullYear()){ %>
        barChaFavRe.push("<%= barChaFavRe._id.anno %>", barMESES[<%= barChaFavRe._id.mes %>- 1], "<%= barChaFavRe.count %>")
      <% } %>
    <% }) %>
    <% } %>
  </script>

  <!-- Bootstrap core JavaScript-->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="/js/sb-admin-2.min.js"></script>

  <!-- Page level plugins -->
  <script src="/vendor/datatables/jquery.dataTables.min.js"></script>
  <script src="/vendor/datatables/dataTables.bootstrap4.min.js"></script>

  <!-- Page level custom scripts -->
  <script src="/js/demo/datatables-demo.js"></script>

  <!-- Page level plugins -->
  <script src="/vendor/chart.js/Chart.min.js"></script>

  <!-- Page level custom scripts -->
  <script src="/js/demo/chart-bar-demo.js"></script>
  <script type="text/JavaScript" src="/js/tools/dropzone.js"></script>

  <!-- Alert -->
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <!-- Validations -->
  <script type="text/javascript" src="/js/Coordinador/formularios.js"></script>

  <% if(typeof alert !="undefined" ) { %>
  <script type="text/JavaScript">
    Swal.fire({
          title: '<%= alert[0].alertTitle %>',
          text:'<%= alert[0].alertMessage %>',
          icon:'<%= alert[0].alertIcon %>',
          showConfirmButton: <%= alert[0].showConfirmButton %>,
          timer: <%= alert[0].timer %>
        }).then(()=>{
          window.location = '<%= alert[0].ruta %>'
        })
      </script>
  <% } %>

  <script>
    $(window).bind("load", function() {
      var nav = document.getElementById("nav1");
      nav.className += "  active";
    });
    var table = $('#dataTable').DataTable({
      order: [
        [4, 'desc']
      ],
      language: {
        search: "Buscar:",
        info: "Mostrando _START_ elementos a _END_ de _TOTAL_ entradas",
        zeroRecords: "Sin Datos en esta Tabla",
        infoFiltered: " - filtrado desde _MAX_ entradas",
        lengthMenu: "Mostrando _MENU_ entradas",
        paginate: {
          previous: "Anterior",
          next: "Siguiente",
        },
      },
    });
  </script>
</body>

</html>