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

{% block title %}Room Sales Report{% endblock %}
{% block heading %}Room Sales Report{% endblock %}

{% block stylesheets %}
<style>
  .rs-wrap{
    max-width:1450px;
    margin:0 auto;
  }

  .rs-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 6px 22px rgba(15,23,42,.06);
    margin-bottom:16px;
  }

  .rs-head{
    padding:14px 16px;
    border-bottom:1px solid #eef2f7;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }

  .rs-title{
    font-weight:900;
    font-size:17px;
    color:#0f172a;
  }

  .rs-body{
    padding:16px;
  }

  .rs-filter{
    display:flex;
    gap:10px;
    align-items:end;
    flex-wrap:wrap;
  }

  .rs-filter .form-group{
    margin-bottom:0;
  }

  .kpi{
    border-radius:16px;
    padding:16px;
    color:#fff;
    min-height:110px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    margin-bottom:15px;
  }

  .kpi-blue{background:linear-gradient(135deg,#1d4ed8,#2563eb);}
  .kpi-green{background:linear-gradient(135deg,#047857,#10b981);}
  .kpi-purple{background:linear-gradient(135deg,#6d28d9,#8b5cf6);}
  .kpi-slate{background:linear-gradient(135deg,#334155,#64748b);}

  .kpi small{
    font-weight:700;
    opacity:.9;
  }

  .kpi .amount{
    font-size:27px;
    font-weight:900;
    line-height:1.1;
  }

  .kpi .sub{
    font-size:12px;
    opacity:.9;
  }

  .rs-table th,
  .rs-table td{
    vertical-align:middle !important;
  }

  .money{
    text-align:right;
    font-weight:900;
    white-space:nowrap;
  }

  .num{
    text-align:right;
    white-space:nowrap;
  }

  .room-badge{
    display:inline-block;
    padding:4px 9px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-weight:800;
    font-size:12px;
  }

  .status-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    font-size:12px;
    font-weight:700;
    text-transform:capitalize;
  }

  .mini-note{
    font-size:12px;
    color:#64748b;
  }

  .total-row{
    background:#f8fafc;
    font-weight:900;
  }

  @media(max-width:768px){
    .kpi .amount{
      font-size:22px;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="rs-wrap">

  <!-- Filters -->
  <div class="rs-card">
    <div class="rs-head">
      <div>
        <div class="rs-title">Room Sales Report</div>
        <small class="text-muted">
          Period: {{ start|date:"Y-m-d" }} → {{ end|date:"Y-m-d" }}
        </small>
      </div>

      <div class="d-flex" style="gap:8px;">
        <a
          href="{% url 'hotel:reports:room_sales_report_pdf' %}?start={{ start|date:'Y-m-d' }}&end={{ end|date:'Y-m-d' }}"
          target="_blank"
          class="btn btn-sm btn-danger"
        >
          Print PDF
        </a>

        <a href="?{{ export_qs }}" class="btn btn-sm btn-outline-success">
          Export CSV
        </a>
      </div>
    </div>

    <div class="rs-body">
      <form method="get" class="rs-filter">
        <div class="form-group">
          <label>Start Date</label>
          <input
            type="date"
            name="start"
            class="form-control"
            value="{{ start|date:'Y-m-d' }}"
          >
        </div>

        <div class="form-group">
          <label>End Date</label>
          <input
            type="date"
            name="end"
            class="form-control"
            value="{{ end|date:'Y-m-d' }}"
          >
        </div>

        <div class="form-group">
          <button class="btn btn-primary">Apply Filter</button>
        </div>
      </form>
    </div>
  </div>

  <!-- KPI Cards -->
  <div class="row">

    <div class="col-md-3">
      <div class="kpi kpi-blue">
        <small>Total Room Revenue</small>

        <div class="amount">
          Rs {{ current.total_revenue|floatformat:0 }}
        </div>

        <div class="sub">
          Without Tax
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-green">
        <small>Revenue With Tax</small>

        <div class="amount">
          Rs {{ current.total_with_tax|floatformat:0 }}
        </div>

        <div class="sub">
          Tax: Rs {{ current.total_tax|floatformat:0 }}
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-slate">
        <small>Total Rooms</small>

        <div class="amount">
          {{ current.total_rooms }}
        </div>

        <div class="sub">
         Total number of rooms
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-purple">
        <small>Sold Room Nights</small>

        <div class="amount">
          {{ current.sold_room_nights }}
        </div>

        <div class="sub">
          Total sold nights in selected period
        </div>
      </div>
    </div>

 

  </div>

  <!-- Category Summary -->
  <div class="rs-card">
    <div class="rs-head">
      <div class="rs-title">Category Summary</div>
      <small class="text-muted">
        {{ current.period_days }} days
      </small>
    </div>

    <div class="rs-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0 rs-table">
          <thead class="thead-light">
            <tr>
              <th>Category</th>
              <th class="num">Rooms</th>
              <th class="num">Sold Nights</th>
              <th class="money">Revenue</th>
              <th class="money">Tax</th>
              <th class="money">With Tax</th>
            </tr>
          </thead>

          <tbody>
            {% for r in category_rows %}
              <tr>
                <td>
                  <b>{{ r.category }}</b>
                </td>

                <td class="num">
                  {{ r.rooms_count }}
                </td>

                <td class="num">
                  {{ r.sold_nights }}
                </td>

                <td class="money">
                  Rs {{ r.revenue|floatformat:0 }}
                </td>

                <td class="money">
                  Rs {{ r.tax|floatformat:0 }}
                </td>

                <td class="money">
                  Rs {{ r.with_tax|floatformat:0 }}
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="6" class="text-center text-muted py-3">
                  No category data found.
                </td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr class="total-row">
              <th>Total</th>
              <th class="num">{{ current.total_rooms }}</th>
              <th class="num">{{ current.sold_room_nights }}</th>
              <th class="money">Rs {{ current.total_revenue|floatformat:0 }}</th>
              <th class="money">Rs {{ current.total_tax|floatformat:0 }}</th>
              <th class="money">Rs {{ current.total_with_tax|floatformat:0 }}</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

  <!-- Room-wise Report -->
  <div class="rs-card">
    <div class="rs-head">
      <div class="rs-title">Room-wise Sales Detail</div>

      <small class="text-muted">
        Simple room revenue report
      </small>
    </div>

    <div class="rs-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0 rs-table">
          <thead class="thead-light">
            <tr>
              <th>Room</th>
              <th>Category</th>
              <th>Status</th>
              <th class="num">Sold Nights</th>
              <th class="num">Bookings</th>
              <th class="money">Revenue</th>
              <th class="money">Tax</th>
              <th class="money">With Tax</th>
              <th>Last Guest</th>
            </tr>
          </thead>

          <tbody>
            {% for r in room_rows %}
              <tr>
                <td>
                  <span class="room-badge">
                    {{ r.room_no }}
                  </span>
                </td>

                <td>
                  {{ r.category }}
                </td>

                <td>
                  <span class="status-badge">
                    {{ r.status }}
                  </span>
                </td>

                <td class="num">
                  {{ r.sold_nights }}
                </td>

                <td class="num">
                  {{ r.bookings_count }}
                </td>

                <td class="money">
                  Rs {{ r.revenue|floatformat:0 }}
                </td>

                <td class="money">
                  Rs {{ r.tax|floatformat:0 }}
                </td>

                <td class="money">
                  Rs {{ r.with_tax|floatformat:0 }}
                </td>

                <td>
                  {% if r.last_guest %}
                    <b>{{ r.last_guest }}</b>
                    <br>

                    <small class="text-muted">
                      B#{{ r.last_booking_tid|default:r.last_booking_code }}

                      {% if r.last_checkin %}
                        |
                        {{ r.last_checkin|date:"Y-m-d" }}
                        →
                        {{ r.last_checkout|date:"Y-m-d" }}
                      {% endif %}
                    </small>
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="9" class="text-center text-muted py-3">
                  No room data found.
                </td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr class="total-row">
              <th colspan="3">Total</th>

              <th class="num">
                {{ current.sold_room_nights }}
              </th>

              <th></th>

              <th class="money">
                Rs {{ current.total_revenue|floatformat:0 }}
              </th>

              <th class="money">
                Rs {{ current.total_tax|floatformat:0 }}
              </th>

              <th class="money">
                Rs {{ current.total_with_tax|floatformat:0 }}
              </th>

              <th></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}