{% extends 'base.html' %}

{% block titulo %} Inventario {% endblock %}

{% block seccion %}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h5 class="m-0">Panel de Control del Inventario</h5>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{% url 'inventario' %}">Inventario</a></li>
          <li class="breadcrumb-item">Producto</li>
        </ol>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block contenido %}

<div class="card card-dark card-outline">
  <div class="card-header">
    <div class="d-flex justify-content-between">
    {% if perms.seajb.add_producto %}
      <h3 class="card-title m-0"><a href="{% url 'envio' %}" class="btn btn-warning"><i
            class="fas fa-hand-holding-usd fs-1"></i> ENVIO</a></h3>
      {% endif %}

    {% if perms.seajb.view_producto %}
        <a href="{% url 'pdf_ocho' %}" class="btn btn-danger" target="_blank"><i class="fas fa-file-pdf fs-1"></i> PDF</a>
    {% endif %}

      {% if perms.seajb.add_producto %}
      <a href="#" class="btn btn-success float-letf" data-toggle="modal" data-target="#modalInventario"><i
          class="fas fa-plus-square fs-1"></i> Nuevo</a>
      {% endif %}
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table id="example1" class="table table-bordered table-striped  table-hover-blue">
        <thead class="table-dark">
          <tr>
            <th>N°</th>
            <th>CODIGO</th>
            <th>FECHA</th>
            <th>SERIAL</th>
            <th>PRODUCTO</th>
            <th>MODELO</th>
            <th>DESCRIPCIÓN</th>
            <th>CANTIDAD</th>
            <th>PRECIO</th>
            <th>TOTAL</th>
            <th>ACCIONES</th>
          </tr>
        </thead>
        <tbody>
          {% for inventario in inventario %}
          <tr>
            <td>{{forloop.counter}}</td>
            <td>{{inventario.code}}</td>
            <td>{{inventario.fecha_entrada|date:'d/m/Y'}}</td>
            <td class="text-truncate">{{inventario.serial}}</td>
            <td>{{inventario.nombre}}</td>
            <td>{{inventario.modelo}}</td>
            <td>{{inventario.descripcion}}</td>
            <td>{{inventario.cantidad}}</td>
            <td>{{inventario.precio}}</td>
            <td>{{inventario.total}}</td>
            <td>
            {% if perms.seajb.view_producto %}
            <a href="{% url 'pdf_sextimo' inventario.id %}" class="btn btn-danger btn-sm"><i class="fas fa-file-pdf fs-1"></i></a> |
            {% endif %}
            {% if perms.seajb.change_producto %}
            <a href="{% url 'edit_in' inventario.id %}" class="btn btn-info btn-sm"><i class="fas fa-solid fa-marker"></i></a> |
            {% endif %}
            {% if perms.seajb.delete_producto %}
            <a href="#" class="btn btn-dark btn-sm" data-id="{{inventario.id}}"><i class="fas fa-solid fa-trash"></i></a>
            {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="modalInventario" tabindex="-1" aria-labelledby="modalTituloInventario" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-dark">
        <h5 class="modal-title m-0" id="modalTituloInventario">Registrar el Producto</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 'inventario/inventario_formulario.html' %}
      </div>
    </div>
  </div>
</div>

{% endblock %}


{% block js %}
<script>
  $(document).ready(function () {
    $(".btn-dark").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 del Producto",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, bórralo!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/delete/' + id,
            method: 'GET',
            success: function (response) {
              if (response.status === 'success') {
                Swal.fire('¡Registro eliminado!', '', 'success');
              } else {
                location.reload();
              }
            }
          });
        }
      });
    });
  });
</script>

<script>
  document.getElementById('precio').addEventListener('change', function (e) {
    e.currentTarget.value = parseFloat(e.currentTarget.value).toFixed(2);
  });
</script>

{% endblock %}