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

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

<!-- 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 or contact...">
  </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>

<!-- Doctor Table -->
<form method="post">
  {% csrf_token %}
  <div class="d-flex justify-content-between mb-3">
    {% if perms.inventory.add_doctor %}
      <a href="{% url 'inventory:doctor_add' %}" class="btn btn-outline-primary">Add Doctor</a>
    {% endif %}
  </div>
  <table class="table table-bordered table-hover">
    <thead class="table-light">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Contact</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for doctor in doctors %}
      <tr>
        <td>{{ doctor.id }}</td>
        <td>{{ doctor.name }}</td>
        <td>{{ doctor.contact }}</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_doctorcommission %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:doctor_commission_list' doctor.id %}">
                    <i class="fas fa-file-invoice me-1"></i> Commissions' Details
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.add_doctorproductcommission %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:doctor_define_commission' doctor.id %}">
                    <i class="fas fa-percent me-1"></i> Define Commission
                </a>
                </li>
            {% endif %}            
            {% if perms.inventory.change_consumeraccount %}
                <li>
                <a class="dropdown-item" href="#">
                    <i class="fas fa-receipt me-1"></i> Add Opening Balance
                </a>
                </li>
            {% endif %}
            {% if perms.finance.add_paymenttodoctor %}
                <li>
                <a class="dropdown-item" href="{% url 'finance:payment_to_doctor_create' doctor.id %}">
                    <i class="fas fa-money-bill-wave me-1"></i> Payment to Doctor
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.change_doctor %}
                <li>
                <a class="dropdown-item" href="{% url 'inventory:doctor_edit' doctor.id %}">
                    <i class="fas fa-pen-to-square me-1"></i> Edit
                </a>
                </li>
            {% endif %}
            {% if perms.inventory.delete_doctor %}
                <li>
                <a class="dropdown-item text-danger" href="{% url 'inventory:doctor_delete' doctor.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="4" class="text-center">No doctors found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</form>

<!-- Pagination -->
{% if doctors.has_other_pages %}
<nav>
  <ul class="pagination justify-content-center">
    {% if doctors.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ doctors.previous_page_number }}">Previous</a>
      </li>
    {% endif %}

    {% for num in doctors.paginator.page_range %}
      {% if num <= 2 or num > doctors.paginator.num_pages|add:'-2' or num >= doctors.number|add:'-1' and num <= doctors.number|add:'1' %}
        <li class="page-item {% if doctors.number == num %}active{% endif %}">
          <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ num }}">{{ num }}</a>
        </li>
      {% elif num == doctors.number|add:'-2' or num == doctors.number|add:'2' %}
        <li class="page-item disabled"><span class="page-link">…</span></li>
      {% endif %}
    {% endfor %}

    {% if doctors.has_next %}
      <li class="page-item">
        <a class="page-link" href="?q={{ search_query }}&sort={{ sort }}&page={{ doctors.next_page_number }}">Next</a>
      </li>
    {% endif %}
  </ul>
</nav>
{% endif %}
{% endblock %}