{% extends "base.html" %}

{% block titulo %} Panel Principal {% endblock %} 


{% block css %}

<style>
.table-hover-blue thead th:hover {
    background-color: #007bff; /* Color azul de Bootstrap */
}

</style>
  
{% endblock%}
  
  
  {% block proloander %}
    <div class="preloader flex-column justify-content-center align-items-center">
      <img class="animation__wobble" src="/static/imagenes/dos.png" alt="Logo" height="200" width="200">
    </div>
  {% endblock  %}
    

{% block seccion %}
<div class="content-header">
  <div class="container-fluid">
    <div class="card-body">
      <div class="callout callout-danger">

        <h5>Bienvenido <b>{{request.user.username}}</b></h5>

        <p>Hola como estas, <span style="font-size: 20px;"> <b>{{request.user.first_name}}
              {{request.user.last_name}}</b> </span> hoy es <b>{% now "d M Y" %}</b> estas registrado el <b>Sistema de
            Control y Registro del Servicio de Armamento del Ejército Bolivariano</b>, estamos tratando de Innovar y
          Automatizar, para asi facilitar el trabajo al Usuario de poder llevar un control correcto de todo sus datos.
        </p>

      </div>
    </div>
    <!-- /.card-body -->
  </div>
</div>
{% endblock %}


{% block contenido %}
<div class="card card-dark card-outline">
   <div class="card-header">
      <div class="d-flex justify-content-between">
        <h3 class="card-title m-0"></h3>
          {% if perms.seajb.add_brigada %}
        <a href="#" class="btn btn-success float-left" data-toggle="modal" data-target="#modalBrigada"><i class="fas fa-plus-square"></i> Nuevo</a>
        {% endif %}
      </div>
    </div>

    <div class="card-body table-responsive">
        <table id="example1" class="table table-bordered table-striped  table-hover-blue">
            <thead class="table-dark">
                <tr>
                    <th class="text-center">N°</th>
                    <th class="text-center">FECHA</th>
                    <th class="text-center">SERIAL</th>
                    <th class="text-center">BRIGADAS</th>
                    <th class="text-center">COMANDANTES</th>
                    <th class="text-center">TELEFONOS</th>
                    <th class="text-center">CORREO</th>
                    <th class="text-center">UBICACIÓN</th>
                    <th class="text-center">ACCIONES</th>
                  </tr>
            </thead>
            <tbody>
              {% for tabla in servicios  %}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td>{{tabla.fecha|date:"d/m/Y"}}</td>
                    <td>{{tabla.code}}</td>
                    <td>{{tabla.nombreB}}</td>
                    <td>{{tabla.comandante}}</td>
                    <td>{{tabla.telefono}}</td>
                    <td>{{tabla.correo}}</td>
                    <td>{{tabla.ubicacionB}}</td>
                    <td>
                    {% if perms.seajb.view_brigada %}
                      <a href="{% url 'resumen' tabla.id %}"   class="btn btn-success btn-sm"><i class="nav-icon fas fa-eye"></i></a> | 
                    {% endif %}
                    {% if perms.seajb.change_brigada %}
                      <a href="{% url 'editar' tabla.id %}" class="btn btn-info btn-sm"><i class="fas fa-solid fa-marker"></i></a> |
                    {% endif %}
                    {% if perms.seajb.delete_brigada %}
                      <a href="#"  class="btn btn-danger btn-sm" data-id="{{ tabla.id }}" ><i class="fas fa-solid fa-trash"></i></a>
                    {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
  </div>
</div>

<div class="modal fade" id="modalBrigada" tabindex="-1" aria-labelledby="modalTituloBrigada" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-dark ">
        <h5 class="modal-title" id="modalTituloBrigada">Formulario de la Brigada</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% include 'servicio/form.html' %}
      </div>
    </div>
  </div>
</div>
{% endblock %}



{% block js %}
<script>
  $(document).ready(function() {
    $(".btn-danger").click(function() {
      let id = $(this).data('id');
      Swal.fire({
        title: '¿Estás seguro?',
        text: "Si usted acepta ¡No podrás revertir esto! Eliminaras todos los registro de la Brigada, Unidades y Armas",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, bórralo!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/eliminar/' + id,
            method: 'GET',
            success: function(response) {
              if (response.status === 'success') {
                Swal.fire('¡Registro eliminado!', '', 'success');
              } else {
                location.reload();
              }
            }
          });
        }
      });
    });
  });
</script>


{% endblock %}