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

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

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

  .rpt-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(15,23,42,.05);
    margin-bottom:12px;
  }

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

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

  .rpt-body{
    padding:12px;
  }

  .filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:end;
  }

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

  .filter-row label{
    font-size:12px;
    margin-bottom:3px;
    color:#64748b;
  }

  .mini-kpis{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-bottom:12px;
  }

  .mini-kpi{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:13px;
  }

  .mini-kpi .label{
    font-size:12px;
    color:#64748b;
    font-weight:700;
  }

  .mini-kpi .value{
    font-size:24px;
    color:#0f172a;
    font-weight:900;
    line-height:1.2;
  }

  .mini-kpi .sub{
    font-size:11px;
    color:#64748b;
  }

  .k-blue{border-top:4px solid #2563eb;}
  .k-purple{border-top:4px solid #7c3aed;}
  .k-green{border-top:4px solid #059669;}

  .rpt-table th,
  .rpt-table td{
    vertical-align:middle !important;
    font-size:12px;
  }

  .rpt-table thead th{
    background:#f8fafc;
    color:#334155;
    font-weight:900;
  }

  .rpt-table tfoot th{
    background:#f8fafc;
    font-weight:900;
  }

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

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

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

  .badge-green{
    background:#dcfce7;
    color:#166534;
  }

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

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

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

      <div class="d-flex" style="gap:8px;">
        <a
          href="{% url 'hotel:reports:restaurant_sales_report_pdf' %}?start={{ start|date:'Y-m-d' }}&end={{ end|date:'Y-m-d' }}&order_type={{ current_order_type }}&status={{ current_status }}&shift_to={{ current_shift_to }}"
          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="rpt-body">
      <form method="get" class="filter-row">
        <div class="form-group">
          <label>Start</label>
          <input
            type="date"
            name="start"
            class="form-control form-control-sm"
            value="{{ start|date:'Y-m-d' }}"
          >
        </div>

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

        <div class="form-group">
          <label>Order Type</label>
          <select name="order_type" class="form-control form-control-sm">
            {% for val,label in order_type_options %}
              <option value="{{ val }}" {% if current_order_type == val %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label>Status</label>
          <select name="status" class="form-control form-control-sm">
            {% for val,label in status_options %}
              <option value="{{ val }}" {% if current_status == val %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

        <div class="form-group">
          <label>Shift To</label>
          <select name="shift_to" class="form-control form-control-sm">
            {% for val,label in shift_options %}
              <option value="{{ val }}" {% if current_shift_to == val %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </div>

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

  <!-- Top 3 Cards -->
  <div class="mini-kpis">

    <div class="mini-kpi k-blue">
      <div class="label">Total Sale With Tax</div>
      <div class="value">Rs {{ report.total_amount|floatformat:0 }}</div>
      <div class="sub">Final restaurant sale</div>
    </div>

    <div class="mini-kpi k-purple">
      <div class="label">Total Tax</div>
      <div class="value">Rs {{ report.total_tax|floatformat:0 }}</div>
      <div class="sub">Included tax amount</div>
    </div>

    <div class="mini-kpi k-green">
      <div class="label">Total Orders</div>
      <div class="value">{{ report.total_orders }}</div>
      <div class="sub">Total bills</div>
    </div>

  </div>

  <!-- Type-wise Sale -->
  <div class="rpt-card">
    <div class="rpt-head">
      <div class="rpt-title">Type-wise Sale</div>
      <small class="text-muted">Order type summary</small>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 rpt-table">
        <thead>
          <tr>
            <th>Type</th>
            <th class="num">Orders</th>
            <th class="money">Tax</th>
            <th class="money">Total Sale With Tax</th>
          </tr>
        </thead>

        <tbody>
          {% for r in type_rows %}
            <tr>
              <td>
                <span class="badge-soft">{{ r.order_type }}</span>
              </td>

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

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

              <td class="money">
                Rs {{ r.amount|floatformat:0 }}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="4" class="text-center text-muted py-3">
                No type-wise sale found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th>Total</th>
            <th class="num">{{ report.total_orders }}</th>
            <th class="money">Rs {{ report.total_tax|floatformat:0 }}</th>
            <th class="money">Rs {{ report.total_amount|floatformat:0 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- Item-wise Sale -->
  <div class="rpt-card">
    <div class="rpt-head">
      <div class="rpt-title">Item-wise Sale</div>
      <small class="text-muted">Simple item sale summary</small>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 rpt-table">
        <thead>
          <tr>
            <th>PID</th>
            <th>Item</th>
            <th class="num">Qty</th>
            <th class="num">Orders</th>
            <th class="money">Tax</th>
            <th class="money">Total Sale With Tax</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.tax|floatformat:0 }}
              </td>

              <td class="money">
                Rs {{ r.amount|floatformat:0 }}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="6" class="text-center text-muted py-3">
                No item-wise 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_tax|floatformat:0 }}</th>
            <th class="money">Rs {{ report.total_amount|floatformat:0 }}</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <!-- Shift to Room -->
  <div class="rpt-card">
    <div class="rpt-head">
      <div class="rpt-title">Shift-to-Room Detail</div>
      <small class="text-muted">Restaurant orders shifted to hotel room</small>
    </div>

    <div class="table-responsive">
      <table class="table table-sm table-bordered mb-0 rpt-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Order</th>
            <th>Table</th>
            <th>Booking</th>
            <th>Rooms</th>
            <th>Guest</th>
            <th class="money">Tax</th>
            <th class="money">Total Sale With Tax</th>
          </tr>
        </thead>

        <tbody>
          {% for r in shift_rows %}
            <tr>
              <td>{{ r.date|date:"Y-m-d" }}</td>
              <td>{{ r.time }}</td>

              <td>
                <span class="badge-soft badge-green">
                  #{{ r.order_no }}
                </span>
              </td>

              <td>
                {{ r.table_id|default:"-" }}
              </td>

              <td>
                B#{{ r.booking_tid }}
              </td>

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

              <td>
                {{ r.guest_name|default:"-" }}
              </td>

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

              <td class="money">
                Rs {{ r.amount|floatformat:0 }}
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="9" class="text-center text-muted py-3">
                No shift-to-room sale found.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}