<%- 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">

    <h7>Totalizador de Pólizas</h7>    
    <Label style="font-size:12px">Compañia: <%= data.compania === 0 ? "todas" : data.micompania %> &nbsp; Rama: <%= data.rama === 0 ? "todas" : data.mirama %> &nbsp; Estado: <%= data.estado === 0 ? "todos" : data.miestado %>&nbsp; Fecha Desde/Hasta: <%= data.fechadesde %>&nbsp;<%= data.fechahasta %></Label>
          
 </div>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr style="font-size: 10px;">             
              <th scope="col">Compañia</th>
              <th scope="col">Rama</th>              
              <th scope="col">Estado</th>
              <th scope="col">Cantidad de Pólizas</th>
            </tr>
          </thead>
          <tbody>
           <% if ((data) && (data.totalizador.length > 0)) { %>

             <% for (var i=0; i < data.totalizador.length; i++) { %>
                <tr style="font-size: 10px;">
               
                  <td class=" col-puesto" style="font-size: 10px;">
                    <%= data.totalizador[i].Nombre_Compania %>
                  </td>

                   <td class=" col-puesto" style="font-size: 10px;">
                    <%= data.totalizador[i].Nombre_Rama %>
                  </td>
                  
                   <td class=" col-puesto" style="font-size: 10px;">
                     <% if ((data.totalizador[i].Estado == 1) || (data.totalizador[i].Estado == 2)) { %>
                      
                        <p><span class="status-indicator status-vigente"></span>&nbsp;&nbsp;<%= data.totalizador[i].Descripcion_EstadoPoliza %></p>
            
                    <% } else if (data.totalizador[i].Estado == 3) { %>
                      
                        <p><span class="status-indicator status-anulada"></span>&nbsp;&nbsp;<%= data.totalizador[i].Descripcion_EstadoPoliza %></p>
                      
                    <% } else if (data.totalizador[i].Estado == 4) { %>                     
                          
                        <p><span class="status-indicator status-deuda"></span>&nbsp;&nbsp;<%= data.totalizador[i].Descripcion_EstadoPoliza %></p>
                         
                    <% } else if (data.totalizador[i].Estado == 5) { %>                     
                        
                        <p><span class="status-indicator status-siniestro"></span>&nbsp;&nbsp;<%= data.totalizador[i].Descripcion_EstadoPoliza %></p>

                    <% } else if (data.totalizador[i].Estado == 6) { %>                     
                        
                        <p><span class="status-indicator status-renovacion"></span>&nbsp;&nbsp;<%= data.totalizador[i].Descripcion_EstadoPoliza %></p>    
                      
                   <%  } %>

                    
                  </td>
                 
                    <td class=" col-puesto" style="font-size: 10px;">
                    <%= data.totalizador[i].Total_Polizas_Por_Grupo %>
                  </td>            
                </tr>



              <% } %>
            <% } %>

          </tbody>

        </table>
      </div>
      
            <nav style="display: flex; justify-content: center;">
               
               
                <div style="text-align: right; text-decoration: none; padding-right: 3px;">    
                   <a href="javascript:window.history.back();" style="height: 39px; width:250px;; background-color: darkslateblue; margin-right: 10px; font-size: 15px;" class="btn btn-secondary">  Volver</a>
                </div>
                    
               
            </nav>

    </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'); %>