{% extends 'base.html' %}
{% block title %}Checkout — Yatra Booking{% endblock %}
{% block topbar_title %}Checkout & Payment{% endblock %}

{% block content %}
<div style="max-width:640px;margin:0 auto;">
  <div style="background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.6rem;box-shadow:0 4px 16px rgba(13,42,102,.06);">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
      <h3 style="font-size:1.05rem;">🎟️ Booking {{ booking.booking_code }}</h3>
      <span style="background:#FEF3C7;color:#92400E;font-weight:700;font-size:.78rem;padding:.3rem .7rem;border-radius:999px;">
        ⏱️ Pay within <span id="pay-countdown">--:--</span>
      </span>
    </div>

    <table style="width:100%;font-size:.9rem;border-collapse:collapse;">
      <tr><td style="padding:.4rem 0;color:var(--muted);">Trip</td>
          <td style="text-align:right;font-weight:600;">
            {{ booking.schedule.route.source_city.city_name }} → {{ booking.schedule.route.destination_city.city_name }}</td></tr>
      <tr><td style="padding:.4rem 0;color:var(--muted);">Bus</td>
          <td style="text-align:right;">{{ booking.schedule.bus.bus_name }}</td></tr>
      <tr><td style="padding:.4rem 0;color:var(--muted);">Departure</td>
          <td style="text-align:right;">{{ booking.schedule.departure_time|date:"D, d M Y · h:i A" }}</td></tr>
      {% if seats %}
      <tr><td style="padding:.4rem 0;color:var(--muted);">Seats</td>
          <td style="text-align:right;font-weight:700;">
            {% for bs in seats %}{{ bs.seat.seat_number }}{% if not forloop.last %}, {% endif %}{% endfor %}</td></tr>
      {% else %}
      <tr><td style="padding:.4rem 0;color:var(--muted);">Seats</td>
          <td style="text-align:right;font-weight:700;">{{ booking.seats_count }} seat(s)</td></tr>
      {% endif %}
      <tr><td style="padding:.6rem 0;border-top:1px dashed var(--border);font-weight:700;">Total to pay</td>
          <td style="text-align:right;border-top:1px dashed var(--border);font-weight:800;font-size:1.1rem;">
            Rs. {{ booking.total_amount }}</td></tr>
    </table>

    <form action="{{ esewa_url }}" method="POST" id="esewa-form" style="margin-top:1.3rem;">
      {% for name, value in form_fields.items %}
      <input type="hidden" name="{{ name }}" value="{{ value }}">
      {% endfor %}
      <button type="submit"
        style="width:100%;background:#60BB46;color:#fff;border:none;border-radius:12px;padding:.95rem;font-size:1rem;font-weight:800;cursor:pointer;font-family:inherit;">
        Pay Rs. {{ booking.total_amount }} with eSewa →
      </button>
    </form>
    <p style="font-size:.75rem;color:var(--muted);margin-top:.8rem;text-align:center;">
      You'll be taken to eSewa's secure page to sign in and confirm.
      Test wallet: <b>9711111111</b> / <b>Nepal@123</b> / token <b>123456</b> (sandbox).
    </p>
    <p style="font-size:.78rem;text-align:center;margin-top:.4rem;">
      <a href="/my-bookings/" style="color:var(--secondary);">← Pay later (seats held until the timer ends)</a>
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let remaining = {{ remaining_seconds }};
const el = document.getElementById('pay-countdown');
function tick() {
  if (remaining <= 0) { el.textContent = 'expired'; return; }
  const m = String(Math.floor(remaining / 60)).padStart(2, '0');
  const s = String(remaining % 60).padStart(2, '0');
  el.textContent = `${m}:${s}`;
  remaining -= 1;
  setTimeout(tick, 1000);
}
tick();
</script>
{% endblock %}