<div class="card-box mb-4">
    <div class="card-box-header">
        <h5><i class="fa-solid fa-chart-line" style="color:#16a34a;"></i> Sales Report</h5>
        <button onclick="window.print()" class="btn btn-sm no-print" style="background:#f1f5f9;color:#374151;">
            <i class="fa-solid fa-print me-1"></i> Print
        </button>
    </div>

    <!-- Date Filter -->
    <form method="GET" action="<?= site_url('reports/sales_report') ?>" class="no-print">
        <div class="row align-items-end mb-4">
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" name="from" class="form-control" value="<?= $from ?>">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" name="to" class="form-control" value="<?= $to ?>">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-search me-1"></i>Search</button>
            </div>
            <div class="col-md-2">
                <a href="<?= site_url('reports/sales_report') ?>" class="btn w-100" style="background:#f1f5f9;color:#374151;">Reset</a>
            </div>
        </div>
    </form>

    <!-- Summary Cards -->
    <div class="row mb-4 no-print">
        <div class="col-md-4">
            <div class="stat-card" style="border-left-color:#16a34a;">
                <div class="stat-icon" style="background:#f0fdf4;color:#16a34a;"><i class="fa-solid fa-indian-rupee-sign"></i></div>
                <div>
                    <div class="stat-label">Total Sales Amount</div>
                    <div class="stat-value" style="font-size:20px;">₹<?= (int)($total_amount) ?></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card" style="border-left-color:#2563eb;">
                <div class="stat-icon" style="background:#eff6ff;color:#2563eb;"><i class="fa-solid fa-file-invoice"></i></div>
                <div>
                    <div class="stat-label">Total Bills</div>
                    <div class="stat-value"><?= $total_bills ?></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-card" style="border-left-color:#dc2626;">
                <div class="stat-icon" style="background:#fef2f2;color:#dc2626;"><i class="fa-solid fa-tag"></i></div>
                <div>
                    <div class="stat-label">Total Discount Given</div>
                    <div class="stat-value" style="font-size:20px;">₹<?= (int)($total_discount) ?></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Table -->
    <div class="print-title" style="display:none;">Sales Report</div>
    <div class="table-responsive">
        <table class="table table-bordered table-hover dt-table mb-0" style="font-size:13px;" data-empty-text="No sales records found for the selected date range.">
            <thead>
                <tr>
                    <th width="40">#</th>
                    <th>Bill No</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Product</th>
                    <th class="text-end">Qty</th>
                    <th class="text-end">Rate</th>
                    <th class="text-end">Discount</th>
                    <th class="text-end">Net Amount</th>
                    <th>Payment</th>
                </tr>
            </thead>
            <tbody>
                <?php if(!empty($rows)): $i=1; foreach($rows as $row): ?>
                <tr>
                    <td><?= $i++ ?></td>
                    <td><code style="font-size:12px;"><?= htmlspecialchars($row->bill_no) ?></code></td>
                    <td><?= date('d M Y', strtotime($row->sale_date)) ?></td>
                    <td><?= htmlspecialchars($row->customer_name) ?></td>
                    <td><?= htmlspecialchars($row->product_name) ?></td>
                    <td class="text-end"><?= (int)($row->qty) ?></td>
                    <td class="text-end">₹<?= (int)($row->sale_rate) ?></td>
                    <td class="text-end">₹<?= (int)($row->discount) ?></td>
                    <td class="text-end fw-bold">₹<?= (int)($row->net_amount) ?></td>
                    <td><?= htmlspecialchars($row->payment_mode ?: '—') ?></td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
            <?php if(!empty($rows)): ?>
            <tfoot>
                <tr style="font-weight:700;border-top:2px solid #000;">
                    <td colspan="7" class="text-end">Total:</td>
                    <td class="text-end">₹<?= (int)($total_discount) ?></td>
                    <td class="text-end">₹<?= (int)($total_amount) ?></td>
                    <td></td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
    </div>
</div>