{% extends 'base.html' %} 
{% block titulo %}Principal{% endblock  %}
{% block seccion %} 

{% block titulodeseccion %} Panel de Inventario {% endblock%} 
{% block etiqueta1 %}Inicio{% endblock %}
{% block etiqueta2 %} Información{% endblock %} 

{% endblock %} 

{% block contenido %}
 <!-- Small boxes (Stat box) -->
 
        <div class="row justify-content-center text-center">
          <div class="col-lg-2 col-8">
            <!-- small box -->
            <div class="small-box bg-dark">
              <div class="inner">
                <h3 class="text-center" style="font-size: 50px;">{{ articulo|length }}</h3>
                <p>ARTICULOS</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="#" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-2 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3 class="text-center" style="font-size: 50px;">{{ unidades }}</h3>
                <p>UNIDADES</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="{% url 'unidad' %}" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
          <div class="col-lg-2 col-6">
            <div class="small-box bg-success">
              <div class="inner">
                <h3 class="text-center" style="font-size: 50px;">{{ usuarios }}</h3>
                <p>USUARIOS</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">Más información <i class="fas fa-arrow-circle-right"></i></a>
            </div>
          </div>
         
        </div>
    

<div class="row">
  <div class="col-lg-12">
    <div class="card card-dark card-outline">
      <div class="card-header">
        <div class="d-flex justify-content-between">
         <h3></h3>
       
          <a href="{% url 'crear_articulo' %}" class="btn btn-dark font-weight-bold"><i class="fas fa-solid fa-plus"></i> Agregar</a>
        </div>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table id="example1" class="table align-items-center table-flush">
            <thead class="thead-light">
              <tr>
                <th scope="col" class="text-center">N°</th>
                <th scope="col" class="text-center">Fecha Actual</th>
                <th scope="col" class="text-center">Fecha Entrada</th>
                <th scope="col" class="text-center">Articulo</th>
                <th scope="col" class="text-center">Marca</th>
                <th scope="col" class="text-center">Modelo</th>
                <th scope="col" class="text-center">Serial</th>
                <th scope="col" class="text-center">Cantidad</th>
                <th scope="col" class="text-center">Precio</th>
                <th scope="col" class="text-center">Total</th>
                <th scope="col" class="text-center">Acciones</th>
              </tr>
            </thead>
            <tbody>
              {% for articulo in articulo %}
              <tr class="">
                <td class="text-center">{{forloop.counter}}</td>
                <td class="text-center">{{articulo.fecha|date:"d-m-y"}}</td>
                <td class="text-center">{{articulo.fecha_registro}}</td>
                <td class="text-center">{{articulo.articulo}}</td>
                <td class="text-center">{{articulo.marca}}</td>
                <td class="text-center">{{articulo.modelo}}</td>
                <td class="text-center">{{articulo.serial}}</td>
                <td class="text-center">{{articulo.cantidad}}</td>
                <td class="text-center">{{articulo.precio}}</td>
                <td class="text-center">{{articulo.total}}</td>
                <td class="text-center">
                <a href="{% url 'editar' articulo.id %}" class="btn btn-info"><i class="fas fa-solid fa-pen"></i></a> |
                <a href="#" class="btn btn-danger" data-id="{{ articulo.id }}"><i class="fas fa-solid fa-trash"></i></a>
              
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </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 este Articulo",
        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 %}