{% extends 'base.html' %}

{% block title %}Booking Testing - Yatra Booking System{% endblock %}

{% block content %}
<div class="test-section">
    <h2>🎫 Booking Management</h2>
    <p>Manually test booking process, payment integration, and ticket generation functionality.</p>

    <div class="test-controls">
        <a href="/admin/testing_app/booking/add/" class="btn btn-primary" target="_blank">➕ Add New Booking</a>
        <a href="/admin/testing_app/booking/" class="btn" target="_blank">⚙️ Manage Bookings</a>
        <button class="btn" onclick="location.reload()">🔄 Refresh Data</button>
    </div>

    <div class="loading">
        <div class="spinner"></div>
        <p>Loading booking data...</p>
    </div>

    <div class="table-container">
        <h3>Bookings in Database (Latest 20)</h3>
        <table>
            <thead>
                <tr>
                    <th>Booking Code</th>
                    <th>Passenger</th>
                    <th>Route</th>
                    <th>Bus</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Booked Date</th>
                </tr>
            </thead>
            <tbody>
                {% for booking in bookings %}
                <tr>
                    <td><strong>{{ booking.booking_code }}</strong></td>
                    <td>{{ booking.user.full_name }}</td>
                    <td>{{ booking.schedule.route.source_city.city_name }} → {{
                        booking.schedule.route.destination_city.city_name }}</td>
                    <td>{{ booking.schedule.bus.bus_name|default:booking.schedule.bus.registration_no|default:"N/A" }}
                    </td>
                    <td>Rs. {{ booking.total_amount|floatformat:2 }}</td>
                    <td>
                        <span
                            class="status-badge status-{% if booking.booking_status == 'CONFIRMED' %}confirmed{% elif booking.booking_status == 'PENDING' %}pending{% else %}inactive{% endif %}">
                            {{ booking.booking_status }}
                        </span>
                    </td>
                    <td>{{ booking.booked_at|date:"M d, Y H:i" }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" style="text-align: center; padding: 40px; background: #f8f9fa;">
                        <h4>📭 No Bookings Found</h4>
                        <p>Your database doesn't contain any booking records yet.</p>
                        <p>Bookings will appear here when customers make reservations through your application.</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin-top: 20px;">
        <h3>🔍 Manual Testing Checklist</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 15px;">
            <div>
                <h4>Booking Process Testing</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Seat selection functionality</li>
                    <li>✅ Passenger information forms</li>
                    <li>✅ Booking confirmation workflow</li>
                    <li>✅ Booking code generation</li>
                    <li>✅ Email notifications</li>
                </ul>
            </div>
            <div>
                <h4>Payment Testing</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Payment gateway integration</li>
                    <li>✅ Amount calculation accuracy</li>
                    <li>✅ Payment status tracking</li>
                    <li>✅ Failed payment handling</li>
                    <li>✅ Receipt generation</li>
                </ul>
            </div>
            <div>
                <h4>Booking Management</h4>
                <ul style="line-height: 1.8;">
                    <li>✅ Booking modifications</li>
                    <li>✅ Cancellation workflow</li>
                    <li>✅ Refund processing</li>
                    <li>✅ Ticket generation (PDF/QR)</li>
                    <li>✅ Booking history tracking</li>
                </ul>
            </div>
        </div>
    </div>
</div>

{% endblock %}