{% extends 'base.html' %}
{% block content %}
<div class="container my-4">
    <h2 class="mb-4">Submitted Feedback Responses</h2>

    <!-- Filters -->
    <form method="get">
        <div class="row mb-3">
            <div class="col">
            <label for="month">Filter by Month:</label>
            <select name="month" id="month" class="form-select" onchange="this.form.submit()">
                <option value="">All</option>
                {% for m in months %}
                <option value="{{ m }}" {% if selected_month == m %}selected{% endif %}>{{ m }}</option>
                {% endfor %}
            </select>
            </div>
            <div class="col">
            <label for="employee_id">Filter by Employee:</label>
            <select name="employee_id" id="employee_id" class="form-select" onchange="this.form.submit()">
                <option value="">All</option>
                {% for emp in employees %}
                <option value="{{ emp.id }}" {% if selected_employee_id == emp.id %}selected{% endif %}>
                    {{ emp.full_name }}
                </option>
                {% endfor %}
            </select>
            </div>
        </div>
        </form>
    <!-- Feedback Table -->
    <div class="table-responsive">
        <table id="feedbackTable" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Employee</th>
                    <th>Month</th>
                    <th>Anonymous</th>
                    <th>Answers</th>
                </tr>
            </thead>
            <tbody>
                {% for r in responses %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td>{{ 'Anonymous' if r.is_anonymous else r.employee.full_name }}</td>
                    <td>{{ r.month }}</td>
                    <td>{{ 'Yes' if r.is_anonymous else 'No' }}</td>
                    <td>
                        <ul class="list-unstyled">
                            {% for ans in r.answers %}
                            <li>
                                <strong>{{ ans.question.question_text }}</strong>: {{ ans.answer_text }}
                            </li>
                            {% endfor %}
                        </ul>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- DataTables JS + Bootstrap support -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function () {
        $('#feedbackTable').DataTable({
            pageLength: 5,
            order: [[4, 'desc']]
        });
    });
</script>
{% endblock %}