{% extends "hotel/guest/base.html" %}

{% block title %}Booking #{{ code }}{% endblock %}
{% block page_title %}Booking #{{ code }}{% endblock %}

{% block head %}
<style>
  .detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);
    gap:16px;
  }

  .booking-hero-card{
    color:#fff;
    background:
      linear-gradient(135deg,rgba(37,99,235,.96),rgba(30,64,175,.92)),
      radial-gradient(circle at top right,rgba(147,197,253,.45),transparent 35%);
    border-radius:24px;
    padding:20px;
    box-shadow:0 18px 40px rgba(37,99,235,.20);
  }

  .booking-hero-card h2{
    margin:0;
    font-size:1.6rem;
    font-weight:900;
  }

  .booking-hero-card p{
    margin:6px 0 0;
    color:#dbeafe;
  }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
  }

  .status-pending{background:#fef3c7;color:#92400e}
  .status-confirmed{background:#dcfce7;color:#166534}
  .status-checkedin{background:#dbeafe;color:#1d4ed8}
  .status-checkedout{background:#e5e7eb;color:#374151}
  .status-cancelled{background:#fee2e2;color:#991b1b}

  .info-list{
    display:grid;
    gap:10px;
  }

  .info-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed #e5e7eb;
  }

  .info-row:last-child{
    border-bottom:0;
  }

  .info-row span:first-child{
    color:#64748b;
    font-weight:800;
  }

  .info-row span:last-child{
    font-weight:900;
    color:#111827;
    text-align:right;
  }

  .money-big{
    font-size:1.5rem;
    font-weight:900;
    color:#111827;
  }

  .item-card{
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:12px;
    background:#f8fafc;
    margin-bottom:10px;
  }

  .item-title{
    font-weight:900;
    color:#111827;
  }

  .item-meta{
    margin-top:5px;
    color:#64748b;
    font-size:.85rem;
  }

  .action-box{
    border:1px dashed #cbd5e1;
    border-radius:18px;
    background:#f8fafc;
    padding:14px;
  }

  @media(max-width:900px){
    .detail-grid{
      grid-template-columns:1fr;
    }
  }
</style>
{% endblock %}

{% block content %}

<section class="booking-hero-card" style="margin-bottom:16px;">
  <h2>Booking #{{ code }}</h2>
  <p>
    {{ booking.checkin_date }} → {{ booking.checkout_date }}
    · {{ booking.nights }} night{% if booking.nights != 1 %}s{% endif %}
  </p>
</section>

<section class="detail-grid">

  <div>
    <div class="card" style="margin-bottom:16px;">
      <div class="row" style="justify-content:space-between;align-items:flex-start;">
        <div>
          <h3 style="margin:0;">Booking Summary</h3>
          <p class="muted" style="margin:4px 0 0;">Your booking request and payment status.</p>
        </div>

        <span class="status-pill status-{{ booking.status|lower }}">
          {{ booking.status }}
        </span>
      </div>

      <div class="info-list" style="margin-top:14px;">
        <div class="info-row">
          <span>Booking Code</span>
          <span>#{{ booking.t_id }}</span>
        </div>

        <div class="info-row">
          <span>Check-in</span>
          <span>{{ booking.checkin_date }}</span>
        </div>

        <div class="info-row">
          <span>Check-out</span>
          <span>{{ booking.checkout_date }}</span>
        </div>

        <div class="info-row">
          <span>Nights</span>
          <span>{{ booking.nights }}</span>
        </div>

        <div class="info-row">
          <span>Payment Mode</span>
          <span>{{ booking.pay_mode|default:"-" }}</span>
        </div>

        <div class="info-row">
          <span>Deposit Deadline</span>
          <span>{{ booking.deposit_deadline|default:"-" }}</span>
        </div>
      </div>
    </div>

    <div class="card">
      <h3 style="margin-top:0;">Selected Rooms</h3>

      {% if items %}
        {% for it in items %}
          <div class="item-card">
            <div class="item-title">
              {{ it.category.name|default:"Room" }}
            </div>

            <div class="item-meta">
              Qty: <b>{{ it.qty }}</b>
              · Rate/Night: <b>{{ it.rate_per_night|floatformat:0 }}</b>
              · Discount/Night: <b>{{ it.discount_per_night|floatformat:0 }}</b>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <p class="muted">No room items found for this booking.</p>
      {% endif %}
    </div>
  </div>

  <aside>
    <div class="card" style="margin-bottom:16px;">
      <h3 style="margin-top:0;">Amount Summary</h3>

      <div class="info-list">
        <div class="info-row">
          <span>Subtotal</span>
          <span>{{ booking.subtotal|floatformat:0 }}</span>
        </div>

        <div class="info-row">
          <span>Tax</span>
          <span>{{ booking.tax_amount|floatformat:0 }}</span>
        </div>

        <div class="info-row">
          <span>Total Amount</span>
          <span class="money-big">{{ booking.total_amount|floatformat:0 }}</span>
        </div>

        <div class="info-row">
          <span>Advance Required</span>
          <span>{{ booking.advance_required|floatformat:0 }}</span>
        </div>

        <div class="info-row">
          <span>Advance Received</span>
          <span>{{ booking.advance_received|floatformat:0 }}</span>
        </div>
      </div>
    </div>

    <div class="card" style="margin-bottom:16px;">
      <h3 style="margin-top:0;">Evidence</h3>

      {% if booking.proof_file %}
        <p>
          <span class="badge success">
            <i class="fa-regular fa-circle-check"></i>
            Evidence Uploaded
          </span>
        </p>

        <a class="btn" href="{{ booking.proof_file.url }}" target="_blank">
          <i class="fa-regular fa-eye"></i>
          View Evidence
        </a>
      {% else %}
        <p class="muted">No evidence uploaded yet.</p>

        <a class="btn primary" href="{% url 'hotel:guest:bookings' %}">
          <i class="fa-solid fa-upload"></i>
          Upload from Bookings
        </a>
      {% endif %}
    </div>

    <div class="action-box">
      {% if booking.status == "PENDING" %}
        <h3 style="margin-top:0;">Cancel Booking</h3>
        <p class="muted">
          You can cancel this booking while it is still pending.
        </p>

        <form method="post"
              action="{% url 'hotel:guest:booking_cancel' code=code %}"
              onsubmit="return confirm('Cancel booking #{{ code }}?');">
          {% csrf_token %}
          <button class="btn">
            <i class="fa-regular fa-circle-xmark"></i>
            Cancel Booking
          </button>
        </form>
      {% else %}
        <h3 style="margin-top:0;">Cancellation</h3>
        <p class="muted">
          Cancellation is only allowed while booking is pending.
        </p>
      {% endif %}
    </div>
  </aside>

</section>

{% endblock %}