{% extends "pos/base.html" %}
{% load static %}

{% block content %}

<style>
  .detail-page{padding:16px;}
  .detail-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .detail-title{
    margin:0;
    font-size:24px;
    font-weight:900;
    color:#172b4d;
  }
  .detail-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
    padding:14px;
    margin-bottom:14px;
  }
  .info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  .info-item{
    background:#f8fafc;
    border:1px solid #eef2f7;
    border-radius:12px;
    padding:10px;
  }
  .info-item .k{
    font-size:12px;
    font-weight:800;
    color:#64748b;
    text-transform:uppercase;
  }
  .info-item .v{
    font-size:15px;
    font-weight:800;
    color:#0f172a;
    margin-top:4px;
  }
  .simple-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  .simple-table th{
    background:#f1f5f9;
    padding:10px;
    border-bottom:1px solid #e5e7eb;
    font-weight:900;
  }
  .simple-table td{
    padding:10px;
    border-bottom:1px solid #eef2f7;
  }

  .detail-subtitle{
    margin-top:4px;
    color:#64748b;
    font-size:13px;
  }

  .detail-badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
  }

  .detail-badge-inclusive{
    background:#dcfce7;
    color:#166534;
    border:1px solid #bbf7d0;
  }

  .detail-badge-exclusive{
    background:#dbeafe;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
  }

  .detail-badge-status{
    background:#fef3c7;
    color:#92400e;
    border:1px solid #fde68a;
  }

  .amount-positive{
    color:#047857 !important;
  }

  .amount-due{
    color:#b91c1c !important;
  }
  @media(max-width:900px){
    .info-grid{grid-template-columns:1fr 1fr;}
    .detail-header{flex-direction:column;align-items:flex-start;}
  }
</style>

<div class="detail-page">

  <div class="detail-header">
   <div>
  <h1 class="detail-title">
    Check-in Detail - T#{{ booking.t_id }}
  </h1>

  <div class="detail-subtitle">
    Booking Code:
    {{ booking.booking_code|default:"-" }}

    &nbsp;|&nbsp;

    <span class="detail-badge detail-badge-status">
      {{ booking.status }}
    </span>

    &nbsp;

    {% if booking.tax_exclusive %}
      <span class="detail-badge detail-badge-exclusive">
        Exclusive Tax
      </span>
    {% else %}
      <span class="detail-badge detail-badge-inclusive">
        Inclusive Tax
      </span>
    {% endif %}
  </div>
</div>

    <div>
      <a href="{% url 'hotel:checkin:checkin_list' %}" class="btn btn-light">Back</a>

      {% if booking.status == "CHECKEDIN" %}
        <a href="{% url 'hotel:checkin:checkin_edit' booking.t_id %}" class="btn btn-warning">Edit</a>
      {% endif %}

      <a href="{% url 'hotel:checkin:checkin_pdf' booking.t_id %}" target="_blank" class="btn btn-secondary">
        Print PDF
      </a>

      <a class="btn btn-sm btn-success"href="{% url 'hotel:checkout:checkout' booking.t_id %}">
        Checkout
      </a>
    </div>
  </div>

  <div class="detail-card">
    <h5><strong>Guest & Stay Info</strong></h5>

    <div class="info-grid">
      <div class="info-item">
        <div class="k">Guest</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.name }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">Contact</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.contact|default:"-" }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">CNIC</div>
        <div class="v">{% if booking.guest %}{{ booking.guest.cnic|default:"-" }}{% else %}-{% endif %}</div>
      </div>

      <div class="info-item">
        <div class="k">Status</div>
        <div class="v">{{ booking.status }}</div>
      </div>

      <div class="info-item">
        <div class="k">Check-in</div>
        <div class="v">{{ booking.checkin_date|date:"d/m/Y" }}</div>
      </div>

      <div class="info-item">
        <div class="k">Checkout</div>
        <div class="v">{{ booking.checkout_date|date:"d/m/Y" }}</div>
      </div>

      <div class="info-item">
        <div class="k">Nights</div>
        <div class="v">{{ booking.nights }}</div>
      </div>

      <div class="info-item">
        <div class="k">Pay Mode</div>
        <div class="v">{{ booking.pay_mode }}</div>
      </div>

      <div class="info-item">
  <div class="k">Tax Type</div>

  <div class="v">
    {% if booking.tax_exclusive %}
      <span class="detail-badge detail-badge-exclusive">
        Exclusive
      </span>
    {% else %}
      <span class="detail-badge detail-badge-inclusive">
        Inclusive
      </span>
    {% endif %}
  </div>
</div>

<div class="info-item">
  <div class="k">Tax Rate</div>

  <div class="v">
    {{ booking.tax_percent|floatformat:2 }}%
  </div>
</div>

<div class="info-item">
  <div class="k">Booking Code</div>

  <div class="v">
    {{ booking.booking_code|default:"-" }}
  </div>
</div>

<div class="info-item">
  <div class="k">Billing Profile</div>

  <div class="v">
    {{ booking.billing_profile|default:"-" }}
  </div>
</div>
    </div>
  </div>

  <div class="detail-card">
    <h5><strong>Rooms</strong></h5>

    <table class="simple-table">
      <thead>
        <tr>
          <th>Room</th>
          <th>Category</th>
          <th>From</th>
          <th>To</th>
        </tr>
      </thead>
      <tbody>
        {% for ass in assignments %}
          <tr>
            <td>{{ ass.room.room_no }}</td>
            <td>{% if ass.room.category %}{{ ass.room.category.name }}{% else %}-{% endif %}</td>
            <td>{{ ass.from_date|date:"d/m/Y" }}</td>
            <td>{{ ass.to_date|date:"d/m/Y" }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="4" class="text-center text-muted">No room assigned.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="detail-card">
    <h5><strong>Room Items / Rates</strong></h5>

    <table class="simple-table">
      <thead>
        <tr>
          <th>Category</th>
          <th class="text-right">Qty</th>
          <th class="text-right">
            Entered Rate / Night
          </th>

          <th class="text-right">
            Discount / Night
          </th>

          <th class="text-right">
            Rate Context
          </th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
          <tr>
            <td>{{ item.category.name }}</td>
            <td class="text-right">{{ item.qty }}</td>
            <td class="text-right">{{ item.rate_per_night|floatformat:0 }}</td>
            <td class="text-right">
              {% if booking.tax_exclusive %}
                Tax Exclusive
              {% else %}
                Tax Inclusive
              {% endif %}
            </td>
            <td class="text-right">{{ item.discount_per_night|floatformat:0 }}</td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="5" class="text-center text-muted">No items found.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="info-grid">

  <div class="info-item">
    <div class="k">
      Pre-Tax Subtotal
    </div>

    <div class="v">
      {{ booking.subtotal|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Discount Before Tax
    </div>

    <div class="v">
      {{ discount_before_tax|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Taxable After Discount
    </div>

    <div class="v">
      {{ taxable_after_discount|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      {{ tax_amount_label }}
      ({{ booking.tax_percent|floatformat:2 }}%)
    </div>

    <div class="v">
      {{ booking.tax_amount|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Grand Total
    </div>

    <div class="v">
      {{ booking.total_amount|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Received
    </div>

    <div class="v amount-positive">
      {{ received_total|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Remaining Balance
    </div>

    <div class="v amount-due">
      {{ balance|floatformat:2 }}
    </div>
  </div>

  <div class="info-item">
    <div class="k">
      Tax Rate / Type
    </div>

    <div class="v">
      {{ booking.tax_percent|floatformat:2 }}%
      {{ tax_type_label }}
    </div>
  </div>

  {% if over_received > 0 %}
    <div class="info-item">
      <div class="k">
        Over Received
      </div>

      <div class="v amount-positive">
        {{ over_received|floatformat:2 }}
      </div>
    </div>
  {% endif %}

</div>

</div>

{% endblock %}