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

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

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

<div class="card shadow mb-12">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Areas</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>Name</th>
                        <th>Description</th>
                        <th>Town</th>
                        <th class="text-center" style="width:15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for a in sale_areas %}
                    <tr>
                        <td>{{ a.id }}</td>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ a.area_name }}</td>
                        <td>{{ a.description }}</td>
                        <td>
                            {% if a.town %}
                                <span class="badge badge-info">{{ a.town.town_name }}</span>
                            {% else %}
                                <span class="badge badge-light border">—</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            <a href="{% url 'products:sale_areas_update' a.id %}" class="text-decoration-none">
                                <button class="btn btn-warning btn-sm" title="Update Area">
                                    <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 Area</h5>
              <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
          </div>
          <div id="updateText" class="modal-body"></div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
              <a id="updateURL" 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 areaId   = data[0];
        var areaName = data[2];
        $('#updateText').text('Are you sure you want to delete the area: ' + areaName + '?');
        $('#updateURL').attr('href', 'delete/' + areaId);
    });
});
</script>
{% endblock %}