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

{% block stylesheets %}
{{ block.super }}
<style>
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        padding: 20px;
        border-radius: 12px;
        text-align: center;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .stat-card.red { background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }
    .stat-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .stat-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .stat-card.dark { background: linear-gradient(135deg, #434343 0%, #000000 100%); }
    .stat-card h3 { margin: 0; font-size: 28px; font-weight: bold; }
    .stat-card small { opacity: 0.9; font-size: 12px; }
    .stat-card .count { font-size: 11px; opacity: 0.8; margin-top: 5px; }
    
    .section-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        margin-bottom: 20px;
        overflow: hidden;
    }
    .section-header {
        background: #f8f9fa;
        padding: 12px 20px;
        border-bottom: 1px solid #e9ecef;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .section-header .badge {
        font-size: 14px;
    }
    .section-body {
        padding: 0;
    }
    .section-body table {
        margin: 0;
    }
    
    .transfer-section {
        display: flex;
        gap: 20px;
    }
    .transfer-box {
        flex: 1;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .transfer-box.sent .section-header {
        background: #fff3cd;
        color: #856404;
    }
    .transfer-box.received .section-header {
        background: #d4edda;
        color: #155724;
    }
    
    .bank-card {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #fff;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 15px;
    }
    .bank-card h5 { margin: 0 0 15px 0; opacity: 0.9; }
    .bank-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .bank-row:last-child { border: none; }
    .bank-row .label { opacity: 0.7; }
    .bank-row .value { font-weight: 600; }
    
    .filter-bar {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 15px 20px;
        margin-bottom: 20px;
    }
    
    .table th { 
        background: #343a40; 
        color: #fff; 
        font-size: 12px; 
        font-weight: 600;
    }
    .table td { 
        font-size: 13px; 
        vertical-align: middle; 
    }
    .text-money { 
        font-family: 'Courier New', monospace; 
        font-weight: 600; 
    }
    
    @media (max-width: 768px) {
        .transfer-section {
            flex-direction: column;
        }
        .stat-card h3 {
            font-size: 22px;
        }
    }
</style>
{% endblock %}

{% block heading %}
<i class="fas fa-cash-register text-primary"></i> 
Sub-Tenant Day Closing
<small class="text-muted ml-2">{{ sub_tenant.name }}</small>
{% endblock %}

{% block content %}

<!-- Sub-Tenant Info Banner -->
<div class="alert alert-info mb-3">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <i class="fas fa-store"></i>
            <strong>{{ sub_tenant.name }}</strong>
            {% if warehouse_name %}
                <span class="badge badge-primary ml-2">{{ warehouse_name }}</span>
            {% endif %}
        </div>
        <div>
            <span class="text-muted">{{ start_date|date:"d M Y" }}{% if start_date != end_date %} — {{ end_date|date:"d M Y" }}{% endif %}</span>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar">
    <form method="get" class="form-row align-items-end">
        <div class="form-group col-md-3 mb-2">
            <label class="small mb-1"><strong>Start Date</strong></label>
            <input type="date" name="start_date" class="form-control form-control-sm" 
                   value="{{ start_date|date:'Y-m-d' }}">
        </div>
        <div class="form-group col-md-3 mb-2">
            <label class="small mb-1"><strong>End Date</strong></label>
            <input type="date" name="end_date" class="form-control form-control-sm" 
                   value="{{ end_date|date:'Y-m-d' }}">
        </div>
        <div class="form-group col-md-3 mb-2">
            <button type="submit" class="btn btn-primary btn-sm btn-block">
                <i class="fas fa-search"></i> Apply
            </button>
        </div>
        <div class="form-group col-md-3 mb-2">
            <div class="btn-group btn-group-sm btn-block">
                <a href="{% url 'reports:sub_tenant_closing_export_excel' %}?{{ query_string }}" 
                   class="btn btn-success">
                    <i class="fas fa-file-excel"></i> Excel
                </a>
                <a href="{% url 'reports:sub_tenant_closing_export_pdf' %}?{{ query_string }}" 
                   class="btn btn-danger" target="_blank">
                    <i class="fas fa-file-pdf"></i> PDF
                </a>
            </div>
        </div>
    </form>
</div>

<!-- Summary Cards -->
<div class="row">
    <div class="col-6 col-md-2">
        <div class="stat-card green">
            <h3>{{ summary.total_sales|floatformat:0 }}</h3>
            <small>Total Sales</small>
            <div class="count">{{ summary.cash_sales_count }} cash + {{ summary.credit_sales_count }} credit</div>
        </div>
    </div>
    <div class="col-6 col-md-2">
        <div class="stat-card red">
            <h3>{{ summary.total_returns|floatformat:0 }}</h3>
            <small>Returns</small>
            <div class="count">{{ summary.returns_count }} items</div>
        </div>
    </div>
    <div class="col-6 col-md-2">
        <div class="stat-card blue">
            <h3>{{ summary.total_credits_received|floatformat:0 }}</h3>
            <small>Credits Recv</small>
        </div>
    </div>
    <div class="col-6 col-md-2">
        <div class="stat-card orange">
            <h3>{{ summary.total_expenses|floatformat:0 }}</h3>
            <small>Expenses</small>
            <div class="count">{{ summary.expenses_count }} entries</div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="stat-card dark">
            <h3>{{ summary.net_cash_flow|floatformat:0 }}</h3>
            <small>Net Cash Flow</small>
            <div class="count">Sales + Credits - Returns - Expenses</div>
        </div>
    </div>
</div>

<!-- Transaction Sections (2 columns on desktop) -->
<div class="row">
    <!-- Left Column -->
    <div class="col-md-6">
        <!-- Cash Sales -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-money-bill-wave text-success"></i> Cash Sales</span>
                <span class="badge badge-success">{{ cash_sales.total_received|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in cash_sales.items %}
                        <tr>
                            <td>{{ item.invoice }}</td>
                            <td class="text-right text-money">{{ item.received|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="2" class="text-center text-muted py-3">No cash sales</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Credit Sales -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-credit-card text-primary"></i> Credit Sales</span>
                <span class="badge badge-primary">{{ credit_sales.total_billed|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Party</th>
                            <th class="text-right">Billed</th>
                            <th class="text-right">Pending</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in credit_sales.items %}
                        <tr>
                            <td>{{ item.invoice }}</td>
                            <td>{{ item.party|truncatechars:15 }}</td>
                            <td class="text-right text-money">{{ item.billed|floatformat:2 }}</td>
                            <td class="text-right text-danger">{{ item.pending|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="4" class="text-center text-muted py-3">No credit sales</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Customer Credits -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-hand-holding-usd text-info"></i> Customer Credits Received</span>
                <span class="badge badge-info">{{ customer_credits.total_received|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Party</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in customer_credits.items %}
                        <tr>
                            <td>{{ item.party }}</td>
                            <td class="text-right text-money text-success">{{ item.received|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="2" class="text-center text-muted py-3">No credits received</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right Column -->
    <div class="col-md-6">
        <!-- Cash Returns -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-undo text-warning"></i> Cash Returns</span>
                <span class="badge badge-warning">{{ cash_returns.total_received|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in cash_returns.items %}
                        <tr>
                            <td>{{ item.invoice }}</td>
                            <td class="text-right text-money text-danger">{{ item.received|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="2" class="text-center text-muted py-3">No cash returns</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Credit Returns -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-exchange-alt text-secondary"></i> Credit Returns</span>
                <span class="badge badge-secondary">{{ credit_returns.total_received|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Invoice</th>
                            <th>Party</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in credit_returns.items %}
                        <tr>
                            <td>{{ item.invoice }}</td>
                            <td>{{ item.party|truncatechars:15 }}</td>
                            <td class="text-right text-money text-danger">{{ item.received|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center text-muted py-3">No credit returns</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Expenses -->
        <div class="section-card">
            <div class="section-header">
                <span><i class="fas fa-receipt text-danger"></i> Expenses</span>
                <span class="badge badge-danger">{{ expenses.total_received|floatformat:2 }}</span>
            </div>
            <div class="section-body">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th class="text-right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in expenses.items %}
                        <tr>
                            <td>{{ item.invoice }}</td>
                            <td class="text-right text-money text-danger">{{ item.received|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="2" class="text-center text-muted py-3">No expenses</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Bank Balances -->
{% if bank_data %}
<h5 class="mt-4 mb-3"><i class="fas fa-university"></i> Bank Balances</h5>
<div class="row">
    {% for bank in bank_data %}
    <div class="col-md-4">
        <div class="bank-card">
            <h5><i class="fas fa-piggy-bank"></i> {{ bank.name }}</h5>
            <div class="bank-row">
                <span class="label">Opening Balance</span>
                <span class="value">{{ bank.opening|floatformat:2 }}</span>
            </div>
            <div class="bank-row">
                <span class="label">Today's Transactions</span>
                <span class="value {% if bank.transactions >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ bank.transactions|floatformat:2 }}
                </span>
            </div>
            <div class="bank-row">
                <span class="label">Closing Balance</span>
                <span class="value" style="font-size:18px;">{{ bank.closing|floatformat:2 }}</span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Stock Transfers -->
{% if transfers.show %}
<h5 class="mt-4 mb-3"><i class="fas fa-exchange-alt"></i> Stock Transfers</h5>
<div class="transfer-section">
    <!-- Sent -->
    <div class="transfer-box sent">
        <div class="section-header">
            <span><i class="fas fa-arrow-right"></i> Stock Sent to Others</span>
            <span class="badge badge-warning">{{ transfers.sent_total_qty|floatformat:0 }} units</span>
        </div>
        <div class="section-body">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>To</th>
                        <th class="text-right">Qty</th>
                        <th class="text-right">Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in transfers.sent %}
                    <tr>
                        <td>{{ t.product|truncatechars:20 }}</td>
                        <td><span class="badge badge-light">{{ t.to_warehouse }}</span></td>
                        <td class="text-right">{{ t.qty|floatformat:0 }}</td>
                        <td class="text-right text-money">{{ t.value|floatformat:2 }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="text-center text-muted py-3">No stock sent</td></tr>
                    {% endfor %}
                </tbody>
                {% if transfers.sent %}
                <tfoot class="table-warning">
                    <tr>
                        <th colspan="2">Total Sent</th>
                        <th class="text-right">{{ transfers.sent_total_qty|floatformat:0 }}</th>
                        <th class="text-right">{{ transfers.sent_total_value|floatformat:2 }}</th>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>
    </div>

    <!-- Received -->
    <div class="transfer-box received">
        <div class="section-header">
            <span><i class="fas fa-arrow-left"></i> Stock Received from Others</span>
            <span class="badge badge-success">{{ transfers.received_total_qty|floatformat:0 }} units</span>
        </div>
        <div class="section-body">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>From</th>
                        <th class="text-right">Qty</th>
                        <th class="text-right">Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in transfers.received %}
                    <tr>
                        <td>{{ t.product|truncatechars:20 }}</td>
                        <td><span class="badge badge-light">{{ t.from_warehouse }}</span></td>
                        <td class="text-right">{{ t.qty|floatformat:0 }}</td>
                        <td class="text-right text-money">{{ t.value|floatformat:2 }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="text-center text-muted py-3">No stock received</td></tr>
                    {% endfor %}
                </tbody>
                {% if transfers.received %}
                <tfoot class="table-success">
                    <tr>
                        <th colspan="2">Total Received</th>
                        <th class="text-right">{{ transfers.received_total_qty|floatformat:0 }}</th>
                        <th class="text-right">{{ transfers.received_total_value|floatformat:2 }}</th>
                    </tr>
                </tfoot>
                {% endif %}
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Footer -->
<div class="text-center text-muted mt-4 mb-3">
    <small>
        <i class="fas fa-clock"></i> Report generated on {% now "d M Y, H:i" %}
        | Sub-Tenant: {{ sub_tenant.name }}
    </small>
</div>

{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
$(function(){
    // Auto-set today if dates are empty
    const today = new Date().toISOString().split('T')[0];
    $('input[name="start_date"]').val() || $('input[name="start_date"]').val(today);
    $('input[name="end_date"]').val() || $('input[name="end_date"]').val(today);
});
</script>
{% endblock %}