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

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

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

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

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

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

  .rsrv-body{
    padding:16px;
  }

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

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

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

  .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;
  }

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

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

  .num{
    text-align:right;
  }

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

  .bar-bg{
    height:8px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
  }

  .bar-fill{
    height:8px;
    background:#2563eb;
    border-radius:999px;
  }

  @media(max-width:768px){
    .kpi .amount{font-size:22px;}
    .rsrv-head{
      align-items:flex-start;
      flex-direction:column;
    }
  }
</style>
{% endblock %}

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

  <!-- Filter -->
  <div class="rsrv-card">
    <div class="rsrv-head">
      <div>
        <div class="rsrv-title">Room Service 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_service_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="rsrv-body">
      <form method="get" class="rsrv-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 Revenue</small>
        <div class="amount">Rs {{ report.total_revenue|floatformat:0 }}</div>
        <div class="sub">
          Tax: Rs {{ report.total_tax|floatformat:0 }}
          |
          With Tax: Rs {{ report.total_with_tax|floatformat:0 }}
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-green">
        <small>Total Orders</small>
        <div class="amount">{{ report.total_orders }}</div>
        <div class="sub">Room service order count</div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-purple">
        <small>Total Qty Sold</small>
        <div class="amount">{{ report.total_qty|floatformat:2 }}</div>
        <div class="sub">Sum of item quantities</div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="kpi kpi-slate">
        <small>Average Order Value</small>
        <div class="amount">Rs {{ report.avg_order_value|floatformat:0 }}</div>
        <div class="sub">
          With Tax: Rs {{ report.avg_order_value_with_tax|floatformat:0 }}
          |
          Avg Item: Rs {{ report.avg_item_rate|floatformat:0 }}
        </div>
      </div>
    </div>
  </div>


  <!-- Item-wise Sale -->
  <div class="rsrv-card mt-3">
    <div class="rsrv-head">
      <div class="rsrv-title">Item-wise Room Service Sale</div>
      <small class="text-muted">Konsa item kitna sale hua</small>
    </div>

    <div class="rsrv-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0 rsrv-table">
          <thead class="thead-light">
            <tr>
              <th>Product ID</th>
              <th>Item</th>
              <th class="num">Qty</th>
              <th class="num">Orders</th>
              <th class="money">Revenue</th>
              <th class="money">Tax</th>
              <th class="money">With Tax</th>
              <th class="money">Avg Rate</th>
              <th class="money">Avg With Tax</th>
              <th style="width:160px;">Share</th>
            </tr>
          </thead>

          <tbody>
            {% for r in item_rows %}
              <tr>
                <td><span class="badge-soft">{{ r.product_id }}</span></td>
                <td><b>{{ r.product_name }}</b></td>
                <td class="num">{{ r.qty|floatformat:2 }}</td>
                <td class="num">{{ r.orders_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 class="money">Rs {{ r.avg_rate|floatformat:0 }}</td>
                <td class="money">Rs {{ r.avg_rate_with_tax|floatformat:0 }}</td>
                <td>
                  <div class="d-flex justify-content-between mb-1">
                    <small>{{ r.share|floatformat:2 }}%</small>
                  </div>
                  <div class="bar-bg">
                    <div class="bar-fill" style="width:{{ r.share|floatformat:0 }}%;"></div>
                  </div>
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="10" class="text-center text-muted py-3">
                  No item sale found.
                </td>
              </tr>
            {% endfor %}
          </tbody>

          <tfoot>
            <tr>
              <th colspan="2">Total</th>
              <th class="num">{{ report.total_qty|floatformat:2 }}</th>
              <th></th>
              <th class="money">Rs {{ report.total_revenue|floatformat:0 }}</th>
              <th class="money">Rs {{ report.total_tax|floatformat:0 }}</th>
              <th class="money">Rs {{ report.total_with_tax|floatformat:0 }}</th>
              <th></th>
              <th></th>
              <th>100%</th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}