{% extends 'base.html' %}
{% block title %}My Bookings{% endblock %}
{% block topbar_title %}My Bookings{% endblock %}
{% block content %}
<h2 style="color:#2c3e50;">🧾 My bookings</h2>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Route</th>
                <th>Bus</th>
                <th>Departure</th>
                <th>Seats</th>
                <th>Total</th>
                <th>Status</th>
                <th>Booked at</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            {% for b in bookings %}
            <tr>
                <td>{{ b.booking_code }}</td>
                <td>{{ b.schedule.route.source_city.city_name }} → {{ b.schedule.route.destination_city.city_name }}
                    {% if b.schedule.status == 'DELAYED' %}<br><span class="status-badge status-pending">DELAYED</span>{% endif %}
                </td>
                <td>{{ b.schedule.bus.bus_name }}</td>
                <td>{{ b.schedule.departure_time|date:"Y-m-d H:i" }}</td>
                <td>
                    {% with seat_list=b.booking_seats.all %}
                        {% if seat_list %}
                            {% for bs in seat_list %}{{ bs.seat.seat_number }}{% if not forloop.last %}, {% endif %}{% endfor %}
                        {% else %}{{ b.seats_count }}{% endif %}
                    {% endwith %}
                </td>
                <td>Rs. {{ b.total_amount }}
                    {% if b.cancellation_fee_amount > 0 %}<br><small style="color:#EF4444;">fee: Rs. {{ b.cancellation_fee_amount }}</small>{% endif %}
                </td>
                <td>
                    {% if b.booking_status == 'CONFIRMED' or b.booking_status == 'CHECKED_IN' or b.booking_status == 'COMPLETED' %}
                    <span class="status-badge status-confirmed">{{ b.booking_status }}</span>
                    {% elif b.booking_status == 'PENDING_PAYMENT' %}
                    <span class="status-badge status-pending">AWAITING PAYMENT</span>
                    {% elif b.booking_status == 'CANCELLED' or b.booking_status == 'EXPIRED' %}
                    <span class="status-badge status-inactive">{{ b.booking_status }}</span>
                    {% elif b.booking_status == 'REFUNDED' %}
                    <span class="status-badge status-pending">{{ b.booking_status }}</span>
                    {% else %}
                    <span class="status-badge status-confirmed">{{ b.booking_status }}</span>
                    {% endif %}
                </td>
                <td>{{ b.booked_at|date:"Y-m-d H:i" }}</td>
                <td style="white-space:nowrap;">
                    {% if b.booking_status == 'PENDING_PAYMENT' %}
                        <a href="{% url 'checkout' b.id %}" class="btn" style="padding:5px 12px;">Complete payment</a>
                        <a href="{% url 'cancel_booking' b.id %}" class="btn btn-danger" style="padding:5px 12px;"
                            onclick="return confirm('Cancel this booking? Nothing has been charged yet.');">Cancel</a>
                    {% elif b.booking_status == 'CONFIRMED' or b.booking_status == 'CHECKED_IN' %}
                        <a href="{% url 'eticket_pdf' b.id %}" class="btn" style="padding:5px 12px;">🎫 Ticket</a>
                        <a href="{% url 'cancel_booking' b.id %}" class="btn btn-danger" style="padding:5px 12px;"
                            onclick="return confirm('Cancel this booking? A cancellation fee may apply depending on how close it is to departure.');">Cancel</a>
                    {% elif b.booking_status == 'COMPLETED' %}
                        <a href="{% url 'eticket_pdf' b.id %}" class="btn" style="padding:5px 12px;">🎫 Ticket</a>
                        {% if not b.rating %}
                        <button type="button" class="btn" style="padding:5px 12px;" onclick="openRate({{ b.id }})">⭐ Rate</button>
                        {% endif %}
                    {% elif b.schedule.arrival_time < now and b.booking_status in confirmed_like %}
                        {% if not b.rating %}
                        <button type="button" class="btn" style="padding:5px 12px;" onclick="openRate({{ b.id }})">⭐ Rate</button>
                        {% endif %}
                    {% else %}
                    <span style="color:#7f8c8d;">—</span>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="9" style="text-align:center; color:#7f8c8d;">You have no bookings yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div id="rate-modal" style="display:none;position:fixed;inset:0;background:rgba(13,42,102,.55);z-index:60;align-items:center;justify-content:center;padding:1rem;">
  <form method="post" id="rate-form" style="background:#fff;border-radius:16px;max-width:420px;width:100%;padding:1.4rem;">
    {% csrf_token %}
    <h3 style="margin-bottom:.8rem;">Rate your trip</h3>
    <div style="font-size:1.6rem;letter-spacing:.2rem;margin-bottom:.8rem;">
      {% for i in "12345" %}
      <label><input type="radio" name="stars" value="{{ i }}" style="display:none;" {% if i == "5" %}checked{% endif %}>☆</label>
      {% endfor %}
    </div>
    <textarea name="review" placeholder="How was the trip? (optional)" rows="3"
      style="width:100%;border:1px solid #E5E7EB;border-radius:8px;padding:.6rem;font-family:inherit;margin-bottom:.6rem;"></textarea>
    <label style="font-size:.82rem;display:flex;gap:.4rem;align-items:center;margin-bottom:.6rem;">
      <input type="checkbox" name="issue_flag" id="rate-issue"> Report a safety/service issue instead of publishing publicly
    </label>
    <textarea name="issue_note" id="rate-issue-note" placeholder="Describe the issue (sent to the admin team)" rows="2"
      style="width:100%;border:1px solid #E5E7EB;border-radius:8px;padding:.6rem;font-family:inherit;margin-bottom:.8rem;display:none;"></textarea>
    <div style="display:flex;gap:.6rem;justify-content:flex-end;">
      <button type="button" class="btn btn-danger" onclick="document.getElementById('rate-modal').style.display='none';">Cancel</button>
      <button type="submit" class="btn">Submit rating</button>
    </div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
document.getElementById('rate-issue').addEventListener('change', (e) => {
  document.getElementById('rate-issue-note').style.display = e.target.checked ? 'block' : 'none';
});
document.querySelectorAll('#rate-form input[name=stars]').forEach(r => {
  r.addEventListener('change', paintStars);
});
function paintStars() {
  const val = document.querySelector('#rate-form input[name=stars]:checked').value;
  document.querySelectorAll('#rate-form label').forEach((l, i) => {
    l.firstChild.nextSibling ? null : null;
    l.textContent = (i < val) ? '★' : '☆';
  });
}
paintStars();
function openRate(bookingId) {
  document.getElementById('rate-form').action = `/booking/${bookingId}/rate/`;
  document.getElementById('rate-modal').style.display = 'flex';
}
</script>
{% endblock %}