{% extends "core/base.html" %}
{% load humanize %}
{% block title %}P&L Report — SwiftPOS{% endblock %}
{% block topbar_title %}Profit & Loss{% endblock %}

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

  <!-- Header -->
  <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
    <div>
      <h4 class="fw-bold mb-1 d-flex align-items-center gap-2">
        <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
            <i class="fas fa-chart-pie"></i>
        </div>
        True P&amp;L Engine
      </h4>
      <div class="text-muted small ms-5">Analyze revenue, costs, and operating expenses to find True Net Profit</div>
    </div>
    <a href="{% url 'sales:export_pnl' %}?date_from={{ date_from }}&date_to={{ date_to }}"
       class="btn btn-outline-success rounded-pill fw-bold px-4 shadow-sm bg-white d-flex align-items-center gap-2">
      <i class="fas fa-file-excel"></i> Export CSV
    </a>
  </div>

  <!-- Date Range Filter -->
  <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;">
    <div class="card-body p-4">
      <form method="get" class="row g-3 align-items-end">
        <div class="col-md-4">
          <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size:0.7rem;">From Date</label>
          <input type="date" name="date_from" class="form-control" value="{{ date_from|date:'Y-m-d' }}">
        </div>
        <div class="col-md-4">
          <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size:0.7rem;">To Date</label>
          <input type="date" name="date_to" class="form-control" value="{{ date_to|date:'Y-m-d' }}">
        </div>
        <div class="col-md-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary flex-fill rounded-pill fw-medium shadow-sm">
            <i class="fas fa-sync-alt me-2"></i>Calculate
          </button>
          <a href="{% url 'sales:pnl_report' %}" class="btn btn-light rounded-pill px-4 fw-medium text-dark border">Today</a>
        </div>
      </form>
    </div>
  </div>

  <!-- Summary Cards: True Net Profit Flow -->
  <div class="row g-3 mb-4">
    <!-- Revenue -->
    <div class="col-12 col-lg-4">
      <div class="card border-0 h-100 shadow-sm" style="border-radius:16px; background: linear-gradient(135deg, #ffffff, #f8f9fa);">
        <div class="card-body p-4 text-center">
          <div class="small fw-bold text-muted text-uppercase mb-2" style="font-size:0.7rem;">Total Revenue</div>
          <div class="h5 fw-bold text-dark mb-0">{{ request.company.settings.currency_symbol|default:'₦' }}{{ total_revenue|floatformat:2|intcomma }}</div>
        </div>
      </div>
    </div>
    
    <!-- COGS -->
    <div class="col-12 col-lg-4">
      <div class="card border-0 h-100 shadow-sm" style="border-radius:16px; background: linear-gradient(135deg, #ffffff, #fff5f5);">
        <div class="card-body p-4 text-center">
          <div class="small fw-bold text-muted text-uppercase mb-2" style="font-size:0.7rem;">Cost of Goods</div>
          <div class="h5 fw-bold text-danger mb-0">- {{ request.company.settings.currency_symbol|default:'₦' }}{{ total_cost|floatformat:2|intcomma }}</div>
        </div>
      </div>
    </div>

    <!-- Gross Profit -->
    <div class="col-12 col-lg-4">
      <div class="card border-0 h-100 shadow-sm" style="border-radius:16px; background: linear-gradient(135deg, #ffffff, #f0f9ff);">
        <div class="card-body p-4 text-center">
          <div class="small fw-bold text-muted text-uppercase mb-2" style="font-size:0.7rem;">Gross Profit</div>
          <div class="h5 fw-bold text-primary mb-0">{{ request.company.settings.currency_symbol|default:'₦' }}{{ gross_profit|floatformat:2|intcomma }}</div>
        </div>
      </div>
    </div>

    <!-- Operating Expenses -->
    <div class="col-12 col-lg-6">
      <div class="card border-0 h-100 shadow-sm" style="border-radius:16px; background: linear-gradient(135deg, #ffffff, #fff3cd);">
        <div class="card-body p-4 text-center d-flex flex-column justify-content-center align-items-center">
          <div class="small fw-bold text-dark text-opacity-75 text-uppercase mb-2" style="font-size:0.7rem;">Operating Expenses</div>
          <div class="h4 fw-bold text-warning mb-0">- {{ request.company.settings.currency_symbol|default:'₦' }}{{ total_operating_expenses|floatformat:2|intcomma }}</div>
          <a href="{% url 'analytics:expense_list' %}" class="small text-decoration-none mt-2 fw-medium text-warning text-opacity-75">View Details <i class="fas fa-arrow-right ms-1"></i></a>
        </div>
      </div>
    </div>

    <!-- True Net Profit -->
    <div class="col-12 col-lg-6">
      <div class="card border-0 h-100 shadow-sm position-relative overflow-hidden" style="border-radius:16px; background: linear-gradient(135deg, #10b981, #059669);">
        <!-- Decorative bg -->
        <i class="fas fa-chart-line position-absolute" style="font-size: 5rem; right: 10px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.15); z-index: 0;"></i>
        <div class="card-body p-4 text-white d-flex flex-column justify-content-center position-relative z-1 pe-5">
          <div class="small fw-bold text-white text-opacity-75 text-uppercase mb-2" style="font-size:0.75rem;">True Net Profit</div>
          <div class="display-6 fw-bold mb-0" style="font-size: 2.2rem; word-break: break-word;">
            {{ request.company.settings.currency_symbol|default:'₦' }}{{ true_net_profit|floatformat:2|intcomma }}
          </div>
        </div>
      </div>
    </div>
  </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-white fw-bold pt-4 px-4 pb-0">
          <i class="fas fa-wallet me-2 text-primary"></i>Revenue Streams
        </div>
        <div class="card-body px-4 pt-3">
          {% for pm in payment_breakdown %}
          <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
              <div class="fw-bold text-dark">{{ pm.label }}</div>
              <small class="text-muted">{{ pm.count }} transactions</small>
            </div>
            <div class="text-end">
              <div class="fw-bold text-success">{{ request.company.settings.currency_symbol|default:'₦' }}{{ pm.revenue|floatformat:2|intcomma }}</div>
            </div>
          </div>
          {% if not forloop.last %}<hr class="border-light">{% endif %}
          {% empty %}
          <div class="text-center py-4">
            <div class="text-muted small">No transactions recorded.</div>
          </div>
          {% endfor %}
          
          <div class="mt-4 p-3 bg-danger bg-opacity-10 rounded-3 d-flex justify-content-between align-items-center border border-danger border-opacity-25">
            <div>
               <div class="small fw-bold text-danger text-uppercase" style="font-size:0.65rem;">Uncollected Revenue</div>
               <div class="text-danger small fw-medium">Credit Owed by Customers</div>
            </div>
            <div class="fw-bold text-danger fs-5">{{ request.company.settings.currency_symbol|default:'₦' }}{{ credit_outstanding|floatformat:2|intcomma }}</div>
          </div>
        </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-white fw-bold pt-4 px-4 pb-0">
          <i class="fas fa-calendar-day me-2 text-primary"></i>Daily Performance
        </div>
        <div class="card-body p-0 mt-3">
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th class="ps-4 small text-muted text-uppercase fw-bold" style="font-size:0.7rem;">Date</th>
                  <th class="small text-muted text-uppercase fw-bold text-center" style="font-size:0.7rem;">Total Orders</th>
                  <th class="pe-4 small text-muted text-uppercase fw-bold text-end" style="font-size:0.7rem;">Gross Revenue</th>
                </tr>
              </thead>
              <tbody>
                {% for row in daily_data %}
                <tr>
                  <td class="ps-4 fw-semibold text-dark">{{ row.day|date:"M j, Y" }}</td>
                  <td class="text-center"><span class="badge bg-light text-dark border px-3 rounded-pill">{{ row.cnt }}</span></td>
                  <td class="pe-4 fw-bold text-success text-end">{{ request.company.settings.currency_symbol|default:'₦' }}{{ row.rev|floatformat:2|intcomma }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="3" class="text-center py-5 text-muted small">No daily breakdown available for this period.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-4 text-center text-muted small fw-medium">
    <i class="fas fa-check-circle me-1 text-success"></i>
    Total finalized POS orders in period: <strong class="text-dark">{{ total_orders_count }}</strong>
  </div>

</div>
{% endblock %}