{% extends 'base.html' %}
{% block title %}Booking Oversight{% endblock %}
{% block topbar_title %}Booking Oversight{% endblock %}
{% block content %}
<h1 class="page-title">🎫 All Bookings</h1>
<p class="page-sub">Platform-wide bookings. Issue a manual refund with a justification note (logged in the audit trail).</p>

<form method="get" style="margin-bottom:1rem; display:flex; gap:.5rem; max-width:420px;">
    <input type="text" name="q" value="{{ q }}" placeholder="Search code or passenger"
           style="flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:10px;">
    <button class="btn" type="submit">Search</button>
</form>

<div class="table-container">
    <table>
        <thead>
            <tr><th>Code</th><th>Passenger</th><th>Route</th><th>Operator</th><th>Total</th><th>Status</th><th>Manual refund</th></tr>
        </thead>
        <tbody>
        {% for b in bookings %}
            <tr>
                <td>{{ b.booking_code }}</td>
                <td>{{ b.user.full_name }}</td>
                <td>{{ b.schedule.route.source_city.city_name }} → {{ b.schedule.route.destination_city.city_name }}</td>
                <td>{{ b.schedule.bus.operator.company_name }}</td>
                <td>Rs. {{ b.total_amount }}</td>
                <td>
                    {% if b.booking_status == 'REFUNDED' %}<span class="status-badge status-pending">REFUNDED</span>
                    {% elif b.booking_status == 'CANCELLED' %}<span class="status-badge status-inactive">CANCELLED</span>
                    {% else %}<span class="status-badge status-confirmed">{{ b.booking_status }}</span>{% endif %}
                </td>
                <td>
                    {% if b.booking_status == 'CONFIRMED' or b.booking_status == 'PENDING' %}
                    <form method="post" style="display:flex; gap:.4rem;">
                        {% csrf_token %}
                        <input type="hidden" name="booking_id" value="{{ b.id }}">
                        <input type="text" name="note" placeholder="Justification" required
                               style="padding:6px; border:1px solid var(--border); border-radius:8px;">
                        <button class="btn btn-danger" type="submit" style="padding:6px 12px;">Refund</button>
                    </form>
                    {% else %}<span style="color:var(--muted);">—</span>{% endif %}
                </td>
            </tr>
        {% empty %}
            <tr><td colspan="7" style="text-align:center; color:var(--muted);">No bookings found.</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}