@extends('layouts.master')
@section('title')
    {{ __('Vice Rector Dashboard') }}
@endsection

@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <x-dashboard-role-styles />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') {{ __('Vice Rector') }} @endslot
        @slot('title') {{ __('Dashboard') }} @endslot
    @endcomponent

    @php
        $viewerId = (int) (Auth::id() ?? 0);
        $viewerRole = (string) (Auth::user()->role ?? 'vice_rector');
        $decisionStatusLabel = 'Need Your Decision';
        $sentBackStatusLabel = 'Sent Back by You';
        $canRequestDocument = \App\Support\WorkflowPermission::canUseAdminPermission($viewerRole, \App\Support\WorkflowPermission::ADMIN_PERMISSION_REQUEST_DOCUMENT);
        $isRequesterSideCorrection = function ($request) use ($viewerId) {
            $latestHistory = $request->latestHistory;
            $latestMeta = is_array($latestHistory?->meta) ? $latestHistory->meta : [];
            $targetType = strtolower(trim((string) data_get($latestMeta, 'sent_back_target_type', '')));
            $targetStepOrder = (int) data_get($latestMeta, 'sent_back_selected_target_step_order', 0);
            $targetUserId = (int) data_get(
                $latestMeta,
                'sent_back_to_user_id',
                data_get($latestMeta, 'sent_back_selected_target_user_id', 0)
            );
            $isRequesterTarget = in_array($targetType, ['requester', 'user'], true)
                || ($targetType === '' && $targetStepOrder <= 0 && $targetUserId === $viewerId);

            return (string) ($latestHistory?->action ?? '') === \App\Support\WorkflowPermission::ACTION_REQUEST_REVISION
                && (int) ($request->user_id ?? 0) === $viewerId
                && $targetStepOrder <= 0
                && $isRequesterTarget
                && ($targetUserId === 0 || $targetUserId === $viewerId);
        };
        $syncViceRectorKpiStatus = function (array $status) use ($decisionStatusLabel, $sentBackStatusLabel) {
            if (in_array($status['label'], ['Needs Your Review', 'Overdue SLA', 'Returned Back'], true)) {
                $status['label'] = $decisionStatusLabel;
                $status['badge'] = \App\Support\WorkflowPermission::dashboardStatusBadgeClass('Needs Your Review');
            }

            if ($status['label'] === 'Approved') {
                $status['badge'] = 'bg-primary-subtle text-primary';
            }

            if (in_array($status['label'], ['Sent Back by You', 'Sent Back to You', 'Sent Back to My Organization'], true)) {
                $status['label'] = $sentBackStatusLabel;
                $status['badge'] = \App\Support\WorkflowPermission::dashboardStatusBadgeClass('Sent Back by You');
            }

            return $status;
        };
        $workStatusFor = function ($request) use ($viewerRole, $viewerId, $syncViceRectorKpiStatus, $isRequesterSideCorrection) {
            if ($isRequesterSideCorrection($request)) {
                return [
                    'label' => 'In Progress',
                    'badge' => \App\Support\WorkflowPermission::dashboardStatusBadgeClass('In Progress'),
                    'title' => '',
                ];
            }

            $status = \App\Support\WorkflowPermission::dashboardStatus($request, $viewerRole, $viewerId);

            return $syncViceRectorKpiStatus($status);
        };
        $requestStatusFor = function ($request) use ($viewerId) {
            $status = \App\Support\WorkflowPermission::dashboardStatus($request, \App\Support\WorkflowPermission::ROLE_REQUESTER, $viewerId);

            if (!in_array($status['label'], ['Sent Back to You', 'Completed', 'Rejected'], true)) {
                $status['label'] = 'In Progress';
                $status['badge'] = \App\Support\WorkflowPermission::dashboardStatusBadgeClass('In Progress');
                $status['title'] = '';
            }

            return $status;
        };
        $allRequests = collect($requests ?? []);
        $personalRequests = $allRequests->filter(fn ($request) => (int) ($request->user_id ?? 0) === $viewerId)->values();
        $workRequests = $allRequests->filter(function ($request) use ($viewerId, $isRequesterSideCorrection) {
            if ($isRequesterSideCorrection($request)) {
                return false;
            }

            return (int) ($request->user_id ?? 0) !== $viewerId
                || (int) ($request->current_holder_user_id ?? 0) === $viewerId
                || (int) optional($request->latestHistory)->actor_user_id === $viewerId;
        })->values();
        $hasDashboardTabs = $canRequestDocument;
        $requestedDashboardTab = (string) request()->query('view', '');
        $activeDashboardTab = $hasDashboardTabs && $requestedDashboardTab === 'requests' ? 'requests' : 'work';
        $tableRequests = $activeDashboardTab === 'work' ? $workRequests : $personalRequests;
        $dashboardStatusFor = $activeDashboardTab === 'work' ? $workStatusFor : $requestStatusFor;
        $statusCounts = $tableRequests->map(fn ($request) => $dashboardStatusFor($request)['label'])->countBy();
        $isUnreadAttentionForViewer = function ($request) use ($viewerId): bool {
            $latestHistory = $request->latestHistory;

            return $latestHistory !== null
                && !(bool) ($latestHistory->is_read ?? false)
                && (int) ($latestHistory->actor_user_id ?? 0) !== $viewerId
                && $latestHistory->hasNotificationRecipient($viewerId, Auth::user());
        };
        $workTabAttentionCount = $workRequests
            ->filter(function ($request) use ($workStatusFor, $decisionStatusLabel, $isUnreadAttentionForViewer) {
                return \App\Support\WorkflowPermission::isDashboardOverdue($request)
                    || (in_array($workStatusFor($request)['label'], [
                $decisionStatusLabel,
                'Returned Back',
                'Sent Back to You',
                'Sent Back to My Organization',
                    ], true) && $isUnreadAttentionForViewer($request));
            })
            ->count();
        $requestTabAttentionCount = $personalRequests
            ->filter(function ($request) use ($viewerId, $isUnreadAttentionForViewer) {
                $status = \App\Support\WorkflowPermission::dashboardStatus(
                    $request,
                    \App\Support\WorkflowPermission::ROLE_REQUESTER,
                    $viewerId
                );

                return \App\Support\WorkflowPermission::isDashboardOverdue($request)
                    || ($status['label'] === 'Sent Back to You' && $isUnreadAttentionForViewer($request));
            })
            ->count();
        $tableTitle = $activeDashboardTab === 'work' ? 'Documents for Review and Decision' : 'Submitted Documents';
        $statusFilterMap = $activeDashboardTab === 'work'
            ? [
                $decisionStatusLabel => [$decisionStatusLabel],
                'Approved' => ['Approved'],
                $sentBackStatusLabel => [$sentBackStatusLabel],
                'Completed' => ['Completed'],
                'Rejected' => ['Rejected'],
            ]
            : [
                'In Progress' => ['In Progress'],
                'Sent Back to Me' => ['Sent Back to You'],
                'Completed' => ['Completed'],
                'Rejected' => ['Rejected'],
            ];
        $workKpiCards = [
            [
                'label' => $decisionStatusLabel,
                'count' => $activeDashboardTab === 'work' ? (int) ($statusCounts[$decisionStatusLabel] ?? 0) : $tableRequests->count(),
                'description' => 'Waiting for your review',
                'icon' => 'ri-archive-line',
                'color' => 'info',
            ],
            [
                'label' => 'Approved',
                'count' => (int) ($statusCounts['Approved'] ?? 0),
                'description' => 'Approved documents',
                'icon' => 'ri-check-line',
                'color' => 'primary',
            ],
            [
                'label' => $sentBackStatusLabel,
                'count' => (int) ($statusCounts[$sentBackStatusLabel] ?? 0),
                'description' => 'Sent back for revision',
                'icon' => 'ri-arrow-go-back-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Completed',
                'count' => (int) ($statusCounts['Completed'] ?? 0),
                'description' => 'Completed documents',
                'icon' => 'ri-checkbox-circle-line',
                'color' => 'success',
            ],
            [
                'label' => 'Rejected',
                'count' => (int) ($statusCounts['Rejected'] ?? 0),
                'description' => 'Rejected documents',
                'icon' => 'ri-close-line',
                'color' => 'danger',
            ],
        ];
        $myRequestKpiCards = [
            [
                'label' => 'Total Submitted',
                'count' => $personalRequests->count(),
                'description' => 'Documents you created',
                'icon' => 'ri-file-add-line',
                'color' => 'info',
            ],
            [
                'label' => 'In Progress',
                'count' => (int) ($statusCounts['In Progress'] ?? 0),
                'description' => 'Still moving through workflow',
                'icon' => 'ri-loader-4-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Sent Back to Me',
                'count' => (int) ($statusCounts['Sent Back to You'] ?? 0),
                'description' => 'Needs your revision',
                'icon' => 'ri-arrow-go-back-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Completed',
                'count' => (int) ($statusCounts['Completed'] ?? 0),
                'description' => 'Finished successfully',
                'icon' => 'ri-check-double-line',
                'color' => 'success',
            ],
            [
                'label' => 'Rejected',
                'count' => (int) ($statusCounts['Rejected'] ?? 0),
                'description' => 'Rejected documents',
                'icon' => 'ri-close-line',
                'color' => 'danger',
            ],
        ];
        $dashboardKpiCards = $activeDashboardTab === 'work' ? $workKpiCards : $myRequestKpiCards;
        $dashboardChartColors = ['primary', 'success', 'warning', 'info', 'danger', 'secondary'];
        $dashboardChartCards = $tableRequests
            ->groupBy(fn ($request) => trim((string) ($request->document_type_label ?: $request->document_type ?: __('N/A'))))
            ->map(fn ($items, $label) => [
                'label' => $label !== '' ? $label : __('N/A'),
                'key' => md5(mb_strtolower((string) ($label !== '' ? $label : __('N/A')))),
                'count' => $items->count(),
            ])
            ->sortByDesc('count')
            ->values()
            ->map(function ($card, $index) use ($dashboardChartColors) {
                $card['color'] = $dashboardChartColors[$index % count($dashboardChartColors)];
                return $card;
            })
            ->all();
        $dashboardChartMax = max(1, (int) collect($dashboardChartCards)->max('count'));
    @endphp

    @if($hasDashboardTabs)
        <ul class="nav nav-tabs dashboard-work-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeDashboardTab === 'work' ? 'active' : '' }}" data-turbo="true" href="{{ request()->fullUrlWithQuery(['view' => 'work']) }}">
                    <span class="dashboard-tab-icon"><i class="ri-inbox-archive-line"></i></span>
                    <span>{{ __('Work Queue') }}</span>
                    @if($workTabAttentionCount > 0)
                        <span class="dashboard-tab-count" title="{{ __('Items needing attention') }}">{{ $workTabAttentionCount }}</span>
                    @endif
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link {{ $activeDashboardTab === 'requests' ? 'active' : '' }}" data-turbo="true" href="{{ request()->fullUrlWithQuery(['view' => 'requests']) }}">
                    <span class="dashboard-tab-icon"><i class="ri-file-list-3-line"></i></span>
                    <span>{{ __('My Requests') }}</span>
                    @if($requestTabAttentionCount > 0)
                        <span class="dashboard-tab-count" title="{{ __('Items needing attention') }}">{{ $requestTabAttentionCount }}</span>
                    @endif
                </a>
            </li>
        </ul>
    @endif

    <div class="dashboard-tab-surface {{ $hasDashboardTabs ? 'with-dashboard-tabs' : '' }}">
    <div class="row g-2 row-cols-1 row-cols-md-2 row-cols-xl-5 row-cols-xxl-5">
        @foreach($dashboardKpiCards as $card)
        @php
            $cardColor = \App\Support\BadgeStyle::statusColor((string) ($card['label'] ?? ''), (string) ($card['color'] ?? 'primary'));
        @endphp
        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="{{ \Illuminate\Support\Str::slug((string) ($card['label'] ?? '')) }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __($card['label']) }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ (int) $card['count'] }}">{{ (int) $card['count'] }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-{{ $cardColor }} mb-0">
                                {{ __($card['description']) }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-{{ $cardColor }} rounded-circle fs-2">
                                    <i class="{{ $card['icon'] }}"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach

    </div>

    <x-document-type-bar-chart :cards="$dashboardChartCards" :max="$dashboardChartMax" />

    <div class="row">
        <div class="col-12">
            <x-dashboard-document-table
                :requests="$tableRequests"
                :title="$tableTitle"
                empty-message="No documents found."
                :status-filter-map="$statusFilterMap"
                :status-resolver="$dashboardStatusFor"
                :viewer-route-view="$activeDashboardTab"
            />
        </div>
    </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/js/app.js') }}" data-turbo-eval="false"></script>
    <script>
        (function () {
            function getResponsiveDashboardTablePageSize() {
                return 10;
            }

            var listContainer = document.getElementById('customerList');
            var table = document.getElementById('customerTable');

            if (!listContainer || !table || typeof List === 'undefined') {
                return;
            }

            var perPage = getResponsiveDashboardTablePageSize();
            var customerList = new List('customerList', {
                valueNames: ['uhs_code', 'registry_document_number', 'requested_date', 'customer_name', 'email', 'from', 'tracking_id', 'date', 'status'],
                page: perPage,
                pagination: true,
                plugins: typeof ListPagination !== 'undefined' ? [ListPagination({ left: 2, right: 2 })] : []
            });
            window.dashboardCustomerList = customerList;
            window.dispatchDashboardSummaryUpdate = function () {
                window.dispatchEvent(new CustomEvent('dashboard:filters-updated', {
                    detail: { list: customerList }
                }));
            };

            customerList.on('updated', function () {
                window.setTimeout(window.dispatchDashboardSummaryUpdate, 0);
            });
            function updatePagination(list) {
                var noResult = document.getElementsByClassName('noresult')[0];
                var wrap = document.getElementById('documentPaginationWrap');
                var prev = document.getElementById('documentPaginationPrev');
                var next = document.getElementById('documentPaginationNext');

                if (noResult) {
                    noResult.style.display = list.matchingItems.length === 0 ? 'block' : 'none';
                }

                if (wrap) {
                    wrap.style.display = list.matchingItems.length <= perPage ? 'none' : 'flex';
                }

                if (prev) {
                    prev.classList.toggle('disabled', list.i === 1);
                }

                if (next) {
                    next.classList.toggle('disabled', list.i > list.matchingItems.length - list.page);
                }
            }

            customerList.on('updated', updatePagination);
            updatePagination(customerList);
            var prevBtn = document.getElementById('documentPaginationPrev');
            var nextBtn = document.getElementById('documentPaginationNext');
            if (prevBtn) prevBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (!this.classList.contains('disabled')) {
                    customerList.show(Math.max(1, customerList.i - perPage), perPage);
                }
            });
            if (nextBtn) nextBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (!this.classList.contains('disabled')) {
                    customerList.show(customerList.i + perPage, perPage);
                }
            });
            var statusFilter = document.getElementById('statusFilter');
            var documentTypeFilter = document.getElementById('documentTypeFilter');
            var dateRangeFilter = document.getElementById('dateRangeFilter');
            var exportCsvBtn = document.getElementById('exportCsvBtn');
            var exportPdfBtn = document.getElementById('exportPdfBtn');
            var exportExcelBtn = document.getElementById('exportExcelBtn');
            var resetTableFiltersBtn = document.getElementById('resetTableFilters');
            var searchInput = listContainer.querySelector('.search');
            if (dateRangeFilter) {
                dateRangeFilter.setAttribute('readonly', 'readonly');
                if (typeof flatpickr !== 'undefined') {
                    if (dateRangeFilter._flatpickr) {
                        dateRangeFilter._flatpickr.destroy();
                    }
                    var effectiveLocale = "{{ session('lang', app()->getLocale()) }}";
                    var isKhmerLocale = effectiveLocale === "kh";
                    var khmerFlatpickrLocale = {
                        weekdays: {
                            shorthand: ['អា','ច','អ','ព','ព្រ','សុ','ស'],
                            longhand: ['អាទិត្យ','ចន្ទ','អង្គារ','ពុធ','ព្រហស្បតិ៍','សុក្រ','សៅរ៍']
                        },
                        months: {
                            shorthand: ['មក','កុ','មី','មេស','ឧស','មិថ','កក្ក','សី','កញ','តុ','វិ','ធ'],
                            longhand: ['មករា','កុម្ភៈ','មីនា','មេសា','ឧសភា','មិថុនា','កក្កដា','សីហា','កញ្ញា','តុលា','វិច្ឆិកា','ធ្នូ']
                        },
                        rangeSeparator: ' ដល់ ',
                        firstDayOfWeek: 1
                    };
                    var addDateRangeHelp = function (selectedDates, dateStr, instance) {
                        if (!instance || !instance.calendarContainer || instance.calendarContainer.querySelector('.date-range-help')) {
                            return;
                        }

                        var help = document.createElement('div');
                        help.className = 'date-range-help px-3 py-2 small text-muted border-top bg-light';
                        help.style.maxWidth = '320px';
                        help.style.whiteSpace = 'normal';
                        help.style.textAlign = 'left';
                        var list = document.createElement('ul');
                        list.className = 'mb-0 ps-3 text-start';
                        [@json(__('Select period: click the start date, then click the end date.')), @json(__('One day: double-click the same date.'))].forEach(function (text) {
                            var item = document.createElement('li');
                            item.textContent = text;
                            list.appendChild(item);
                        });
                        help.appendChild(list);
                        instance.calendarContainer.appendChild(help);
                    };
                    flatpickr(dateRangeFilter, {
                        mode: 'range',
                        dateFormat: isKhmerLocale ? 'd F, Y' : 'd M, Y',
                        locale: isKhmerLocale ? khmerFlatpickrLocale : 'default',
                        allowInput: false,
                        onReady: addDateRangeHelp,
                        onOpen: addDateRangeHelp
                    });
                }
            }

            function resetDashboardTableFilters(event) {
                if (event) {
                    event.preventDefault();
                    event.stopPropagation();
                }

                if (searchInput) {
                    searchInput.value = '';
                }

                if (statusFilter) {
                    statusFilter.selectedIndex = 0;
                }

                if (documentTypeFilter) {
                    documentTypeFilter.selectedIndex = 0;
                }

                if (dateRangeFilter) {
                    if (dateRangeFilter._flatpickr) {
                        dateRangeFilter._flatpickr.clear();
                    }

                    dateRangeFilter.value = '';
                }

                customerList.search('');
                customerList.filter(function () {
                    return true;
                });
                customerList.show(1, perPage);
                customerList.update();

                if (typeof updatePagination === 'function') {
                    updatePagination(customerList);
                }

                if (typeof adjustDateRangeWidth === 'function') {
                    adjustDateRangeWidth();
                }

                window.dispatchEvent(new CustomEvent('dashboard:filters-updated'));
            }

            function adjustDateRangeWidth() {
                if (!dateRangeFilter) return;
                if (typeof window.resizeDashboardDateRangeField === 'function') {
                    window.resizeDashboardDateRangeField(dateRangeFilter);
                    return;
                }
                var group = dateRangeFilter.closest('.input-group');
                if (!group) return;

                var textLength = (dateRangeFilter.value || dateRangeFilter.getAttribute('placeholder') || '').length;
                var minWidth = 190;
                var maxWidth = 460;
                var target = Math.min(maxWidth, Math.max(minWidth, 68 + (textLength * 8)));

                group.style.width = target + 'px';
                group.style.maxWidth = '100%';
            }

            adjustDateRangeWidth();
            var dateRangeIcon = null;
            if (dateRangeFilter) {
                var dateRangeGroup = dateRangeFilter.closest('.input-group');
                if (dateRangeGroup) {
                    dateRangeIcon = dateRangeGroup.querySelector('.input-group-text');
                }
            }

            if (dateRangeIcon) {
                dateRangeIcon.style.cursor = 'pointer';
                dateRangeIcon.addEventListener('click', function () {
                    if (dateRangeFilter && dateRangeFilter._flatpickr) {
                        dateRangeFilter._flatpickr.open();
                    } else if (dateRangeFilter) {
                        dateRangeFilter.focus();
                    }
                });
            }
            var statusFilterMap = @json(collect($statusFilterMap)
                ->mapWithKeys(fn ($statuses, $label) => [__($label) => array_map(fn ($status) => __($status), $statuses)])
                ->toArray());

            function parseDashboardDate(value) {
                var text = (value || '').toString().trim();
                if (!text) return null;
                var direct = new Date(text);
                if (!isNaN(direct.getTime())) return direct;
                var monthMap = {
                    jan: 0, january: 0, 'មករា': 0,
                    feb: 1, february: 1, 'កុម្ភៈ': 1,
                    mar: 2, march: 2, 'មីនា': 2,
                    apr: 3, april: 3, 'មេសា': 3,
                    may: 4, 'ឧសភា': 4,
                    jun: 5, june: 5, 'មិថុនា': 5,
                    jul: 6, july: 6, 'កក្កដា': 6,
                    aug: 7, august: 7, 'សីហា': 7,
                    sep: 8, september: 8, 'កញ្ញា': 8,
                    oct: 9, october: 9, 'តុលា': 9,
                    nov: 10, november: 10, 'វិច្ឆិកា': 10,
                    dec: 11, december: 11, 'ធ្នូ': 11
                };
                var match = text.match(/^(\d{1,2})\s+([^\d,]+),\s+(\d{4})(?:\s+(\d{1,2}):(\d{2})\s*(AM|PM))?$/i);
                if (!match) return null;
                var day = parseInt(match[1], 10);
                var monthName = match[2].trim();
                var year = parseInt(match[3], 10);
                var hour = match[4] ? parseInt(match[4], 10) : 0;
                var minute = match[5] ? parseInt(match[5], 10) : 0;
                var meridiem = match[6] ? match[6].toUpperCase() : null;
                var monthKey = monthName.toLowerCase();
                if (!Object.prototype.hasOwnProperty.call(monthMap, monthKey)) return null;
                if (meridiem === 'PM' && hour < 12) hour += 12;
                if (meridiem === 'AM' && hour === 12) hour = 0;
                var parsed = new Date(year, monthMap[monthKey], day, hour, minute, 0, 0);
                return isNaN(parsed.getTime()) ? null : parsed;
            }
            
            function parseDateRange(value) {
                if (dateRangeFilter && dateRangeFilter.dataset.rangePending === '1') {
                    return { from: null, to: null };
                }

                if (dateRangeFilter && dateRangeFilter._flatpickr && dateRangeFilter._flatpickr.selectedDates.length > 0) {
                    var selectedDates = dateRangeFilter._flatpickr.selectedDates;
                    var selectedFrom = new Date(selectedDates[0].getTime());
                    var selectedTo = new Date((selectedDates[1] || selectedDates[0]).getTime());
                    selectedFrom.setHours(0, 0, 0, 0);
                    selectedTo.setHours(23, 59, 59, 999);
                    return { from: selectedFrom, to: selectedTo };
                }

                var raw = (value || '').toString().trim();
                if (!raw) {
                    return { from: null, to: null };
                }

                var parts = raw.split(/\s+to\s+/i);
                var from = parseDashboardDate(parts[0]);
                var to = parts.length > 1 ? parseDashboardDate(parts[1]) : from;

                if (from && !isNaN(from.getTime())) {
                    from.setHours(0, 0, 0, 0);
                }

                if (to && !isNaN(to.getTime())) {
                    to.setHours(23, 59, 59, 999);
                }

                return { from: from, to: to };
            }
            function applyTableFilters(selected) {
                var parsedRange = parseDateRange(dateRangeFilter ? dateRangeFilter.value : '');
                var fromDate = parsedRange.from;
                var toDate = parsedRange.to;
                var selectedDocumentType = documentTypeFilter ? documentTypeFilter.value : '';
                customerList.filter(function (item) {
                    var statusPass = true;
                    var documentTypePass = true;
                    if (selected === @json(__('New for Me'))) {
                        statusPass = item.elm && item.elm.getAttribute('data-unread-update') === '1';
                    } else if (selected !== @json(__('All Status'))) {
                        var allowedStatuses = statusFilterMap[selected] || [selected];
                        if (allowedStatuses.indexOf(@json(__('All Status'))) === -1) {
                            var parsedStatus = new DOMParser().parseFromString(item.values().status, 'text/html');
                            statusPass = allowedStatuses.indexOf(parsedStatus.body.textContent.trim()) !== -1;
                        }
                    }
                    if (!statusPass) return false;
                    if (selectedDocumentType) {
                        documentTypePass = item.elm && item.elm.getAttribute('data-document-type-key') === selectedDocumentType;
                    }
                    if (!documentTypePass) return false;
                    if ((!fromDate || isNaN(fromDate.getTime())) && (!toDate || isNaN(toDate.getTime()))) return true;
                    var timestamp = item.elm && item.elm.querySelector('.date') ? parseInt(item.elm.querySelector('.date').getAttribute('data-timestamp') || '', 10) : NaN;
                    var rowDate = !isNaN(timestamp) ? new Date(timestamp * 1000) : parseDashboardDate(item.values().date);
                    if (!rowDate) return false;
                    if (fromDate && !isNaN(fromDate.getTime()) && rowDate < fromDate) return false;
                    if (toDate && !isNaN(toDate.getTime()) && rowDate > toDate) return false;
                    return true;
                });
            

                window.dispatchEvent(new CustomEvent('dashboard:filters-updated'));}
            

            function exportFilteredTable() {
                var table = document.getElementById('customerTable');
                if (!table || !customerList) return;

                var exportHeaders = Array.prototype.slice.call(table.querySelectorAll('thead th[data-sort]'));
                var columnKeys = exportHeaders.map(function (th) { return th.getAttribute('data-sort'); });
                var headers = exportHeaders.map(function (th) { return (th.textContent || '').trim(); });

                function toCsvCell(value) {
                    var text = (value == null ? '' : String(value)).replace(/\r?\n|\r/g, ' ').trim();
                    if (/[",\n]/.test(text)) {
                        text = '"' + text.replace(/"/g, '""') + '"';
                    }
                    return text;
                }

                var filterRows = window.dashboardExportFilterRows ? window.dashboardExportFilterRows() : [];
                var lines = [];
                if (filterRows.length) {
                    lines.push([@json(__('Selected Filters')), ''].map(toCsvCell).join(','));
                    filterRows.forEach(function (row) { lines.push(row.map(toCsvCell).join(',')); });
                    lines.push('');
                }
                lines.push(headers.map(toCsvCell).join(','));
                customerList.matchingItems.forEach(function (item) {
                    if (!item || !item.elm) return;
                    var rawValues = columnKeys.map(function (key) {
                        var cell = item.elm.querySelector('td.' + key);
                        return cell ? (cell.textContent || '').replace(/\s+/g, ' ').trim() : '';
                    });

                    if (rawValues.length > headers.length) rawValues = rawValues.slice(0, headers.length);
                    while (rawValues.length < headers.length) rawValues.push('');
                    lines.push(rawValues.map(toCsvCell).join(','));
                });

                var blob = new Blob(['\uFEFF' + lines.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
                var url = URL.createObjectURL(blob);
                var link = document.createElement('a');
                var now = new Date();
                var stamp = [
                    now.getFullYear(),
                    String(now.getMonth() + 1).padStart(2, '0'),
                    String(now.getDate()).padStart(2, '0'),
                    String(now.getHours()).padStart(2, '0'),
                    String(now.getMinutes()).padStart(2, '0')
                ].join('');

                link.href = url;
                link.download = 'dashboard-' + stamp + '.csv';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }
            function exportFilteredExcel() {
                var table = document.getElementById('customerTable');
                if (!table || !customerList) return;

                var exportHeaders = Array.prototype.slice.call(table.querySelectorAll('thead th[data-sort]'));
                var columnKeys = exportHeaders.map(function (th) { return th.getAttribute('data-sort'); });
                var headers = exportHeaders.map(function (th) { return (th.textContent || '').trim(); });

                function htmlCell(value, tag) {
                    var el = document.createElement(tag || 'td');
                    el.textContent = value == null ? '' : String(value);
                    return el.outerHTML;
                }

                var rows = [headers];
                customerList.matchingItems.forEach(function (item) {
                    if (!item || !item.elm) return;
                    var rawValues = columnKeys.map(function (key) {
                        var cell = item.elm.querySelector('td.' + key);
                        return cell ? (cell.textContent || '').replace(/\s+/g, ' ').trim() : '';
                    });

                    if (rawValues.length > headers.length) rawValues = rawValues.slice(0, headers.length);
                    while (rawValues.length < headers.length) rawValues.push('');
                    rows.push(rawValues);
                });

                var filterRows = window.dashboardExportFilterRows ? window.dashboardExportFilterRows() : [];
                var filterHtml = filterRows.length
                    ? '<h4>' + htmlCell(@json(__('Selected Filters')), 'span') + '</h4><table border="1">' + filterRows.map(function (row) { return '<tr>' + row.map(function (cell) { return htmlCell(cell, 'td'); }).join('') + '</tr>'; }).join('') + '</table><br>'
                    : '';
                var html = '<html><head><meta charset="UTF-8"></head><body>' + filterHtml + '<table border="1"><thead><tr>'
                    + rows[0].map(function (cell) { return htmlCell(cell, 'th'); }).join('')
                    + '</tr></thead><tbody>'
                    + rows.slice(1).map(function (row) {
                        return '<tr>' + row.map(function (cell) { return htmlCell(cell, 'td'); }).join('') + '</tr>';
                    }).join('')
                    + '</tbody></table></body></html>';

                var blob = new Blob(['\uFEFF' + html], { type: 'application/vnd.ms-excel;charset=utf-8;' });
                var url = URL.createObjectURL(blob);
                var link = document.createElement('a');
                var now = new Date();
                var stamp = [
                    now.getFullYear(),
                    String(now.getMonth() + 1).padStart(2, '0'),
                    String(now.getDate()).padStart(2, '0'),
                    String(now.getHours()).padStart(2, '0'),
                    String(now.getMinutes()).padStart(2, '0')
                ].join('');

                link.href = url;
                link.download = 'dashboard-' + stamp + '.xls';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }

            function exportFilteredPdf() {
                var table = document.getElementById('customerTable');
                if (!table || !customerList) return;

                function htmlCell(value, tag) {
                    var el = document.createElement(tag || 'td');
                    el.textContent = value == null ? '' : String(value);
                    return el.outerHTML;
                }

                var exportHeaders = Array.prototype.slice.call(table.querySelectorAll('thead th[data-sort]'));
                var columnKeys = exportHeaders.map(function (th) { return th.getAttribute('data-sort'); });
                var headers = exportHeaders.map(function (th) { return (th.textContent || '').trim(); });

                var rows = customerList.matchingItems.map(function (item) {
                    if (!item || !item.elm) return [];
                    var rawValues = columnKeys.map(function (key) {
                        var cell = item.elm.querySelector('td.' + key);
                        return cell ? (cell.textContent || '').replace(/\s+/g, ' ').trim() : '';
                    });

                    if (rawValues.length > headers.length) rawValues = rawValues.slice(0, headers.length);
                    while (rawValues.length < headers.length) rawValues.push('');
                    return rawValues;
                }).filter(function (row) { return row.length > 0; });

                var ensureScript = function (src, marker, test) {
                    return new Promise(function (resolve, reject) {
                        if (test()) {
                            resolve();
                            return;
                        }
                        var existing = document.querySelector('script[' + marker + '="1"]');
                        if (existing) {
                            existing.addEventListener('load', function () {
                                test() ? resolve() : reject(new Error('Export library failed to load'));
                            }, { once: true });
                            existing.addEventListener('error', function () { reject(new Error('Failed to load export library')); }, { once: true });
                            return;
                        }
                        var script = document.createElement('script');
                        script.src = src;
                        script.setAttribute(marker, '1');
                        script.onload = function () {
                            test() ? resolve() : reject(new Error('Export library failed to initialize'));
                        };
                        script.onerror = function () { reject(new Error('Failed to load export library')); };
                        document.head.appendChild(script);
                    });
                };

                function buildExportTable() {
                    var wrap = document.createElement('div');
                    wrap.style.position = 'fixed';
                    wrap.style.left = '-10000px';
                    wrap.style.top = '0';
                    wrap.style.width = Math.max(1650, headers.length * 150) + 'px';
                    wrap.style.padding = '24px';
                    wrap.style.background = '#ffffff';
                    wrap.style.color = '#111827';
                    wrap.style.fontFamily = window.getComputedStyle(document.body).fontFamily || 'Arial, sans-serif';
                    var filterRows = window.dashboardExportFilterRows ? window.dashboardExportFilterRows() : [];
                    var filterHtml = filterRows.length
                        ? '<div style="margin:0 0 14px;font-size:12px;"><strong>' + htmlCell(@json(__('Selected Filters')), 'span') + ':</strong> ' + filterRows.map(function (row) { return htmlCell(row[0] + ': ' + row[1], 'span'); }).join(' &nbsp; | &nbsp; ') + '</div>'
                        : '';
                    wrap.innerHTML = filterHtml
                        + '<table style="width:100%;border-collapse:collapse;font-size:12px;"><thead><tr>'
                        + headers.map(function (cell) { return '<th style="border:1px solid #d1d5db;background:#f3f4f6;padding:7px;text-align:left;">' + htmlCell(cell, 'span') + '</th>'; }).join('')
                        + '</tr></thead><tbody>'
                        + rows.map(function (row) {
                            return '<tr>' + row.map(function (cell) {
                                return '<td style="border:1px solid #e5e7eb;padding:7px;vertical-align:top;">' + htmlCell(cell, 'span') + '</td>';
                            }).join('') + '</tr>';
                        }).join('')
                        + '</tbody></table>';
                    wrap.querySelectorAll('thead th, thead th *').forEach(function (node) {
                        node.style.setProperty('color', '#111827', 'important');
                    });
                    document.body.appendChild(wrap);
                    return wrap;
                }

                Promise.all([
                    ensureScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'data-export-html2canvas', function () { return !!window.html2canvas; }),
                    ensureScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 'data-export-jspdf', function () { return !!(window.jspdf && window.jspdf.jsPDF); })
                ]).then(function () {
                    var exportNode = buildExportTable();
                    return window.html2canvas(exportNode, {
                        scale: 2,
                        backgroundColor: '#ffffff',
                        useCORS: true
                    }).then(function (canvas) {
                        document.body.removeChild(exportNode);
                        return canvas;
                    }).catch(function (error) {
                        document.body.removeChild(exportNode);
                        throw error;
                    });
                }).then(function (canvas) {
                    var JsPdfCtor = window.jspdf.jsPDF;
                    var pdf = new JsPdfCtor({ orientation: 'landscape', unit: 'pt', format: 'a3' });
                    var pageWidth = pdf.internal.pageSize.getWidth();
                    var pageHeight = pdf.internal.pageSize.getHeight();
                    var marginX = 28;
                    var marginY = 34;
                    var imgWidth = pageWidth - marginX * 2;
                    var pageContentHeight = pageHeight - marginY * 2;
                    var sourceY = 0;
                    var sourcePageHeight = canvas.width * pageContentHeight / imgWidth;
                    var pageCanvas = document.createElement('canvas');
                    var pageCtx = pageCanvas.getContext('2d');
                    pageCanvas.width = canvas.width;
                    var now = new Date();
                    var stamp = [
                        now.getFullYear(),
                        String(now.getMonth() + 1).padStart(2, '0'),
                        String(now.getDate()).padStart(2, '0'),
                        String(now.getHours()).padStart(2, '0'),
                        String(now.getMinutes()).padStart(2, '0')
                    ].join('');

                    while (sourceY < canvas.height) {
                        var sliceHeight = Math.min(sourcePageHeight, canvas.height - sourceY);
                        pageCanvas.height = sliceHeight;
                        pageCtx.clearRect(0, 0, pageCanvas.width, pageCanvas.height);
                        pageCtx.drawImage(canvas, 0, sourceY, canvas.width, sliceHeight, 0, 0, pageCanvas.width, sliceHeight);
                        if (sourceY > 0) {
                            pdf.addPage();
                        }
                        pdf.addImage(pageCanvas.toDataURL('image/png'), 'PNG', marginX, marginY, imgWidth, sliceHeight * imgWidth / canvas.width);
                        sourceY += sliceHeight;
                    }

                    pdf.save('dashboard-' + stamp + '.pdf');
                }).catch(function () {
                    alert(@json(__('Unable to export PDF right now. Please try again.')));
                });
            }

            if (exportCsvBtn) exportCsvBtn.addEventListener('click', exportFilteredTable);
            if (exportPdfBtn) exportPdfBtn.addEventListener('click', exportFilteredPdf);
            if (exportExcelBtn) exportExcelBtn.addEventListener('click', exportFilteredExcel);


            if (resetTableFiltersBtn) {
                resetTableFiltersBtn.addEventListener('click', resetDashboardTableFilters);
            }

            if (statusFilter) {
                statusFilter.addEventListener('change', function () {
                    applyTableFilters(statusFilter.value);
                });

                if (documentTypeFilter) {
                    documentTypeFilter.addEventListener('change', function () {
                        applyTableFilters(statusFilter.value);
                    });
                }

                if (dateRangeFilter) {
                    dateRangeFilter.addEventListener('change', function () {
                        adjustDateRangeWidth();
                        applyTableFilters(statusFilter.value);
                    });
                }

                Array.prototype.slice.call(document.querySelectorAll('.card-animate')).forEach(function (card) {
                    var title = card.querySelector('.fw-medium');
                    if (!title) return;

                    var label = title.textContent.trim();
                    var kpiKey = card.getAttribute('data-kpi-key') || '';
                    var shouldShowAll = kpiKey === 'total-documents' || kpiKey === 'submitted' || kpiKey === 'total-submitted';
                    var canFilterByStatus = Object.prototype.hasOwnProperty.call(statusFilterMap, label);

                    if (!shouldShowAll && !canFilterByStatus) return;

                    card.style.cursor = 'pointer';
                    card.addEventListener('click', function () {
                        if (shouldShowAll) {
                            statusFilter.selectedIndex = 0;
                            statusFilter.value = @json(__('All Status'));
                            applyTableFilters(statusFilter.value);
                            window.dispatchEvent(new CustomEvent('dashboard:filters-updated'));
                            return;
                        }

                        var nextStatus = statusFilter.value === label
                            ? @json(__('All Status'))
                            : label;
                        if (nextStatus === @json(__('All Status'))) {
                            statusFilter.selectedIndex = 0;
                        }
                        statusFilter.value = nextStatus;
                        applyTableFilters(nextStatus);
                        window.dispatchEvent(new CustomEvent('dashboard:filters-updated'));
                    });
                });

                applyTableFilters(statusFilter.value);
            }
        })();
    </script>
@endsection