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

{% block title %}Hotel Profit & Loss{% endblock %}
{% block heading %}Hotel Profit & Loss{% endblock %}

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

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

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

  .pl-title{
    font-size:16px;
    font-weight:800;
    color:#0f172a;
  }

  .pl-body{
    padding:16px;
  }

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

  .pl-kpi .tax-plus{
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:800;
    opacity:.95;
  }

  .kpi-blue{background:linear-gradient(135deg,#1d4ed8,#2563eb);}
  .kpi-green{background:linear-gradient(135deg,#047857,#10b981);}
  .kpi-red{background:linear-gradient(135deg,#b91c1c,#ef4444);}
  .kpi-slate{background:linear-gradient(135deg,#334155,#64748b);}

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

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

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

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

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

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

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

  .profit-text{color:#047857;}
  .loss-text{color:#b91c1c;}

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

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

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

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

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

  <!-- Filter -->
  <div class="pl-card">
    <div class="pl-head">
      <div>
        <div class="pl-title">Profit & Loss Report</div>
        <small class="text-muted">Revenue, expenses, and net profit for selected period.</small>
      </div>
      <a
      href="{% url 'hotel:reports:hotel_profit_loss_pdf' %}?start={{ start|date:'Y-m-d' }}&end={{ end|date:'Y-m-d' }}"
      target="_blank"
      class="btn btn-danger btn-sm"
    >
      Print PDF
    </a>
    </div>

    <div class="pl-body">
      <form method="get" class="pl-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="pl-kpi kpi-blue">
        <small>Total Revenue</small>
       <div class="amount">
          Rs {{ total_revenue|floatformat:0 }}
          <span class="tax-plus">+ Tax Rs {{ total_tax|floatformat:0 }}</span>
        </div>
        <div class="sub">
          With Tax: Rs {{ total_revenue_with_tax|floatformat:0 }}
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <div class="pl-kpi kpi-red">
        <small>Total Expenses</small>
        <div class="amount">Rs {{ total_expenses|floatformat:0 }}</div>
        <div class="sub">Hotel expenses and payouts</div>
      </div>
    </div>

    <div class="col-md-3">
      {% if is_profit %}
        <div class="pl-kpi kpi-green">
          <small>Net Profit</small>
          <div class="amount">Rs {{ gross_profit|floatformat:0 }}</div>
          <div class="sub">Revenue - Expenses</div>
        </div>
      {% else %}
        <div class="pl-kpi kpi-red">
          <small>Net Loss</small>
          <div class="amount">Rs {{ gross_profit|floatformat:0 }}</div>
          <div class="sub">Revenue - Expenses</div>
        </div>
      {% endif %}
    </div>

    <div class="col-md-3">
      <div class="pl-kpi kpi-slate">
        <small>Profit Margin</small>
        <div class="amount">{{ profit_margin|floatformat:2 }}%</div>
        <div class="sub">Net Profit ÷ Revenue</div>
      </div>
    </div>
  </div>

  <div class="row mt-3">

  <div class="col-md-6">
    <div class="pl-kpi kpi-slate">
      <small>Cost of Sales</small>

      <div class="amount">
        Rs {{ total_cost_of_sales|floatformat:0 }}
      </div>

      <div class="sub">
        Historical purchase cost of POS items
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="pl-kpi kpi-green">
      <small>
        Gross Profit Before Operating Expenses
      </small>

      <div class="amount">
        Rs {{ gross_profit_before_expenses|floatformat:0 }}
      </div>

      <div class="sub">
        Revenue - Cost of Sales
      </div>
    </div>
  </div>

</div>

  <!-- Income Breakdown -->
  <div class="row mt-3">
    <div class="col-lg-7">
      <div class="pl-card">
        <div class="pl-head">
          <div class="pl-title">Income Breakdown</div>
          <span class="badge-soft">Revenue</span>
        </div>

        <div class="pl-body p-0">
          <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 pl-table">
              <thead class="thead-light">
                <tr>
                  <th >Income Head</th>
                  <th >Source</th>
                  <th class="text-right">Amount</th>
                  <th class="text-right">Tax</th>
                  <th class="text-right">With Tax</th>
                  <th style="width:160px;">Share</th>

                </tr>
              </thead>
              <tbody>
                {% for r in income_rows %}
                  <tr>
                    <td><b>{{ r.label }}</b></td>
                    <td><small class="text-muted">{{ r.note }}</small></td>
                    <td class="money">Rs {{ r.amount|floatformat:0 }}</td>
                    <td class="money">Rs {{ r.tax|floatformat:0 }}</td>
                    <td class="money">Rs {{ r.amount_with_tax|floatformat:0 }}</td>
                    <td>
                      <div class="d-flex justify-content-between mb-1">
                        <small>{{ r.percent|floatformat:2 }}%</small>
                      </div>
                      <div class="bar-bg">
                        <div class="bar-fill" style="width:{{ r.percent|floatformat:0 }}%;"></div>
                      </div>
                    </td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="6" class="text-center text-muted py-3">No income found.</td>
                  </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                <tr>
                  <th colspan="2">Total Revenue</th>
                  <th class="money">Rs {{ total_revenue|floatformat:0 }}</th>
                  <th class="money">Rs {{ total_tax|floatformat:0 }}</th>
                  <th class="money">Rs {{ total_revenue_with_tax|floatformat:0 }}</th>
                  <th>100%</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- Expense Breakdown -->
    <div class="col-lg-5">
      <div class="pl-card">
        <div class="pl-head">
          <div class="pl-title">Expense Breakdown</div>
          <span class="badge-soft">Expenses</span>
        </div>

        <div class="pl-body p-0">
          <div class="table-responsive">
            <table class="table table-sm table-bordered mb-0 pl-table">
              <thead class="thead-light">
                <tr>
                  <th>Expense Head</th>
                  <th class="text-right">Amount</th>
                  <th style="width:120px;">Share</th>
                </tr>
              </thead>
              <tbody>
                {% for r in expense_rows %}
                  <tr>
                    <td><b>{{ r.label }}</b></td>
                    <td class="money">Rs {{ r.amount|floatformat:0 }}</td>
                    <td>{{ r.percent|floatformat:2 }}%</td>
                  </tr>
                {% empty %}
                  <tr>
                    <td colspan="3" class="text-center text-muted py-3">No expenses found.</td>
                  </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                <tr>
                  <th>Total Expenses</th>
                  <th class="money">Rs {{ total_expenses|floatformat:0 }}</th>
                  <th>100%</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- POS Sales Profit Breakdown -->
<div class="pl-card">

  <div class="pl-head">
    <div class="pl-title">
      POS Sales Profit Breakdown
    </div>

    <span class="badge-soft">
      Customer + Counter Sales
    </span>
  </div>

  <div class="pl-body p-0">

    <div class="table-responsive">

      <table class="table table-sm table-bordered mb-0 pl-table">

        <thead class="thead-light">
          <tr>
            <th>Product</th>

            <th class="text-right">
              Qty
            </th>

            <th class="text-right">
              Bonus
            </th>

            <th class="text-right">
              Net Sales
            </th>

            <th class="text-right">
              Purchase Cost
            </th>

            <th class="text-right">
              Gross Profit
            </th>

            <th class="text-right">
              Margin
            </th>
          </tr>
        </thead>

        <tbody>
          {% for r in sale_item_rows %}
            <tr>
              <td>
                <b>{{ r.product_name }}</b>
              </td>

              <td class="money">
                {{ r.qty|floatformat:2 }}
              </td>

              <td class="money">
                {{ r.bonus|floatformat:2 }}
              </td>

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

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

              <td class="money {% if r.profit >= 0 %}profit-text{% else %}loss-text{% endif %}">
                Rs {{ r.profit|floatformat:2 }}
              </td>

              <td class="money">
                {{ r.margin|floatformat:2 }}%
              </td>
            </tr>

          {% empty %}
            <tr>
              <td
                colspan="7"
                class="text-center text-muted py-3"
              >
                No POS sales found.
              </td>
            </tr>
          {% endfor %}
        </tbody>

        <tfoot>
          <tr>
            <th colspan="3">
              Total POS Sales
            </th>

            <th class="money">
              Rs {{ normal_sale_revenue|floatformat:2 }}
            </th>

            <th class="money">
              Rs {{ normal_sale_cost|floatformat:2 }}
            </th>

            <th class="money">
              Rs {{ normal_sale_profit|floatformat:2 }}
            </th>

            <th class="money">
              {% if normal_sale_revenue %}
                {% widthratio normal_sale_profit normal_sale_revenue 100 %}%
              {% else %}
                0%
              {% endif %}
            </th>
          </tr>
        </tfoot>

      </table>

    </div>

  </div>

</div>

  <!-- Final P&L Summary -->
  <div class="pl-card">
    <div class="pl-head">
      <div class="pl-title">Final Profit / Loss Summary</div>
    </div>

    <div class="pl-body">
      <div class="table-responsive">
        <table class="table table-bordered mb-0">
          <tbody>
            <tr>
              <th>Total Revenue Without Tax</th>
              <td class="money">Rs {{ total_revenue|floatformat:0 }}</td>
            </tr>
            <tr>
              <th>Tax</th>
              <td class="money">Rs {{ total_tax|floatformat:0 }}</td>
            </tr>
            <tr>
              <th>Total Revenue With Tax</th>
              <td class="money">Rs {{ total_revenue_with_tax|floatformat:0 }}</td>
            </tr>
            <tr>
              <th>Cost of Sales</th>
              <td class="money">
                Rs {{ total_cost_of_sales|floatformat:0 }}
              </td>
            </tr>

            <tr>
              <th>Gross Profit Before Operating Expenses</th>
              <td class="money">
                Rs {{ gross_profit_before_expenses|floatformat:0 }}
              </td>
            </tr>
            <tr>
              <th>Total Expenses</th>
              <td class="money">Rs {{ total_expenses|floatformat:0 }}</td>
            </tr>
            <tr>
              <th>
                {% if is_profit %}
                  Net Profit
                {% else %}
                  Net Loss
                {% endif %}
              </th>
              <td class="money {% if is_profit %}profit-text{% else %}loss-text{% endif %}">
                Rs {{ gross_profit|floatformat:0 }}
              </td>
            </tr>
            <tr>
              <th>Profit Margin</th>
              <td class="money">{{ profit_margin|floatformat:2 }}%</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Daily Trend -->
  <div class="pl-card">
    <div class="pl-head">
      <div class="pl-title">Daily Trend</div>
      <small class="text-muted">Revenue vs Expense by date</small>
    </div>

    <div class="pl-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0 pl-table">
          <thead class="thead-light">
            <tr>
              <th>Date</th>
              <th class="text-right">Revenue</th>
              <th class="text-right">Cost of Sales</th>
              <th class="text-right">Operating Expenses</th>
              <th class="text-right">Profit / Loss</th>
            </tr>
          </thead>
          <tbody>
            {% for r in daily_rows %}
              <tr>
                <td>{{ r.date|date:"Y-m-d" }}</td>

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

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

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

                <td class="money {% if r.profit >= 0 %}profit-text{% else %}loss-text{% endif %}">
                  Rs {{ r.profit|floatformat:0 }}
                </td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="text-center text-muted py-3">No daily data found.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Expense Details -->
  <div class="pl-card">
    <div class="pl-head">
      <div class="pl-title">Expense Details</div>
      <small class="text-muted">Latest 200 expense rows</small>
    </div>

    <div class="pl-body p-0">
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0 pl-table">
          <thead class="thead-light">
            <tr>
              <th>Date</th>
              <th>Title</th>
              <th>Category</th>
              <th>Bank</th>
              <th class="text-right">Amount</th>
            </tr>
          </thead>
          <tbody>
            {% for r in expense_rows_detail %}
              <tr>
                <td>{{ r.date|date:"Y-m-d" }}</td>
                <td>{{ r.title }}</td>
                <td>{{ r.category }}</td>
                <td>{{ r.bank_id }}</td>
                <td class="money">Rs {{ r.amount|floatformat:0 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="5" class="text-center text-muted py-3">No expense detail found.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}