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

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

<!-- 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">Products</li>
  </ol>
</nav>

<!-- Add New Button -->
<div class="mb-3 d-flex justify-content-end">
  {% if perms.inventory.add_product %}
  <a href="{% url 'inventory:product_create' %}" class="btn btn-primary">
    <i class="fas fa-plus me-1"></i> Add New Product
  </a>
  {% endif %}
</div>

<table id="product-table" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th>Title</th>
      <th>Abbreviation</th>
      <th>Unit Price</th>
      <th>Currency</th>
      <th>Inventory</th>
      <th>Collection</th>
      <th>Packing</th>
      <th>Unit</th>
      <th class="text-center">Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for product in products %}
    <tr>
      <td>{{ product.title }}</td>
      <td>{{ product.abbreviation }}</td>
      <td>{{ product.unit_price }}</td>
      <td>{{ product.currency }}</td>
      <td>{{ product.inventory }}</td>
      <td>{{ product.collection }}</td>
      <td>{{ product.packing_style }}</td>
      <td>{{ product.measurement_unit }}</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.change_product %}
            <li><a class="dropdown-item" href="{% url 'inventory:product_edit' product.id %}"><i class="fas fa-pen-to-square me-1"></i> Edit</a></li>
            {% endif %}
            {% if perms.inventory.delete_product %}
            <li><a class="dropdown-item text-danger" href="{% url 'inventory:product_delete' product.id %}"><i class="fas fa-trash me-1"></i> Delete</a></li>
            {% endif %}
          </ul>
        </div>
      </td>
    </tr>
    {% empty %}
    <tr><td colspan="9" class="text-center">No products 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() {
  $('#product-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 },  // Disable ordering on action column
      { searchable: false, targets: -1 }  // Disable searching on action column
    ]
  });
});
</script>
{% endblock %}