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

{% block title %}Variants Wise Products List{% endblock %}
{% block heading %}Variants Wise Products List{% endblock %}

{% block content %}

<div class="mb-3 d-flex justify-content-between align-items-center">
  <a href="{% url 'products:categories_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i>Add New Variant
    </button>
  </a>

  <div>
    <a href="{% url 'products:categories_products_export_pdf' %}"
       class="btn btn-outline-danger mr-2">
      <i class="fas fa-file-pdf mr-1"></i> Export PDF
    </a>

    <a href="{% url 'products:categories_products_export_excel' %}"
       class="btn btn-outline-success mr-2">
      <i class="fas fa-file-excel mr-1"></i> Export Excel
    </a>

    <a href="{% url 'products:category_manage' %}"
       class="btn btn-info mr-2">
      <i class="fas fa-th-list mr-1"></i> Quick Manage
    </a>

    <a href="{% url 'products:products_list' %}" class="btn btn-outline-secondary">
      <i class="fas fa-box mr-1"></i> All Products
    </a>
  </div>
</div>


{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }} mt-2" role="alert">
      {{ message }}
    </div>
  {% endfor %}
{% endif %}

<div class="card shadow mb-4">
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="categoriesTable" width="100%" cellspacing="0">
        <thead>
          <tr>
            <th>ID</th>
            <th style="width:5%">#</th>
            <th>Variant</th>
            <th class="text-center" style="width:10%"># Products</th>
            <th class="text-center" style="width:10%">Total Stock</th>
            <th>Products</th>
            <th class="text-center" style="width:12%">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for row in rows %}
          <tr>
            <td>{{ row.category.id }}</td>
            <td>{{ forloop.counter }}</td>
            <td>{{ row.category.cat_name }}</td>
            <td class="text-center">{{ row.total_products }}</td>
            <td class="text-center">{{ row.total_stock }}</td>
            <td>
              {% if row.product_names %}
                <ul class="mb-0 pl-3">
                  {% for n in row.product_names %}
                    <li>{{ n }}</li>
                  {% endfor %}
                </ul>
              {% else %}
                <span class="text-muted">No products</span>
              {% endif %}
            </td>
            <td class="text-center">
              <a href="{% url 'products:category_products_bulk_edit' row.category.id %}"
                 class="btn btn-warning btn-sm mb-1">
                <i class="fas fa-edit mr-1"></i>Edit Products
              </a>
              <button
                type="button"
                class="btn btn-danger btn-sm"
                rel="delete-category"
                data-cat-id="{{ row.category.id }}"
                data-cat-name="{{ row.category.cat_name }}"
                data-delete-url="{% url 'products:category_delete_with_products' row.category.id %}">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Delete modal -->
<div class="modal fade" id="categoryDeleteModal" tabindex="-1" aria-labelledby="categoryDeleteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="categoryDeleteLabel">Delete Category &amp; Products</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="catDeleteMessage">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <a id="catDeleteConfirm" href="#" class="text-decoration-none">
          <button type="button" class="btn btn-danger">Delete</button>
        </a>
      </div>
    </div>
  </div>
</div>

{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
    $(document).ready(function(){
      var catTbl = $('#categoriesTable').DataTable({
        deferRender: true,
        columnDefs: [
          { targets: [0], visible: false, searchable: false },
          { targets: -1, orderable: false }
        ],
      });

      $('#categoriesTable').on('click', 'button[rel="delete-category"]', function () {
        var name = $(this).data('cat-name');
        var url  = $(this).data('delete-url');

        $('#catDeleteMessage').text(
          'Are you sure you want to delete the category "' + name +
          '" and all its products (with stock entries)?'
        );
        $('#catDeleteConfirm').attr('href', url);
        $('#categoryDeleteModal').modal('show');
      });
    });
  </script>
{% endblock javascripts %}