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

<style>
    .report-card {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
        padding: 30px;
        margin-top: 20px;
        min-height: 80vh;
    }

    .report-title-container {
        text-align: center;
        margin-bottom: 30px;
    }

    .report-title {
        display: inline-block;
        border: 2px solid #2c3e50;
        padding: 10px 40px;
        font-weight: 800;
        text-transform: uppercase;
        color: #2c3e50;
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .bs-table {
        width: 100%;
        border-collapse: collapse;
        border: 2px solid #2c3e50;
    }

    .bs-table th,
    .bs-table td {
        border: 1px solid #bdc3c7;
        padding: 8px 12px;
        font-size: 13px;
        color: #2c3e50;
    }

    .bs-table .header-row th {
        background-color: #f8f9fa;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        border-bottom: 2px solid #2c3e50;
    }

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

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

    .bg-sub {
        background-color: #fdfdfd;
    }

    .indent-1 {
        padding-left: 25px !important;
    }

    .indent-2 {
        padding-left: 45px !important;
    }

    .total-row {
        background-color: #f8f9fa;
        font-weight: 800;
        border-top: 2px solid #2c3e50 !important;
    }

    @media print {

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

        .report-card {
            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 #2c3e50;
        padding-bottom: 15px;
    }

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

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

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

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

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

<div class="container-xxl flex-grow-1 container-p-y">
    <!-- Filter Bar -->
    <div class="card mb-4 no-print shadow-sm">
        <div class="card-body">
            <div class="row align-items-end g-3">
                <div class="col-md-3">
                    <label class="form-label fw-semibold">As of Date</label>
                    <input type="date" id="as_of_date" class="form-control" value="{% now 'Y-m-d' %}">
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary w-100 d-flex align-items-center justify-content-center"
                        onclick="fetchBalanceSheet()">
                        <i class="ti tabler-search me-1"></i> Search
                    </button>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-center"
                        onclick="window.print()">
                        <i class="ti tabler-printer me-1"></i> Print
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Balance Sheet Report -->
    <div class="report-card">
        <!-- 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="report-title-container">
            <div class="report-title">
                STATEMENT OF BALANCE SHEET OF {{ branch.name|upper|default:"BOYS MOBILES" }} <span id="display_date">{%now 'd.m.Y' %}</span>
            </div>
        </div>

        <table class="bs-table">
            <thead>
                <tr class="header-row">
                    <th style="width: 25%;">LIABILITIES</th>
                    <th style="width: 12.5%;">AMOUNT (₹)</th>
                    <th style="width: 12.5%;">AMOUNT (₹)</th>
                    <th style="width: 25%;">ASSETS</th>
                    <th style="width: 12.5%;">AMOUNT (₹)</th>
                    <th style="width: 12.5%;">AMOUNT (₹)</th>
                </tr>
            </thead>
            <tbody>
                <!-- Row 1: Share Capital vs Total Stock -->
                <tr>
                    <td class="fw-bold">SHARE CAPITAL</td>
                    <td></td>
                    <td class="text-right" id="li_share_capital">0.00</td>
                    <td class="fw-bold">TOTAL STOCK</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="indent-1">NORMAL</td>
                    <td class="text-right" id="as_stock_normal">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="fw-bold">PAYABLES:</td>
                    <td></td>
                    <td></td>
                    <td class="indent-1">DEMO</td>
                    <td class="text-right" id="as_stock_demo">0.00</td>
                    <td class="text-right fw-bold" id="as_stock_total">0.00</td>
                </tr>

                <!-- Payables details / Receivables -->
                <tr>
                    <td class="indent-1">SUPPLIERS</td>
                    <td class="text-right" id="li_pay_suppliers">0.00</td>
                    <td></td>
                    <td class="fw-bold">RECEIVABLES:</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="indent-1">WHOLESALE CUSTOMERS</td>
                    <td class="text-right" id="li_pay_wholesale">0.00</td>
                    <td></td>
                    <td class="indent-1">SUPPLIERS</td>
                    <td class="text-right" id="as_rec_suppliers">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="indent-1">RETAIL CUSTOMERS</td>
                    <td class="text-right" id="li_pay_retail">0.00</td>
                    <td></td>
                    <td class="indent-1">WHOLESALE CUSTOMER</td>
                    <td class="text-right" id="as_rec_wholesale">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="indent-1">FRANCHISE</td>
                    <td class="text-right" id="li_pay_franchise">0.00</td>
                    <td class="text-right fw-bold" id="li_pay_total">0.00</td>
                    <td class="indent-1">RETAIL CUSTOMERS</td>
                    <td class="text-right" id="as_rec_retail">0.00</td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="indent-1">FRANCHISE</td>
                    <td class="text-right" id="as_rec_franchise">0.00</td>
                    <td class="text-right fw-bold" id="as_rec_total">0.00</td>
                </tr>

                <!-- OD / Cash -->
                <tr>
                    <td class="fw-bold">BFL O/D</td>
                    <td></td>
                    <td class="text-right" id="li_bfl_od">0.00</td>
                    <td class="fw-bold">CASH</td>
                    <td></td>
                    <td class="text-right fw-bold" id="as_cash">0.00</td>
                </tr>

                <!-- Banks -->
                <tr>
                    <td colspan="3" rowspan="5" style="vertical-align: top;">
                        <div class="fw-bold mt-4">RETAINED EARNINGS</div>
                        <div class="text-right mt-2" id="li_retained_earnings" style="padding-right: 12px;">0.00</div>
                    </td>
                    <td class="fw-bold">TOTAL BANK</td>
                    <td></td>
                    <td></td>
                </tr>
            <tbody id="bank_rows_container">
                <!-- Dynamic bank rows here -->
                <tr>
                    <td class="indent-1">LISTING BANKS...</td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td class="indent-1">TOTAL BANK BAL</td>
                <td></td>
                <td class="text-right fw-bold" id="as_bank_total">0.00</td>
            </tr>

            <!-- Total Row -->
            <tr class="total-row">
                <td> TOTAL </td>
                <td></td>
                <td class="text-right" id="li_total_final">0.00</td>
                <td> TOTAL </td>
                <td></td>
                <td class="text-right" id="as_total_final">0.00</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

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

<script>
    $(document).ready(function () {
        fetchBalanceSheet();
    });

    function fetchBalanceSheet() {
        var as_of_date = $('#as_of_date').val();
        if (!as_of_date) return;

        // Update display date
        const d = new Date(as_of_date);
        const day = String(d.getDate()).padStart(2, '0');
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const year = d.getFullYear();
        $('#display_date').text(`${day}.${month}.${year}`);

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

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

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

        const a = data.assets;
        const l = data.liabilities;

        // Assets
        $('#as_stock_normal').text(fmt(a.stock.normal));
        $('#as_stock_demo').text(fmt(a.stock.demo));
        $('#as_stock_total').text(fmt(a.stock.total));

        $('#as_rec_suppliers').text(fmt(a.receivables.suppliers));
        $('#as_rec_wholesale').text(fmt(a.receivables.wholesale));
        $('#as_rec_retail').text(fmt(a.receivables.retail));
        $('#as_rec_franchise').text(fmt(a.receivables.franchise));
        $('#as_rec_total').text(fmt(a.receivables.total));

        $('#as_cash').text(fmt(a.cash));

        // Banks
        let bankHtml = "";
        if (a.banks && a.banks.length > 0) {
            a.banks.forEach(b => {
                bankHtml += `<tr>
                    <td class="indent-1">${b.name}</td>
                    <td class="text-right">${fmt(b.balance)}</td>
                    <td></td>
                </tr>`;
            });
        } else {
            bankHtml = '<tr><td class="indent-1">No Active Banks</td><td></td><td></td></tr>';
        }
        $('#bank_rows_container').html(bankHtml);
        $('#as_bank_total').text(fmt(a.total_bank));

        // Liabilities
        $('#li_share_capital').text(fmt(l.share_capital));
        $('#li_pay_suppliers').text(fmt(l.payables.suppliers));
        $('#li_pay_wholesale').text(fmt(l.payables.wholesale));
        $('#li_pay_retail').text(fmt(l.payables.retail));
        $('#li_pay_franchise').text(fmt(l.payables.franchise));
        $('#li_pay_total').text(fmt(l.payables.total));

        $('#li_bfl_od').text(fmt(l.bfl_od));
        $('#li_retained_earnings').text(fmt(l.retained_earnings));

        // Totals
        $('#as_total_final').text(fmt(a.total_assets));
        $('#li_total_final').text(fmt(l.total_liabilities));
    }
</script>