{% extends "core/base.html" %}

{% block content %}
<div class="container my-5">
    <div class="card shadow-lg">
        <div class="card-header bg-danger text-black d-flex justify-content-between align-items-center">
            <h3>Manage Issues</h3>
            <a href="{% url 'superadmin_dashboard' %}" class="btn btn-light btn-sm">Back to Dashboard</a>
        </div>
        <div class="card-body">
            {% if issues %}
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>No.</th>
                        <th>Title</th>
                        <th>Reported By</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for issue in issues %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ issue.title }}</td>
                        <td>{{ issue.reporter.username }}</td>
                        <td>
                            {% if issue.status == "reported" %}
                            <span class="badge bg-danger">Reported</span>
                            {% elif issue.status == "acknowledged" %}
                            <span class="badge bg-info text-dark">Acknowledged</span>
                            {% elif issue.status == "in_progress" %}
                            <span class="badge bg-warning text-dark">In Progress</span>
                            {% elif issue.status == "resolved" %}
                            <span class="badge bg-success">Resolved</span>
                            {% else %}
                            <span class="badge bg-secondary">Unknown</span>
                            {% endif %}
                        </td>
                        <td>{{ issue.created_at|date:"M d, Y H:i" }}</td>
                        <td>
                            {% if issue.department %}
                            <span class="fw-bold text-primary">{{ issue.department.name }}</span>
                            {% else %}
                            <!-- Assign Department Form -->
                            <form method="post" action="" class="d-inline">
                                {% csrf_token %}
                                <input type="hidden" name="issue_id" value="{{ issue.id }}">
                                <select name="department" class="form-select form-select-sm d-inline w-auto">
                                    <option value="">— Select Department —</option>
                                    {% for dept in departments %}
                                    <option value="{{ dept.id }}">{{ dept.name }}</option>
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn btn-sm btn-primary">Assign</button>
                            </form>

                            <!-- Report Fake Button -->
                            <a href="{% url 'delete_fake_issue' issue.id %}" class="btn btn-sm btn-danger ms-1"
                                onclick="return confirm('Are you sure you want to delete this issue as FAKE?');">
                                <i class="fas fa-ban"></i> Report Fake
                            </a>
                            <a href="{% url 'delete_issue' issue.id %}" class="btn btn-sm btn-outline-danger ms-1"
                                onclick="return confirm('Are you sure you want to permanently delete this issue? This cannot be undone.');">
                                <i class="fas fa-trash"></i> Delete
                            </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-muted">No issues reported yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}