{% extends "pos/base.html" %}
{% load static %}

{% block title %}Towns{% endblock %}
{% 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 %}Towns{% endblock %}

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

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Towns</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width:5%">#</th>
                        <th>Town Name</th>
                        <th>Description</th>
                        <th class="text-center" style="width:10%">Areas</th>
                        <th class="text-center" style="width:22%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in towns %}
                    <tr>
                        <td>{{ t.id }}</td>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ t.town_name }}</td>
                        <td>{{ t.description }}</td>
                        <td class="text-center">
                            <span class="badge badge-info">{{ t.area_count }}</span>
                        </td>
                        <td class="text-center">
                            <a href="{% url 'products:towns_manage_areas' t.id %}" class="text-decoration-none">
                                <button class="btn btn-info btn-sm" title="Manage Areas">
                                    <i class="fas fa-map-marker-alt"></i> Areas
                                </button>
                            </a>
                            <a href="{% url 'products:towns_update' t.id %}" class="text-decoration-none">
                                <button class="btn btn-warning btn-sm" title="Edit Town">
                                    <i class="fas fa-pen"></i>
                                </button>
                            </a>
                            <button rel="delete" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modalDelete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Delete modal -->
<div class="modal fade" id="modalDelete" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title">Delete Town</h5>
              <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          </div>
          <div id="deleteText" class="modal-body"></div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <a id="deleteURL" href="#" class="text-decoration-none">
                  <button type="button" class="btn btn-danger">Delete</button>
              </a>
          </div>
      </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
$(function () {
    var tbl = $('#dataTable').DataTable({
        deferRender: true,
        columnDefs: [
            { targets: 0, visible: false, searchable: false },
            { targets: -1, orderable: false }
        ]
    });

    $('#dataTable tbody').on('click', 'button[rel="delete"]', function () {
        var idx  = tbl.cell($(this).closest('td')).index();
        var data = tbl.row(idx.row).data();
        var townId   = data[0];
        var townName = data[2];
        $('#deleteText').text('Are you sure you want to delete the town: ' + townName + '? All its areas will become unassigned.');
        $('#deleteURL').attr('href', 'delete/' + townId);
    });
});
</script>
{% endblock %}