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

{% block content %}
<h2 class="mb-3">Consumer 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">Consumers</li>
  </ol>
</nav>
{% endblock %}

{# Search & Sort #}
<form method="get" class="row g-3 mb-4 align-items-end">
  <div class="col-md-6">
    <label class="form-label">Search</label>
    <input
      type="text"
      name="q"
      value="{{ search_query }}"
      class="form-control"
      placeholder="Search by name, business nature, in-charge, phone…"
    >
  </div>
  <div class="col-md-3">
    <label class="form-label">Sort</label>
    <select name="sort" class="form-select">
      <option value="newest" {% if sort == 'newest' %}selected{% endif %}>Newest First</option>
      <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>Oldest First</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="submit" class="btn btn-primary w-100">Apply</button>
  </div>
</form>

{# Table & Actions #}
<form method="post">
  {% csrf_token %}
  <div class="d-flex justify-content-between mb-3">
    {% if perms.inventory.add_consumer %}
      <a href="{% url 'inventory:consumer_create' %}" class="btn btn-outline-primary">Add Consumer</a>
    {% endif %}
  </div>
  <table id="consumer-table" class="table table-bordered table-hover nowrap" style="width:100%">
    <thead class="table-light">
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>ID</th>
        <th>Name</th>
        <th>Business Nature</th>
        <th>In-Charge</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Address</th>
        <th class="text-center">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for consumer in consumers %}
      <tr>
        <td><input type="checkbox" name="selected_ids" value="{{ consumer.id }}"></td>
        <td>{{ consumer.id }}</td>
        <td>{{ consumer.name }}</td>
        <td>{{ consumer.business_nature }}</td>
        <td>{{ consumer.in_charge }}</td>
        <td>{{ consumer.phone_number }}</td>
        <td>{{ consumer.email }}</td>
        <td>{{ consumer.address }}</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_consumeraccount %}
                <li>
                <a class="dropdown-item" href="{% url 'finance:consumer_ledger' consumer.id %}">
                    <i class="fas fa-book me-1"></i> Ledger
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.view_consumeraccount %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:consumer_account_list' consumer.id %}">
                    <i class="fas fa-file-invoice me-1"></i> Account Details
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.change_consumeraccount %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:supplier_balance_opening' consumer.id %}">
                    <i class="fas fa-receipt me-1"></i> Add Opening Balance
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.add_payment_from_consumer %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:consumer_payment_add' consumer.id %}">
                    <i class="fas fa-money-bill-wave me-1"></i> Receive Payment
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.add_consumerproductdiscount %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:consumer_define_discount' consumer.id %}">
                    <i class="fas fa-percent me-1"></i> Define Prices
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.change_consumer %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:consumer_edit' consumer.id %}">
                    <i class="fas fa-pen-to-square me-1"></i> Edit
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.delete_consumer %}
                <li>
                <a class="dropdown-item text-danger" href="{% url 'inventory:consumer_delete' consumer.id %}">
                    <i class="fas fa-trash me-1"></i> Delete
                </a>
                </li>
            {% endif %}
            {# You can add more actions below #}
            {# Example: <li><a class="dropdown-item" href="#">Something else</a></li> #}
            </ul>
        </div>
        </td>

      </tr>
      {% empty %}
      <tr>
        <td colspan="9" class="text-center">No consumers found.</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</form>
<!-- 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>
<script>
  $(document).ready(function() {
    const table = $('#consumer-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: [0, -1] },
        { searchable: false, targets: [0, -1] }
      ]
    });

    document.getElementById('selectAll').addEventListener('click', function () {
      document.querySelectorAll('input[name="selected_ids"]').forEach(cb => cb.checked = this.checked);
    });
  });
</script>
{% endblock %}