@extends('layouts.master')
@section('title')
    {{ __('Requester 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') {{ __('Requester') }} @endslot
        @slot('title') {{ __('Dashboard') }} @endslot
    @endcomponent

    @php
        $viewerId = (int) (Auth::id() ?? 0);
        $viewerRole = (string) (Auth::user()->role ?? '');
        $viewerOrganization = strtolower(trim((string) (Auth::user()->organization_name ?? '')));
        $canReviewDocument = \App\Support\WorkflowPermission::canUseAdminPermission($viewerRole, \App\Support\WorkflowPermission::ADMIN_PERMISSION_REVIEW_DOCUMENT);
        $canRequestDocument = \App\Support\WorkflowPermission::canUseAdminPermission($viewerRole, \App\Support\WorkflowPermission::ADMIN_PERMISSION_REQUEST_DOCUMENT);
        $isSentBackByViewer = function ($request) use ($viewerId) {
            $latestHistory = $request->latestHistory;

            return (string) ($latestHistory?->action ?? '') === \App\Support\WorkflowPermission::ACTION_REQUEST_REVISION
                && $viewerId > 0
                && (int) ($latestHistory?->actor_user_id ?? 0) === $viewerId;
        };
        $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);
        };
        $workStatusFor = function ($request) use ($viewerRole, $viewerId, $isRequesterSideCorrection, $isSentBackByViewer) {
            if ($isSentBackByViewer($request)) {
                return [
                    'label' => 'Sent Back by You',
                    'badge' => \App\Support\WorkflowPermission::dashboardStatusBadgeClass('Sent Back by You'),
                    'title' => '',
                ];
            }

            if ($isRequesterSideCorrection($request)) {
                return [
                    'label' => 'In Progress',
                    'badge' => \App\Support\WorkflowPermission::dashboardStatusBadgeClass('In Progress'),
                    'title' => '',
                ];
            }

            return \App\Support\WorkflowPermission::dashboardStatus($request, $viewerRole, $viewerId);
        };
        $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;
        };
        $personalRequests = $requests->filter(fn ($request) => (int) ($request->user_id ?? 0) === $viewerId)->values();
        $workflowStepsFor = function ($request): array {
            $steps = $request->workflow_steps_override;

            if (!is_array($steps) || count($steps) === 0) {
                $templateSteps = $request->workflowTemplate?->steps ?? [];
                if (is_string($templateSteps)) {
                    $decoded = json_decode($templateSteps, true);
                    $templateSteps = is_array($decoded) ? $decoded : [];
                }
                $steps = is_array($templateSteps) ? $templateSteps : [];
            }

            return collect($steps)
                ->filter(fn ($step) => is_array($step))
                ->sortBy(fn ($step) => (int) ($step['order'] ?? 0))
                ->values()
                ->all();
        };
        $workflowIncludesViewerReviewStage = function ($request) use ($viewerId, $viewerRole, $viewerOrganization, $workflowStepsFor): bool {
            $viewerRoleKey = \App\Support\WorkflowPermission::normalizeRole($viewerRole);

            return collect($workflowStepsFor($request))->contains(function ($step) use ($viewerId, $viewerRoleKey, $viewerOrganization) {
                $permissionType = strtolower(trim((string) ($step['permission_type'] ?? '')));
                $stepType = strtolower(trim((string) ($step['step_type'] ?? '')));
                $actorRole = \App\Support\WorkflowPermission::normalizeRole((string) ($step['actor_role'] ?? ''));
                $stepOrganization = strtolower(trim((string) ($step['organization_name'] ?? $step['office_name'] ?? '')));
                $assignedUserId = (int) ($step['rector_user_id'] ?? $step['assigned_user_id'] ?? 0);
                $isReviewOrApprovalStage = in_array($permissionType, ['reviewer', 'approver'], true)
                    || in_array($stepType, ['organization', 'office', 'vice_rector', 'approval'], true)
                    || in_array($actorRole, [
                        \App\Support\WorkflowPermission::ROLE_RECTOR,
                        \App\Support\WorkflowPermission::ROLE_VICE_RECTOR,
                    ], true);

                if (!$isReviewOrApprovalStage) {
                    return false;
                }

                if ($viewerOrganization !== '' && $stepOrganization !== '' && $stepOrganization === $viewerOrganization) {
                    return true;
                }

                if ($viewerId > 0 && $assignedUserId === $viewerId) {
                    return true;
                }

                return $assignedUserId <= 0
                    && $viewerRoleKey !== ''
                    && $actorRole !== ''
                    && $actorRole === $viewerRoleKey;
            });
        };
        $workRequests = $canReviewDocument
            ? $requests->filter(function ($request) use ($isRequesterSideCorrection, $isSentBackByViewer, $workflowIncludesViewerReviewStage) {
                if ($isRequesterSideCorrection($request) && !$isSentBackByViewer($request)) {
                    return false;
                }

                return $workflowIncludesViewerReviewStage($request);
            })->values()
            : collect();
        $hasDashboardTabs = $canReviewDocument && $canRequestDocument;
        $requestedDashboardTab = (string) request()->query('view', '');
        $activeDashboardTab = $hasDashboardTabs
            ? (in_array($requestedDashboardTab, ['work', 'requests'], true) ? $requestedDashboardTab : 'work')
            : ($canReviewDocument ? 'work' : 'requests');
        $tableRequests = $activeDashboardTab === 'work' ? $workRequests : $personalRequests;
        $dashboardStatusFor = $activeDashboardTab === 'work' ? $workStatusFor : $requestStatusFor;
        $tableStatusCounts = $tableRequests
            ->map(fn ($request) => $dashboardStatusFor($request)['label'])
            ->countBy();
        $tableTitle = $activeDashboardTab === 'work' ? 'Documents for Review' : 'Submitted Documents';
        $emptyTableMessage = $activeDashboardTab === 'work'
            ? 'No work queue documents found.'
            : 'No requests submitted yet.';
        $rowNewUpdateLabels = [
            'Needs Your Review',
            'Need Your Decision',
            'Returned Back',
            'Sent Back to You',
            'Sent Back to My Organization',
        ];
        $rowHighlightForView = function ($request, string $view) use (
            $viewerRole,
            $viewerId,
            $workStatusFor,
            $requestStatusFor,
            $rowNewUpdateLabels
        ): array {
            $status = $view === 'work' ? $workStatusFor($request) : $requestStatusFor($request);
            $baseViewerStatus = \App\Support\WorkflowPermission::dashboardStatus($request, $viewerRole, $viewerId);
            $isOverdue = \App\Support\WorkflowPermission::isDashboardOverdue($request) && (
                $view === 'requests'
                || in_array(
                    (string) ($baseViewerStatus['label'] ?? ''),
                    ['Needs Your Review', 'Need Your Decision'],
                    true
                )
            );
            $isNew = (bool) ($request->dashboard_has_unread_update ?? false)
                && in_array((string) ($status['label'] ?? ''), $rowNewUpdateLabels, true);

            return [
                'overdue' => $isOverdue,
                'unread' => $isNew,
                'highlighted' => $isOverdue || $isNew,
            ];
        };
        $workTabCount = $workRequests
            ->filter(fn ($request) => $rowHighlightForView($request, 'work')['highlighted'])
            ->count();
        $requestTabCount = $personalRequests
            ->filter(fn ($request) => $rowHighlightForView($request, 'requests')['highlighted'])
            ->count();
        $activeRowHighlightResolver = fn ($request) => $rowHighlightForView($request, $activeDashboardTab);

        $workQueueCards = [
            [
                'label' => 'Needs Your Review',
                'count' => (int) ($tableStatusCounts['Needs Your Review'] ?? 0),
                'description' => 'Documents you can act on now',
                'icon' => 'ri-file-search-line',
                'color' => 'primary',
            ],
            [
                'label' => 'Sent Back to My Organization',
                'count' => (int) ($tableStatusCounts['Sent Back to My Organization'] ?? 0),
                'description' => 'Sent back for revision',
                'icon' => 'ri-arrow-go-back-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Sent Back by You',
                'count' => (int) ($tableStatusCounts['Sent Back by You'] ?? 0),
                'description' => 'Waiting for the target to return it',
                'icon' => 'ri-time-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Forwarded',
                'count' => (int) ($tableStatusCounts['Forwarded'] ?? 0),
                'description' => 'Already forwarded to the next step',
                'icon' => 'ri-share-forward-line',
                'color' => 'success',
            ],
            [
                'label' => 'Approved',
                'count' => (int) ($tableStatusCounts['Approved'] ?? 0),
                'description' => 'Approved documents',
                'icon' => 'ri-check-line',
                'color' => 'primary',
            ],
            [
                'label' => 'Overdue SLA',
                'count' => (int) ($tableStatusCounts['Overdue SLA'] ?? 0),
                'description' => 'Past SLA time',
                'icon' => 'ri-alarm-warning-line',
                'color' => 'danger',
            ],
            [
                'label' => 'Completed',
                'count' => (int) ($tableStatusCounts['Completed'] ?? 0),
                'description' => 'Completed work queue documents',
                'icon' => 'ri-check-double-line',
                'color' => 'success',
            ],
            [
                'label' => 'Rejected',
                'count' => (int) ($tableStatusCounts['Rejected'] ?? 0),
                'description' => 'Rejected work queue documents',
                'icon' => 'ri-close-line',
                'color' => 'danger',
            ],
        ];

        $myRequestCards = [
            [
                'label' => 'Total Submitted',
                'count' => $personalRequests->count(),
                'description' => 'Documents you created',
                'icon' => 'ri-file-add-line',
                'color' => 'info',
            ],
            [
                'label' => 'In Progress',
                'count' => (int) ($tableStatusCounts['In Progress'] ?? 0) + (int) ($tableStatusCounts['Forwarded'] ?? 0) + (int) ($tableStatusCounts['Approved'] ?? 0) + (int) ($tableStatusCounts['Needs Your Review'] ?? 0) + (int) ($tableStatusCounts['Overdue SLA'] ?? 0),
                'description' => 'Still moving through workflow',
                'icon' => 'ri-loader-4-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Sent Back to Me',
                'count' => (int) ($tableStatusCounts['Sent Back to You'] ?? 0),
                'description' => 'Needs your revision',
                'icon' => 'ri-arrow-go-back-line',
                'color' => 'warning',
            ],
            [
                'label' => 'Completed',
                'count' => (int) ($tableStatusCounts['Completed'] ?? 0),
                'description' => 'Finished successfully',
                'icon' => 'ri-check-double-line',
                'color' => 'success',
            ],
            [
                'label' => 'Rejected',
                'count' => (int) ($tableStatusCounts['Rejected'] ?? 0),
                'description' => 'Rejected documents',
                'icon' => 'ri-close-line',
                'color' => 'danger',
            ],
        ];
        $workStatusFilterMap = collect($workQueueCards)
            ->mapWithKeys(fn ($card) => [$card['label'] => [$card['label']]])
            ->all();
        $requestStatusFilterMap = [
            'In Progress' => ['In Progress', 'Forwarded', 'Approved', 'Needs Your Review', 'Overdue SLA'],
            'Sent Back to Me' => ['Sent Back to You'],
            'Completed' => ['Completed'],
            'Rejected' => ['Rejected'],
        ];
        $activeStatusFilterMap = $activeDashboardTab === 'work'
            ? $workStatusFilterMap
            : $requestStatusFilterMap;
        $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($workTabCount > 0)
                        <span class="dashboard-tab-count" title="{{ __('Items needing attention') }}">{{ $workTabCount }}</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($requestTabCount > 0)
                        <span class="dashboard-tab-count" title="{{ __('Items needing attention') }}">{{ $requestTabCount }}</span>
                    @endif
                </a>
            </li>
        </ul>
    @endif

    <div class="dashboard-tab-surface {{ $hasDashboardTabs ? 'with-dashboard-tabs' : '' }}">
        @if($canReviewDocument && $activeDashboardTab === 'work')
            <div class="dashboard-kpi-grid dashboard-kpi-grid--eight mb-2">
                @foreach($workQueueCards as $card)
                    @php
                        $cardColor = \App\Support\BadgeStyle::statusColor((string) ($card['label'] ?? ''), (string) ($card['color'] ?? 'primary'));
                    @endphp
                    <div class="col">
                        <div class="card card-animate dashboard-kpi-card" data-dashboard-kpi-card data-kpi-key="{{ \Illuminate\Support\Str::slug((string) ($card['label'] ?? '')) }}">
                            <div class="card-body">
                                <div class="dashboard-kpi-card-content">
                                    <div class="dashboard-kpi-card-top">
                                        <p class="fw-medium text-muted mb-0 dashboard-kpi-card-title">{{ __($card['label']) }}</p>
                                        <div class="dashboard-kpi-card-icon">
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-{{ $cardColor }} rounded-circle">
                                                    <i class="{{ $card['icon'] }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <h2 class="ff-secondary fw-semibold dashboard-kpi-card-value"><span class="counter-value" data-kpi-value data-target="{{ $card['count'] }}">{{ (int) $card['count'] }}</span></h2>
                                    <p class="mb-0 text-muted dashboard-kpi-card-subtext"><span class="badge bg-light text-{{ $cardColor }} mb-0 dashboard-kpi-card-badge">
                                        <i class="{{ $card['icon'] }} align-middle"></i> {{ __($card['description']) }}
                                    </span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        @if($canRequestDocument && $activeDashboardTab === 'requests')
            <div class="dashboard-kpi-grid dashboard-kpi-grid--five mb-2">
                @foreach($myRequestCards as $card)
                    @php
                        $cardColor = \App\Support\BadgeStyle::statusColor((string) ($card['label'] ?? ''), (string) ($card['color'] ?? 'primary'));
                    @endphp
                    <div class="col">
                        <div class="card card-animate dashboard-kpi-card" data-dashboard-kpi-card data-kpi-key="{{ \Illuminate\Support\Str::slug((string) ($card['label'] ?? '')) }}">
                            <div class="card-body">
                                <div class="dashboard-kpi-card-content">
                                    <div class="dashboard-kpi-card-top">
                                        <p class="fw-medium text-muted mb-0 dashboard-kpi-card-title">{{ __($card['label']) }}</p>
                                        <div class="dashboard-kpi-card-icon">
                                            <div class="avatar-sm flex-shrink-0">
                                                <span class="avatar-title bg-{{ $cardColor }} rounded-circle">
                                                    <i class="{{ $card['icon'] }}"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <h2 class="ff-secondary fw-semibold dashboard-kpi-card-value"><span class="counter-value" data-kpi-value data-target="{{ $card['count'] }}">{{ (int) $card['count'] }}</span></h2>
                                    <p class="mb-0 text-muted dashboard-kpi-card-subtext"><span class="badge bg-light text-{{ $cardColor }} mb-0 dashboard-kpi-card-badge">
                                        <i class="{{ $card['icon'] }} align-middle"></i> {{ __($card['description']) }}
                                    </span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <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="$emptyTableMessage"
                :status-filter-map="$activeStatusFilterMap"
                :status-resolver="$dashboardStatusFor"
                :viewer-route-view="$activeDashboardTab"
                :show-create-request-link="$activeDashboardTab === 'requests' && $canRequestDocument"
                :highlight-any-overdue="$activeDashboardTab === 'requests'"
                :row-highlight-resolver="$activeRowHighlightResolver"
            />
        </div>
    </div>
    </div>

    <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="close-modal"></button>
                </div>
                <form class="tablelist-form" autocomplete="off">
                    <div class="modal-body">
                        <div class="mb-3" id="modal-id" style="display: none;">
                            <label for="id-field" class="form-label">{{ __('ID') }}</label>
                            <input type="text" id="id-field" class="form-control" placeholder="{{ __('ID') }}" readonly />
                        </div>

                        <div class="mb-3">
                            <label for="customername-field" class="form-label">{{ __('Customer Name') }}</label>
                            <input type="text" id="customername-field" class="form-control" placeholder="{{ __('Enter Name') }}"
                                required />
                            <div class="invalid-feedback">{{ __('Please enter a customer name.') }}</div>
                        </div>

                        <div class="mb-3">
                            <label for="email-field" class="form-label">{{ __('Email') }}</label>
                            <input type="email" id="email-field" class="form-control" placeholder="{{ __('Enter Email') }}"
                                required />
                            <div class="invalid-feedback">{{ __('Please enter an email.') }}</div>
                        </div>

                        <div class="mb-3">
                            <label for="phone-field" class="form-label">{{ __('Phone') }}</label>
                            <input type="text" id="phone-field" class="form-control" placeholder="{{ __('Enter Phone no.') }}"
                                required />
                            <div class="invalid-feedback">{{ __('Please enter a phone.') }}</div>
                        </div>

                        <div class="mb-3">
                            <label for="date-field" class="form-label">{{ __('Joining Date') }}</label>
                            <input type="text" id="date-field" class="form-control" placeholder="{{ __('Select Date') }}"
                                required />
                            <div class="invalid-feedback">{{ __('Please select a date.') }}</div>
                        </div>

                        <div>
                            <label for="status-field" class="form-label">{{ __('Status') }}</label>
                            <select class="form-control" data-trigger name="status-field" id="status-field" required>
                                <option value="">{{ __('Status') }}</option>
                                <option value="{{ __('Central Organization Review') }}">{{ __('Central Organization Review') }}</option>
                                <option value="{{ __('Completed') }}">{{ __('Completed') }}</option>
                                <option value="{{ __('Rejected') }}">{{ __('Rejected') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="hstack gap-2 justify-content-end">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <button type="submit" class="btn btn-success" id="add-btn">{{ __('Add Customer') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="btn-close"></button>
                </div>
                <div class="modal-body">
                    <div class="mt-2 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                            colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                            <h4>{{ __('Are you Sure ?') }}</h4>
                            <p class="text-muted mx-4 mb-0">{{ __('Are you Sure You want to Remove this Record ?') }}</p>
                        </div>
                    </div>
                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">{{ __('Close') }}</button>
                        <button type="button" class="btn w-sm btn-danger " id="delete-record">{{ __('Yes, Delete It!') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/js/app.js') }}" data-turbo-eval="false"></script>
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.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: ['\u17a2\u17b6','\u1785','\u17a2','\u1796','\u1796\u17d2\u179a','\u179f\u17bb','\u179f'],
                            longhand: ['\u17a2\u17b6\u1791\u17b7\u178f\u17d2\u1799','\u1785\u1793\u17d2\u1791','\u17a2\u1784\u17d2\u1782\u17b6\u179a','\u1796\u17bb\u1792','\u1796\u17d2\u179a\u17a0\u179f\u17d2\u1794\u178f\u17b7\u17cd','\u179f\u17bb\u1780\u17d2\u179a','\u179f\u17c5\u179a\u17cd']
                        },
                        months: {
                            shorthand: ['\u1798\u1780','\u1780\u17bb','\u1798\u17b8','\u1798\u17c1\u179f','\u17a7\u179f','\u1798\u17b7\u1790','\u1780\u1780\u17d2\u1780','\u179f\u17b8','\u1780\u1789','\u178f\u17bb','\u179c\u17b7','\u1792'],
                            longhand: ['\u1798\u1780\u179a\u17b6','\u1780\u17bb\u1798\u17d2\u1797\u17c8','\u1798\u17b8\u1793\u17b6','\u1798\u17c1\u179f\u17b6','\u17a7\u179f\u1797\u17b6','\u1798\u17b7\u1790\u17bb\u1793\u17b6','\u1780\u1780\u17d2\u1780\u178a\u17b6','\u179f\u17b8\u17a0\u17b6','\u1780\u1789\u17d2\u1789\u17b6','\u178f\u17bb\u179b\u17b6','\u179c\u17b7\u1785\u17d2\u1786\u17b7\u1780\u17b6','\u1792\u17d2\u1793\u17bc']
                        },
                        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($activeStatusFilterMap)
                ->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>
    <script>
        (function () {
            var statusFilter = document.getElementById('statusFilter');
            if (!statusFilter || typeof customerList === 'undefined' || document.getElementById('dateRangeFilter')) {
                return;
            }

            statusFilter.addEventListener('change', function () {
                var selected = statusFilter.value;

                customerList.filter(function (item) {
                    if (selected === @json(__('All Status'))) {
                        return true;
                    }

                    var parsed = new DOMParser().parseFromString(item.values().status, 'text/html');
                    var statusText = parsed.body.textContent.trim();
                    return statusText === selected;
                });
            });

            window.isStatus = function (val) {
                switch (val) {
                    case 'Submitted':
                        return '<span class="badge badge-status-submitted text-uppercase">' + @json(__('Submitted')) + '</span>';
                    case 'Organization Review':
                        return '<span class="badge badge-status-needs-review text-uppercase">' + @json(__('Organization Review')) + '</span>';
                    case 'Rector Review':
                        return '<span class="badge badge-status-need-decision text-uppercase">' + @json(__('Rector Review')) + '</span>';
                    case 'Vice Rector Processing':
                        return '<span class="badge badge-status-in-progress text-uppercase">' + @json(__('Vice Rector Processing')) + '</span>';
                    case 'Approved':
                        return '<span class="badge badge-status-approved text-uppercase">' + @json(__('Approved')) + '</span>';
                    case 'Forwarded':
                        return '<span class="badge badge-status-forwarded text-uppercase">' + @json(__('Forwarded')) + '</span>';
                    case 'Needs Your Review':
                        return '<span class="badge badge-status-needs-review text-uppercase">' + @json(__('Needs Your Review')) + '</span>';
                    case 'Need Your Decision':
                        return '<span class="badge badge-status-need-decision text-uppercase">' + @json(__('Need Your Decision')) + '</span>';
                    case 'Sent Back by You':
                        return '<span class="badge badge-status-sent-back-by-you text-uppercase">' + @json(__('Sent Back by You')) + '</span>';
                    case 'Sent Back to You':
                    case 'Sent Back to Me':
                        return '<span class="badge badge-status-sent-back-to-you text-uppercase">' + @json(__('Sent Back to You')) + '</span>';
                    case 'Sent Back to My Organization':
                        return '<span class="badge badge-status-sent-back-organization text-uppercase">' + @json(__('Sent Back to My Organization')) + '</span>';
                    case 'Returned Back':
                        return '<span class="badge badge-status-returned text-uppercase">' + @json(__('Returned Back')) + '</span>';
                    case 'Overdue SLA':
                        return '<span class="badge badge-status-overdue text-uppercase">' + @json(__('Overdue SLA')) + '</span>';
                    case 'Completed':
                        return '<span class="badge badge-status-completed text-uppercase">' + @json(__('Completed')) + '</span>';
                    case 'Rejected':
                        return '<span class="badge badge-status-rejected text-uppercase">' + @json(__('Rejected')) + '</span>';
                    default:
                        return '<span class="badge bg-secondary-subtle text-secondary text-uppercase">' + val + '</span>';
                }
            };
        })();
    </script>
    <script>
        (function () {
            var successMessage = @json(session('success'));
            if (!successMessage || typeof Swal === 'undefined') {
                return;
            }

            Swal.fire({
                icon: 'success',
                title: @json(__('Success')),
                text: successMessage,
                confirmButtonText: @json(__('OK')),
            });
        })();
    </script>
@endsection