<%- 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: 2px;
      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="/buscoporpolizarenovadas" 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="/buscoporramarenovadas" 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="/buscoporcompaniarenovadas" 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="/buscoporapellidorenovadas" 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>           

      </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>
                        
                    <% 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-renovacion status-renovacion"></span></p>    
                      
                   <%  } %>


                 </td>              
                  <td>
                      <% 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>
                  <% mifecha=data.polizas[i].Fecha_Desde %>
                    <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 %>
                    <td class="col-puesto" style="font-size: 10px;">                               
                      <% dia = mifecha.getUTCDate().toString().padStart(2, '0') %>
                      <% mes = (mifecha.getUTCMonth() + 1).toString().padStart(2, '0') %>
                      <% anio = mifecha.getUTCFullYear() %>
                      
                      <%= fechaCorrectaDesde = `${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_renovadas/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_renovadas/1">1</a></li>
              <li class="page-item" aria-current="page">
                <a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas_renovadas/2">2</a>
              </li>
              <li class="page-item"><a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas_renovadas/3">3</a></li>
              <li class="page-item">
                <a style="font-size: 12px; color: darkslateblue;" class="page-link" href="/polizas_renovadas/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'); %>