{% extends 'base.html' %}
{% block title %}Profit & Loss Report - Politory{% endblock %}

{% block content %}

<style>
    .pl-page {
        background: #f4f6f9;
        min-height: 85vh;
        padding: 16px 10px;
    }

    .pl-header {
        background: linear-gradient(135deg, #1e293b, #334155);
        color: #fff;
        padding: 18px 20px;
        border-radius: 12px;
        box-shadow: 0 5px 16px rgba(0,0,0,.10);
    }

    .pl-card {
        border: 0;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0,0,0,.06);
        overflow: hidden;
    }

    .form-label {
        font-size: .78rem;
        font-weight: 700;
        color: #475569;
        margin-bottom: 4px;
    }

    .form-control {
        min-height: 38px;
        font-size: .85rem;
    }

    /* Summary */
    .summary {
        color: #fff;
        padding: 14px 15px;
        border-radius: 10px;
        height: 100%;
        min-height: 76px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .summary small {
        display: block;
        opacity: .85;
        font-size: .7rem;
        font-weight: 700;
        margin-bottom: 3px;
    }

    .summary strong {
        display: block;
        font-size: 1.15rem;
        line-height: 1.25;
        word-break: break-word;
    }

    .s-sales {
        background: linear-gradient(135deg, #11998e, #38ef7d);
    }

    .s-cogs {
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .s-expense {
        background: linear-gradient(135deg, #ff9966, #ff5e62);
    }

    .s-profit {
        background: linear-gradient(135deg, #2193b0, #6dd5ed);
    }

    .s-loss {
        background: linear-gradient(135deg, #cb2d3e, #ef473a);
    }

    /* P&L Table */
    .pl-table {
        font-size: .88rem;
        min-width: 500px;
    }

    .pl-table th {
        background: #059669;
        color: #fff;
        padding: 10px 12px;
        white-space: nowrap;
    }

    .pl-table td {
        padding: 9px 12px;
        vertical-align: middle;
    }

    .pl-table th:last-child,
    .pl-table td:last-child {
        width: 35%;
    }

    .section-row td {
        background: #f1f5f9 !important;
        font-weight: 800;
    }

    .gross-row td {
        background: #ecfdf5 !important;
        color: #166534;
        font-weight: 800;
    }

    .net-profit td {
        background: #dcfce7 !important;
        color: #166534;
        font-weight: 900;
    }

    .net-loss td {
        background: #fee2e2 !important;
        color: #991b1b;
        font-weight: 900;
    }

    .amount-col {
        text-align: right;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Mortality */
    .mortality-table {
        font-size: .82rem;
        min-width: 800px;
    }

    .mortality-table th {
        background: #334155;
        color: #fff;
        white-space: nowrap;
        padding: 10px;
    }

    .mortality-table td {
        white-space: nowrap;
        vertical-align: middle;
        padding: 9px 10px;
    }

    .mortality-total td {
        background: #e2e8f0 !important;
        font-weight: 800;
        border-top: 2px solid #64748b;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Tablet */
    @media (max-width: 991px) {
        .pl-page {
            padding: 12px 6px;
        }

        .pl-header {
            padding: 15px;
        }

        .summary strong {
            font-size: 1rem;
        }
    }

    /* Mobile */
    @media (max-width: 767px) {
        .pl-page {
            padding: 8px 2px;
        }

        .pl-page .container-fluid {
            padding-left: 6px;
            padding-right: 6px;
        }

        .pl-header {
            padding: 14px;
            border-radius: 10px;
        }

        .pl-header h4 {
            font-size: 1.05rem;
        }

        .pl-header small {
            font-size: .72rem;
        }

        .btn-print {
            width: 100%;
            margin-top: 3px;
        }

        .pl-card {
            border-radius: 9px;
        }

        .pl-card .card-header {
            padding: 11px 12px !important;
        }

        .pl-card .card-header h6 {
            font-size: .9rem;
        }

        .form-label {
            font-size: .72rem;
        }

        .form-control,
        .btn {
            font-size: .8rem;
        }

        .summary {
            padding: 11px 12px;
            min-height: 70px;
        }

        .summary small {
            font-size: .62rem;
        }

        .summary strong {
            font-size: .9rem;
        }

        .pl-table {
            font-size: .76rem;
            min-width: 430px;
        }

        .pl-table th,
        .pl-table td {
            padding: 7px 8px;
        }

        .mortality-table {
            font-size: .72rem;
            min-width: 700px;
        }

        .mortality-table th,
        .mortality-table td {
            padding: 7px 8px;
        }
    }

    /* Very small phones */
    @media (max-width: 400px) {
        .summary {
            padding: 9px;
            min-height: 65px;
        }

        .summary strong {
            font-size: .82rem;
        }
    }
</style>


<div class="pl-page">
<div class="container-fluid">

    <!-- HEADER -->
    <div class="pl-header mb-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-1">
                <i class="bi bi-bar-chart-line-fill me-2"></i>Profit & Loss Report
            </h4>
            <small class="text-white-50">Financial Performance Report</small>
        </div>

        <a href="{% url 'profit_loss_report_print' %}?from_date={{ from_date }}&to_date={{ to_date }}"
           target="_blank"
           class="btn btn-warning fw-bold btn-print">
            <i class="bi bi-printer-fill me-1"></i>Print Report
        </a>
    </div>


    <!-- FILTER -->
    <div class="card pl-card mb-3">
        <div class="card-body p-3">
            <form method="GET">
                <div class="row g-2 align-items-end">

                    <div class="col-6 col-md-3">
                        <label class="form-label">From Date</label>
                        <input type="date" name="from_date" value="{{ from_date }}" class="form-control">
                    </div>

                    <div class="col-6 col-md-3">
                        <label class="form-label">To Date</label>
                        <input type="date" name="to_date" value="{{ to_date }}" class="form-control">
                    </div>

                    <div class="col-6 col-md-2 d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-funnel-fill me-1"></i>Filter
                        </button>
                    </div>

                    <div class="col-6 col-md-2 d-grid">
                        <a href="{% url 'profit_loss_report' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                        </a>
                    </div>

                </div>
            </form>
        </div>
    </div>


    <!-- SUMMARY -->
    <div class="row g-2 mb-3">

        <div class="col-6 col-lg-3">
            <div class="summary s-sales">
                <small>TOTAL SALES</small>
                <strong>Rs. {{ total_sales|floatformat:2 }}</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary s-cogs">
                <small>COST OF GOODS SOLD</small>
                <strong>Rs. {{ total_cogs|floatformat:2 }}</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary s-expense">
                <small>TOTAL EXPENSES</small>
                <strong>Rs. {{ total_expenses|floatformat:2 }}</strong>
            </div>
        </div>

        <div class="col-6 col-lg-3">
            <div class="summary {% if net_profit >= 0 %}s-profit{% else %}s-loss{% endif %}">
                <small>NET PROFIT / LOSS</small>
                <strong>Rs. {{ net_profit|floatformat:2 }}</strong>
            </div>
        </div>

    </div>


    <!-- PROFIT & LOSS TABLE -->
    <div class="card pl-card mb-3">

        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0">
                <i class="bi bi-calculator me-1 text-success"></i>
                Profit & Loss Statement
            </h6>

            <span class="badge {% if net_profit >= 0 %}bg-success{% else %}bg-danger{% endif %}">
                {% if net_profit >= 0 %}Profit{% else %}Loss{% endif %}
            </span>
        </div>

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

            <div class="table-responsive">
                <table class="table table-bordered pl-table mb-0">

                    <thead>
                        <tr>
                            <th>Particulars</th>
                            <th class="text-end">Amount (Rs.)</th>
                        </tr>
                    </thead>

                    <tbody>

                        <tr>
                            <td>Total Sales (Dr)</td>
                            <td class="amount-col">{{ total_sales|floatformat:2 }}</td>
                        </tr>

                        <tr>
                            <td>Total Purchase (Cr)</td>
                            <td class="amount-col">{{ total_cogs|floatformat:2 }}</td>
                        </tr>

                        <tr class="gross-row">
                            <td>Gross Profit</td>
                            <td class="amount-col">{{ gross_profit|floatformat:2 }}</td>
                        </tr>

                        <tr class="section-row">
                            <td>Operating Expenses</td>
                            <td></td>
                        </tr>

                        {% for expense in expense_rows %}
                        <tr>
                            <td>{{ expense.name }}</td>
                            <td class="amount-col">{{ expense.amount|floatformat:2 }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td class="text-muted">No Expenses</td>
                            <td class="amount-col">0.00</td>
                        </tr>
                        {% endfor %}

                        <tr class="section-row">
                            <td>Total Operating Expenses</td>
                            <td class="amount-col">{{ total_expenses|floatformat:2 }}</td>
                        </tr>

                        <tr class="{% if net_profit >= 0 %}net-profit{% else %}net-loss{% endif %}">
                            <td>NET PROFIT / LOSS</td>
                            <td class="amount-col">{{ net_profit|floatformat:2 }}</td>
                        </tr>

                    </tbody>

                </table>
            </div>

        </div>
    </div>


    <!-- MORTALITY - ALWAYS BELOW P&L -->
    <div class="card pl-card mb-3">

        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">

            <h6 class="fw-bold mb-0">
                <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i>
                Mortality Report
            </h6>

            <div class="d-flex align-items-center gap-2">
                <span class="badge bg-secondary">
                    Weight: {{ total_mortality_weight|floatformat:2 }}
                </span>

                <span class="badge bg-danger">
                    {{ mortality|length }} Records
                </span>
            </div>

        </div>

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

            <div class="table-responsive">
                <table class="table table-hover table-bordered mortality-table mb-0">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Purchase #</th>
                            <th>Vehicle</th>
                            <th>Weight</th>
                            <th>Rate</th>
                            <th>Amount</th>
                        </tr>
                    </thead>

                    <tbody>

                        {% for row in mortality %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ row.entry_date|date:"d-m-Y" }}</td>
                            <td>
                                <span class="badge bg-light text-dark border">
                                    {{ row.purchase_no|default:"-" }}
                                </span>
                            </td>
                            <td>{{ row.vehicle_number|default:"-" }}</td>
                            <td>{{ row.weight|default:"0" }} kg</td>
                            <td>Rs. {{ row.rate|default:"0" }}</td>
                            <td class="fw-bold text-danger">
                                Rs. {{ row.amount|default:"0" }}
                            </td>
                        </tr>

                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="bi bi-inbox fs-3 d-block mb-2"></i>
                                No mortality records found for selected date range.
                            </td>
                        </tr>
                        {% endfor %}

                        <tr class="mortality-total">
                            <td colspan="4" class="text-end">TOTAL</td>
                            <td>{{ total_mortality_weight|floatformat:2 }} kg</td>
                            <td></td>
                            <td class="text-danger">
                                Rs. {{ total_mortality_amount|floatformat:2 }}
                            </td>
                        </tr>

                    </tbody>

                </table>
            </div>

        </div>
    </div>

</div>
</div>

{% endblock %}