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

{% block content %}
<h2 class="mb-4">Collections</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">Collections</li>
  </ol>
</nav>

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

<!-- Data Table -->
<form id="bulk-delete-form" method="post" action="#">
{% csrf_token %}
<table id="collection-table" class="table table-bordered table-striped nowrap" style="width:100%">
  <thead class="table-light">
    <tr>
      <th><input type="checkbox" id="select-all"></th> <!-- Master checkbox -->
      <th>Title</th>
      <th>Featured Product</th>
      <th class="no-export text-end">Actions</th> <!-- No export for Actions -->
    </tr>
  </thead>
  <tbody>
    {% for collection in collections %}
    <tr>
      <td><input type="checkbox" name="selected_ids" value="{{ collection.id }}" class="row-checkbox"></td> <!-- Row checkbox -->
      <td>{{ collection.title }}</td>
      <td>{{ collection.featured_product }}</td>
      <td class="text-center no-export">
        <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_collection %}
            <li>
              <a class="dropdown-item" href="{% url 'inventory:collection_edit' collection.id %}">
                <i class="fas fa-pen-to-square me-1"></i> Edit
              </a>
            </li>
            {% endif %}
            {% if perms.inventory.delete_collection %}
            <li>
              <a class="dropdown-item text-danger" href="{% url 'inventory:collection_delete' collection.id %}">
                <i class="fas fa-trash me-1"></i> Delete
              </a>
            </li>
            {% endif %}
          </ul>
        </div>
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="4" class="text-center">No collections found.</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</form>

<a href="{% url 'inventory:admin_page' %}" class="btn btn-secondary mt-3">← Back to Dashboard</a>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables CSS and Buttons -->
<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" />

<!-- DataTables and Buttons JS -->
<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>

<!-- PDF & Excel support -->
<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>

<!-- DataTables Initialization -->
<script>
$(document).ready(function() {
  const table = $('#collection-table').DataTable({
    pageLength: 10,
    responsive: true,
    columnDefs: [
      { targets: [0, 3], orderable: false }
    ],
    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: 'copyHtml5',
        className: 'btn btn-secondary btn-sm',
        exportOptions: {
          columns: ':not(.no-export)',
          modifier: {
            selected: null, // We'll manually control which rows
          },
          rows: function (idx, data, node) {
            if ($('input.row-checkbox:checked').length > 0) {
              return $(node).find('input.row-checkbox').prop('checked');
            }
            return true; // Export all if nothing selected
          }
        }
      },
      {
        extend: 'csvHtml5',
        className: 'btn btn-info btn-sm',
        exportOptions: {
          columns: ':not(.no-export)',
          modifier: {
            selected: null,
          },
          rows: function (idx, data, node) {
            if ($('input.row-checkbox:checked').length > 0) {
              return $(node).find('input.row-checkbox').prop('checked');
            }
            return true;
          }
        }
      },
      {
        extend: 'excelHtml5',
        className: 'btn btn-success btn-sm',
        exportOptions: {
          columns: ':not(.no-export)',
          modifier: {
            selected: null,
          },
          rows: function (idx, data, node) {
            if ($('input.row-checkbox:checked').length > 0) {
              return $(node).find('input.row-checkbox').prop('checked');
            }
            return true;
          }
        }
      },
      {
        extend: 'pdfHtml5',
        className: 'btn btn-danger btn-sm',
        exportOptions: {
          columns: ':not(.no-export)',
          modifier: {
            selected: null,
          },
          rows: function (idx, data, node) {
            if ($('input.row-checkbox:checked').length > 0) {
              return $(node).find('input.row-checkbox').prop('checked');
            }
            return true;
          }
        }
      },
      {
        extend: 'print',
        className: 'btn btn-primary btn-sm',
        exportOptions: {
          columns: ':not(.no-export)',
          modifier: {
            selected: null,
          },
          rows: function (idx, data, node) {
            if ($('input.row-checkbox:checked').length > 0) {
              return $(node).find('input.row-checkbox').prop('checked');
            }
            return true;
          }
        }
      }
    ],
    select: {
      style: 'multi',
      selector: 'td:first-child input.row-checkbox'
    }
  });

  // Select All Master Checkbox
  $('#select-all').on('click', function() {
    const isChecked = $(this).prop('checked');
    $('input.row-checkbox', table.rows({ search: 'applied' }).nodes()).prop('checked', isChecked);
  });

  // Handle individual checkbox change
  $('#collection-table tbody').on('change', 'input.row-checkbox', function(e) {
    e.stopPropagation();
  });

  // Prevent row select when clicking inside checkbox
  $('#collection-table').on('click', 'tbody td:first-child', function(e) {
    e.stopPropagation();
  });
});
</script>

{% endblock %}