{% extends 'admin_pages/base_admin.html' %}
{% block title %}Suppliers | Admin Panel{% endblock %}

{% block content %}
<h2 class="mb-4">Supplier List</h2>

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="mb-3">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'inventory:admin_page' %}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Suppliers</li>
  </ol>
</nav>
{% endblock %}

<div class="mb-3 d-flex justify-content-end">
  {% if perms.inventory.add_supplier %}
    <a href="{% url 'inventory:supplier_add' %}" class="btn btn-outline-primary">Add Supplier</a>
  {% endif %}
</div>

<table id="supplier-table" class="table table-bordered table-hover nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Country</th>
      <th>Owner</th>
      <th>Contact Person</th>
      <th>Email</th>
      <th>Phone</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for supplier in suppliers %}
    <tr>
      <td>{{ supplier.id }}</td>
      <td>{{ supplier.name }}</td>
      <td>{{ supplier.country }}</td>
      <td>{{ supplier.owner }}</td>
      <td>{{ supplier.contacted_person }}</td>
      <td>{{ supplier.email_address }}</td>
      <td>{{ supplier.phone_number }}</td>
      <td class="text-center">
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Actions
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            {% if perms.inventory.view_supplieraccount %}
            <li>
              <a class="dropdown-item" href="{% url 'inventory:supplier_account_list' supplier.id %}">
                <i class="fas fa-file-invoice-dollar me-1"></i> Accounts
              </a>
            </li>
            {% endif %}
            {% if perms.inventory.add_payment_to_supplier %}
            <li>
              <a class="dropdown-item" href="{% url 'inventory:supplier_payment_add' supplier.id %}">
                <i class="fas fa-money-bill-wave me-1"></i> Pay Supplier
              </a>
            </li>
            {% endif %}
            {% if perms.inventory.change_supplier %}
            <li><a class="dropdown-item" href="{% url 'inventory:supplier_edit' supplier.id %}"><i class="fas fa-pen-to-square me-1"></i> Edit</a></li>
            {% endif %}
            {% if perms.inventory.delete_supplier %}
            <li><a class="dropdown-item text-danger" href="{% url 'inventory:supplier_delete' supplier.id %}"><i class="fas fa-trash me-1"></i> Delete</a></li>
            {% endif %}
          </ul>
        </div>
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="8" class="text-center">No suppliers found.</td></tr>
    {% endfor %}
  </tbody>
</table>

<!-- DataTables Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css" />
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script>
  $(document).ready(function() {
    $('#supplier-table').DataTable({
      pageLength: 10,
      responsive: true,
      dom: "<'row mb-3'<'col-md-3'l><'col-md-6 text-center'B><'col-md-3'f>>" +
           "<'row'<'col-sm-12'tr>>" +
           "<'row mt-2'<'col-sm-5'i><'col-sm-7'p>>",
      buttons: [
        { extend: 'copy', className: 'btn btn-secondary btn-sm' },
        { extend: 'csv', className: 'btn btn-info btn-sm' },
        { extend: 'excel', className: 'btn btn-success btn-sm' },
        { extend: 'pdf', className: 'btn btn-danger btn-sm' },
        { extend: 'print', className: 'btn btn-primary btn-sm' }
      ],
      columnDefs: [
        { orderable: false, targets: -1 },
        { searchable: false, targets: -1 }
      ]
    });
  });
</script>
{% endblock %}