{% extends "core/base.html" %}
{% block title %}P&L Report — SwiftPOS{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-4">

  <!-- Header -->
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="h3 fw-bold mb-0" style="background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
        <i class="fas fa-chart-line me-2"></i>Profit &amp; Loss Report
      </h1>
      <p class="text-muted mb-0">Revenue, costs, profit, and outstanding credit for any period</p>
    </div>
    <a href="{% url 'sales:export_pnl' %}?date_from={{ date_from }}&date_to={{ date_to }}"
       class="btn btn-success fw-bold px-4" style="border-radius:12px;">
      <i class="fas fa-file-excel me-2"></i>Export Excel
    </a>
  </div>

  <!-- Date Range Filter -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;">
    <div class="card-body">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label small fw-semibold text-muted">From Date</label>
          <input type="date" name="date_from" class="form-control" value="{{ date_from }}">
        </div>
        <div class="col-md-4">
          <label class="form-label small fw-semibold text-muted">To Date</label>
          <input type="date" name="date_to" class="form-control" value="{{ date_to }}">
        </div>
        <div class="col-md-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary flex-fill" style="border-radius:12px;">
            <i class="fas fa-search me-1"></i>Generate Report
          </button>
          <a href="{% url 'sales:pnl_report' %}" class="btn btn-outline-secondary" style="border-radius:12px;">Today</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Summary Cards -->
  <div class="row g-3 mb-4">
    {% with cards=True %}
    <div class="col-6 col-md-3">
      <div class="card border-0 h-100 text-white" style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;">
        <div class="card-body p-3 text-center">
          <i class="fas fa-dollar-sign fa-2x mb-2 opacity-75"></i>
          <div class="h5 fw-bold mb-0">{{ total_revenue|floatformat:2 }}</div>
          <div class="small opacity-75">Total Revenue</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 h-100 text-white" style="background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:16px;">
        <div class="card-body p-3 text-center">
          <i class="fas fa-boxes fa-2x mb-2 opacity-75"></i>
          <div class="h5 fw-bold mb-0">{{ total_cost|floatformat:2 }}</div>
          <div class="small opacity-75">Total Cost</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 h-100 text-white" style="background:linear-gradient(135deg,#4facfe,#00f2fe);border-radius:16px;">
        <div class="card-body p-3 text-center">
          <i class="fas fa-chart-bar fa-2x mb-2 opacity-75"></i>
          <div class="h5 fw-bold mb-0">{{ total_profit|floatformat:2 }}</div>
          <div class="small opacity-75">Net Profit</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 h-100 text-white" style="background:linear-gradient(135deg,#fa709a,#fee140);border-radius:16px;">
        <div class="card-body p-3 text-center">
          <i class="fas fa-exclamation-circle fa-2x mb-2 opacity-75"></i>
          <div class="h5 fw-bold mb-0">{{ credit_outstanding|floatformat:2 }}</div>
          <div class="small opacity-75">Credit Owed</div>
        </div>
      </div>
    </div>
    {% endwith %}
  </div>

  <div class="row g-4">
    <!-- Payment Breakdown -->
    <div class="col-md-5">
      <div class="card border-0 shadow-sm h-100" style="border-radius:16px;">
        <div class="card-header border-0 bg-transparent fw-bold pt-4 px-4">
          <i class="fas fa-credit-card me-2 text-primary"></i>Payment Methods
        </div>
        <div class="card-body px-4">
          {% for pm in payment_breakdown %}
          <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
              <div class="fw-semibold">{{ pm.label }}</div>
              <small class="text-muted">{{ pm.count }} orders</small>
            </div>
            <div class="text-end">
              <div class="fw-bold">{{ pm.revenue|floatformat:2 }}</div>
            </div>
          </div>
          {% empty %}
          <p class="text-muted text-center py-3">No orders in this period.</p>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Daily Breakdown -->
    <div class="col-md-7">
      <div class="card border-0 shadow-sm h-100" style="border-radius:16px;">
        <div class="card-header border-0 bg-transparent fw-bold pt-4 px-4">
          <i class="fas fa-calendar-alt me-2 text-primary"></i>Daily Breakdown
        </div>
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th class="ps-4">Date</th>
                  <th>Orders</th>
                  <th class="pe-4">Revenue</th>
                </tr>
              </thead>
              <tbody>
                {% for row in daily_data %}
                <tr>
                  <td class="ps-4 fw-semibold">{{ row.day }}</td>
                  <td><span class="badge bg-primary rounded-pill">{{ row.cnt }}</span></td>
                  <td class="pe-4 fw-bold text-success">{{ row.rev|floatformat:2 }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="3" class="text-center py-4 text-muted">No data for selected period.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Orders Count footer -->
  <div class="mt-3 text-center text-muted small">
    <i class="fas fa-info-circle me-1"></i>
    Total completed orders in period: <strong>{{ total_orders_count }}</strong>
  </div>

</div>
{% endblock %}
