<!--
    Embedded dashboard snippet for EnRep "1000ft View".

    Assumptions:
    - MDBootstrap 5 (UMD) JS/CSS loaded globally.
    - Font Awesome Pro loaded.
    - ROOT_URL and TENANT_URL are defined globally.
    - jsprint.js (printContainer) is loaded globally.
-->

<div id="dashboard-container" class="container-fluid py-4">
    <h3 class="mb-3">System Totals</h3>

    <div class="row mb-3">
        <div class="col-12 col-lg-9">
            <div class="note note-light">
                <strong>Overview:</strong>
                Use this dashboard to get a high-level view of active clients, assets, upcoming inspections,
                and completed inspections. Apply a reporting period to see workload and outcomes for that timeframe.
            </div>
        </div>
        <div class="col-12 col-lg-3 text-lg-end mt-3 mt-lg-0">
            <button id="btnSystemTotalsPrint"
                    type="button"
                    class="btn btn-info"
                    data-mdb-tooltip-init
                    data-mdb-placement="top"
                    data-mdb-trigger="hover"
                    title="Print current overview">
                <i class="fad fa-print me-2"></i>Print
            </button>
        </div>
    </div>

    <div class="row mb-4 g-3 align-items-end">
        <div class="col-md-6 offset-md-3">
            <label class="form-label select-label" for="clientSelect">Select client</label>
            <select class="form-select" id="clientSelect" data-mdb-filter="true">
                <option value="all">All clients (global)</option>
            </select>
        </div>
        <div class="col-md-3 d-none">
            <button id="applyFiltersBtn"
                    class="btn btn-info"
                    data-mdb-tooltip-init
                    data-mdb-placement="top"
                    data-mdb-trigger="hover"
                    title="Apply client filter">
                <i class="fad fa-filter me-2"></i>Apply client filter
            </button>
        </div>
    </div>

    <div class="row g-3">
        <!-- High-level client and asset totals -->
        <div class="col-md-4 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-primary">
                        <i class="fad fa-users me-2"></i>Active clients
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalActiveClients">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-secondary">
                        <i class="fad fa-archive me-2"></i>Archived clients
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalArchivedClients">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-success">
                        <i class="fad fa-boxes me-2"></i>Total assets
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalAssets">0</p>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-warning">
                        <i class="fad fa-scroll me-2"></i>Written schemes
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalWrittenSchemes">0</p>
                </div>
            </div>
        </div>

        <!-- Reporting period -->
        <div class="col-12 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-dark">
                        <i class="fad fa-calendar-alt me-2"></i>Reporting period
                    </h5>
                    <div class="row g-3 mt-2 align-items-end">
                        <div class="col-md-4">
                            <div class="date-picker w-100"
                                 data-date-type="open"
                                 data-format="dd-mm-yyyy"
                                 data-mdb-toggle-button="false">
                                <input type="text"
                                       class="form-control"
                                       data-mdb-confirmDateOnSelect
                                       data-mdb-toggle="datepicker"
                                       name="reportStartDate"
                                       id="reportStartDate"
                                       placeholder="Start date"
                                       value="" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="date-picker w-100"
                                 data-date-type="open"
                                 data-format="dd-mm-yyyy"
                                 data-mdb-toggle-button="false">
                                <input type="text"
                                       class="form-control"
                                       data-mdb-confirmDateOnSelect
                                       data-mdb-toggle="datepicker"
                                       name="reportEndDate"
                                       id="reportEndDate"
                                       placeholder="End date"
                                       value="" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button id="applyReportDateFilterBtn"
                                    class="btn btn-secondary"
                                    data-mdb-tooltip-init
                                    data-mdb-placement="top"
                                    data-mdb-trigger="hover"
                                    title="Apply reporting period">
                                <i class="fad fa-calendar-check me-2"></i>Apply period
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Workload metrics (no separate 'Reports created', only items due + inspections completed) -->
        <div class="col-md-6 mb-3">
            <div class="card shadow-0 border rounded-3 h-100">
                <div class="card-body">
                    <h5 class="card-title text-primary">
                        <i class="fad fa-clipboard-list me-2"></i>Items due this period
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalItemsDueInPeriod">0</p>
                    <button type="button"
                            id="btnItemsDueDetails"
                            class="btn btn-sm btn-outline-primary mt-2"
                            data-mdb-tooltip-init
                            data-mdb-placement="top"
                            data-mdb-trigger="hover"
                            title="View items due for inspection in this period">
                        <i class="fad fa-list-ul me-1"></i>Details
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card shadow-0 border rounded-3 h-100">
                <div class="card-body">
                    <h5 class="card-title text-success">
                        <i class="fad fa-clipboard-check me-2"></i>Inspections completed (period)
                    </h5>
                    <p class="card-text fs-2 fw-bold" id="totalJobsCompletedInPeriod">0</p>
                    <button type="button"
                            id="btnJobsCompletedDetails"
                            class="btn btn-sm btn-outline-success mt-2"
                            data-mdb-tooltip-init
                            data-mdb-placement="top"
                            data-mdb-trigger="hover"
                            title="View inspections completed in this period">
                        <i class="fad fa-list-ul me-1"></i>Details
                    </button>
                </div>
            </div>
        </div>

        <!-- Reports by result -->
        <div class="col-12 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-dark">
                        <i class="fad fa-chart-pie me-2"></i>Reports by result (period)
                    </h5>
                    <div class="row g-3 mt-2">
                        <div class="col-md-2">
                            <div class="text-center">
                                <p class="mb-0 text-success fw-bold">PASS</p>
                                <p class="fs-4" id="reportsPass">0</p>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <p class="mb-0 text-warning fw-bold">WARNING</p>
                                <p class="fs-4" id="reportsWarning">0</p>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <p class="mb-0 text-danger fw-bold">URGENT</p>
                                <p class="fs-4" id="reportsUrgent">0</p>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <p class="mb-0 text-info fw-bold">OBS</p>
                                <p class="fs-4" id="reportsObs">0</p>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="text-center">
                                <p class="mb-0 text-muted fw-bold">PNA</p>
                                <p class="fs-4" id="reportsPna">0</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assets by type -->
        <div class="col-12 mb-3">
            <div class="card shadow-0 border rounded-3">
                <div class="card-body">
                    <h5 class="card-title text-dark">
                        <i class="fad fa-cogs me-2"></i>Assets by type
                    </h5>
                    <div id="assetTypesContainer" class="row g-3 mt-2">
                        <div class="col-12 text-center text-muted">
                            <i class="fad fa-spinner fa-spin me-2"></i>Loading asset types.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MAIN PRINT CONTAINER (OVERVIEW) -->
    <div id="systemTotalsPrintContainer" class="d-none">
        <div style="width:100%; font-family: Arial, Helvetica, sans-serif; font-size: 11pt;">
            <h2 style="margin:0 0 8px 0; font-size:18pt;">System Totals Overview</h2>
            <p style="margin:0 0 4px 0;">
                <strong>Client:</strong>
                <span id="printSelectedClient">All clients (global)</span>
            </p>
            <p style="margin:0 0 16px 0;">
                <strong>Reporting period:</strong>
                <span id="printDateRange">This month</span>
            </p>

            <h3 style="margin:16px 0 8px 0; font-size:14pt;">Headline totals</h3>
            <table style="width:100%; border-collapse:collapse; margin-bottom:16px;">
                <tbody>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Active clients</td>
                        <td id="printTotalActiveClients"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Archived clients</td>
                        <td id="printTotalArchivedClients"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Total assets</td>
                        <td id="printTotalAssets"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Written schemes</td>
                        <td id="printTotalWrittenSchemes"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Items due this period</td>
                        <td id="printTotalItemsDueInPeriod"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">Inspections completed (period)</td>
                        <td id="printTotalJobsCompletedInPeriod"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                </tbody>
            </table>

            <h3 style="margin:16px 0 8px 0; font-size:14pt;">Reports by result (period)</h3>
            <table style="width:100%; border-collapse:collapse; margin-bottom:16px;">
                <tbody>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">PASS</td>
                        <td id="printReportsPass"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">WARNING</td>
                        <td id="printReportsWarning"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">URGENT</td>
                        <td id="printReportsUrgent"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">OBS</td>
                        <td id="printReportsObs"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                    <tr>
                        <td style="border:1px solid #ccc; padding:6px;">PNA</td>
                        <td id="printReportsPna"
                            style="border:1px solid #ccc; padding:6px; text-align:right;">0</td>
                    </tr>
                </tbody>
            </table>

            <h3 style="margin:16px 0 8px 0; font-size:14pt;">Assets by type</h3>
            <table style="width:100%; border-collapse:collapse;">
                <thead>
                    <tr>
                        <th style="border:1px solid #ccc; padding:6px; text-align:left;">Type</th>
                        <th style="border:1px solid #ccc; padding:6px; text-align:right;">Count</th>
                    </tr>
                </thead>
                <tbody id="printAssetTypesBody">
                    <tr>
                        <td colspan="2"
                            style="border:1px solid #ccc; padding:6px; text-align:center; color:#777;">
                            No asset types found for the selected criteria.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.onload = function() {
    if (typeof mdb === 'undefined') {
        console.error("MDBootstrap JavaScript library (mdb) is not defined.");
        document.getElementById('dashboard-container').innerHTML = `
            <div class="alert alert-danger" role="alert">
                Error: MDBootstrap library not loaded. Dashboard functionality is limited.
            </div>
        `;
        return;
    }

    const reportStartDateInput = document.getElementById('reportStartDate');
    const reportEndDateInput = document.getElementById('reportEndDate');

    const clientSelect = document.getElementById('clientSelect');
    const applyFiltersBtn = document.getElementById('applyFiltersBtn');
    const applyReportDateFilterBtn = document.getElementById('applyReportDateFilterBtn');
    const assetTypesContainer = document.getElementById('assetTypesContainer');

    const btnItemsDueDetails = document.getElementById('btnItemsDueDetails');
    const btnJobsCompletedDetails = document.getElementById('btnJobsCompletedDetails');

    const printBtn = document.getElementById('btnSystemTotalsPrint');
    const printSelectedClientEl = document.getElementById('printSelectedClient');
    const printDateRangeEl = document.getElementById('printDateRange');
    const printAssetTypesBody = document.getElementById('printAssetTypesBody');

    const printTotalActiveEl = document.getElementById('printTotalActiveClients');
    const printTotalArchivedEl = document.getElementById('printTotalArchivedClients');
    const printTotalAssetsEl = document.getElementById('printTotalAssets');
    const printTotalWSel = document.getElementById('printTotalWrittenSchemes');
    const printTotalItemsDueEl = document.getElementById('printTotalItemsDueInPeriod');
    const printTotalJobsEl = document.getElementById('printTotalJobsCompletedInPeriod');

    const printPassEl = document.getElementById('printReportsPass');
    const printWarningEl = document.getElementById('printReportsWarning');
    const printUrgentEl = document.getElementById('printReportsUrgent');
    const printObsEl = document.getElementById('printReportsObs');
    const printPnaEl = document.getElementById('printReportsPna');

    // default this month
    const pad = (n) => n.toString().padStart(2, '0');
    const today = new Date();
    const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

    if (!reportStartDateInput.value) {
        reportStartDateInput.value =
            `${pad(firstOfMonth.getDate())}-${pad(firstOfMonth.getMonth() + 1)}-${firstOfMonth.getFullYear()}`;
    }
    if (!reportEndDateInput.value) {
        reportEndDateInput.value =
            `${pad(lastOfMonth.getDate())}-${pad(lastOfMonth.getMonth() + 1)}-${lastOfMonth.getFullYear()}`;
    }

    async function fetchTotals() {
        const clientId = clientSelect.value;
        const reportStartDate = reportStartDateInput.value;
        const reportEndDate = reportEndDateInput.value;

        const params = new URLSearchParams();

        if (clientId && clientId !== 'all') {
            params.append('client_id', clientId);
        }
        if (reportStartDate) params.append('report_start_date', reportStartDate);
        if (reportEndDate) params.append('report_end_date', reportEndDate);

        if (typeof TENANT_URL !== 'undefined') {
            params.append('tenant', TENANT_URL);
        }

        document.querySelectorAll('.card-text.fs-2.fw-bold, .fs-4').forEach(el => el.textContent = '.');
        assetTypesContainer.innerHTML = `
            <div class="col-12 text-center text-muted">
                <i class="fad fa-spinner fa-spin me-2"></i>Loading asset types.
            </div>
        `;

        try {
            const response = await fetch(ROOT_URL + '/functions/get_system_totals.php?' + params.toString());
            const data = await response.json();

            if (data.success) {
                updateUI(data.data);
            } else {
                console.error('Error fetching data from PHP:', data.message);
                resetUI('Error: ' + data.message);
            }
        } catch (error) {
            console.error('Network or parsing error during fetch:', error);
            resetUI('Network error. Please try again.');
        }
    }

    function updateUI(data) {
        const totalActive = data.totalActiveClients ?? 0;
        const totalArchived = data.totalArchivedClients ?? 0;
        const totalAssets = data.totalAssets ?? 0;
        const totalWS = data.totalWrittenSchemes ?? 0;
        const totalItemsDue = data.totalItemsDueInPeriod ?? 0;
        const totalJobsCompleted = data.totalJobsCompletedInPeriod ?? 0;

        const pass = data.reportsByResult?.PASS ?? 0;
        const warning = data.reportsByResult?.WARNING ?? 0;
        const urgent = data.reportsByResult?.URGENT ?? 0;
        const obs = data.reportsByResult?.OBS ?? 0;
        const pna = data.reportsByResult?.PNA ?? 0;

        document.getElementById('totalActiveClients').textContent = totalActive;
        document.getElementById('totalArchivedClients').textContent = totalArchived;
        document.getElementById('totalAssets').textContent = totalAssets;
        document.getElementById('totalWrittenSchemes').textContent = totalWS;

        document.getElementById('totalItemsDueInPeriod').textContent = totalItemsDue;
        document.getElementById('totalJobsCompletedInPeriod').textContent = totalJobsCompleted;

        document.getElementById('reportsPass').textContent = pass;
        document.getElementById('reportsWarning').textContent = warning;
        document.getElementById('reportsUrgent').textContent = urgent;
        document.getElementById('reportsObs').textContent = obs;
        document.getElementById('reportsPna').textContent = pna;

        if (printTotalActiveEl) printTotalActiveEl.textContent = totalActive;
        if (printTotalArchivedEl) printTotalArchivedEl.textContent = totalArchived;
        if (printTotalAssetsEl) printTotalAssetsEl.textContent = totalAssets;
        if (printTotalWSel) printTotalWSel.textContent = totalWS;
        if (printTotalItemsDueEl) printTotalItemsDueEl.textContent = totalItemsDue;
        if (printTotalJobsEl) printTotalJobsEl.textContent = totalJobsCompleted;

        if (printPassEl) printPassEl.textContent = pass;
        if (printWarningEl) printWarningEl.textContent = warning;
        if (printUrgentEl) printUrgentEl.textContent = urgent;
        if (printObsEl) printObsEl.textContent = obs;
        if (printPnaEl) printPnaEl.textContent = pna;

        assetTypesContainer.innerHTML = '';
        if (data.assetTypes && Object.keys(data.assetTypes).length > 0) {
            for (const type in data.assetTypes) {
                const col = document.createElement('div');
                col.className = 'col-md-3';
                col.innerHTML = `
                    <div class="text-center">
                        <p class="mb-0 text-dark fw-bold">${type}</p>
                        <p class="fs-4">${data.assetTypes[type]}</p>
                    </div>
                `;
                assetTypesContainer.appendChild(col);
            }
        } else {
            assetTypesContainer.innerHTML = `
                <div class="col-12 text-center text-muted">
                    No asset types found for the selected criteria.
                </div>
            `;
        }

        if (printAssetTypesBody) {
            printAssetTypesBody.innerHTML = '';
            if (data.assetTypes && Object.keys(data.assetTypes).length > 0) {
                for (const type in data.assetTypes) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td style="border:1px solid #ccc; padding:6px; text-align:left;">${type}</td>
                        <td style="border:1px solid #ccc; padding:6px; text-align:right;">${data.assetTypes[type]}</td>
                    `;
                    printAssetTypesBody.appendChild(tr);
                }
            } else {
                printAssetTypesBody.innerHTML = `
                    <tr>
                        <td colspan="2"
                            style="border:1px solid #ccc; padding:6px; text-align:center; color:#777;">
                            No asset types found for the selected criteria.
                        </td>
                    </tr>
                `;
            }
        }

        if (clientSelect.options.length === 1 && data.activeClientsList) {
            data.activeClientsList.forEach(client => {
                const option = document.createElement('option');
                option.value = client.id;
                option.textContent = client.name;
                clientSelect.appendChild(option);
            });
        }
    }

    function resetUI(message = 'No data available.') {
        const zero = 0;

        document.getElementById('totalActiveClients').textContent = zero;
        document.getElementById('totalArchivedClients').textContent = zero;
        document.getElementById('totalAssets').textContent = zero;
        document.getElementById('totalWrittenSchemes').textContent = zero;

        document.getElementById('totalItemsDueInPeriod').textContent = zero;
        document.getElementById('totalJobsCompletedInPeriod').textContent = zero;

        document.getElementById('reportsPass').textContent = zero;
        document.getElementById('reportsWarning').textContent = zero;
        document.getElementById('reportsUrgent').textContent = zero;
        document.getElementById('reportsObs').textContent = zero;
        document.getElementById('reportsPna').textContent = zero;

        if (printTotalActiveEl) printTotalActiveEl.textContent = zero;
        if (printTotalArchivedEl) printTotalArchivedEl.textContent = zero;
        if (printTotalAssetsEl) printTotalAssetsEl.textContent = zero;
        if (printTotalWSel) printTotalWSel.textContent = zero;
        if (printTotalItemsDueEl) printTotalItemsDueEl.textContent = zero;
        if (printTotalJobsEl) printTotalJobsEl.textContent = zero;

        if (printPassEl) printPassEl.textContent = zero;
        if (printWarningEl) printWarningEl.textContent = zero;
        if (printUrgentEl) printUrgentEl.textContent = zero;
        if (printObsEl) printObsEl.textContent = zero;
        if (printPnaEl) printPnaEl.textContent = zero;

        if (printAssetTypesBody) {
            printAssetTypesBody.innerHTML = `
                <tr>
                    <td colspan="2"
                        style="border:1px solid #ccc; padding:6px; text-align:center; color:#777;">
                        ${message}
                    </td>
                </tr>
            `;
        }

        assetTypesContainer.innerHTML = `
            <div class="col-12 text-center text-muted">
                ${message}
            </div>
        `;
    }

    function openDetailModal(type, title) {
        if (typeof loadModalContent !== 'function') {
            console.error('loadModalContent is not defined.');
            return;
        }

        const clientId = clientSelect.value;
        const reportStartDate = reportStartDateInput.value;
        const reportEndDate = reportEndDateInput.value;

        const params = new URLSearchParams();
        params.append('detail_type', type);

        if (clientId && clientId !== 'all') {
            params.append('client_id', clientId);
        } else {
            params.append('client_id', 'all');
        }

        if (reportStartDate) params.append('report_start_date', reportStartDate);
        if (reportEndDate) params.append('report_end_date', reportEndDate);

        if (typeof TENANT_URL !== 'undefined') {
            params.append('tenant', TENANT_URL);
        }

        const dest = encodeURI(
            ROOT_URL + '/includes/master/system_totals_details.php?' + params.toString()
        );

        loadModalContent(dest, 'popupBox', 'modal-xl', 1060, 'true', title, '', null);
    }

    if (applyFiltersBtn) {
        applyFiltersBtn.addEventListener('click', fetchTotals);
    }
    clientSelect.addEventListener('change', fetchTotals);
    applyReportDateFilterBtn.addEventListener('click', fetchTotals);

    if (btnItemsDueDetails) {
        btnItemsDueDetails.addEventListener('click', () => {
            openDetailModal('items_due', 'Items due this period');
        });
    }

    if (btnJobsCompletedDetails) {
        btnJobsCompletedDetails.addEventListener('click', () => {
            openDetailModal('jobs_completed', 'Inspections completed (period)');
        });
    }

    if (printBtn && typeof printContainer === 'function') {
        printBtn.addEventListener('click', () => {
            const selectedOption = clientSelect.options[clientSelect.selectedIndex];
            const clientLabel = selectedOption ? selectedOption.textContent : 'All clients (global)';
            const startDate = reportStartDateInput.value || '';
            const endDate = reportEndDateInput.value || '';

            let dateRangeText = 'This month';
            if (startDate && endDate) {
                dateRangeText = `${startDate} to ${endDate}`;
            } else if (startDate || endDate) {
                dateRangeText = startDate || endDate;
            }

            if (printSelectedClientEl) {
                printSelectedClientEl.textContent = clientLabel;
            }
            if (printDateRangeEl) {
                printDateRangeEl.textContent = dateRangeText;
            }

            const headerHtml = `
                <div style="width:100%; text-align:left; font-size:14px;">
                    <strong>System Totals (${clientLabel})</strong><br>
                    <span>${
                        dateRangeText
                            ? 'Reporting period: ' + dateRangeText
                            : 'No reporting period applied'
                    }</span>
                </div>
            `;

            const footerHtml = `
                <div style="width:100%; text-align:center; font-size:10px;">
                    Generated ${new Date().toLocaleString()}
                </div>
            `;

            printContainer('systemTotalsPrintContainer', {
                orientation: 'portrait',
                margin: 10,
                header: headerHtml,
                footer: footerHtml,
                styles: [
                    ROOT_URL + '/resources/mdb/css/mdb.min.css',
                    ROOT_URL + '/resources/mdb/plugins/css/all.min.css'
                ]
            });
        });
    } else if (printBtn) {
        printBtn.addEventListener('click', () => {
            console.error('printContainer is not defined. Ensure jsprint.js is loaded.');
        });
    }

    fetchTotals();
};

document.getElementById('navBox').innerHTML =
    ' <li class="breadcrumb-item">Tools <i class="fad fa-angle-double-right mx-2 mt-1" aria-hidden="true"></i></li>' +
    '<li class="breadcrumb-item active">1000ft View</li>';
</script>