{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}Complaint Requests Report - PX360{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">{% trans "Step 0 — Complaint Requests Report" %}</h2>
            <p class="text-muted">{% trans "Track complaint request filling, status, and timing" %}</p>
        </div>
        <a href="{% url 'dashboard:complaint_request_export' %}?{{ request.GET.urlencode }}"
           class="btn btn-primary">
            <i class="bi bi-download me-1"></i> {% trans "Export Excel" %}
        </a>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3 align-items-end">
                <div class="col-md-2">
                    <label class="form-label">{% trans "Year" %}</label>
                    <select name="year" class="form-select">
                        <option value="">{% trans "All" %}</option>
                        {% for y in years_range %}
                        <option value="{{ y }}" {% if selected_year == y %}selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">{% trans "Month" %}</label>
                    <select name="month" class="form-select">
                        <option value="">{% trans "All" %}</option>
                        {% for m in months_range %}
                        <option value="{{ m }}" {% if selected_month == m %}selected{% endif %}>{{ m }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{% trans "Staff" %}</label>
                    <select name="staff_id" class="form-select">
                        <option value="">{% trans "All" %}</option>
                        {% for s in staff_members %}
                        <option value="{{ s.id }}" {% if selected_staff == s.id|stringformat:'s' %}selected{% endif %}>
                            {{ s.get_full_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">{% trans "Status" %}</label>
                    <select name="status" class="form-select">
                        <option value="">{% trans "All" %}</option>
                        <option value="filled" {% if selected_status == 'filled' %}selected{% endif %}>{% trans "Filled" %}</option>
                        <option value="not_filled" {% if selected_status == 'not_filled' %}selected{% endif %}>{% trans "Not Filled" %}</option>
                        <option value="on_hold" {% if selected_status == 'on_hold' %}selected{% endif %}>{% trans "On Hold" %}</option>
                        <option value="barcode" {% if selected_status == 'barcode' %}selected{% endif %}>{% trans "Barcode (SELF)" %}</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="bi bi-funnel me-1"></i> {% trans "Filter" %}
                    </button>
                </div>
                <div class="col-md-1">
                    <a href="{% url 'dashboard:complaint_request_list' %}" class="btn btn-outline-secondary w-100">{% trans "Clear" %}</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>{% trans "Complaint Requests" %} ({{ page_obj.paginator.count }} {% trans "total" %})</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>{% trans "#" %}</th>
                            <th>{% trans "Date" %}</th>
                            <th>{% trans "Patient" %}</th>
                            <th>{% trans "File #" %}</th>
                            <th>{% trans "Department" %}</th>
                            <th>{% trans "Staff" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Fill Time" %}</th>
                            <th>{% trans "Barcode" %}</th>
                            <th>{% trans "Non-Activation Reason" %}</th>
                            <th>{% trans "PR Observations" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for req in page_obj %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ req.request_date }}</td>
                            <td>{{ req.patient_name|default:"—" }}</td>
                            <td>{{ req.file_number|default:"—" }}</td>
                            <td>{{ req.complained_department.name|default:"—" }}</td>
                            <td>{{ req.staff.get_full_name|default:"—" }}</td>
                            <td>
                                {% if req.on_hold %}
                                <span class="badge bg-warning text-dark">{% trans "On Hold" %}</span>
                                {% elif req.filled %}
                                <span class="badge bg-success">{% trans "Filled" %}</span>
                                {% elif req.not_filled %}
                                <span class="badge bg-danger">{% trans "Not Filled" %}</span>
                                {% else %}
                                <span class="badge bg-secondary">—</span>
                                {% endif %}
                            </td>
                            <td>{{ req.get_filling_time_category_display }}</td>
                            <td>{% if req.from_barcode %}<span class="badge bg-info">SELF</span>{% else %}—{% endif %}</td>
                            <td>{{ req.get_reason_non_activation_display|default:"—" }}</td>
                            <td class="text-truncate" style="max-width:200px">{{ req.pr_observations|default:"—" }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">
                                No complaint requests found for the selected filters.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% if page_obj.has_other_pages %}
        <div class="card-footer d-flex justify-content-between align-items-center">
            <span class="text-muted">
                {% blocktrans with start=page_obj.start_index end=page_obj.end_index total=page_obj.paginator.count %}Showing {{ start }}-{{ end }} of {{ total }}{% endblocktrans %}
            </span>
            <nav>
                <ul class="pagination pagination-sm mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}&{{ request.GET.urlencode }}">{% trans "Previous" %}</a>
                    </li>
                    {% endif %}
                    {% for num in page_obj.paginator.page_range %}
                    <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}&{{ request.GET.urlencode }}">{{ num }}</a>
                    </li>
                    {% endfor %}
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}&{{ request.GET.urlencode }}">{% trans "Next" %}</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}