<div class="space-y-6">
    <div id="printReport">
        <div class="show_print hidden">
            <div style="width:100%;text-align:center;padding:8px 0;border-bottom:1px solid #ddd;">
                <img style="width:60px;height:60px;object-fit:contain;" src="<?= base_url() . config_item('company_logo') ?>" alt="" />
                <div style="font-size:16px;margin-top:6px;font-weight:600;"><?= config_item('company_name') ?></div>
            </div>
            <br />
        </div>

        <?php
        $currency_symbol = default_currency();
        $transfer_summary = $this->db
            ->select('COUNT(*) AS transfer_count, COALESCE(SUM(amount), 0) AS transfer_total, COUNT(DISTINCT from_account_id) AS from_accounts_count, COUNT(DISTINCT to_account_id) AS to_accounts_count', false)
            ->get('tbl_transfer')
            ->row();
        $transfer_total = !empty($transfer_summary->transfer_total) ? (float) $transfer_summary->transfer_total : 0;
        $transfer_count = !empty($transfer_summary->transfer_count) ? (int) $transfer_summary->transfer_count : 0;
        $average_transfer = $transfer_count > 0 ? $transfer_total / $transfer_count : 0;
        $from_accounts_count = !empty($transfer_summary->from_accounts_count) ? (int) $transfer_summary->from_accounts_count : 0;
        $to_accounts_count = !empty($transfer_summary->to_accounts_count) ? (int) $transfer_summary->to_accounts_count : 0;
        ?>

        <section class="erp-panel">
            

            <div class="px-4 py-4">
                <div class="flex flex-col gap-4 md:flex-row md:items-stretch md:gap-6">
                    <div class="flex-1 grid gap-4 grid-cols-1 sm:grid-cols-3">
                        <div class="rounded-xl border border-border bg-background p-4 text-foreground shadow-sm">
                            <div class="text-xs text-muted-foreground">Total Transferred</div>
                            <div class="mt-2 text-lg font-semibold"><?= display_money($transfer_total, $currency_symbol) ?></div>
                        </div>
                        <div class="rounded-xl border border-border bg-background p-4 text-foreground shadow-sm">
                            <div class="text-xs text-muted-foreground">Entries</div>
                            <div class="mt-2 text-lg font-semibold"><?= $transfer_count ?></div>
                        </div>
                        <div class="rounded-xl border border-border bg-background p-4 text-foreground shadow-sm">
                            <div class="text-xs text-muted-foreground">Average</div>
                            <div class="mt-2 text-lg font-semibold"><?= display_money($average_transfer, $currency_symbol) ?></div>
                        </div>
                    </div>

                    <div class="w-full rounded-xl border border-border bg-background p-4 text-foreground shadow-sm md:w-64">
                        <div class="text-xs text-muted-foreground">Accounts</div>
                        <div class="mt-2 text-lg font-semibold"><?= $this->db->count_all('tbl_accounts') ?></div>
                        <div class="mt-3 text-xs text-muted-foreground">From: <?= $from_accounts_count ?> · To: <?= $to_accounts_count ?></div>
                    </div>
                </div>
            </div>

            <div class="erp-table-wrap erp-table-wrap--standard px-6 pb-6">
                <div class="overflow-x-auto">
                    <table class="erp-table table DataTables w-full min-w-[920px] text-sm" id="DataTables" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th style="width: 14%"><?= lang('date') ?></th>
                                <th style="width: 26%"><?= lang('from_account') ?></th>
                                <th style="width: 26%"><?= lang('to_account') ?></th>
                                <th style="width: 18%"><?= lang('type') ?></th>
                                <th class="text-right"><?= lang('amount') ?></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</div>

<div id="transfer-report-preloader" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/30">
    <div class="rounded-lg border border-border bg-card px-6 py-4 text-foreground shadow">
        <div class="flex items-center gap-3">
            <div class="h-5 w-5 animate-spin rounded-full border-2 border-muted border-t-foreground"></div>
            <div>
                <div class="text-sm font-semibold">Loading transfer report...</div>
                <div class="text-xs text-muted-foreground">Please wait</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        list = base_url + "admin/transactions/transfer_reportList";
        var preloader = document.getElementById('transfer-report-preloader');

        function showTransferPreloader() {
            if (!preloader) return;
            preloader.classList.remove('hidden');
            preloader.classList.add('flex');
        }

        function hideTransferPreloader() {
            if (!preloader) return;
            preloader.classList.add('hidden');
            preloader.classList.remove('flex');
        }

        $('#DataTables').on('preXhr.dt', function () {
            showTransferPreloader();
        }).on('draw.dt xhr.dt', function () {
            hideTransferPreloader();
        });

        function reloadTransferReport(filterBy, searchType) {
            var url = list;
            if (filterBy) {
                url += "/" + filterBy;
                if (searchType) {
                    url += "/" + searchType;
                }
            }
            showTransferPreloader();
            table_url(url);
        }

        window.transferReportFromAccountFilter = function(id) {
            reloadTransferReport(id, 'from_account');
        };

        window.transferReportToAccountFilter = function(id) {
            reloadTransferReport(id, 'to_account');
        };

        $(document).on('click', '[data-transfer-report-filter-action]', function() {
            var filterBy = $(this).data('transfer-report-filter') || '';
            var searchType = $(this).data('transfer-report-search') || '';
            reloadTransferReport(filterBy, searchType);
        });
    });

    window.transferReportPrintHtml = <?= json_encode(isset($transfer_report_print_html) ? $transfer_report_print_html : '', JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
    function print_sales_report(printReport) {
        var fallback = document.getElementById(printReport);
        var printHtml = window.transferReportPrintHtml || (fallback ? fallback.outerHTML : '');
        if (!printHtml) return false;

        var printWindow = window.open('', 'PRINT', 'height=900,width=1200');
        if (!printWindow) {
            if (typeof window.erpNativePrint === 'function') {
                window.erpNativePrint();
            } else if (typeof window.print === 'function') {
                window.print();
            }
            return false;
        }

        printWindow.document.open();
        printWindow.document.write(printHtml);
        printWindow.document.close();

        var printed = false;
        var doPrint = function() {
            if (printed || printWindow.closed) return;
            printed = true;
            printWindow.focus();
            if (typeof printWindow.print === 'function') {
                printWindow.print();
            }
            printWindow.close();
        };
        printWindow.onload = function() {
            printWindow.setTimeout(doPrint, 350);
        };
        printWindow.setTimeout(doPrint, 1000);
        return false;
    }
</script>
