<div class="ledger-container">
    <!-- Filters Area -->
    <div class="card no-print">
        <div class="card-header">
            <h3 class="card-title">تمام بیلنس رپورٹ فلٹرز (Filters)</h3>
        </div>
        <div class="card-body">
            <div class="form-grid-2">
                <div class="form-group">
                    <label class="form-label">تلاش کریں (نام/شہر/فون)</label>
                    <input type="text" id="balanceSearch" class="form-control" placeholder="نام یا شہر سے تلاش کریں...">
                </div>
                <div class="form-group" style="align-self: end; max-width: 200px;">
                    <button type="button" class="btn btn-outline w-100" id="btnResetFilters">
                        <i class="fas fa-sync-alt"></i> صاف کریں
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Table Card -->
    <div class="card print-ledger">
        <div class="card-header d-flex justify-between">
            <h3 class="card-title" id="reportHeaderTitle">تمام اکاؤنٹس کی بیلنس شیٹ</h3>
            <div class="d-flex gap-2 no-print">
                <button type="button" class="btn btn-outline btn-sm" id="btnDownloadPDF">
                    <i class="fas fa-file-pdf"></i> پی ڈی ایف (PDF)
                </button>
                <button type="button" class="btn btn-outline btn-sm" onclick="window.print()">
                    <i class="fas fa-print"></i> پرنٹ کریں (A4)
                </button>
            </div>
        </div>
        
        <div class="card-body p-0">
            <!-- Branding for print -->
            <div class="print-branding print-only">
                <h1>بابا نوید ٹریڈرز اینڈ کمیشن ایجنٹ</h1>
                <p>غلہ منڈی، اوکاڑہ | فون: 0300-1234567</p>
                <h2 style="margin-top: 10px; border-top: 1px solid #000; padding-top: 5px;" id="printReportTitle">تمام اکاؤنٹس کی بقایا بیلنس رپورٹ</h2>
            </div>

            <div class="table-responsive">
                <table class="table m-0">
                    <thead>
                        <tr>
                            <th>نام کھاتہ</th>
                            <th>قسم کھاتہ</th>
                            <th>فون / شہر</th>
                            <th>بقایا بیلنس (Balance)</th>
                            <th class="no-print">تفصیل</th>
                        </tr>
                    </thead>
                    <tbody id="balancesTableBody">
                        <tr>
                            <td colspan="5" class="text-center">لوڈنگ ہو رہی ہے...</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr style="background: var(--card-bg-alt); font-weight: 800;">
                            <td colspan="3" class="text-right">مجموعی ٹوٹل:</td>
                            <td><span id="totalBalance">0.00</span></td>
                            <td class="no-print"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Signature for print -->
            <div class="print-footer print-only">
                <div class="signature-line">پارٹی کے دستخط</div>
                <div class="signature-line">منشی / کیشیئر</div>
            </div>
        </div>
    </div>
</div>

<style>
/* PDF Generation Styles */
.generating-pdf,
.generating-pdf * {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
}
.generating-pdf {
    background-color: #fff !important;
    color: #000 !important;
    padding: 20px !important;
    direction: rtl !important;
}
.generating-pdf .print-only {
    display: block !important;
}
.generating-pdf .no-print {
    display: none !important;
}
.generating-pdf .card {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.generating-pdf .table {
    border: 1px solid #000 !important;
    width: 100% !important;
}
.generating-pdf .table th, .generating-pdf .table td {
    border: 1px solid #000 !important;
    padding: 8px 10px !important;
    color: #000 !important;
    font-size: 10pt !important;
}
.generating-pdf .table th {
    background-color: #f1f1f1 !important;
}
</style>
