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

{% block title %}Bank Accounts{% 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 stylesheets %}

{% block heading %}Bank Accounts{% endblock heading %}

{% block content %}
  <div class="row ml-0 mb-3">
    <a href="{% url 'products:bank_account_add' %}">
      <button class="btn btn-success font-weight-bold">
        <i class="fas fa-plus mr-2"></i> New Bank Account
      </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 Bank Accounts</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>Account #</th>
              <th>Account Type</th>
              <th>Status</th>
              <th>Balance</th>
              <th>Remarks</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for ba in bank_accounts %}
            <tr>
              <td>{{ ba.id }}</td>
              <td>{{ forloop.counter }}</td>
              <td>{{ ba.name }}</td>
              <td>{{ ba.address }}</td>
              <td>{{ ba.mobile }}</td>
              <td>{{ ba.phone }}</td>
              <td>{{ ba.balance }}</td>
              <td>{{ ba.max_balance }}</td>
              <td class="text-center">
                <a href="{% url 'products:bank_account_update' ba.id %}">
                  <button class="btn btn-warning btn-sm" title="Edit">
                    <i class="fas fa-pen"></i>
                  </button>
                </a>

                <!-- ✅ unique ID: deleteModal{{ ba.id }} -->
                <button class="btn btn-danger btn-sm"
                        data-toggle="modal"
                        data-target="#deleteModal{{ ba.id }}">
                  <i class="fas fa-trash"></i>
                </button>

                <!-- ✅ Modal with unique ID -->
                <div class="modal fade" id="deleteModal{{ ba.id }}" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Delete Bank Account</h5>
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                      </div>
                      <div class="modal-body">
                        Are you sure you want to delete «{{ ba.name }}»?
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <a href="{% url 'products:bank_account_delete' ba.id %}">
                          <button class="btn btn-danger">Delete</button>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>

              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
{% endblock content %}

{% block javascripts %}
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>
<!-- (keep your existing DataTables buttons scripts here…) -->
<script>
$(document).ready(function() {
  var tbl = $('#dataTable').DataTable({
    dom: 'Bfrtip',
    buttons: [
      { extend:'print', className:'btn btn-info', exportOptions:{ columns:[0,1,2,3,4,5,6,7] } },
      { extend:'excelHtml5', className:'btn btn-success ml-2', exportOptions:{ columns:[0,1,2,3,4,5,6,7] } },
      { extend:'pdfHtml5', className:'btn btn-danger ml-2', exportOptions:{ columns:[0,1,2,3,4,5,6,7] } }
    ],
    columnDefs: [
      { targets:[0], visible:false, searchable:false },
      { targets:[-1], orderable:false }
    ]
  });
});

// wire up the dynamic modal every time you click delete
$('#dataTable tbody').on('click', 'button[rel="delete"]', function() {
  var row = tbl.row($(this).parents('tr')).data();
  $('#deleteText').text(`Delete bank account «${row[2]}»?`);
  $('#deleteUrl').attr('href', `bank-accounts/delete/${row[0]}`);
});
</script>
{% endblock javascripts %}