{% extends 'base.html' %}
{% block title %}Bus Approvals{% endblock %}
{% block content %}
<h2 style="color:#2c3e50;">🔍 Bus approvals</h2>
<p style="color:#7f8c8d; margin:5px 0 20px;">
    Approve a bus to make it bookable, or decline it with a reason the operator will see.
</p>

<h3 style="color:#2c3e50; margin-top:20px;">Waiting for review</h3>
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Bus</th>
                <th>Reg. No</th>
                <th>Type</th>
                <th>Seats</th>
                <th>Operator</th>
                <th>Decision</th>
            </tr>
        </thead>
        <tbody>
            {% for bus in pending %}
            <tr>
                <td>{{ bus.id }}</td>
                <td>{{ bus.bus_name }}</td>
                <td>{{ bus.registration_no }}</td>
                <td>{{ bus.bus_type }}</td>
                <td>{{ bus.total_seats }}</td>
                <td>{{ bus.operator.company_name }}</td>
                <td>
                    <form method="post" action="{% url 'manage_buses' %}">
                        {% csrf_token %}
                        <input type="hidden" name="bus_id" value="{{ bus.id }}">
                        <input type="text" name="review_note" placeholder="Reason (required to decline)"
                            style="width:210px; padding:8px; border:2px solid #dfe6e9; border-radius:8px;">
                        <br><br>
                        <button type="submit" name="action" value="approve" class="btn">Approve</button>
                        <button type="submit" name="action" value="reject" class="btn btn-danger">Decline</button>
                    </form>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" style="text-align:center; color:#7f8c8d;">Nothing waiting for review.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<h3 style="color:#2c3e50; margin-top:30px;">Recently reviewed</h3>
<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Bus</th>
                <th>Operator</th>
                <th>Status</th>
                <th>Note</th>
                <th>Reviewed at</th>
            </tr>
        </thead>
        <tbody>
            {% for bus in reviewed %}
            <tr>
                <td>{{ bus.bus_name }}</td>
                <td>{{ bus.operator.company_name }}</td>
                <td>
                    {% if bus.approval_status == 'APPROVED' %}
                    <span class="status-badge status-active">APPROVED</span>
                    {% else %}
                    <span class="status-badge status-inactive">DECLINED</span>
                    {% endif %}
                </td>
                <td>{{ bus.review_note|default:"—" }}</td>
                <td>{{ bus.reviewed_at|date:"Y-m-d H:i" }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" style="text-align:center; color:#7f8c8d;">No buses reviewed yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}