{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
    .report-container {
        background-color: white;
        padding: 40px;
        color: black;
        min-height: 100vh;
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    }

    .report-title {
        text-align: center;
        font-weight: 800;
        margin-bottom: 30px;
        text-transform: uppercase;
        border: 2px solid #333;
        display: inline-block;
        padding: 10px 40px;
    }

    .pl-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0;
        border: 2px solid #333;
    }

    .pl-table th,
    .pl-table td {
        border: 1px solid #333;
        padding: 6px 10px;
        font-size: 14px;
        vertical-align: top;
    }

    .pl-table th {
        background-color: #f2f2f2;
        font-weight: 700;
        text-align: center;
    }

    .col-particulars {
        width: 30%;
    }

    .col-amount {
        width: 10%;
        text-align: right;
    }

    .bg-light-grey {
        background-color: #f9f9f9;
    }

    .text-end {
        text-align: right;
    }

    .fw-bold {
        font-weight: bold;
    }

    .mt-40 {
        margin-top: 40px;
    }

    @media print {

        .no-print,
        #layout-navbar,
        .layout-menu,
        .content-footer,
        .buy-now,
        .drag-target,
        .layout-overlay {
            display: none !important;
        }

        .report-container {
            box-shadow: none;
            padding: 0;
            margin-top: 0;
            border: none;
        }

        body {
            background: #fff !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .container-xxl {
            padding: 0 !important;
            max-width: 100% !important;
        }

        .content-wrapper {
            padding: 0 !important;
            margin: 0 !important;
        }

        .layout-page {
            padding: 0 !important;
        }
    }

    /* Print Header Styles */
    .print-header {
        display: none;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        padding-bottom: 15px;
    }

    @media print {
        .print-header {
            display: block;
        }
    }

    .header-logo {
        width: 100px;
        height: auto;
    }

    .header-details h2 {
        margin: 0;
        color: #000;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 1.5rem;
    }

    .header-details h4 {
        margin: 5px 0;
        color: #333;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1.1rem;
    }

    .header-details p {
        margin: 2px 0;
        font-size: 0.9rem;
        color: #444;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Filter Card (No Print) -->
    <div class="card mb-4 no-print">
        <div class="card-body">
            <div class="row align-items-end">
                <div class="col-md-4">
                    <label class="form-label">Date Range</label>
                    <input type="text" id="date_filter" class="form-control" style="cursor: pointer;"
                        placeholder="Select Date Range" />
                    <input type="hidden" id="from_date" name="from_date">
                    <input type="hidden" id="to_date" name="to_date">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100" onclick="fetchPLReport()">
                        <i class="ti tabler-search me-1"></i> Search
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-secondary w-100" onclick="window.print()">
                        <i class="ti tabler-printer me-1"></i> Print
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Content -->
    <div class="report-container" id="report_content_wrapper">
        <!-- Print Header -->
        <div class="print-header">
            <div class="d-flex justify-content-between align-items-start">
                <div class="header-logo-container">
                    <img src="{{ image_url }}" alt="Logo" class="header-logo">
                </div>
                <div class="header-details text-end">
                    <h2>{{ company.name|default:"BOYS MOBILES" }}</h2>
                    <h4>{{ branch.name|default:"" }}</h4>
                    <p>{{ branch.address_line1|default:"" }}{% if branch.address_line2 %}, {{ branch.address_line2}}{%endif %}</p>
                    <p>{{ branch.city|default:"" }}, {{ branch.state|default:"" }} - {{ branch.pincode|default:"" }}</p>
                    <p><b>Mobile:</b> {{ branch.phone|default:"" }} | <b>Email:</b> {{ branch.email|default:"" }}</p>
                </div>
            </div>
        </div>

        <div class="text-center">
            <h4 class="report-title">TRADING AND PROFIT AND LOSS ACCOUNT OF {{ branch.name|upper|default:"BOYSMOBILES"}}</h4>
        </div>

        <!-- Trading Account -->
        <table class="pl-table">
            <thead>
                <tr>
                    <th class="col-particulars">PARTICULARS</th>
                    <th class="col-amount">AMOUNT (₹)</th>
                    <th class="col-amount">AMOUNT (₹)</th>
                    <th class="col-particulars">PARTICULARS</th>
                    <th class="col-amount">AMOUNT (₹)</th>
                    <th class="col-amount">AMOUNT (₹)</th>
                </tr>
            </thead>
            <tbody id="trading_body">
                <tr>
                    <td>OPENING STOCK</td>
                    <td></td>
                    <td id="t_opening_stock" class="text-end">0.00</td>
                    <td>SALES</td>
                    <td id="t_sales" class="text-end">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td>ADD: PURCHASES, TRANSFER</td>
                    <td id="t_pur_tran" class="text-end">0.00</td>
                    <td></td>
                    <td>ADD: STOCK OUTWARD</td>
                    <td id="t_stock_out" class="text-end">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td>LESS: PURCHASE RETURN</td>
                    <td id="t_pur_ret" class="text-end">0.00</td>
                    <td id="t_net_pur" class="text-end">0.00</td>
                    <td>LESS: SALES RETURN</td>
                    <td id="t_sales_ret" class="text-end">0.00</td>
                    <td id="t_net_sales" class="text-end">0.00</td>
                </tr>
                <tr>
                    <td>DISCOUNT FROM SUPPLIER</td>
                    <td></td>
                    <td id="t_discount" class="text-end">0.00</td>
                    <td>CLOSING STOCK</td>
                    <td></td>
                    <td id="t_closing_stock" class="text-end">0.00</td>
                </tr>
                <tr>
                    <td id="t_gp_dr_label">GROSS PROFIT</td>
                    <td></td>
                    <td id="t_gp_dr" class="text-end fw-bold">0.00</td>
                    <td id="t_gl_cr_label">GROSS LOSS</td>
                    <td></td>
                    <td id="t_gl_cr" class="text-end fw-bold">0.00</td>
                </tr>
                <tr class="fw-bold bg-light-grey">
                    <td></td>
                    <td></td>
                    <td id="t_total_dr" class="text-end">0.00</td>
                    <td></td>
                    <td></td>
                    <td id="t_total_cr" class="text-end">0.00</td>
                </tr>
            </tbody>
        </table>

        <!-- Profit & Loss Account -->
        <table class="pl-table border-top-0">
            <tbody id="pl_main_body">
                <tr>
                    <td class="col-particulars" id="pl_gl_dr_label">TO GROSS LOSS b/d</td>
                    <td class="col-amount"></td>
                    <td class="col-amount" id="pl_gl_dr">0.00</td>
                    <td class="col-particulars" id="pl_gp_cr_label">BY GROSS PROFIT</td>
                    <td class="col-amount"></td>
                    <td id="pl_gp_cr" class="col-amount text-end">0.00</td>
                </tr>
                <tr>
                    <td class="fw-bold">GENERAL EXPENSES</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <!-- Dynamic Rows inserted here -->
            </tbody>
            <tbody id="pl_expenses_rows"></tbody>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td id="pl_total_expenses" class="text-end fw-bold">0.00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="fw-bold">NET PROFIT</td>
                    <td></td>
                    <td id="pl_np_dr" class="text-end fw-bold">0.00</td>
                    <td>BY NET LOSS</td>
                    <td></td>
                    <td id="pl_nl_cr" class="text-end fw-bold">0.00</td>
                </tr>
                <tr class="fw-bold bg-light-grey">
                    <td></td>
                    <td></td>
                    <td id="pl_total_dr" class="text-end">0.00</td>
                    <td></td>
                    <td></td>
                    <td id="pl_total_cr" class="text-end">0.00</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}

<script>
    $(document).ready(function () {
        initializeDateRangePicker('this_month');
        // fetchPLReport(); // Uncomment if auto-load is desired
    });

    function fetchPLReport() {
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        if (!from_date || !to_date) {
            alert("Please select date range");
            return;
        }

        var btn = $('button[onclick="fetchPLReport()"]');
        var originalText = btn.html();
        btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm"></i> Loading...');

        $.ajax({
            url: "{% url 'profit_loss_view' %}",
            type: "POST",
            data: {
                'from_date': from_date,
                'to_date': to_date,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function (resp) {
                renderReport(resp);
                btn.prop('disabled', false).html(originalText);
            },
            error: function () {
                alert("Error fetching data");
                btn.prop('disabled', false).html(originalText);
            }
        });
    }

    function renderReport(data) {
        const fmt = (val) => {
            let num = parseFloat(val) || 0;
            return num.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        };

        const t = data.trading;
        const pl = data.pl;

        // TRADING SIDE
        $('#t_opening_stock').text(fmt(t.opening_stock));
        $('#t_pur_tran').text(fmt(t.purchases_transfer));
        $('#t_pur_ret').text(fmt(t.purchase_return));
        $('#t_net_pur').text(fmt(t.net_purchase_group));
        $('#t_discount').text(fmt(t.discount_from_supplier));

        // Gross Profit / Loss (Trading)
        if (t.gross_profit >= 0) {
            $('#t_gp_dr_label').text('GROSS PROFIT');
            $('#t_gp_dr').text(fmt(t.gross_profit));
            $('#t_gl_cr_label').text('');
            $('#t_gl_cr').text('');

            $('#pl_gp_cr_label').text('BY GROSS PROFIT');
            $('#pl_gp_cr').text(fmt(t.gross_profit));
            $('#pl_gl_dr_label').text('');
            $('#pl_gl_dr').text('');
        } else {
            let absGp = Math.abs(t.gross_profit);
            $('#t_gp_dr_label').text('');
            $('#t_gp_dr').text('');
            $('#t_gl_cr_label').text('GROSS LOSS');
            $('#t_gl_cr').text(fmt(absGp));

            $('#pl_gp_cr_label').text('');
            $('#pl_gp_cr').text('');
            $('#pl_gl_dr_label').text('TO GROSS LOSS b/d');
            $('#pl_gl_dr').text(fmt(absGp));
        }

        $('#t_sales').text(fmt(t.sales));
        $('#t_stock_out').text(fmt(t.stock_outward));
        $('#t_sales_ret').text(fmt(t.sales_return));
        $('#t_net_sales').text(fmt(t.net_sales_group));
        $('#t_closing_stock').text(fmt(t.closing_stock));

        $('#t_total_dr').text(fmt(t.total_trading_dr));
        $('#t_total_cr').text(fmt(t.total_trading_cr));

        // P&L SIDE
        let expHtml = "";
        pl.indirect_expenses.forEach(item => {
            expHtml += `<tr>
                <td style="padding-left: 30px;">${item.name}</td>
                <td class="text-end">${fmt(item.amount)}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>`;
        });

        // Fill empty rows to maintain structure if needed? 
        // For now just dynamic.
        $('#pl_expenses_rows').html(expHtml);
        $('#pl_total_expenses').text(fmt(pl.total_indirect_expenses));

        // Net Profit / Loss
        if (pl.net_profit >= 0) {
            $('#pl_np_dr').text(fmt(pl.net_profit));
            $('#pl_nl_cr').text('');
        } else {
            $('#pl_np_dr').text('');
            $('#pl_nl_cr').text(fmt(Math.abs(pl.net_profit)));
        }

        $('#pl_total_dr').text(fmt(pl.total_pl_dr));
        $('#pl_total_cr').text(fmt(pl.total_pl_cr));
    }
</script>