<div class="item-ledger-container">
    <div class="card no-print">
        <div class="card-header">
            <h3 class="card-title">اجناس کا کھاتہ (Commodity Trading Ledger)</h3>
        </div>
        <div class="card-body">
            <div class="form-grid-4">
                <div class="form-group">
                    <label class="form-label">جنس (Item) منتخب کریں</label>
                    <select id="ilItemSelect" class="form-control select2"></select>
                </div>
                <div class="form-group">
                    <label class="form-label">تاریخ سے</label>
                    <input type="date" id="ilDateFrom" class="form-control" value="2026-01-01">
                </div>
                <div class="form-group">
                    <label class="form-label">تاریخ تک</label>
                    <input type="date" id="ilDateTo" class="form-control" value="2026-12-31">
                </div>
                <div class="form-group" style="align-self: end;">
                    <button type="button" class="btn btn-primary w-100" id="btnShowItemLedger">
                        <i class="fas fa-search"></i> کھاتہ دکھائیں
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary KPI Cards -->
    <style>
        .il-summary-container {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: var(--radius-md);
            padding: 20px;
            margin-bottom: 25px;
        }
        .il-summary-list {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 20px;
        }
        .il-summary-item {
            text-align: right;
            width: 100%;
        }
        .il-summary-label {
            font-size: 1.05em;
            color: var(--text-muted);
            margin-bottom: 5px;
            display: block;
            font-weight: 600;
        }
        .il-summary-value {
            font-size: 2em;
            font-weight: 700;
            line-height: 1;
        }
        .il-financial-pouch {
            background-color: var(--primary);
            color: #fff;
            padding: 15px 25px;
            border-radius: var(--radius-sm);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        .il-financial-pouch .il-summary-value {
            font-size: 2.2em;
        }
        .il-financial-pouch .il-summary-label {
            color: rgba(255,255,255,0.85);
            margin: 0;
            font-size: 1.2em;
        }
    </style>

    <div class="il-summary-container no-print" id="ilSummaryCards" style="display: none;">
        <div class="il-summary-list">
            <div class="il-summary-item">
                <span class="il-summary-label">سابقہ بقیہ وزن (Opening)</span>
                <div class="il-summary-value text-info" id="ilKpiOpening">KG 0.00</div>
            </div>
            <div class="il-summary-item">
                <span class="il-summary-label">کل نام (Total Dr)</span>
                <div class="il-summary-value text-danger" id="ilKpiTotalDr">0.00</div>
            </div>
            <div class="il-summary-item">
                <span class="il-summary-label">کل جمع (Total Cr)</span>
                <div class="il-summary-value text-success" id="ilKpiTotalCr">0.00</div>
            </div>
            <div class="il-financial-pouch">
                <span class="il-summary-label">مالی پوزیشن (Financial Balance)</span>
                <div class="il-summary-value" id="ilKpiFinancial">0.00</div>
            </div>
        </div>
    </div>

    <!-- Ledger Report Area -->
    <div class="card print-ledger">
        <div class="card-header d-flex justify-between">
            <h3 class="card-title" id="ilLedgerTitle">مکمل کھاتہ تفصیل</h3>
            <button type="button" class="btn btn-outline btn-sm no-print" onclick="window.print()" id="btnPrintLedger" style="display: none;">
                <i class="fas fa-print"></i> رپورٹ پرنٹ کریں
            </button>
        </div>
        <div class="card-body p-0">
            <!-- Branding for print -->
            <div class="print-branding print-only text-center mb-4">
                <h1>بابا نوید ٹریڈرز اینڈ کمیشن ایجنٹ</h1>
                <p>غلہ منڈی، اوکاڑہ | فون: 0300-1234567</p>
                <h2 style="margin-top: 10px; border-top: 1px solid #000; padding-top: 5px;">اجناس کا کھاتہ (Commodity Trading Ledger)</h2>
                <h3 id="printItemName" style="margin: 5px 0;"></h3>
                <p id="printDateRange"></p>
            </div>

            <div class="table-responsive">
                <table class="table m-0" id="ilTable">
                    <thead>
                        <tr>
                            <th>تاریخ</th>
                            <th>تفصیل / حوالہ</th>
                            <th>وزن (KG)</th>
                            <th>نام (Dr)</th>
                            <th>جمع (Cr)</th>
                            <th>باقیہ (Balance)</th>
                        </tr>
                    </thead>
                    <tbody id="ilTableBody">
                        <tr><td colspan="6" class="text-center">براہ کرم کوئی جنس منتخب کر کے کھاتہ دکھائیں پر کلک کریں۔</td></tr>
                    </tbody>
                    <tfoot id="ilTableFoot" style="display: none;">
                        <tr style="background: var(--card-bg-alt); font-weight: 800;">
                            <td colspan="2" class="text-right">ٹوٹل:</td>
                            <td><span id="ilTotalStock">0.00</span> <small>KG</small></td>
                            <td class="text-success"><span id="ilTotalDr">0.00</span></td>
                            <td class="text-danger"><span id="ilTotalCr">0.00</span></td>
                            <td class="fw-bold"><span id="ilFinalBalance">0.00</span></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Signature for print -->
            <div class="print-footer print-only" style="margin-top: 40px; display: flex; justify-content: space-between;">
                <div class="signature-line" style="border-top: 1px solid #000; width: 200px; text-align: center; padding-top: 5px;">مینیجر کے دستخط</div>
                <div class="signature-line" style="border-top: 1px solid #000; width: 200px; text-align: center; padding-top: 5px;">منشی / کیشیئر</div>
            </div>
        </div>
    </div>
</div>
