<%- include('partials/_header/'); %>
  <style>
    .status-indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 4px;
      vertical-align: middle;
    }

     .status-indicator-renovacion {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 12px;
      vertical-align: middle;
    }

    .status-vigente {
      background-color: rgb(56, 198, 56);
    }

    .status-renovacion {
      background-color: rgb(23, 85, 219);
    }


    .status-anulada {
      background-color: rgb(177, 15, 3);
    }


    .status-siniestro {
      background-color: rgb(139, 10, 141);
    }

    .status-deuda {
      background-color: rgb(237, 66, 80);
    }
  </style>


  <div class="cont-1300">

    <div class="listado-tabla">
      <div class="buscador">

        <form class="d-flex just-start" action="/buscoporpoliza" method="get">
          <input style="text-transform: uppercase ; font-size: 10px; width: 100px; height: 30px;" name="polizabuscada"
            type="text" class="form-control" placeholder="Póliza">
          <button type="submit" class="btn btn-danger"
            style="width: 100px; height: 30px; font-size: 10px; background-color: darkslateblue; font: width; border-color: darkslateblue; ">
            Buscar
          </button>
        </form>

        <form class="d-flex just-start" action="/buscoporrama" method="get">
          <select id="rama" name="ramabuscada" style="font-size: 10px;">
            <% for (var i=0; i < data.ramas.length; i++) { %>
              <option value="<%= data.ramas[i].Id_Rama %>">
                <%= data.ramas[i].Nombre_Rama %>
              </option>
              <% } %>
          </select>
          <button type="submit" class="btn btn-danger"
            style="width: 100px; height: 30px; font-size: 10px; background-color: darkslateblue; font: width; border-color: darkslateblue; ">
            Buscar
          </button>
        </form>

        <form class="d-flex just-start" action="/buscoporcompania" method="get">
          <select style="font-size: 10px;" id="compania" name="companiabuscada">
            <% for (var i=0; i < data.companias.length; i++) { %>
              <option value="<%= data.companias[i].Id_Compania %>">
                <%= data.companias[i].Nombre_Compania %>
              </option>
              <% } %>
          </select>
          <button type="submit" class="btn btn-danger"
            style="width: 100px; height: 30px; font-size: 10px; background-color: darkslateblue; font: width; border-color: darkslateblue; ">
            Buscar
          </button>
        </form>

        <form class="d-flex just-start" action="/buscoporapellido" method="get">
          <input style="text-transform: uppercase ; font-size: 10px; width: 100px; height: 30px;" name="apellidobuscado"
            type="text" class="form-control" placeholder="Apellido">
          <button type="submit" class="btn btn-danger"
            style="width: 100px; height: 30px; font-size: 10px; background-color: darkslateblue; font: width; border-color: darkslateblue; ">
            Buscar
          </button>
        </form>    

        <a href="/seleccion_rama" class="agregar"><button type="button" class="btn btn-dark" style="font-size: 10px; width: 90px; height: 30px;"><i
              class="fa-solid fa-plus"></i>Agregar</button></a>

      </div>


      <div>        
        <p style="font-size: 13px; "><span class="status-indicator status-vigente"></span>&nbsp;<label style="margin-top: 20px ;"><a href="/busco_estado_poliza/'1'" style="color: black;">Vigentes</a></label>
         &nbsp;&nbsp;&nbsp;&nbsp;<span class="status-indicator status-anulada"></span>&nbsp;<label style="margin-top: 20px ;"><a href="/busco_estado_poliza/'3'" style="color: black;">Anuladas</a></label>
         &nbsp;&nbsp;&nbsp;&nbsp;<span class="status-indicator status-deuda"></span>&nbsp;<label style="margin-top: 20px ;"><a href="/busco_estado_poliza/'4'" style="color: black;">Con Deuda</a></label>        
         &nbsp;&nbsp;&nbsp;&nbsp;<span class="status-indicator status-siniestro"></span>&nbsp;<label style="margin-top: 20px ;"><a href="/busco_estado_poliza/'5'" style="color: black;">Con Siniestro</a></label>
         &nbsp;&nbsp;&nbsp;&nbsp;<span class="status-indicator status-renovacion"></span>&nbsp;<label style="margin-top: 20px ;"><a href="/busco_estado_poliza/'6'" style="color: black;">Renovadas</a></label>
        </p>
      </div>

      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr style="font-size: 10px;">
              <th scope="col"></th>
              <th scope="col"></th>
              <th scope="col">Nombre y Apellido</th>
              <th scope="col">Rama</th>
              <th scope="col">Compañía</th>
              <th scope="col">Póliza</th>
              <th scope="col">Vigencia Desde</th>
              <th scope="col">Vigencia Hasta</th>
              <th scope="col">Forma de Pago</th>
              <th scope="col">Estado</th>
              <th scope="col">Menú</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            
            <% if (data) {%>
                        
              <% for (var i=0; i < data.polizas.length; i++) { %>
                <tr style="font-size: 10px;">
                  <td>
                        <% const today = new Date(); %>    
                        <% mifecha=data.polizas[i].Fecha_Hasta %>   
                        <% dia = mifecha.getUTCDate().toString().padStart(2, '0') %>
                        <% mes = (mifecha.getUTCMonth() + 1).toString().padStart(2, '0') %>
                        <% anio = mifecha.getUTCFullYear() %>  
                        <% fechaCorrectaHasta = `${anio}-${mes}-${dia}`; %>  
                        <% const fechahoy = today.getUTCFullYear() + "-" + (today.getUTCMonth() + 1) + "-" + today.getUTCDate() %>
                        <% const fecha1 = new Date(fechahoy) %>
                        <% const fecha2 = new Date(fechaCorrectaHasta) %>
                        <% const differenceInMilliseconds = fecha2 - fecha1 %>
                        <% const millisecondsPerDay = 1000 * 60 * 60 * 24; %>
                        <% const differenceInDays = Math.trunc(differenceInMilliseconds / millisecondsPerDay) %>                              
                       
                   
                    <% if ((data.polizas[i].Estado == 1) || (data.polizas[i].Estado == 2)) { %>
                      
                        <p><span class="status-indicator status-vigente"></span></p>
            
                    <% } else if (data.polizas[i].Estado == 3) { %>
                      
                        <p><span class="status-indicator status-anulada"></span></p>
                      
                    <% } else if (data.polizas[i].Estado == 4) { %>                     
                          
                        <p><span class="status-indicator status-deuda"></span></p>
                         
                    <% } else if (data.polizas[i].Estado == 5) { %>                     
                        
                        <p><span class="status-indicator status-siniestro"></span></p>

                    <% } else if (data.polizas[i].Estado == 6) { %>                     
                        
                        <p><span class="status-indicator status-renovacion"></span></p>    
                      
                   <%  } %>


                 </td>

                  <td >                     
                      <% if ((differenceInDays < 6 ) && (data.polizas[i].Estado != 6) && (data.polizas[i].Estado != 3)) { %>                              
                         <p style="font-size: 7px; "><a style="color:rgb(37, 113, 7);" href="/front_renovacion_poliza/<%= data.polizas[i].Id_Poliza %>"></span>renovar</a></p>
                      <%  } %>

                      <% if (data.polizas[i].Estado == 6) { %>                              
                         <p style="font-size: 7px; "><a style="color:rgb(37, 113, 7);" href="/edit_poliza_postrenovacion/<%= data.polizas[i].Poliza %>"></span>Ver Renovación</a></p>
                      <%  } %>
                  </td>
                 
                  <td style="font-size: 10px;">
                    <% var nombre="";  if (data.polizas[i].Nombre != null) { nombre = data.polizas[i].Nombre }  %>
                    <%= data.polizas[i].Apellido +", " + nombre  %></td>
                    <td class=" col-puesto" style="font-size: 10px;">
                      <%= data.polizas[i].Nombre_Rama %>
                  </td>
                  <td class="col-puesto" style="font-size: 10px;">
                    <%= data.polizas[i].Nombre_Compania %>
                  </td>
                  <td class="col-puesto" style="font-size: 10px;">
                    <%= data.polizas[i].Poliza %>
                  </td>                 
                  
                    
                  <td class="col-puesto" style="font-size: 10px;">
                  <% mifecha=data.polizas[i].Fecha_Desde %>          
                  <% dia = mifecha.getUTCDate().toString().padStart(2, '0') %>
                  <% mes = (mifecha.getUTCMonth() + 1).toString().padStart(2, '0') %>
                  <% anio = mifecha.getUTCFullYear() %>

                  <%= fechaCorrectaDesde = `${dia}-${mes}-${anio}`; %> 
                  </td>


                  <% mifecha=data.polizas[i].Fecha_Hasta %>                       
                  <% dia = mifecha.getUTCDate().toString().padStart(2, '0') %>
                  <% mes = (mifecha.getUTCMonth() + 1).toString().padStart(2, '0') %>
                  <% anio = mifecha.getUTCFullYear() %>

                 
                   <td class="col-puesto" style="font-size: 10px;">                     
                        <%= fechaCorrectaHasta = `${dia}-${mes}-${anio}`; %> 
                   </td>
                    <td class="col-puesto" style="font-size: 10px;">
                        <%= data.polizas[i].Nombre_FormaPago %>
                      </td>
                      <td class="col-puesto" style="font-size: 10px;">
                        <%= data.polizas[i].Descripcion_EstadoPoliza %>
                      </td>
                      <td>
                        <a href="/edit_poliza/<%= data.polizas[i].Id_Poliza %> "><i
                            style="color:darkslateblue; font-size: 10px;" class="fa-solid fa-pencil"></i><span
                            style="font-size: 10px;">Ver Datos</span>
                      </td>
                      <td>
                        <a href="/historia/<%= data.polizas[i].Id_Poliza %> "><i style="color:rgb(87, 4, 87); font-size: 10px;" class="fa-solid fa-book">‌</i><span
                            style="font-size: 10px;"> Historia</span>
                      </td>

               

                <% } %>
                </tr>
                  <% } %>

          </tbody>

        </table>
        
        <% if (process.env.esbusqueda == 0) { %>
            <nav aria-label="...">
            <ul class="pagination">
              <li class="page-item">
                <a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas/0" tabindex="-1" >Previous</a>
              </li>
              <li style="font-size: 12px; color: darkslateblue;" class="page-item"><a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas/1">1</a></li>
              <li class="page-item" aria-current="page">
                <a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas/2">2</a>
              </li>
              <li class="page-item"><a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas/3">3</a></li>
              <li class="page-item">
                <a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas/9">Next</a>
              </li>
            </ul>
          </nav>
       <% } %>
      
      </div>
    </div>
  </div>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

  <% if(typeof alert !="undefined" ) { %>
    <script>
      Swal.fire({
        title: '<%= alertTitle %>',
        text: '<%= alertMessage %>',
        icon: '<%= alertIcon %>',
        showConfirmButton: <%= showConfirmButton %> ,
        timer: <%= 1500 %>             
        }).then(() => {
          window.location = '<%= ruta %>'
        })

    </script>
    <% } %>





<%- include('partials/_footer'); %>