@extends('admin.layouts.app')

@section('page-title', 'Shipping Report List')

@section('content')
<style>
    /* GLOBAL RESPONSIVE STYLES (unchanged) */
    html, body {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    :root {
        --admin-font: "Inter", sans-serif;
    }

    body, input, select, textarea, button, table, th, td, .report-container {
        font-family: var(--admin-font);
    }

    .report-container {
        background: #ffffff;
        padding: 25px;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        margin: 20px auto;
        max-width: 100%;
        border: 1px solid #f0f0f0;
    }

    .report-header {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 8px;
        padding-bottom: 20px;
        border-bottom: 2px solid #f8f9fa;
    }

    .header-icon {
        width: 55px;
        height: 55px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    }

    .header-icon i {
        font-size: 24px;
        color: white;
    }

    .header-text {
        flex: 1;
    }

    .report-title {
        font-size: 24px;
        font-weight: 700;
        color: #1a202c;
        letter-spacing: -0.6px;
        margin-bottom: 4px;
    }

    .report-subtitle {
        font-size: 14px;
        color: #718096;
        font-weight: 500;
    }

    /* STATS CARDS (Invoice focused) */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 20px 0;
    }

    .stat-card {
        background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        padding: 16px;
        border-radius: 12px;
        border-left: 4px solid #4f46e5;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 70px;
    }

    .stat-card.warning {
        border-left-color: #f59e0b;
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    }

    .stat-card.success {
        border-left-color: #10b981;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    }

    .stat-card.danger {
        border-left-color: #ef4444;
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    }

    .stat-card.info {
        border-left-color: #3b82f6;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    }

    .stat-card.secondary {
        border-left-color: #8b5cf6;
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    }

    .stat-icon {
        width: 45px;
        height: 45px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(79, 70, 229, 0.1);
        flex-shrink: 0;
    }

    .stat-icon i {
        font-size: 18px;
        color: #4f46e5;
    }

    .stat-card.warning .stat-icon {
        background: rgba(245, 158, 11, 0.1);
    }

    .stat-card.warning .stat-icon i {
        color: #f59e0b;
    }

    .stat-card.success .stat-icon {
        background: rgba(16, 185, 129, 0.1);
    }

    .stat-card.success .stat-icon i {
        color: #10b981;
    }

    .stat-card.danger .stat-icon {
        background: rgba(239, 68, 68, 0.1);
    }

    .stat-card.danger .stat-icon i {
        color: #ef4444;
    }

    .stat-card.info .stat-icon {
        background: rgba(59, 130, 246, 0.1);
    }

    .stat-card.info .stat-icon i {
        color: #3b82f6;
    }

    .stat-card.secondary .stat-icon {
        background: rgba(139, 92, 246, 0.1);
    }

    .stat-card.secondary .stat-icon i {
        color: #8b5cf6;
    }

    .stat-content {
        flex: 1;
    }

    .stat-value {
        font-size: 22px;
        font-weight: 700;
        color: #1a202c;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .stat-label {
        font-size: 12px;
        color: #718096;
        font-weight: 500;
        line-height: 1.3;
    }

    /* FILTER SECTION (From/To + Company) */
    .filter-section {
        background: #f8fafc;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid #e2e8f0;
    }

    .filter-row {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 180px;
        flex: 1;
    }

    .filter-label {
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .filter-label i {
        color: #6b7280;
        font-size: 13px;
    }

    .filter-control {
        padding: 10px 12px;
        border-radius: 8px;
        border: 1.5px solid #e5e7eb;
        background: #ffffff;
        font-size: 14px;
        color: #1f2937;
        transition: all 0.3s ease;
        font-family: var(--admin-font);
    }

    .filter-control:focus {
        outline: none;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    }

    /* TABLE WRAPPER */
    .table-container {
        overflow-x: auto;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        margin-top: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .report-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        min-width: 1100px;
        table-layout: auto;
        font-size: 14px;
    }

    .report-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .report-table th {
        padding: 16px 20px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        white-space: nowrap;
        position: relative;
        min-width: 120px;
    }

    .report-table td {
        padding: 14px 20px;
        font-size: 14px;
        color: #374151;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 120px;
        text-align: center;
    }

    .report-table tbody tr {
        transition: all 0.3s ease;
    }

    .report-table tbody tr:hover {
        background-color: #f8faff;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .status-badge {
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 6px 12px 6px 8px !important;
        border-radius: 20px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background-size: cover !important;
        background-position: center !important;
        color: #fff !important;
        border: 2px solid transparent !important;
        min-width: 40px;
        box-sizing: border-box;
        gap: 6px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        margin: 0 auto;
    }

    .status-paid {
        background: linear-gradient(135deg, #10b981, #34d399) !important;
        border-color: #059669 !important;
        width: 99px;
    }

    .status-pending {
        background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
        color: #d97706 !important;
        border-color: #f59e0b !important;
        width: 99px;
    }

    .status-overdue {
        background: linear-gradient(135deg, #fef2f2, #fecaca) !important;
        color: #dc2626 !important;
        border-color: #ef4444 !important;
        width: 99px;
    }

    .data-highlight {
        font-weight: 400;
        color: #1a202c;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 auto;
    }

    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6b7280;
    }

    .empty-icon {
        width: 60px;
        height: 60px;
        background: #f8f9fa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        border: 2px dashed #e5e7eb;
    }

    .empty-icon i {
        font-size: 24px;
        color: #9ca3af;
    }

    .empty-state h3 {
        font-size: 16px;
        margin-bottom: 6px;
        color: #4b5563;
    }

    .empty-state p {
        font-size: 13px;
        color: #6b7280;
    }

    /* Pagination styles (unchanged) */
    .pagination-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding: 12px 0;
        border-top: 1px solid #eef3fb;
    }

    .pagination-info {
        font-size: 13px;
        color: #9ba5bb;
        font-weight: 600;
    }

    .pagination-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .pagination-img-btn {
        background: #fff;
        border: 1px solid #e3eaf6;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 32px;
        padding: 0;
    }

    .pagination-img-btn[disabled] {
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .pagination-page-btn {
        background: #fff;
        border: 1px solid #e3eaf6;
        color: #1a2951;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 36px;
        text-align: center;
    }

    .pagination-page-btn.active {
        background: #1a2951;
        color: #fff;
        border-color: #1a2951;
    }

    .pagination-pages {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .pagination-ellipsis {
        color: #9ba5bb;
        font-size: 13px;
        padding: 0 4px;
    }

    @media (max-width: 768px) {
        .report-container {
            padding: 15px;
        }
        .report-table {
            min-width: 1100px;
        }
    }
</style>

<div class="report-container">
    <!-- HEADER SECTION -->
    <div class="report-header">
        <div class="header-icon">
            <i class="fas fa-shipping-fast"></i>
        </div>
        <div class="header-text">
            <h1 class="report-title">Shipping Report List</h1>
            <p class="report-subtitle">Container-wise invoices overview (Order & Shipment removed)</p>
        </div>
    </div>

    <!-- STATS CARDS (Invoice focused) -->
    <div class="stats-container">
        <div class="stat-card info">
            <div class="stat-icon">
                <i class="fas fa-file-invoice"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value" id="totalInvoices">{{ count($reports) }}</div>
                <div class="stat-label">Total Invoices</div>
            </div>
        </div>

        <div class="stat-card success">
            <div class="stat-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value" id="paidInvoices">0</div>
                <div class="stat-label">Paid Invoices</div>
            </div>
        </div>

        <div class="stat-card warning">
            <div class="stat-icon">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value" id="pendingInvoices">0</div>
                <div class="stat-label">Pending Invoices</div>
            </div>
        </div>

        <div class="stat-card danger">
            <div class="stat-icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
                <div class="stat-value" id="overdueInvoices">0</div>
                <div class="stat-label">Overdue Invoices</div>
            </div>
        </div>
    </div>

    <!-- FILTER SECTION (basic: From, To, Company) -->
    <div class="filter-section">
        <div class="filter-row">
            <div class="filter-group">
                <label class="filter-label">
                    <i class="fas fa-calendar-alt"></i> From Date
                </label>
                <input type="date" class="filter-control" id="fromDate">
            </div>

            <div class="filter-group">
                <label class="filter-label">
                    <i class="fas fa-calendar-check"></i> To Date
                </label>
                <input type="date" class="filter-control" id="toDate">
            </div>

            <div class="filter-group">
                <label class="filter-label">
                    <i class="fas fa-building"></i> Company
                </label>
                <select class="filter-control" id="companyFilter">
                    <option value="">All Companies</option>
                    {{-- company_name JS मधून भरू --}}
                </select>
            </div>
        </div>
    </div>

    <!-- TABLE SECTION -->
    <div class="table-container">
        <table class="report-table">
            <thead>
            <tr>
                <th>Container No</th>
                <th>Container Date</th>
                <th>Company Name</th>
                <th>Customer Name</th>
                <th>Mark No</th>
                <th>Invoice No</th>
                <th>Invoice Date</th>
                <th>Invoice Amount</th>
                <th>Invoice Status</th>
            </tr>
            </thead>
            <tbody id="reportTableBody">
            @forelse ($reports as $r)
                <tr
                    data-invoice-status="{{ strtolower($r->invoicestatus ?? '') }}"
                    data-company="{{ $r->company_name ?? '' }}"
                    data-date="{{ $r->invoice_date }}"
                >
                    <td>
                        <span class="data-highlight" title="{{ $r->container_number }}">
                            {{ $r->container_number }}
                        </span>
                    </td>
                    <td>
                        {{ $r->container_date ? \Carbon\Carbon::parse($r->container_date)->format('d-m-Y') : '-' }}
                    </td>
                    <td>
                        <span class="data-highlight" title="{{ $r->company_name }}">
                            {{ $r->company_name ?? '-' }}
                        </span>
                    </td>
                    <td>
                        <span class="data-highlight" title="{{ $r->customer_name }}">
                            {{ $r->customer_name ?? '-' }}
                        </span>
                    </td>
                    <td>
                        <span class="data-highlight" title="{{ $r->mark_no }}">
                            {{ $r->mark_no ?? '-' }}
                        </span>
                    </td>
                    <td>
                        <span class="data-highlight" title="{{ $r->invoice_number }}">
                            {{ $r->invoice_number }}
                        </span>
                    </td>
                    <td>
                        {{ $r->invoice_date ? \Carbon\Carbon::parse($r->invoice_date)->format('d-m-Y') : '-' }}
                    </td>
                    <td>
                        <span class="data-highlight" title="{{ number_format($r->final_amount, 2) }}">
                            {{ number_format($r->final_amount, 2) }}
                        </span>
                    </td>
                    <td>
                        @php $ist = strtolower($r->invoicestatus ?? ''); @endphp
                        <span class="status-badge
                            @if($ist === 'paid') status-paid
                            @elseif($ist === 'pending') status-pending
                            @elseif($ist === 'overdue') status-overdue
                            @endif">
                            {{ $ist ? ucfirst($ist) : '-' }}
                        </span>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9">
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-inbox"></i>
                            </div>
                            <h3>No Shipping Reports Found</h3>
                            <p>There are no shipping reports matching your current filters</p>
                        </div>
                    </td>
                </tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination Controls -->
    <div class="pagination-container">
        <div class="pagination-info" id="pageInfo">
            Showing 1 to {{ min(10, count($reports)) }} of {{ count($reports) }} entries
        </div>
        <div class="pagination-controls">
            <button class="pagination-img-btn" id="prevPageBtn" title="Previous page" disabled>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <div class="pagination-pages" id="paginationPages">
                <!-- Page numbers via JS -->
            </div>
            <button class="pagination-img-btn" id="nextPageBtn" title="Next page"
                    {{ count($reports) <= 10 ? 'disabled' : '' }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                     xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>
    </div>
</div>

{{-- ======================= OLD ORDER + SHIPMENT TABLE (FULLY COMMENTED) =======================
    इथे तुझा जुना <table> / JS ठेवू शकतोस backup साठी.
--}}

<script>
    // ===== BASIC JS STATE =====
    let currentPage = 1;
    const itemsPerPage = 10;
    let allReports = @json($reports);
    let filteredReports = [...allReports];

    document.addEventListener('DOMContentLoaded', function () {
        populateCompanyFilter(allReports);

        const fd = document.getElementById('fromDate');
        const td = document.getElementById('toDate');
        const cf = document.getElementById('companyFilter');

        if (fd) fd.addEventListener('change', filterTable);
        if (td) td.addEventListener('change', filterTable);
        if (cf) cf.addEventListener('change', filterTable);

        const prevBtn = document.getElementById('prevPageBtn');
        const nextBtn = document.getElementById('nextPageBtn');
        if (prevBtn) prevBtn.addEventListener('click', goToPreviousPage);
        if (nextBtn) nextBtn.addEventListener('click', goToNextPage);

        filterTable();
    });

    function populateCompanyFilter(reports) {
        const companySelect = document.getElementById('companyFilter');
        if (!companySelect) return;

        const companies = new Set();
        reports.forEach(r => {
            if (r.company_name && r.company_name.trim() !== '') {
                companies.add(r.company_name.trim());
            }
        });

        const sorted = Array.from(companies).sort();
        companySelect.innerHTML = '<option value="">All Companies</option>';
        sorted.forEach(c => {
            const opt = document.createElement('option');
            opt.value = c;
            opt.textContent = c;
            companySelect.appendChild(opt);
        });
    }

    function goToPreviousPage() {
        if (currentPage === 1) return;
        currentPage--;
        renderTable();
        updatePaginationControls();
        updateStatistics();
    }

    function goToNextPage() {
        const totalPages = Math.ceil(filteredReports.length / itemsPerPage);
        if (currentPage >= totalPages) return;
        currentPage++;
        renderTable();
        updatePaginationControls();
        updateStatistics();
    }

    function updatePaginationControls() {
        const totalPages = Math.ceil(filteredReports.length / itemsPerPage);
        const prevBtn = document.getElementById('prevPageBtn');
        const nextBtn = document.getElementById('nextPageBtn');
        const pageInfo = document.getElementById('pageInfo');
        const paginationPages = document.getElementById('paginationPages');

        if (prevBtn) prevBtn.disabled = currentPage === 1 || totalPages === 0;
        if (nextBtn) nextBtn.disabled = currentPage === totalPages || totalPages === 0;

        const startIndex = (currentPage - 1) * itemsPerPage + 1;
        const endIndex = Math.min(currentPage * itemsPerPage, filteredReports.length);

        if (pageInfo) {
            if (totalPages === 0) {
                pageInfo.textContent = 'Showing 0 to 0 of 0 entries';
            } else {
                pageInfo.textContent = `Showing ${startIndex} to ${endIndex} of ${filteredReports.length} entries`;
            }
        }

        if (!paginationPages) return;
        paginationPages.innerHTML = '';
        if (totalPages <= 1) return;

        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.className = 'pagination-page-btn';
            if (i === currentPage) btn.classList.add('active');
            btn.textContent = i;
            btn.addEventListener('click', function () {
                currentPage = i;
                renderTable();
                updatePaginationControls();
                updateStatistics();
            });
            paginationPages.appendChild(btn);
        }
    }

    function renderTable() {
        const tbody = document.getElementById('reportTableBody');
        if (!tbody) return;

        tbody.innerHTML = '';
        if (filteredReports.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="9">
                        <div class="empty-state">
                            <div class="empty-icon">
                                <i class="fas fa-inbox"></i>
                            </div>
                            <h3>No Shipping Reports Found</h3>
                            <p>There are no shipping reports matching your current filters</p>
                        </div>
                    </td>
                </tr>`;
            return;
        }

        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const paginatedItems = filteredReports.slice(startIndex, endIndex);

        paginatedItems.forEach(report => {
            const ist = (report.invoicestatus || '').toLowerCase();
            const tr = document.createElement('tr');
            tr.setAttribute('data-invoice-status', ist);
            tr.setAttribute('data-company', report.company_name || '');
            tr.setAttribute('data-date', report.invoice_date || '');

            tr.innerHTML = `
                <td>
                    <span class="data-highlight" title="${report.container_number || ''}">
                        ${report.container_number || '-'}
                    </span>
                </td>
                <td>
                    ${report.container_date ? new Date(report.container_date).toLocaleDateString('en-GB') : '-'}
                </td>
                <td>
                    <span class="data-highlight" title="${report.company_name || ''}">
                        ${report.company_name || '-'}
                    </span>
                </td>
                <td>
                    <span class="data-highlight" title="${report.customer_name || ''}">
                        ${report.customer_name || '-'}
                    </span>
                </td>
                <td>
                    <span class="data-highlight" title="${report.mark_no || ''}">
                        ${report.mark_no || '-'}
                    </span>
                </td>
                <td>
                    <span class="data-highlight" title="${report.invoice_number || ''}">
                        ${report.invoice_number || '-'}
                    </span>
                </td>
                <td>
                    ${report.invoice_date ? new Date(report.invoice_date).toLocaleDateString('en-GB') : '-'}
                </td>
                <td>
                    <span class="data-highlight" title="${Number(report.final_amount || 0).toLocaleString('en-IN', {minimumFractionDigits: 2})}">
                        ${Number(report.final_amount || 0).toLocaleString('en-IN', {minimumFractionDigits: 2})}
                    </span>
                </td>
                <td>
                    <span class="status-badge ${
                        ist === 'paid' ? 'status-paid' :
                        ist === 'overdue' ? 'status-overdue' : 'status-pending'
                    }">
                        ${ist ? ist.charAt(0).toUpperCase() + ist.slice(1) : '-'}
                    </span>
                </td>
            `;
            tbody.appendChild(tr);
        });
    }

    function filterTable() {
        const fromDate = document.getElementById('fromDate')?.value;
        const toDate = document.getElementById('toDate')?.value;
        const companyFilter = document.getElementById('companyFilter')?.value;

        filteredReports = allReports.filter(report => {
            let include = true;

            if (fromDate && toDate && report.invoice_date) {
                const repDate = new Date(report.invoice_date);
                const from = new Date(fromDate);
                const to = new Date(toDate);
                to.setHours(23, 59, 59, 999);
                if (repDate < from || repDate > to) include = false;
            }

            if (companyFilter && report.company_name !== companyFilter) {
                include = false;
            }

            return include;
        });

        currentPage = 1;
        renderTable();
        updatePaginationControls();
        updateStatistics();
    }

    function updateStatistics() {
        const rows = document.querySelectorAll('#reportTableBody tr');
        let total = 0, paid = 0, pending = 0, overdue = 0;

        rows.forEach(row => {
            const empty = row.querySelector('.empty-state');
            if (empty) return;

            total++;
            const status = (row.getAttribute('data-invoice-status') || '').toLowerCase();
            if (status === 'paid') paid++;
            else if (status === 'overdue') overdue++;
            else if (status === 'pending') pending++;
        });

        const elTotal = document.getElementById('totalInvoices');
        const elPaid = document.getElementById('paidInvoices');
        const elPending = document.getElementById('pendingInvoices');
        const elOverdue = document.getElementById('overdueInvoices');

        if (elTotal) elTotal.textContent = total;
        if (elPaid) elPaid.textContent = paid;
        if (elPending) elPending.textContent = pending;
        if (elOverdue) elOverdue.textContent = overdue;
    }
</script>
@endsection