{% extends "base.html" %}

{% block titulo %} Abastecimiento {% 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 Abastecimiento</h5>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Información</a></li>
          <li class="breadcrumb-item active">Abastecimiento</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">
      <h3 class="card-title m-0"></h3>
      <a href="#" class="btn btn-success float-left" data-toggle="modal" data-target="#modalAbas"><i class="fas fa-plus-square"></i>
        Nuevo
      </a>
    </div>
  </div>
  <div class="card-body">
    <table id="example1" class="table table-bordered table-striped  table-hover-blue">
      <thead class="table-dark">
        <tr>
          <th>N°</th>
          <th>NOMBRE DEL PUNTO</th>
          <th>ACCIONES</th>
        </tr>
      </thead>
      <tbody>
        {% for datos in abasto %}
        <tr>
          <td>{{datos.id}} </td>
          <td>{{datos.nombre}} </td>
          <td>
            <a href="{% url 'info' datos.id %}" class="btn btn-success "><i class="fas fa-solid fa-eye"></i></a>
            <a href="#" class="btn btn-info"><i class="fas fa-solid fa-marker"></i></a>
            <a href="#" class="btn btn-danger" data-id="{{ datos.id }}"><i class="fas fa-solid fa-trash"></i></a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="modal fade" id="modalAbas" tabindex="1" aria-labelledby="tituloAbasdModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-dark ">
        <h5 class="modal-title" id="tituloCantidadModal">Formulario Registro</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 "abastecimiento/abas_formulario.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 subcrito de este Punto de Abastecimiento",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, bórralo!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/abastecimiento/eliminar_abas/' + id,
            method: 'GET',
            success: function(response) {
              if (response.status === 'success') {
                Swal.fire('¡Registro eliminado!', '', 'success');
              } else {
                location.reload();
              }
            }
          });
        }
      });
    });
  });
</script>


{% endblock %}