{% extends "pos/base.html" %}
{% load static %}
{% block title %}Companies{% endblock title %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">
  <link href="{% static 'css/pagination_buttons.css'        %}" rel="stylesheet">
{% endblock %}

{% block heading %}Companies{% endblock heading %}

{% block content %}
<div class="row ml-0 mb-3">
  <a href="{% url 'products:companies_add' %}">
    <button class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i>Create new company
    </button>
  </a>
</div>

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">All Companies</h6>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table id="dataTable" class="table table-bordered table-hover" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th>#</th>
            <th>Name</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for comp in companies %}
          <tr>
            <td>{{ comp.id }}</td>
            <td>{{ forloop.counter }}</td>
            <td>{{ comp.name }}</td>
            <td class="text-center">
              <a href="{% url 'products:companies_update' comp.id %}" class="btn btn-warning btn-sm">
                <i class="fas fa-pen"></i>
              </a>
              <button rel="delete" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Delete confirmation modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Delete Company</h5>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div id="deleteText" class="modal-body"></div>
    <div class="modal-footer">
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      <a id="deleteUrl" class="btn btn-danger">Delete</a>
    </div>
  </div></div>
</div>
{% endblock %}

{% block javascripts %}

  <script>
  $(document).ready(function(){
    var tbl = $('#dataTable').DataTable({
      dom: 'Bfrtip',
      buttons: [],
      columnDefs: [
        { targets: [0], visible: false, searchable: false },
        { targets: [-1], orderable: false }
      ]
    });

    $('#dataTable tbody').on('click','button[rel="delete"]',function(){
      var row = tbl.row($(this).parents('tr')).data();
      var id  = row[0], name = row[2];
      $('#deleteText').text('Are you sure you want to delete company: "'+ name +'"?');
      $('#deleteUrl').attr('href','companies/delete/'+ id);
    });
  });
  </script>
{% endblock %}