{% 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">Step 0 — Complaint Requests Report</h2>
            <p class="text-muted">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> 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">Year</label>
                    <select name="year" class="form-select">
                        <option value="">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">Month</label>
                    <select name="month" class="form-select">
                        <option value="">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">Staff</label>
                    <select name="staff_id" class="form-select">
                        <option value="">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">Status</label>
                    <select name="status" class="form-select">
                        <option value="">All</option>
                        <option value="filled" {% if selected_status == 'filled' %}selected{% endif %}>Filled</option>
                        <option value="not_filled" {% if selected_status == 'not_filled' %}selected{% endif %}>Not Filled</option>
                        <option value="on_hold" {% if selected_status == 'on_hold' %}selected{% endif %}>On Hold</option>
                        <option value="barcode" {% if selected_status == 'barcode' %}selected{% endif %}>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> Filter
                    </button>
                </div>
                <div class="col-md-1">
                    <a href="{% url 'dashboard:complaint_request_list' %}" class="btn btn-outline-secondary w-100">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Complaint Requests ({{ page_obj.paginator.count }} 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>#</th>
                            <th>Date</th>
                            <th>Patient</th>
                            <th>File #</th>
                            <th>Department</th>
                            <th>Staff</th>
                            <th>Status</th>
                            <th>Fill Time</th>
                            <th>Barcode</th>
                            <th>Non-Activation Reason</th>
                            <th>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">On Hold</span>
                                {% elif req.filled %}
                                <span class="badge bg-success">Filled</span>
                                {% elif req.not_filled %}
                                <span class="badge bg-danger">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">
                Showing {{ page_obj.start_index }}-{{ page_obj.end_index }} of {{ page_obj.paginator.count }}
            </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 }}">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 }}">Next</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}