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

@section('css')
@if(request()->query('admin_tab') === 'workflow-templates')
<meta name="turbo-cache-control" content="no-cache">
@endif
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<x-admin-dashboard-styles />
<x-dashboard-role-styles />
<style>
    .admin-responsive-filter-toolbar {
        min-width: 0;
    }

    .admin-filter-reset-group {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    .admin-filter-reset-group .dashboard-filter-control {
        flex: 1 1 auto;
        min-width: 0;
    }

    @media (max-width: 991.98px) {
        .admin-responsive-filter-toolbar {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
            align-items: center !important;
        }

        .admin-responsive-filter-toolbar .dashboard-filter-control,
        .admin-responsive-filter-toolbar .dashboard-filter-search,
        .admin-responsive-filter-toolbar .dashboard-filter-date,
        .admin-responsive-filter-toolbar .dashboard-filter-document-type,
        .admin-responsive-filter-toolbar .dashboard-filter-status {
            width: 100%;
            max-width: none;
            min-width: 0;
        }

        .admin-responsive-filter-toolbar > .dropdown.ms-auto {
            width: 100%;
            margin-left: 0 !important;
        }

        .admin-responsive-filter-toolbar > .dropdown > .btn,
        .admin-responsive-filter-toolbar > .btn:not(.btn-icon) {
            width: 100%;
        }

        .admin-responsive-filter-toolbar > .admin-filter-reset-group {
            width: 100%;
        }
    }

    @media (max-width: 575.98px) {
        .admin-responsive-filter-toolbar {
            grid-template-columns: minmax(0, 1fr);
        }

        .admin-responsive-filter-toolbar > .btn-icon {
            width: 34px;
            justify-self: start;
        }
    }
</style>
@endsection

@section('content')
    @php
        $activeAdminTab = $adminTab ?? request()->query('admin_tab');
        if (!in_array($activeAdminTab, ['users', 'workflow-templates', 'document-types', 'organizations', 'role-permissions', 'audit-trails'], true)) {
            $activeAdminTab = null;
        }
        $adminPageTitle = [
            'users' => 'Users',
            'workflow-templates' => 'Workflow Templates',
            'document-types' => 'Document Types',
            'organizations' => 'Organizations',
            'role-permissions' => 'Role Permissions',
            'audit-trails' => 'Audit Logs',
        ][$activeAdminTab] ?? 'Dashboard';
        $locale = strtolower((string) app()->getLocale());
        $localizedOrganizationName = function ($organization) use ($locale) {
            $fallback = trim((string) ($organization->name ?? ''));
            $english = trim((string) ($organization->name_en ?? ''));
            $khmer = trim((string) ($organization->name_kh ?? ''));

            if ($locale === 'kh') {
                return $khmer !== '' ? $khmer : ($english !== '' ? $english : $fallback);
            }

            return $english !== '' ? $english : $fallback;
        };
        $activeOrganizations = ($organizations ?? collect())
            ->where('is_active', true)
            ->values();
        $activeWorkflowTemplates = ($workflowTemplates ?? collect())
            ->where('is_active', true)
            ->values();

        $activeOrganizationOptions = $activeOrganizations
            ->pluck('name')
            ->values();

        $userOrganizationFilterOptions = ($organizations ?? collect())
            ->map(fn ($organization) => [
                'value' => (string) ($organization->name ?? ''),
                'label' => $localizedOrganizationName($organization),
            ])
            ->filter(fn ($organization) => trim($organization['value']) !== '')
            ->values();

        $organizationDisplayMap = $activeOrganizations
            ->mapWithKeys(fn ($organization) => [
                (string) $organization->name => $localizedOrganizationName($organization),
            ])
            ->toArray();

        $allOrganizationDisplayMap = ($organizations ?? collect())
            ->flatMap(function ($organization) use ($localizedOrganizationName) {
                $label = $localizedOrganizationName($organization);

                return collect([
                    (string) ($organization->name ?? '') => $label,
                    (string) ($organization->name_en ?? '') => $label,
                    (string) ($organization->name_kh ?? '') => $label,
                ])->filter(fn ($value, $key) => trim((string) $key) !== '');
            })
            ->toArray();

        $organizationMap = $activeOrganizations->mapWithKeys(fn ($organization) => [
            $organization->name => [
                'id' => $organization->id ?? null,
            ]
        ])->toArray();

        $generalWorkflowOrganizationOptions = $activeOrganizations
            ->map(fn ($organization) => [
                'value' => (string) $organization->name,
                'label' => $localizedOrganizationName($organization),
            ])
            ->values()
            ->toArray();

        $rectorUserOptionsJs = ($rectorUsers ?? collect())
            ->map(fn ($user) => [
                'id' => $user->id,
                'name' => $user->name,
                'role' => strtolower((string) ($user->role ?? 'rector')),
            ])
            ->values()
            ->toArray();
        $rectorOnlyOptionsJs = collect($rectorUserOptionsJs)
            ->filter(fn ($user) => ($user['role'] ?? '') === 'rector')
            ->values()
            ->toArray();
        $viceRectorOnlyOptionsJs = collect($rectorUserOptionsJs)
            ->filter(fn ($user) => ($user['role'] ?? '') === 'vice_rector')
            ->values()
            ->toArray();
        $roleOrganizationOfficerMap = collect($userRoleOptions ?? [])
            ->keys()
            ->mapWithKeys(fn ($role) => [
                (string) $role => \App\Support\WorkflowPermission::canUseAdminPermission(
                    (string) $role,
                    \App\Support\WorkflowPermission::ADMIN_PERMISSION_ORGANIZATION_OFFICER
                ),
            ])
            ->toArray();


        $workflowTemplateKpiCount = (int) ($kpi['workflow_templates'] ?? ($workflowTemplates ?? collect())->count());
        $activeWorkflowTemplateKpiCount = (int) ($kpi['active_workflow_templates'] ?? $activeWorkflowTemplates->count());
        $rolePermissionKpiCount = (int) ($kpi['role_permissions'] ?? (is_countable($rolePermissionRows ?? null) ? count($rolePermissionRows) : 0));
        $auditTrailKpiCount = (int) ($kpi['audit_trails'] ?? (is_countable($auditTrails ?? null) ? count($auditTrails) : 0));
        $adminDocumentChartColors = ['primary', 'success', 'warning', 'info', 'danger', 'secondary'];
        $adminDocumentChartCards = ($requests ?? collect())
            ->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 ($adminDocumentChartColors) {
                $card['color'] = $adminDocumentChartColors[$index % count($adminDocumentChartColors)];
                return $card;
            })
            ->all();
        $adminDocumentChartMax = max(1, (int) collect($adminDocumentChartCards)->max('count'));
    @endphp

    @component('components.breadcrumb')
        @slot('li_1') {{ __('admin') }} @endslot
        @slot('title') {{ __($adminPageTitle) }} @endslot
    @endcomponent

    @if(!in_array($activeAdminTab, ['users', 'workflow-templates', 'document-types', 'organizations', 'role-permissions', 'audit-trails'], true))
    <div class="row g-2 row-cols-1 row-cols-md-2 row-cols-xl-6 row-cols-xxl-6 admin-kpi-grid">
        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="total-documents">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Total Documents') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['total_documents'] ?? 0 }}">{{ (int) ($kpi['total_documents'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-total mb-0">
                                <i class="ri-file-text-line align-middle"></i> {{ __('All records') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-total rounded-circle fs-2">
                                    <i class="ri-file-text-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="in-progress">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('In Progress') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['in_progress'] ?? 0 }}">{{ (int) ($kpi['in_progress'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-in-progress mb-0">
                                {{ __('In progress') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-in-progress rounded-circle fs-2">
                                    <i class="ri-time-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="approved">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Approved') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['approved_documents'] ?? 0 }}">{{ (int) ($kpi['approved_documents'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-approved mb-0">
                                {{ __('Approved documents') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-approved rounded-circle fs-2">
                                    <i class="ri-checkbox-circle-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="overdue-sla">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Overdue SLA') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['overdue'] ?? 0 }}">{{ (int) ($kpi['overdue'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-overdue mb-0">
                                {{ __('Past SLA time') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-overdue rounded-circle fs-2">
                                    <i class="ri-alarm-warning-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="completed">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Completed') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['completed_documents'] ?? 0 }}">{{ (int) ($kpi['completed_documents'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-completed mb-0">
                                {{ __('Completed workflow') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-completed rounded-circle fs-2">
                                    <i class="ri-check-double-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate" data-dashboard-kpi-card data-kpi-key="rejected">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Rejected') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-kpi-value data-target="{{ $kpi['rejected'] ?? 0 }}">{{ (int) ($kpi['rejected'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-status-rejected mb-0">
                                {{ __('Rejected documents') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-status-rejected rounded-circle fs-2">
                                    <i class="ri-close-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="total-users" data-admin-tab="users" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Total Users') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $kpi['total_users'] ?? 0 }}">{{ (int) ($kpi['total_users'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-secondary mb-0">
                                {{ __('Registered users') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary rounded-circle fs-2">
                                    <i class="ri-team-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="organizations" data-admin-tab="organizations" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Organization') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $kpi['organization_count'] ?? 0 }}">{{ (int) ($kpi['organization_count'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-secondary-subtle text-secondary mb-0">
                                {{ __('Registered organizations') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary rounded-circle fs-2">
                                    <i class="ri-building-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="document-types" data-admin-tab="document-types" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Document Types') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $kpi['document_types'] ?? 0 }}">{{ (int) ($kpi['document_types'] ?? 0) }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-info mb-0">
                                {{ __('Unique categories') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info rounded-circle fs-2">
                                    <i class="ri-folders-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="workflow-templates" data-admin-tab="workflow-templates" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Workflow Templates') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $workflowTemplateKpiCount }}">{{ (int) $workflowTemplateKpiCount }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-primary mb-0">
                                {{ __('Templates in use') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary rounded-circle fs-2">
                                    <i class="ri-git-branch-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="role-permissions" data-admin-tab="role-permissions" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Role Permissions') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $rolePermissionKpiCount }}">{{ (int) $rolePermissionKpiCount }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-light text-secondary mb-0">
                                {{ __('Configured roles') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary rounded-circle fs-2">
                                    <i class="ri-shield-user-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card card-animate kpi-card-link" data-dashboard-kpi-card data-kpi-key="audit-trails" data-admin-tab="audit-trails" role="link" tabindex="0" style="cursor:pointer;">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <p class="fw-medium text-muted mb-0">{{ __('Audit Logs') }}</p>
                            <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value" data-target="{{ $auditTrailKpiCount }}">{{ (int) $auditTrailKpiCount }}</span></h2>
                            <p class="mb-0 text-muted"><span class="badge bg-secondary-subtle text-secondary mb-0">
                                {{ __('System activity') }}
                            </span></p>
                        </div>
                        <div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary rounded-circle fs-2">
                                    <i class="ri-history-line"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <x-document-type-bar-chart :cards="$adminDocumentChartCards" :max="$adminDocumentChartMax" />
    @endif

    @if($activeAdminTab === 'role-permissions')
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3">
                            <div>
                                <h4 class="card-title mb-1">{{ __('Role Permissions') }}</h4>
                                <p class="text-muted mb-0">{{ __('Enable or disable admin features for each role from one place.') }}</p>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar ms-xl-auto">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="rolePermissionsTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreateRolePermission">
                                    <i class="ri-add-line me-1"></i>{{ __('Add Role') }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        @php
                            $permissionRows = $rolePermissionRows ?? [];
                            $permissionLabels = $rolePermissionLabels ?? [];
                            $roleNames = $roleDisplayNames ?? [];
                            $roleStates = $roleActiveStates ?? [];
                            $roleMeta = $rolePermissionMeta ?? [];
                            $systemRoleKeys = \App\Support\WorkflowPermission::systemRoleKeys();
                            $permissionLockedRoleKeys = \App\Support\WorkflowPermission::permissionLockedRoleKeys();
                            $permissionSubtitles = [
                                'can_request_document' => __('Create and submit new document requests.'),
                                'can_review_document' => __('Read and approve/reject a document at the assigned workflow step.'),
                                'is_organization_officer' => __('Requires an organization assignment and receives organization-routed workflow work.'),
                                'register_document_number' => __('Register registry and finished document numbers for requests.'),
                                'manage_users' => __('Manage user accounts, status, and role assignments.'),
                                'manage_organizations' => __('Create and maintain organization entries.'),
                                'manage_document_types' => __('Set document types, forms, and submitter roles.'),
                                'manage_workflow_templates' => __('Configure workflow paths and approval steps.'),
                                'manage_role_permissions' => __('Control which roles can use each admin feature.'),
                                'view_audit_trails' => __('View admin, workflow, and system activity history.'),
                                'use_priority_handling' => __('Enable priority processing for urgent requests.'),
                            ];
                            $permissionSections = [
                                __('Document Access') => [
                                    'can_request_document',
                                    'can_review_document',
                                    'is_organization_officer',
                                    'register_document_number',
                                ],
                                __('Admin Management') => [
                                    'manage_users',
                                    'manage_organizations',
                                    'manage_document_types',
                                    'manage_workflow_templates',
                                    'manage_role_permissions',
                                    'view_audit_trails',
                                ],
                                __('Workflow Tools') => [
                                    'use_priority_handling',
                                ],
                            ];
                        @endphp

                        <form id="rolePermissionsForm" method="POST" action="{{ route('admin.role-permissions.update') }}">
                            @csrf

                            @php
                                $filteredPermissionRows = $permissionRows;
                            @endphp

                            <x-dashboard-data-table
                                id="rolePermissionsTable"
                                storage-key="admin-role-permissions-columns"
                                :resizable="false"
                                :resizable-column-keys="['permission']"
                                :column-tools="false"
                                :columns="array_merge(
                                    ['permission' => 320],
                                    collect(array_keys($filteredPermissionRows))->mapWithKeys(fn ($roleKey) => [$roleKey => 180])->all()
                                )">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="min-width: 220px;" data-export-label="{{ __('Permission') }}">
                                                <span class="fw-semibold text-dark">{{ __('Permission') }}</span>
                                                <div class="small text-muted">
                                                    {{ __('Enable or disable each permission by role.') }}
                                                </div>
                                            </th>

                                            @foreach($filteredPermissionRows as $roleKey => $permissions)
                                                @php
                                                    $isSystemRole = in_array($roleKey, $systemRoleKeys, true);
                                                    $isPermissionLockedRole = in_array($roleKey, $permissionLockedRoleKeys, true);
                                                    $isActiveRole = (bool) ($roleStates[$roleKey] ?? true);
                                                    $roleFormId = 'roleActionForm' . md5($roleKey);
                                                @endphp
                                                <th class="text-center" data-export-label="{{ __($roleNames[$roleKey] ?? $roleKey) }}">
                                                    <div class="d-inline-flex align-items-center justify-content-center gap-1">
                                                        <span class="fw-semibold text-dark">
                                                            {{ __($roleNames[$roleKey] ?? $roleKey) }}
                                                        </span>
                                                        <div class="dropdown">
                                                            <button class="btn btn-sm p-0 border-0 bg-transparent shadow-none text-muted admin-action-menu-trigger role-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Role actions') }}">
                                                                <i class="ri-more-2-fill"></i>
                                                            </button>
                                                            <ul class="dropdown-menu dropdown-menu-end">
                                                                <li>
                                                                    <button
                                                                        type="button"
                                                                        class="dropdown-item js-edit-role-permission"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#modalEditRolePermission"
                                                                        data-role="{{ $roleKey }}"
                                                                        data-system="{{ $isSystemRole ? '1' : '0' }}"
                                                                        data-permission-locked="{{ $isPermissionLockedRole && $roleKey !== \App\Support\WorkflowPermission::ROLE_ADMIN ? '1' : '0' }}"
                                                                        data-name-en="{{ $roleMeta[$roleKey]['name_en'] ?? ($roleNames[$roleKey] ?? $roleKey) }}"
                                                                        data-name-kh="{{ $roleMeta[$roleKey]['name_kh'] ?? ($roleNames[$roleKey] ?? $roleKey) }}"
                                                                        data-permissions='@json(collect($permissions)->filter()->keys()->values())'
                                                                    >
                                                                        {{ __('Edit') }}
                                                                    </button>
                                                                </li>
                                                                @unless($isSystemRole)
                                                                    <li>
                                                                        <button
                                                                            type="submit"
                                                                            form="{{ $roleFormId }}Delete"
                                                                            class="dropdown-item text-danger"
                                                                            data-confirm="{{ __('Delete this role? This only works when no users are assigned to it.') }}"
                                                                        >
                                                                            {{ __('Delete') }}
                                                                        </button>
                                                                    </li>
                                                                @endunless
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @if(empty($filteredPermissionRows))
                                            <tr>
                                                <td colspan="{{ 1 + count($filteredPermissionRows) }}"
                                                    class="text-center text-muted py-4">
                                                    {{ __('No roles available for permission editing.') }}
                                                </td>
                                            </tr>
                                        @else
                                            @foreach($permissionSections as $sectionLabel => $sectionPermissions)
                                                @php
                                                    $sectionKey = md5((string) $sectionLabel);
                                                    $visibleSectionPermissions = collect($sectionPermissions)
                                                        ->filter(fn ($permissionKey) => array_key_exists($permissionKey, $permissionLabels) && $permissionKey !== 'manage_role_permissions')
                                                        ->values();
                                                @endphp
                                                @continue($visibleSectionPermissions->isEmpty())

                                                <tr class="role-permission-section-row" data-section="{{ $sectionKey }}">
                                                    <td colspan="{{ 1 + count($filteredPermissionRows) }}" class="bg-light text-uppercase small fw-semibold text-muted">
                                                        {{ $sectionLabel }}
                                                    </td>
                                                </tr>

                                                @foreach($visibleSectionPermissions as $permissionKey)
                                                    @php $permissionLabel = $permissionLabels[$permissionKey]; @endphp
                                                    <tr class="role-permission-row" data-section="{{ $sectionKey }}">
                                                        <td>
                                                            <span class="fw-semibold">
                                                                {{ __($permissionLabel) }}
                                                            </span>
                                                            <div class="small text-muted">
                                                                {{ $permissionSubtitles[$permissionKey] ?? __('Configure access for this feature.') }}
                                                            </div>
                                                        </td>

                                                        @foreach($filteredPermissionRows as $roleKey => $permissions)
                                                            @php
                                                                $isPermissionLockedRole = in_array($roleKey, $permissionLockedRoleKeys, true);
                                                                $isInactiveRole = !(bool) ($roleStates[$roleKey] ?? true);
                                                                $checked = (bool) ($permissions[$permissionKey] ?? false);
                                                            @endphp

                                                            <td class="text-center">
                                                                <div class="form-check form-switch d-inline-flex justify-content-center">
                                                                    <input
                                                                        class="form-check-input"
                                                                        type="checkbox"
                                                                        name="role_permissions[{{ $roleKey }}][]"
                                                                        value="{{ $permissionKey }}"
                                                                        @checked($checked)
                                                                        @disabled($isPermissionLockedRole || $isInactiveRole)
                                                                    >
                                                                </div>
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            @endforeach
                                        @endif
                                    </tbody>
                            </x-dashboard-data-table>

                            <div class="d-flex justify-content-end">
                                <div class="pagination-wrap hstack gap-2" id="rolePermissionsPaginationWrap" style="display:none;">
                                    <a class="page-item pagination-prev" id="rolePermissionsPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                                    <ul class="pagination listjs-pagination mb-0" id="rolePermissionsPageNumbers"></ul>
                                    <a class="page-item pagination-next" id="rolePermissionsPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-primary" id="rolePermissionsSaveBtn">
                                    <i class="ri-save-line me-1"></i>
                                    {{ __('Save') }}
                                </button>
                            </div>
                        </form>

                        @foreach($filteredPermissionRows as $roleKey => $permissions)
                            @continue(in_array($roleKey, $systemRoleKeys, true))
                            @php $roleFormId = 'roleActionForm' . md5($roleKey); @endphp
                            <form id="{{ $roleFormId }}Toggle" method="POST" action="{{ route('admin.role-permissions.roles.toggle', ['role' => $roleKey]) }}" class="d-none role-action-confirm-form">
                                @csrf
                                @method('PATCH')
                            </form>
                            <form id="{{ $roleFormId }}Delete" method="POST" action="{{ route('admin.role-permissions.roles.destroy', ['role' => $roleKey]) }}" class="d-none role-action-confirm-form">
                                @csrf
                                @method('DELETE')
                            </form>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalCreateRolePermission" tabindex="-1" aria-labelledby="modalCreateRolePermissionLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <form method="POST" action="{{ route('admin.role-permissions.roles.store') }}" id="createRolePermissionForm" data-role-save-form="1">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalCreateRolePermissionLabel">
                                <i class="ri-shield-user-line me-1"></i>{{ __('Add Role') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('English Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_en" class="form-control" maxlength="100" placeholder="{{ __('e.g. Legal Reviewer') }}" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('Khmer Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_kh" class="form-control" maxlength="100" placeholder="{{ __('Enter Khmer role name') }}" required>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
                                <div>
                                    <h6 class="mb-1">{{ __('Permissions') }}</h6>
                                    <p class="text-muted mb-0">{{ __('Choose what this role can do before saving.') }}</p>
                                </div>
                            </div>

                            @foreach($permissionSections as $sectionLabel => $sectionPermissions)
                                @php
                                    $visibleSectionPermissions = collect($sectionPermissions)
                                        ->filter(fn ($permissionKey) => array_key_exists($permissionKey, $permissionLabels))
                                        ->values();
                                @endphp
                                @continue($visibleSectionPermissions->isEmpty())

                                <div class="mb-4">
                                    <div class="fw-semibold text-muted text-uppercase small mb-2">{{ $sectionLabel }}</div>
                                    <div class="row g-3">
                                        @foreach($visibleSectionPermissions as $permissionKey)
                                            @php
                                                $permissionLabel = $permissionLabels[$permissionKey];
                                                $isLockedPermission = $permissionKey === 'manage_role_permissions';
                                            @endphp
                                            <div class="col-md-6">
                                                <div class="border rounded p-3 h-100">
                                                    <div class="d-flex align-items-start justify-content-between gap-3">
                                                        <div>
                                                            <div class="fw-semibold text-dark">{{ __($permissionLabel) }}</div>
                                                            <div class="small text-muted">{{ $permissionSubtitles[$permissionKey] ?? __('Configure access for this feature.') }}</div>
                                                        </div>
                                                        <div class="form-check form-switch m-0">
                                                            <input
                                                                class="form-check-input"
                                                                type="checkbox"
                                                                name="permissions[]"
                                                                value="{{ $permissionKey }}"
                                                                @disabled($isLockedPermission)
                                                            >
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line me-1"></i>{{ __('Save Role') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalEditRolePermission" tabindex="-1" aria-labelledby="modalEditRolePermissionLabel" aria-hidden="true" data-update-url-template="{{ route('admin.role-permissions.roles.update', ['role' => '__ROLE__']) }}">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <form method="POST" action="" id="editRolePermissionForm" data-role-save-form="1">
                        @csrf
                        @method('PUT')
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEditRolePermissionLabel">
                                <i class="ri-shield-user-line me-1"></i>{{ __('Edit Role') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('English Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_en" id="editRoleNameEn" class="form-control" maxlength="100" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">{{ __('Khmer Name') }} <span class="text-danger">*</span></label>
                                    <input type="text" name="name_kh" id="editRoleNameKh" class="form-control" maxlength="100" required>
                                </div>
                            </div>

                            <hr class="my-4">

                            <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
                                <div>
                                    <h6 class="mb-1">{{ __('Permissions') }}</h6>
                                    <p class="text-muted mb-0">{{ __('Update what this role can do.') }}</p>
                                </div>
                            </div>

                            <div id="editRolePermissionsLockedNotice" class="alert alert-info py-2 d-none" role="status">
                                {{ __('Permissions for this role are fixed and cannot be changed.') }}
                            </div>

                            <fieldset id="editRolePermissionsFieldset">
                            @foreach($permissionSections as $sectionLabel => $sectionPermissions)
                                @php
                                    $visibleSectionPermissions = collect($sectionPermissions)
                                        ->filter(fn ($permissionKey) => array_key_exists($permissionKey, $permissionLabels))
                                        ->values();
                                @endphp
                                @continue($visibleSectionPermissions->isEmpty())

                                <div class="mb-4">
                                    <div class="fw-semibold text-muted text-uppercase small mb-2">{{ $sectionLabel }}</div>
                                    <div class="row g-3">
                                        @foreach($visibleSectionPermissions as $permissionKey)
                                            @php
                                                $permissionLabel = $permissionLabels[$permissionKey];
                                                $isLockedPermission = $permissionKey === 'manage_role_permissions';
                                            @endphp
                                            <div class="col-md-6">
                                                <div class="border rounded p-3 h-100">
                                                    <div class="d-flex align-items-start justify-content-between gap-3">
                                                        <div>
                                                            <div class="fw-semibold text-dark">{{ __($permissionLabel) }}</div>
                                                            <div class="small text-muted">{{ $permissionSubtitles[$permissionKey] ?? __('Configure access for this feature.') }}</div>
                                                        </div>
                                                        <div class="form-check form-switch m-0">
                                                            <input
                                                                class="form-check-input js-edit-role-permission-toggle"
                                                                type="checkbox"
                                                                name="permissions[]"
                                                                value="{{ $permissionKey }}"
                                                                data-locked-permission="{{ $isLockedPermission ? '1' : '0' }}"
                                                                @disabled($isLockedPermission)
                                                            >
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">
                                <i class="ri-save-line me-1"></i>{{ __('Save Changes') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @elseif($activeAdminTab === 'audit-trails')
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3">
                    <div>
                        <h4 class="card-title mb-1">{{ __('Audit Logs') }}</h4>
                        <p class="text-muted mb-0">{{ __('Review important system, admin, and workflow actions.') }}</p>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="row g-4 mb-3">
                    <div class="col-sm-12">
                        <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar">
                            <div class="search-box dashboard-filter-control dashboard-filter-search">
                                <input type="text" class="form-control form-control-sm search" placeholder="{{ __('Search audit logs...') }}">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                            <div class="input-group input-group-sm dashboard-filter-control dashboard-filter-date">
                                <span class="input-group-text"><i class="ri-calendar-2-line"></i></span>
                                <input type="text" class="form-control" id="auditDateRangeFilter" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="{{ __('Pick a date') }}" title="{{ __('Date Range') }}" aria-label="{{ __('Date Range') }}" readonly>
                            </div>
                            <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-document-type" id="auditActionFilter" title="{{ __('Action Type') }}" aria-label="{{ __('Action Type') }}">
                                <option value="all">{{ __('All Action Types') }}</option>
                            </select>
                            <div class="admin-filter-reset-group">
                                <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="auditActivityFilter" title="{{ __('Activity Type') }}" aria-label="{{ __('Activity Type') }}">
                                    <option value="all">{{ __('All Activity Types') }}</option>
                                </select>
                                <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="auditResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}">
                                    <i class="ri-refresh-line"></i>
                                </button>
                            </div>
                            <div class="dropdown ms-auto">
                                <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" id="auditExportDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="auditExportDropdownBtn">
                                    <li><button class="dropdown-item admin-table-export" type="button" data-table-id="auditTrailTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                    <li><button class="dropdown-item admin-table-export" type="button" data-table-id="auditTrailTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                    <li><button class="dropdown-item admin-table-export" type="button" data-table-id="auditTrailTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <x-dashboard-data-table
                    id="auditTrailTable"
                    storage-key="admin-audit-columns"
                    min-width="1280"
                    :columns="[
                        'audit_date' => 210,
                        'audit_user' => 180,
                        'audit_action_type' => 180,
                        'audit_activity_type' => 190,
                        'audit_detail' => 520,
                    ]">
                        <thead class="table-light text-uppercase">
                            <tr>
                                <th class="sort" data-sort="audit_date">{{ __('Date') }}</th>
                                <th class="sort" data-sort="audit_user">{{ __('Username') }}</th>
                                <th class="sort" data-sort="audit_action_type">{{ __('Action Type') }}</th>
                                <th class="sort" data-sort="audit_activity_type">{{ __('Activity Type') }}</th>
                                <th class="sort" data-sort="audit_detail">{{ __('Detail') }}</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @forelse(($auditTrails ?? collect()) as $audit)
                                @php
                                    $oldValues = is_array($audit->old_values) ? $audit->old_values : [];
                                    $newValues = is_array($audit->new_values) ? $audit->new_values : [];
                                    $metadata = is_array($audit->metadata) ? $audit->metadata : [];
                                    $action = (string) $audit->action;
                                    $actorName = $audit->actor_name ?: optional($audit->actor)->name ?: __('System');
                                    $targetType = trim((string) ($audit->target_type ?? ''));
                                    $targetUser = $targetType === 'User' ? ($auditTargetUsers[$audit->target_id] ?? null) : null;
                                    $localizedTargetNames = $locale === 'kh'
                                        ? [
                                            $newValues['name_kh'] ?? null,
                                            $oldValues['name_kh'] ?? null,
                                            $newValues['name_en'] ?? null,
                                            $oldValues['name_en'] ?? null,
                                            $newValues['name'] ?? null,
                                            $oldValues['name'] ?? null,
                                        ]
                                        : [
                                            $newValues['name_en'] ?? null,
                                            $oldValues['name_en'] ?? null,
                                            $newValues['name'] ?? null,
                                            $oldValues['name'] ?? null,
                                            $newValues['name_kh'] ?? null,
                                            $oldValues['name_kh'] ?? null,
                                        ];
                                    $targetName = trim((string) collect($localizedTargetNames)
                                        ->first(fn ($value) => trim((string) $value) !== '', (
                                            $newValues['email'] ??
                                            $oldValues['email'] ??
                                            $newValues['role'] ??
                                            $oldValues['role'] ??
                                            optional($targetUser)->name ??
                                            optional($targetUser)->email ??
                                            optional($targetUser)->role ??
                                            $metadata['document_name'] ??
                                            $metadata['document_code'] ??
                                            ''
                                        )));
                                    $targetLabel = $targetName !== '' ? $targetName : ($targetType !== '' ? __($targetType) : __('N/A'));

                                    $actionLabel = __(ucwords(str_replace('_', ' ', $action)));
                                    $formatAuditField = function ($field) {
                                        return match ((string) $field) {
                                            'name_en' => __('English Name'),
                                            'name_kh' => __('Khmer Name'),
                                            default => __(ucwords(str_replace(['_', '-'], ' ', (string) $field))),
                                        };
                                    };
                                    $formatAuditValue = function ($value) {
                                        if (is_bool($value)) {
                                            return __($value ? 'Yes' : 'No');
                                        }

                                        if ($value === null || $value === '') {
                                            return __('Empty');
                                        }

                                        if (is_array($value)) {
                                            return implode(', ', array_map(fn ($item) => is_scalar($item) ? (string) $item : json_encode($item, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), $value));
                                        }

                                        return (string) $value;
                                    };
                                    $changedFieldKey = collect($newValues)
                                        ->keys()
                                        ->first(function ($key) use ($oldValues, $newValues) {
                                            return !in_array((string) $key, ['created_at', 'updated_at'], true)
                                                && array_key_exists($key, $oldValues)
                                                && $oldValues[$key] !== $newValues[$key];
                                        });
                                    $changeText = $changedFieldKey !== null
                                        ? __(':field changed from :old to :new.', [
                                            'field' => $formatAuditField($changedFieldKey),
                                            'old' => $formatAuditValue($oldValues[$changedFieldKey] ?? null),
                                            'new' => $formatAuditValue($newValues[$changedFieldKey] ?? null),
                                        ])
                                        : '';
                                    $workflowAction = strtolower((string) ($newValues['action'] ?? $metadata['action'] ?? ''));
                                    if ((bool) ($metadata['returned_back'] ?? false)) {
                                        $workflowAction = 'return_back';
                                    }
                                    $workflowVerb = match ($workflowAction) {
                                        'forward', 'forward_to_rector' => __('forwarded'),
                                        'send_back', 'request_revision' => __('sent back'),
                                        'return_back' => __('returned back'),
                                        'approve', 'approve_document' => __('approved'),
                                        'reject', 'reject_document' => __('rejected'),
                                        'complete', 'complete_post_approval_processing', 'mark_requirements_done' => __('completed'),
                                        'request_more_information' => __('requested more information for'),
                                        default => __('updated'),
                                    };
                                    $formatWorkflowState = function ($state) {
                                        $state = trim((string) $state);

                                        if ($state === '') {
                                            return __('Unknown Step');
                                        }

                                        return __(ucwords(str_replace(['_', '-'], ' ', $state)));
                                    };
                                    $fromStateLabel = $formatWorkflowState($metadata['from_state'] ?? '');
                                    $toStateLabel = $formatWorkflowState($metadata['to_state'] ?? '');
                                    $workflowText = match ($workflowAction) {
                                        'forward', 'forward_to_rector',
                                        'send_back', 'request_revision',
                                        'return_back',
                                        'approve', 'approve_document',
                                        'reject', 'reject_document',
                                        'complete', 'complete_post_approval_processing', 'mark_requirements_done',
                                        'request_more_information' => __(':action document :document from :from to :to.', [
                                            'action' => $workflowVerb,
                                            'document' => $targetLabel,
                                            'from' => $fromStateLabel,
                                            'to' => $toStateLabel,
                                        ]),
                                        default => __('Updated workflow for document :document.', ['document' => $targetLabel]),
                                    };
                                    $workflowText = trim($workflowText);

                                    $actionType = match ($action) {
                                        'user_created', 'role_created', 'organization_created', 'document_type_created', 'workflow_template_created', 'document_request_created' => __('Create'),
                                        'user_updated', 'role_updated', 'role_permissions_updated', 'role_permissions_bulk_updated', 'register_document_number',
                                        'organization_updated', 'document_type_updated', 'workflow_template_updated' => __('Update'),
                                        'user_status_toggled', 'role_status_toggled', 'organization_status_toggled',
                                        'document_type_status_toggled', 'workflow_template_status_toggled' => __('Status Change'),
                                        'user_password_reset' => __('Reset Password'),
                                        'user_deleted', 'role_deleted', 'organization_deleted', 'document_type_deleted', 'workflow_template_deleted' => __('Delete'),
                                        'workflow_transition' => match ($workflowAction) {
                                            'forward', 'forward_to_rector' => __('Forwarded'),
                                            'send_back', 'request_revision' => __('Sent Back'),
                                            'return_back' => __('Returned Back'),
                                            'approve', 'approve_document' => __('Approved'),
                                            'reject', 'reject_document' => __('Rejected'),
                                            'complete', 'complete_post_approval_processing', 'mark_requirements_done' => __('Completed'),
                                            'request_more_information' => __('Requested More Information'),
                                            default => __('Update'),
                                        },
                                        default => $actionLabel,
                                    };

                                    $activityType = match ($action) {
                                        'user_created', 'user_updated', 'user_status_toggled', 'user_password_reset', 'user_deleted' => __('User'),
                                        'role_created', 'role_updated', 'role_status_toggled', 'role_deleted',
                                        'role_permissions_updated', 'role_permissions_bulk_updated' => __('Role'),
                                        'organization_created', 'organization_updated', 'organization_status_toggled', 'organization_deleted' => __('Organization'),
                                        'document_type_created', 'document_type_updated', 'document_type_status_toggled', 'document_type_deleted' => __('Document Type'),
                                        'workflow_template_created', 'workflow_template_updated', 'workflow_template_status_toggled', 'workflow_template_deleted' => __('Workflow Template'),
                                        'workflow_transition', 'document_request_created', 'register_document_number' => __('Document'),
                                        default => $targetType !== '' ? __($targetType) : __('System'),
                                    };

                                    $actionBadgeKey = match ($action) {
                                        'user_created', 'role_created', 'organization_created', 'document_type_created', 'workflow_template_created', 'document_request_created' => 'create',
                                        'user_updated', 'role_updated', 'role_permissions_updated', 'role_permissions_bulk_updated', 'register_document_number',
                                        'organization_updated', 'document_type_updated', 'workflow_template_updated' => 'update',
                                        'user_status_toggled', 'role_status_toggled', 'organization_status_toggled',
                                        'document_type_status_toggled', 'workflow_template_status_toggled' => 'status_change',
                                        'user_password_reset' => 'reset_password',
                                        'user_deleted', 'role_deleted', 'organization_deleted', 'document_type_deleted', 'workflow_template_deleted' => 'delete',
                                        'workflow_transition' => match ($workflowAction) {
                                            'forward', 'forward_to_rector' => 'forwarded',
                                            'send_back', 'request_revision' => 'send_back',
                                            'return_back' => 'returned_back',
                                            'approve', 'approve_document' => 'approved',
                                            'reject', 'reject_document' => 'rejected',
                                            'complete', 'complete_post_approval_processing', 'mark_requirements_done' => 'completed',
                                            'request_more_information' => 'commented',
                                            default => 'update',
                                        },
                                        default => $action,
                                    };

                                    $activityBadgeKey = match ($action) {
                                        'user_created', 'user_updated', 'user_status_toggled', 'user_password_reset', 'user_deleted' => 'user',
                                        'role_created', 'role_updated', 'role_status_toggled', 'role_deleted',
                                        'role_permissions_updated', 'role_permissions_bulk_updated' => 'role',
                                        'organization_created', 'organization_updated', 'organization_status_toggled', 'organization_deleted' => 'organization',
                                        'document_type_created', 'document_type_updated', 'document_type_status_toggled', 'document_type_deleted' => 'document_type',
                                        'workflow_template_created', 'workflow_template_updated', 'workflow_template_status_toggled', 'workflow_template_deleted' => 'workflow_template',
                                        'workflow_transition', 'document_request_created', 'register_document_number' => 'document',
                                        default => $targetType !== '' ? $targetType : 'audit',
                                    };

                                    $changedFieldLabel = $changedFieldKey !== null ? $formatAuditField($changedFieldKey) : '';
                                    $detailText = match ($action) {
                                        'user_created' => __('Created user [:target]', ['target' => $targetLabel]),
                                        'user_updated' => $changedFieldLabel !== '' ? __('Updated user :field [:target]', ['field' => strtolower($changedFieldLabel), 'target' => $targetLabel]) : __('Updated user [:target]', ['target' => $targetLabel]),
                                        'user_status_toggled' => __('Changed user status [:target]', ['target' => $targetLabel]),
                                        'user_password_reset' => __('Reset password for user [:target]', ['target' => $targetLabel]),
                                        'user_deleted' => __('Deleted user [:target]', ['target' => $targetLabel]),
                                        'role_created' => __('Created role [:target]', ['target' => $targetLabel]),
                                        'role_updated' => $changedFieldLabel !== '' ? __('Updated role :field [:target]', ['field' => strtolower($changedFieldLabel), 'target' => $targetLabel]) : __('Updated role [:target]', ['target' => $targetLabel]),
                                        'role_status_toggled' => __('Changed role status [:target]', ['target' => $targetLabel]),
                                        'role_deleted' => __('Deleted role [:target]', ['target' => $targetLabel]),
                                        'role_permissions_updated', 'role_permissions_bulk_updated' => __('Updated role permissions'),
                                        'organization_created' => __('Created organization [:target]', ['target' => $targetLabel]),
                                        'organization_updated' => $changedFieldLabel !== '' ? __('Updated organization :field [:target]', ['field' => strtolower($changedFieldLabel), 'target' => $targetLabel]) : __('Updated organization [:target]', ['target' => $targetLabel]),
                                        'organization_status_toggled' => __('Changed organization status [:target]', ['target' => $targetLabel]),
                                        'organization_deleted' => __('Deleted organization [:target]', ['target' => $targetLabel]),
                                        'document_type_created' => __('Created document type [:target]', ['target' => $targetLabel]),
                                        'document_type_updated' => $changedFieldLabel !== '' ? __('Updated document type :field [:target]', ['field' => strtolower($changedFieldLabel), 'target' => $targetLabel]) : __('Updated document type [:target]', ['target' => $targetLabel]),
                                        'document_type_status_toggled' => __('Changed document type status [:target]', ['target' => $targetLabel]),
                                        'document_type_deleted' => __('Deleted document type [:target]', ['target' => $targetLabel]),
                                        'workflow_template_created' => __('Created workflow template [:target]', ['target' => $targetLabel]),
                                        'workflow_template_updated' => $changedFieldLabel !== '' ? __('Updated workflow template :field [:target]', ['field' => strtolower($changedFieldLabel), 'target' => $targetLabel]) : __('Updated workflow template [:target]', ['target' => $targetLabel]),
                                        'workflow_template_status_toggled' => __('Changed workflow template status [:target]', ['target' => $targetLabel]),
                                        'workflow_template_deleted' => __('Deleted workflow template [:target]', ['target' => $targetLabel]),
                                        'workflow_transition' => __(':action document [:document] from :from to :to', [
                                            'action' => ucfirst((string) $workflowVerb),
                                            'document' => $targetLabel,
                                            'from' => $fromStateLabel,
                                            'to' => $toStateLabel,
                                        ]),
                                        'document_request_created' => __('Created document request [:target]', ['target' => $targetLabel]),
                                        'register_document_number' => __('Registered document number [:number] for document [:target]', [
                                            'number' => (string) data_get($newValues, 'registry_document_number', ''),
                                            'target' => $targetLabel,
                                        ]),
                                        default => __('Performed :action [:target]', [
                                            'action' => strtolower($actionLabel),
                                            'target' => $targetLabel,
                                        ]),
                                    };
                                @endphp
                                <tr>
                                    <td class="audit_date" data-timestamp="{{ optional($audit->created_at)->timestamp }}">
                                        {{ \App\Support\DateFormatter::localized($audit->created_at, 'd F, Y h:i A') }}
                                    </td>
                                    <td class="audit_user">
                                        <div class="fw-medium">{{ $actorName }}</div>
                                    </td>
                                    <td class="audit_action_type">
                                        <x-ui-badge type="action" :value="$actionBadgeKey" :label="$actionType" />
                                    </td>
                                    <td class="audit_activity_type">
                                        <x-ui-badge type="activity" :value="$activityBadgeKey" :label="$activityType" />
                                    </td>
                                    <td class="audit_detail text-wrap">
                                        <div class="fw-medium text-dark">{{ $detailText }}</div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">{{ __('No audit trail records yet.') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                </x-dashboard-data-table>
                <div class="d-flex justify-content-end">
                    <div class="pagination-wrap hstack gap-2" id="auditPaginationWrap" style="display:none;">
                        <a class="page-item pagination-prev" id="auditPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                        <ul class="pagination listjs-pagination mb-0" id="auditPageNumbers"></ul>
                        <a class="page-item pagination-next" id="auditPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                    </div>
                </div>
            </div>
        </div>
    @elseif($activeAdminTab === 'users')
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <h4 class="card-title mb-1">{{ __('Users') }}</h4>
                                <p class="text-muted mb-0">{{ __('Manage user accounts, roles, organizations, and status.') }}</p>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                    <div class="search-box dashboard-filter-control dashboard-filter-search">
                                        <input type="text" class="form-control form-control-sm" id="userSearch" placeholder="{{ __('Search name, email, ...') }}">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-document-type" id="userRoleFilter">
                                        <option value="all">{{ __('All Roles') }}</option>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                    <div class="admin-filter-reset-group">
                                        <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="userOrganizationFilter">
                                            <option value="all">{{ __('All Organizations') }}</option>
                                            <option value="__none__">{{ __('No Organization') }}</option>
                                            @foreach($userOrganizationFilterOptions as $organizationOption)
                                                <option value="{{ $organizationOption['value'] }}">{{ $organizationOption['label'] }}</option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="userResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                    </div>
                                    <div class="dropdown flex-shrink-0 ms-auto">
                                        <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                            <li><button class="dropdown-item admin-table-export" type="button" data-table-id="usersTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                        </ul>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#modalCreateUser">
                                        <i class="ri-user-add-line me-1"></i> {{ __('Add New User') }}
                                    </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-0">
                        <x-dashboard-data-table
                            id="usersTable"
                            storage-key="admin-users-columns"
                            :columns="[
                                'name' => 220,
                                'email' => 260,
                                'role' => 190,
                                'organization' => 230,
                                'status' => 140,
                                'actions' => 110,
                            ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="name">{{ __('Name') }}</th>
                                        <th class="sort" data-sort="email">{{ __('Email') }}</th>
                                        <th class="sort" data-sort="role">{{ __('Role') }}</th>
                                        <th class="sort" data-sort="organization">{{ __('Organization') }}</th>
                                        <th class="sort" data-sort="status">{{ __('Status') }}</th>
                                        <th class="text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($users ?? collect()) as $userItem)
                                        @php
                                            $roleKey = \App\Support\WorkflowPermission::normalizeRole((string) ($userItem->role ?? 'user'));
                                            $organizationRaw   = trim((string) ($userItem->organization_name ?? ''));
                                            $organizationLabel = $organizationRaw !== '' ? ($allOrganizationDisplayMap[$organizationRaw] ?? $organizationRaw) : '-';
                                            $roleLabel = __($userRoleOptions[$roleKey] ?? ucwords(str_replace(['-', '_'], ' ', $roleKey)));
                                            $employeeCode = (string) $userItem->id;
                                        @endphp
                                        <tr class="user-row"
                                            data-id="{{ $userItem->id }}"
                                            data-fullname="{{ $userItem->name }}"
                                            data-first-name="{{ (string) ($userItem->first_name ?? '') }}"
                                            data-last-name="{{ (string) ($userItem->last_name ?? '') }}"
                                            data-user-email="{{ $userItem->email }}"
                                            data-user-role="{{ $roleKey }}"
                                            data-organization-name="{{ $organizationRaw }}"
                                            data-name="{{ strtolower($userItem->name) }}"
                                            data-email="{{ strtolower($userItem->email) }}"
                                            data-empid="{{ strtolower($employeeCode) }}"
                                            data-role="{{ $roleKey }}">
                                            <td>
                                                <p class="mb-0 fw-semibold">{{ $userItem->name }}</p>
                                            </td>
                                            <td>{{ $userItem->email }}</td>
                                            <td>
                                                <x-ui-badge type="role" :value="$roleKey" :label="$roleLabel" />
                                            </td>
                                            <td>{{ $organizationLabel }}</td>
                                            <td>
                                                @php $activeLabel = ($userItem->is_active ?? true) ? 'Active' : 'Disabled'; @endphp
                                                <x-ui-badge type="status" :value="$activeLabel" :label="$activeLabel" />
                                            </td>
                                            <td>
                                                <div class="dropdown text-end">
                                                    <button class="btn btn-sm p-0 border-0 bg-transparent shadow-none text-muted admin-action-menu-trigger user-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('User actions') }}">
                                                        <i class="ri-more-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button type="button" class="dropdown-item edit-item-btn">
                                                                {{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item reset-password-btn">
                                                                {{ __('Reset Password') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item disable-item-btn" data-action="{{ ($userItem->is_active ?? true) ? 'disable' : 'enable' }}">
                                                                {{ __(($userItem->is_active ?? true) ? 'Disable' : 'Enable') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger delete-item-btn">
                                                                {{ __('Delete') }}
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">{{ __('No users found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                        </x-dashboard-data-table>
                        <div class="d-flex justify-content-end">
                            <div class="pagination-wrap hstack gap-2" id="usersPaginationWrap" style="display:none;">
                                <a class="page-item pagination-prev" id="usersPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                                <ul class="pagination listjs-pagination mb-0" id="usersPageNumbers"></ul>
                                <a class="page-item pagination-next" id="usersPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalCreateUser" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Add New User') }}</h5>
                            <p class="text-muted mb-0">{{ __('Create a new user account and assign appropriate role and organization.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formCreateUser" action="{{ route('admin.users.store') }}">
                        @csrf
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('First Name') }}</label>
                                    <input type="text" name="first_name" class="form-control" required placeholder="{{ __('e.g. John') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('Last Name') }}</label>
                                    <input type="text" name="last_name" class="form-control" placeholder="{{ __('e.g. Doe') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Email') }}</label>
                                    <input type="email" name="email" class="form-control" required placeholder="{{ __('e.g. john@example.com') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Password') }}</label>
                                    <input type="password" name="password" class="form-control" required minlength="8" placeholder="{{ __('Minimum 8 characters') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Role') }}</label>
                                    <select name="role" id="addUserRole" class="form-select" required>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6" id="addUserOrganizationWrapper">
                                    <label class="form-label" id="addUserOrganizationLabel">{{ __('Organization') }}</label>
                                    <select class="form-select" name="organization_name" id="addUserOrganizationSelect">
                                        <option value="">-- {{ __('Please select an organization') }} --</option>
                                        @foreach($activeOrganizationOptions as $organizationOption)
                                            @php
                                                $organizationOptionLabel = $organizationDisplayMap[$organizationOption] ?? $organizationOption;
                                            @endphp
                                            <option value="{{ $organizationOption }}">{{ $organizationOptionLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 d-grid gap-2">
                                    <div class="form-check">
                                        <input type="hidden" name="is_active" value="0">
                                        <input class="form-check-input" type="checkbox" checked name="is_active" id="accountActive" value="1">
                                        <label class="form-check-label" for="accountActive">{{ __('Account is active') }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Create User') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {{-- Edit User Modal --}}
        <div class="modal fade" id="modalEditUser" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Edit User') }}</h5>
                            <p class="text-muted mb-0">{{ __('Update account details and access level.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formEditUser" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('First Name') }}</label>
                                    <input type="text" name="first_name" id="editUserFirstName" class="form-control" required placeholder="{{ __('e.g. John') }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('Last Name') }}</label>
                                    <input type="text" name="last_name" id="editUserLastName" class="form-control" placeholder="{{ __('e.g. Doe') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Email') }}</label>
                                    <input type="email" name="email" id="editUserEmail" class="form-control" required placeholder="{{ __('e.g. john@example.com') }}">
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Role') }}</label>
                                    <select name="role" id="editUserRole" class="form-select" required>
                                        @foreach(($userRoleOptions ?? []) as $roleOptionKey => $roleOptionLabel)
                                            <option value="{{ $roleOptionKey }}">{{ __($roleOptionLabel) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12" id="editUserOrganizationWrapper">
                                    <label class="form-label" id="editUserOrganizationLabel">{{ __('Organization') }}</label>
                                    <select name="organization_name" id="editUserOrganization" class="form-select">
                                        <option value="">-- {{ __('Please select an organization') }} --</option>
                                        @foreach($activeOrganizationOptions as $organizationOption)
                                            @php
                                                $organizationOptionLabel = $organizationDisplayMap[$organizationOption] ?? $organizationOption;
                                            @endphp
                                            <option value="{{ $organizationOption }}">{{ $organizationOptionLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Reset User Password Modal --}}
        <div class="modal fade" id="modalResetUserPassword" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Reset Password') }}</h5>
                            <p class="text-muted mb-0">{{ __('The selected user password will be reset to the default password.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formResetUserPassword" action="">
                        @csrf
                        @method('PATCH')
                        <div class="modal-body">
                            <p class="mb-3" id="resetPasswordConfirmText">
                                {{ __('Reset password for') }}
                                <span class="fw-semibold" id="resetPasswordUserName"></span>
                                {{ __('to the default password?') }}
                            </p>
                            <div class="alert alert-warning mb-0" id="resetPasswordWarning">
                                {{ __('This will replace the current password. The user must use the default password on next login.') }}
                            </div>
                            <div class="d-none" id="resetPasswordResult">
                                <div class="alert alert-success">
                                    {{ __('Password reset successfully.') }}
                                </div>
                                <label class="form-label">{{ __('Default Password') }}</label>
                                <div class="input-group">
                                    <input type="password" id="resetUserPasswordValue" class="form-control" value="12345678" readonly>
                                    <button class="btn btn-light" type="button" id="toggleResetPasswordVisibility" aria-label="{{ __('Show password') }}">
                                        <i class="ri-eye-line"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal" id="resetPasswordCancelBtn">{{ __('Cancel') }}</button>
                            <button type="button" class="btn btn-light d-none" data-bs-dismiss="modal" id="resetPasswordCloseBtn">{{ __('Close') }}</button>
                            <button type="submit" class="btn btn-primary" id="resetPasswordSubmitBtn">
                                <i class="ri-lock-password-line me-1"></i>{{ __('Reset Password') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Hidden form for toggle status --}}
        <form method="POST" id="formToggleUser" action="" style="display:none;">
            @csrf
            @method('PATCH')
        </form>

        {{-- Hidden form for delete user --}}
        <form method="POST" id="formDeleteUser" action="" style="display:none;">
            @csrf
            @method('DELETE')
        </form>

    @elseif($activeAdminTab === 'organizations')

        {{-- Organizations Tab --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <h4 class="card-title mb-1">{{ __('Organizations') }}</h4>
                                <p class="text-muted mb-0">{{ __('Manage the organizations used by users and workflow routing.') }}</p>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                <div class="search-box dashboard-filter-control dashboard-filter-search">
                                    <input type="text" class="form-control form-control-sm" id="organizationSearch" placeholder="{{ __('Search organizations...') }}">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                                <div class="admin-filter-reset-group">
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="organizationStatusFilter">
                                        <option value="all">{{ __('All Status') }}</option>
                                        <option value="active">{{ __('Active') }}</option>
                                        <option value="inactive">{{ __('Inactive') }}</option>
                                    </select>
                                    <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="organizationResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                </div>
                                <div class="dropdown flex-shrink-0 ms-auto">
                                    <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="organizationTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="organizationTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="organizationTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#modalCreateOrganization">
                                    <i class="ri-building-line me-1"></i> {{ __('Add Organization') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-0">
                        <x-dashboard-data-table
                            id="organizationTable"
                            storage-key="admin-organizations-columns"
                            :columns="[
                                'name' => 360,
                                'officers' => 220,
                                'status' => 150,
                                'actions' => 110,
                            ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="name">{{ __('Name') }}</th>
                                        <th class="sort" data-sort="officers">{{ __('Officers') }}</th>
                                        <th class="sort" data-sort="status">{{ __('Status') }}</th>
                                        <th class="text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($organizations ?? collect())->values() as $organization)
                                        @php
                                            $organizationNameEn = trim((string) ($organization->name_en ?? $organization->name ?? ''));
                                            $organizationNameKh = trim((string) ($organization->name_kh ?? ''));
                                            $organizationDisplayName = $locale === 'kh' && $organizationNameKh !== '' ? $organizationNameKh : $organizationNameEn;
                                        @endphp
                                        <tr class="organization-row"
                                            data-id="{{ $organization->id }}"
                                            data-name-search="{{ strtolower($organizationNameEn . ' ' . $organizationNameKh) }}"
                                            data-status="{{ $organization->is_active ? 'active' : 'inactive' }}">
                                            <td>
                                                <p class="mb-0 fw-semibold">{{ $organizationDisplayName }}</p>
                                                @if($organizationNameEn !== '' && $organizationNameKh !== '' && $organizationNameEn !== $organizationDisplayName)
                                                    <small class="text-muted d-block">{{ $organizationNameEn }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                <a
                                                    href="{{ url()->current() }}?admin_tab=users&user_organization={{ urlencode($organization->name ?? '') }}"
                                                    class="organization-users-link fw-semibold"
                                                    data-turbo="true"
                                                    data-users-search="{{ $organization->name ?? '' }}"
                                                >{{ $organization->users_count ?? 0 }}</a>
                                            </td>
                                            <td>
                                                <span class="badge {{ $organization->is_active ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                                                    {{ __($organization->is_active ? 'Active' : 'Inactive') }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="dropdown text-end">
                                                    <button class="btn btn-sm p-0 border-0 bg-transparent shadow-none text-muted admin-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Organization actions') }}">
                                                        <i class="ri-more-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button type="button" class="dropdown-item organization-edit-btn">
                                                                {{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item organization-toggle-btn" data-action="{{ $organization->is_active ? 'disable' : 'enable' }}">
                                                                {{ __($organization->is_active ? 'Disable' : 'Enable') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger organization-delete-btn">
                                                                {{ __('Delete') }}
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">{{ __('No organizations found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                        </x-dashboard-data-table>
                        <div class="d-flex justify-content-end">
                            <div class="pagination-wrap hstack gap-2" id="organizationPaginationWrap" style="display:none;">
                                <a class="page-item pagination-prev" id="organizationPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                                <ul class="pagination listjs-pagination mb-0" id="organizationPageNumbers"></ul>
                                <a class="page-item pagination-next" id="organizationPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalCreateOrganization" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <h5 class="modal-title">{{ __('New Organization') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('admin.organizations.store') }}" id="formCreateOrganization">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Organization Name (Khmer)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_kh" class="form-control" required placeholder="{{ __('Enter Khmer organization name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Organization Name (English)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_en" class="form-control" required placeholder="{{ __('e.g. Organization of Finance') }}">
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" id="createOrganizationActive" value="1" checked>
                                <label class="form-check-label" for="createOrganizationActive">{{ __('Active') }}</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Organization') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalEditOrganization" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <h5 class="modal-title">{{ __('Edit Organization') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formEditOrganization" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Organization Name (Khmer)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_kh" id="editOrganizationNameKh" class="form-control" required placeholder="{{ __('Enter Khmer organization name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Organization Name (English)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_en" id="editOrganizationNameEn" class="form-control" required placeholder="{{ __('e.g. Organization of Finance') }}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <form method="POST" id="formToggleOrganization" action="" style="display:none;">
            @csrf
            @method('PATCH')
        </form>

        <form method="POST" id="formDeleteOrganization" action="" style="display:none;">
            @csrf
            @method('DELETE')
        </form>

    @elseif($activeAdminTab === 'document-types')

        {{-- Document Types Tab --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <h4 class="card-title mb-1">{{ __('Document Types') }}</h4>
                                <p class="text-muted mb-0">{{ __('Manage document categories, SLAs, and linked workflows.') }}</p>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                <div class="search-box dashboard-filter-control dashboard-filter-search">
                                    <input type="text" class="form-control form-control-sm" id="dtSearch" placeholder="{{ __('Search document types...') }}">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                                <div class="admin-filter-reset-group">
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="dtStatusFilter">
                                        <option value="all">{{ __('All Status') }}</option>
                                        <option value="active">{{ __('Active') }}</option>
                                        <option value="inactive">{{ __('Inactive') }}</option>
                                    </select>
                                    <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="dtResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                </div>
                                <div class="dropdown flex-shrink-0 ms-auto">
                                    <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="dtTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="dtTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="dtTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#modalCreateDocType">
                                    <i class="ri-add-line me-1"></i> {{ __('Add Document Type') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-0">
                        <div>
                            @php
                                $submitterRoleShortNames = [
                                    \App\Support\WorkflowPermission::ROLE_REQUESTER => 'USR',
                                    \App\Support\WorkflowPermission::ROLE_VICE_RECTOR => 'V-R',
                                    \App\Support\WorkflowPermission::ROLE_RECTOR => 'R',
                                    \App\Support\WorkflowPermission::ROLE_ADMIN => 'ADM',
                                ];
                                $defaultSubmitterRoles = array_keys((array) ($submitterRoleOptions ?? []));
                            @endphp
                            <x-dashboard-data-table
                                id="dtTable"
                                storage-key="admin-document-types-columns"
                                :columns="[
                                    'name' => 300,
                                    'workflow_template' => 280,
                                    'submitters' => 260,
                                    'status' => 150,
                                    'actions' => 110,
                                ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="name">{{ __('Name') }}</th>
                                        <th class="sort" data-sort="workflow_template">{{ __('Workflow Template') }}</th>
                                        <th class="sort" data-sort="submitters">{{ __('Submitters') }}</th>
                                        <th class="sort" data-sort="status">{{ __('Status') }}</th>
                                        <th class="text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($documentTypes ?? collect()) as $dt)
                                        @php
                                            $dtNameEn = trim((string) ($dt->name_en ?? $dt->name ?? ''));
                                            $dtNameKh = trim((string) ($dt->name_kh ?? ''));
                                            $dtDisplayName = $locale === 'kh' && $dtNameKh !== '' ? $dtNameKh : $dtNameEn;
                                            $allowedSubmitterRoles = collect($dt->allowed_submitter_roles ?? $defaultSubmitterRoles)
                                                ->map(fn ($role) => (string) $role)
                                                ->filter(fn ($role) => $role !== '')
                                                ->unique()
                                                ->values();

                                            if ($allowedSubmitterRoles->isEmpty()) {
                                                $allowedSubmitterRoles = collect($defaultSubmitterRoles);
                                            }
                                        @endphp
                                        <tr class="dt-row"
                                            data-id="{{ $dt->id }}"
                                            data-name-search="{{ strtolower($dtNameEn . ' ' . $dtNameKh) }}"
                                            data-status="{{ $dt->is_active ? 'active' : 'inactive' }}"
                                            data-has-workflow-template="{{ $dt->workflow_template_id ? '1' : '0' }}">
                                            <td>
                                                <p class="mb-0 fw-semibold">{{ $dtDisplayName }}</p>
                                                @if($dtNameEn !== '' && $dtNameKh !== '' && $dtNameEn !== $dtDisplayName)
                                                    <small class="text-muted">{{ $dtNameEn }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                @if($dt->workflowTemplate)
                                                    <span class="badge bg-info-subtle text-info">{{ $dt->workflowTemplate->name }}</span>
                                                @else
                                                    <span class="text-muted">--</span>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="d-flex flex-wrap gap-1">
                                                    @foreach($allowedSubmitterRoles as $submitterRole)
                                                        @php
                                                            $submitterRoleLabel = $submitterRoleOptions[$submitterRole]
                                                                ?? ucwords(str_replace(['_', '-'], ' ', $submitterRole));
                                                            $submitterRoleShort = $submitterRoleShortNames[$submitterRole] ?? strtoupper(substr(preg_replace('/[^A-Za-z0-9]/', '', $submitterRole), 0, 3));
                                                        @endphp
                                                        <span class="badge bg-primary-subtle text-primary" title="{{ __($submitterRoleLabel) }}">
                                                            {{ $submitterRoleShort }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge {{ $dt->is_active ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                                                    {{ __($dt->is_active ? 'Active' : 'Inactive') }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="dropdown text-end">
                                                    <button class="btn btn-sm p-0 border-0 bg-transparent shadow-none text-muted admin-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Document type actions') }}">
                                                        <i class="ri-more-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a href="{{ route('admin.document-types.form-builder.show', $dt->id) }}" class="dropdown-item">
                                                                {{ __('Form Builder') }}
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item dt-edit-btn">
                                                                {{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item dt-toggle-btn" data-action="{{ $dt->is_active ? 'disable' : 'enable' }}">
                                                                {{ __($dt->is_active ? 'Disable' : 'Enable') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger dt-delete-btn">
                                                                {{ __('Delete') }}
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">{{ __('No document types found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </x-dashboard-data-table>
                        </div>
                        <div class="d-flex justify-content-end">
                            <div class="pagination-wrap hstack gap-2" id="dtPaginationWrap" style="display:none;">
                                <a class="page-item pagination-prev" id="dtPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                                <ul class="pagination listjs-pagination mb-0" id="dtPageNumbers"></ul>
                                <a class="page-item pagination-next" id="dtPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Create Document Type Modal --}}
        <div class="modal fade" id="modalCreateDocType" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <h5 class="modal-title">{{ __('New Document Type') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('admin.document-types.store') }}" id="formCreateDocType">
                        @csrf
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Name (Khmer)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_kh" id="createDtNameKh" class="form-control" required placeholder="{{ __('Enter Khmer name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Name (English)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_en" id="createDtNameEn" class="form-control" required placeholder="{{ __('Enter English name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Workflow Template') }}</label>
                                <!-- <select name="workflow_template_id" class="form-select">
                                    <option value="">{{ __('Select workflow template') }}</option>
                                    @foreach(($activeWorkflowTemplates ?? collect()) as $wft)
                                        <option value="{{ $wft->id }}">{{ $wft->name }}</option>
                                    @endforeach
                                </select> -->
                                <select class="form-select" 
                                    name="workflow_template_id"
                                    data-choices 
                                    data-choices-search-true
                                    data-choices-search-placeholder-value="{{ __('Search workflow template...') }}">
                                    <option value="">{{ __('Select workflow template') }}</option>
                                    @foreach(($activeWorkflowTemplates ?? collect()) as $wft)
                                        <option value="{{ $wft->id }}">{{ $wft->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Who Can Submit This Document Type') }}</label>
                                <div class="border rounded-3 p-3 bg-light-subtle">
                                    <div class="row g-2">
                                        @foreach(($submitterRoleOptions ?? []) as $roleKey => $roleLabel)
                                            @php
                                                $isDefaultSubmitterRole = in_array($roleKey, array_keys((array) ($submitterRoleOptions ?? [])), true);
                                                $roleInputId = 'createDtSubmitterRole' . preg_replace('/[^A-Za-z0-9]+/', '', (string) $roleKey);
                                            @endphp
                                            <div class="col-sm-6">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="allowed_submitter_roles[]" value="{{ $roleKey }}" id="{{ $roleInputId }}" {{ $isDefaultSubmitterRole ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="{{ $roleInputId }}">{{ __($roleLabel) }}</label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <p class="text-muted small mt-2 mb-0">{{ __('If none is selected, User will be used by default.') }}</p>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" id="createDtActive" value="1" checked>
                                <label class="form-check-label" for="createDtActive">{{ __('Active') }}</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Document Type') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Edit Document Type Modal --}}
        <div class="modal fade" id="modalEditDocType" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <h5 class="modal-title">{{ __('Edit Document Type') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formEditDocType" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Name (Khmer)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_kh" id="editDtNameKh" class="form-control" required placeholder="{{ __('Enter Khmer name') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Name (English)') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name_en" id="editDtNameEn" class="form-control" required placeholder="{{ __('e.g. Payment Document') }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Workflow Template') }}</label>
                                <!-- <select name="workflow_template_id" id="editDtTemplate" class="form-select">
                                    <option value="">{{ __('Select workflow template') }}</option>
                                    @foreach(($activeWorkflowTemplates ?? collect()) as $wft)
                                        <option value="{{ $wft->id }}">{{ $wft->name }}</option>
                                    @endforeach
                                </select> -->
                                <select class="form-select" 
                                    name="workflow_template_id"
                                    id="editDtTemplate">
                                    <option value="">{{ __('Select workflow template') }}</option>
                                    @foreach(($activeWorkflowTemplates ?? collect()) as $wft)
                                        <option value="{{ $wft->id }}">{{ $wft->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Who Can Submit This Document Type') }}</label>
                                <div class="border rounded-3 p-3 bg-light-subtle" id="editDtSubmitterRolesWrap">
                                    <div class="row g-2">
                                        @foreach(($submitterRoleOptions ?? []) as $roleKey => $roleLabel)
                                            @php
                                                $roleInputId = 'editDtSubmitterRole' . preg_replace('/[^A-Za-z0-9]+/', '', (string) $roleKey);
                                            @endphp
                                            <div class="col-sm-6">
                                                <div class="form-check">
                                                    <input class="form-check-input edit-dt-submitter-role" type="checkbox" name="allowed_submitter_roles[]" value="{{ $roleKey }}" id="{{ $roleInputId }}">
                                                    <label class="form-check-label" for="{{ $roleInputId }}">{{ __($roleLabel) }}</label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" id="editDtActive" value="1">
                                <label class="form-check-label" for="editDtActive">{{ __('Active') }}</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Hidden toggle form --}}
        <form method="POST" id="formToggleDocType" action="" style="display:none;">
            @csrf
            @method('PATCH')
        </form>

        {{-- Hidden delete form --}}
        <form method="POST" id="formDeleteDocType" action="" style="display:none;">
            @csrf
            @method('DELETE')
        </form>

    @elseif($activeAdminTab === 'workflow-templates')

        {{-- Workflow Templates Tab --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <h4 class="card-title mb-1">{{ __('Workflow Templates') }}</h4>
                                <p class="text-muted mb-0">{{ __('Manage reusable routing flows that can be linked to document types.') }}</p>
                            </div>
                            <div class="d-flex flex-wrap align-items-center gap-2 dashboard-table-filters admin-responsive-filter-toolbar w-100">
                                <div class="admin-filter-reset-group">
                                    <div class="search-box dashboard-filter-control dashboard-filter-search">
                                        <input type="text" class="form-control form-control-sm" id="wfSearch" placeholder="{{ __('Search templates...') }}">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-soft-secondary btn-icon flex-shrink-0" id="wfResetFilterBtn" title="{{ __('Reset filters') }}" aria-label="{{ __('Reset filters') }}"><i class="ri-refresh-line"></i></button>
                                </div>
                                <div class="dropdown flex-shrink-0 ms-auto">
                                    <button class="btn btn-sm btn-soft-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-download-2-line align-bottom me-1"></i> {{ __('Export') }}
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="wfTable" data-export-format="csv">{{ __('Export as CSV') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="wfTable" data-export-format="pdf">{{ __('Export as PDF') }}</button></li>
                                        <li><button class="dropdown-item admin-table-export" type="button" data-table-id="wfTable" data-export-format="excel">{{ __('Export as Excel') }}</button></li>
                                    </ul>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary flex-shrink-0" data-bs-toggle="modal" data-bs-target="#modalCreateWorkflow">
                                    <i class="ri-git-branch-line me-1"></i> {{ __('Add New Workflow') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body pt-0">
                        <x-dashboard-data-table
                            id="wfTable"
                            storage-key="admin-workflows-columns"
                            :columns="[
                                'name' => 280,
                                'document_types' => 300,
                                'stages' => 520,
                                'status' => 150,
                                'actions' => 110,
                            ]">
                                <thead class="table-light text-uppercase">
                                    <tr>
                                        <th class="sort" data-sort="name">{{ __('Name') }}</th>
                                        <th class="sort" data-sort="document_types">{{ __('Used By Document Types') }}</th>
                                        <th class="sort" data-sort="stages">{{ __('Stages') }}</th>
                                        <th class="sort" data-sort="status">{{ __('Status') }}</th>
                                        <th class="text-end">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse(($workflowTemplates ?? collect()) as $wft)
                                        <tr class="wf-row"
                                            data-id="{{ $wft->id }}"
                                            data-name-search="{{ strtolower($wft->name . ' ' . $wft->documentTypes->pluck('name')->implode(' ')) }}"
                                            data-organization="{{ strtolower((string) ($wft->organization_name ?? '')) }}">
                                            <td>
                                                <p class="mb-0 fw-semibold">{{ $wft->name }}</p>
                                                @if($wft->description)
                                                    <small class="text-muted text-truncate d-inline-block" style="max-width:260px;">{{ $wft->description }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                @if($wft->documentTypes->count())
                                                    <div class="d-flex flex-wrap gap-1">
                                                        @foreach($wft->documentTypes as $documentType)
                                                            <a href="{{ route('role.dashboard', ['admin_tab' => 'document-types', 'dt_search' => $documentType->name]) }}"
                                                               data-turbo="true"
                                                               class="badge bg-info-subtle text-info text-decoration-none">
                                                                {{ $documentType->name }}
                                                            </a>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <span class="text-muted">{{ __('Not linked yet') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @php $steps = $wft->steps ?? []; @endphp
                                                @if(count($steps))
                                                    @php $visibleSteps = array_values($steps); @endphp
                                                    <div class="d-flex flex-wrap gap-1 align-items-center">
                                                        @foreach($visibleSteps as $index => $step)
                                                            @php
                                                                $stepType = $step['step_type'] ?? '';
                                                                $stepOrganizationName = $step['organization_name'] ?? '';
                                                                $stepTypeLabel = match($stepType) {
                                                                    'start_organization'   => __('Submission Stage'),
                                                                    'vice_rector'    => __('Vice Rector Review'),
                                                                    'approval'       => __('Rector Review'),
                                                                    default          => null,
                                                                };

                                                                if ($stepTypeLabel !== null) {
                                                                    $stageDisplay = $stepTypeLabel;
                                                                } elseif ($stepOrganizationName !== '') {
                                                                    // Resolve localized organization name from the map
                                                                    $stageDisplay = $allOrganizationDisplayMap[$stepOrganizationName] ?? $stepOrganizationName;
                                                                } else {
                                                                    $stageDisplay = __($step['label'] ?? \App\Models\WorkflowTemplate::stateLabel($step['from_state'] ?? ''));
                                                                }
                                                            @endphp
                                                            <span class="badge bg-primary-subtle text-primary">{{ $stageDisplay }}</span>
                                                            @if(!$loop->last)
                                                                <i class="ri-arrow-right-line text-muted"></i>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <span class="text-muted">{{ __('No stages defined') }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge {{ $wft->is_active ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">
                                                    {{ __($wft->is_active ? 'Active' : 'Inactive') }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="dropdown text-end">
                                                    <button class="btn btn-sm p-0 border-0 bg-transparent shadow-none text-muted admin-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Workflow actions') }}">
                                                        <i class="ri-more-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button type="button" class="dropdown-item wf-edit-btn">
                                                                {{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item wf-toggle-btn" data-action="{{ $wft->is_active ? 'disable' : 'enable' }}">
                                                                {{ __($wft->is_active ? 'Disable' : 'Enable') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger wf-delete-btn">
                                                                {{ __('Delete') }}
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">{{ __('No workflow templates found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                        </x-dashboard-data-table>
                        <div class="d-flex justify-content-end">
                            <div class="pagination-wrap hstack gap-2" id="wfPaginationWrap" style="display:none;">
                                <a class="page-item pagination-prev" id="wfPaginationPrev" href="javascript:void(0);">{{ __('Previous') }}</a>
                                <ul class="pagination listjs-pagination mb-0" id="wfPageNumbers"></ul>
                                <a class="page-item pagination-next" id="wfPaginationNext" href="javascript:void(0);">{{ __('Next') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Create Workflow Template Modal --}}
        <div class="modal fade" id="modalCreateWorkflow" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Add New Workflow Template') }}</h5>
                            <p class="text-muted mb-0">{{ __('Define the routing flow for a document type.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" action="{{ route('admin.workflow-templates.store') }}" id="formCreateWorkflow">
                        @csrf
                        <div class="modal-body">
                            @include('administrator.partials.workflow-template-fields', ['prefix' => 'create', 'wft' => null])
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Create Template') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Edit Workflow Template Modal --}}
        <div class="modal fade" id="modalEditWorkflow" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-header border-bottom">
                        <div>
                            <h5 class="modal-title mb-1">{{ __('Edit Workflow Template') }}</h5>
                            <p class="text-muted mb-0">{{ __('Update the routing flow.') }}</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="POST" id="formEditWorkflow" action="">
                        @csrf
                        @method('PUT')
                        <div class="modal-body" id="editWorkflowBody">
                            @include('administrator.partials.workflow-template-fields', ['prefix' => 'edit', 'wft' => null])
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Hidden toggle form --}}
        <form method="POST" id="formToggleWorkflow" action="" style="display:none;">
            @csrf
            @method('PATCH')
        </form>

        {{-- Hidden delete form --}}
        <form method="POST" id="formDeleteWorkflow" action="" style="display:none;">
            @csrf
            @method('DELETE')
        </form>

    @else
        @php
            $adminDocumentStatusFilterMap = collect(\App\Support\WorkflowPermission::dashboardStatusFilterMap('admin'))
                ->except('Total Documents')
                ->all();
            $adminDocumentStatusResolver = fn ($request) => \App\Support\WorkflowPermission::dashboardStatus(
                $request,
                (string) (Auth::user()->role ?? 'admin'),
                (int) (Auth::id() ?? 0)
            );
        @endphp

        <x-dashboard-document-table
            :requests="$requests"
            title="All Documents"
            empty-message="No documents found."
            :status-filter-map="$adminDocumentStatusFilterMap"
            :status-resolver="$adminDocumentStatusResolver"
            :show-unread-filter="false"
        />
    @endif
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}" data-turbo-eval="false"></script>
    <script src="{{ URL::asset('build/js/app.js') }}" data-turbo-eval="false"></script>
    <script>
        window.captureAdminTabUiState = function (adminTab) {
            var configurations = {
                users: { fields: ['userSearch', 'userRoleFilter', 'userOrganizationFilter'], pagination: '#usersPageNumbers .page-item.active .page-link' },
                organizations: { fields: ['organizationSearch', 'organizationStatusFilter'], pagination: '#organizationPageNumbers .page-item.active .page-link' },
                'document-types': { fields: ['dtSearch', 'dtStatusFilter'], pagination: '#dtPageNumbers .page-item.active .page-link' },
                'workflow-templates': { fields: ['wfSearch'], pagination: '#wfPageNumbers .page-item.active .page-link' },
                'role-permissions': { fields: [], pagination: '#rolePermissionsPageNumbers .page-item.active .page-link' }
            };
            var configuration = configurations[adminTab];
            if (!configuration) return;

            var values = {};
            configuration.fields.forEach(function (id) {
                var field = document.getElementById(id);
                if (field) values[id] = field.value;
            });

            var activePage = document.querySelector(configuration.pagination);
            var page = activePage ? parseInt(activePage.textContent, 10) : 1;

            try {
                sessionStorage.setItem('uhs-admin-tab-state:' + adminTab, JSON.stringify({
                    values: values,
                    page: Number.isFinite(page) && page > 0 ? page : 1
                }));
            } catch (error) {
                // State preservation is optional when browser storage is unavailable.
            }
        };

        window.consumeAdminTabUiState = function (adminTab) {
            var storageKey = 'uhs-admin-tab-state:' + adminTab;
            try {
                var serialized = sessionStorage.getItem(storageKey);
                sessionStorage.removeItem(storageKey);
                return serialized ? JSON.parse(serialized) : null;
            } catch (error) {
                return null;
            }
        };

        (function () {
            var storageKey = 'admin-dashboard-scroll-position';

            try {
                if ('scrollRestoration' in history) {
                    history.scrollRestoration = 'manual';
                }
            } catch (error) {
                // Ignore browsers that do not allow overriding scroll restoration.
            }

            function saveScrollPosition() {
                try {
                    sessionStorage.setItem(storageKey, JSON.stringify({
                        x: window.scrollX || 0,
                        y: window.scrollY || 0
                    }));
                } catch (error) {
                    // Ignore storage failures.
                }
            }

            function restoreScrollPosition() {
                try {
                    var rawValue = sessionStorage.getItem(storageKey);
                    if (!rawValue) {
                        return;
                    }

                    var parsedValue = JSON.parse(rawValue);
                    var x = typeof parsedValue.x === 'number' ? parsedValue.x : 0;
                    var y = typeof parsedValue.y === 'number' ? parsedValue.y : 0;
                    window.scrollTo(x, y);
                    sessionStorage.removeItem(storageKey);
                } catch (error) {
                    // Ignore invalid storage payloads.
                }
            }

            window.addEventListener('pagehide', saveScrollPosition);
            window.addEventListener('beforeunload', saveScrollPosition);
            window.addEventListener('load', function () {
                requestAnimationFrame(function () {
                    requestAnimationFrame(restoreScrollPosition);
                });
            });
        })();
    </script>
    <script>
        (function initializeAuditTrailTable() {
            var auditTable = document.getElementById('auditTrailTable');
            if (!auditTable) {
                return;
            }

            var auditSearch = auditTable.closest('.card')?.querySelector('.search-box .search');
            var auditDateRangeFilter = document.getElementById('auditDateRangeFilter');
            var auditActionFilter = document.getElementById('auditActionFilter');
            var auditActivityFilter = document.getElementById('auditActivityFilter');
            var auditResetFilterBtn = document.getElementById('auditResetFilterBtn');
            var emptyRow = auditTable.querySelector('tbody tr td[colspan]')?.closest('tr') || null;
            var auditRows = Array.prototype.slice.call(auditTable.querySelectorAll('tbody tr')).filter(function (row) {
                return !row.querySelector('td[colspan]');
            });
            var auditPaginationWrap = document.getElementById('auditPaginationWrap');
            var auditPaginationPrev = document.getElementById('auditPaginationPrev');
            var auditPaginationNext = document.getElementById('auditPaginationNext');
            var auditPageNumbers = document.getElementById('auditPageNumbers');
            var auditCurrentPage = 1;

            auditRows.forEach(function (row, index) {
                if (!row.dataset.auditOriginalIndex) {
                    row.dataset.auditOriginalIndex = String(index);
                }
            });

            function auditSortText(row, columnIndex) {
                var cell = row.cells[columnIndex];
                if (!cell) {
                    return '';
                }

                var timestampSource = cell.matches('[data-timestamp]') ? cell : cell.querySelector('[data-timestamp]');
                if (timestampSource && timestampSource.dataset.timestamp) {
                    var timestamp = Number(timestampSource.dataset.timestamp);
                    if (!Number.isNaN(timestamp)) {
                        return timestamp;
                    }
                }

                return (cell.textContent || '').replace(/\s+/g, ' ').trim().toLowerCase();
            }

            function compareAuditSortValues(a, b, order) {
                var result;

                if (typeof a === 'number' && typeof b === 'number') {
                    result = a - b;
                } else {
                    result = String(a).localeCompare(String(b), undefined, {
                        numeric: true,
                        sensitivity: 'base'
                    });
                }

                return order === 'desc' ? result * -1 : result;
            }

            function renderAuditRowsInOrder() {
                var tbody = auditTable.querySelector('tbody');
                if (!tbody) {
                    return;
                }

                auditRows.forEach(function (row) {
                    tbody.appendChild(row);
                });

                if (emptyRow) {
                    tbody.appendChild(emptyRow);
                }
            }

            document.addEventListener('dashboard-data-table:sort', function (event) {
                if (!event.detail || event.detail.table !== auditTable) {
                    return;
                }

                event.detail.handled = true;
                event.preventDefault();

                var columnIndex = Number(event.detail.columnIndex || 0);
                var order = event.detail.order || 'asc';

                if (order === 'original') {
                    auditRows.sort(function (rowA, rowB) {
                        return Number(rowA.dataset.auditOriginalIndex || 0) - Number(rowB.dataset.auditOriginalIndex || 0);
                    });
                } else {
                    auditRows.sort(function (rowA, rowB) {
                        return compareAuditSortValues(
                            auditSortText(rowA, columnIndex),
                            auditSortText(rowB, columnIndex),
                            order
                        );
                    });
                }

                auditCurrentPage = 1;
                renderAuditRowsInOrder();
                applyAuditFilters();
            });

            function auditPageSize() {
                return 10;
            }

            function renderAuditPagination(visibleRows) {
                var perPage = auditPageSize();
                var totalPages = Math.max(1, Math.ceil(visibleRows.length / perPage));
                auditCurrentPage = Math.min(Math.max(1, auditCurrentPage), totalPages);

                auditRows.forEach(function (row) {
                    row.style.display = 'none';
                });

                visibleRows.forEach(function (row, index) {
                    var onPage = index >= (auditCurrentPage - 1) * perPage && index < auditCurrentPage * perPage;
                    row.style.display = onPage ? '' : 'none';
                });

                if (auditPaginationWrap) {
                    auditPaginationWrap.style.display = visibleRows.length > perPage ? '' : 'none';
                }

                if (auditPaginationPrev) {
                    auditPaginationPrev.classList.toggle('disabled', auditCurrentPage <= 1);
                }

                if (auditPaginationNext) {
                    auditPaginationNext.classList.toggle('disabled', auditCurrentPage >= totalPages);
                }

                if (!auditPageNumbers) return;

                auditPageNumbers.innerHTML = '';
                for (var page = 1; page <= totalPages; page++) {
                    var li = document.createElement('li');
                    li.className = 'page-item' + (page === auditCurrentPage ? ' active' : '');
                    var link = document.createElement('a');
                    link.className = 'page';
                    link.href = 'javascript:void(0);';
                    link.textContent = page;
                    link.dataset.page = String(page);
                    li.appendChild(link);
                    auditPageNumbers.appendChild(li);
                }
            }

            function uniqueCellValues(selector) {
                var values = [];
                auditRows.forEach(function (row) {
                    var cell = row.querySelector(selector);
                    var value = (cell ? cell.textContent : '').trim();
                    if (value && values.indexOf(value) === -1) {
                        values.push(value);
                    }
                });

                return values.sort(function (a, b) {
                    return a.localeCompare(b);
                });
            }

            function fillSelect(select, values) {
                if (!select) return;
                values.forEach(function (value) {
                    var option = document.createElement('option');
                    option.value = value;
                    option.textContent = value;
                    select.appendChild(option);
                });
            }

            function selectedAuditDateRange() {
                if (!auditDateRangeFilter || !auditDateRangeFilter._flatpickr || auditDateRangeFilter._flatpickr.selectedDates.length === 0) {
                    return { from: null, to: null };
                }

                var selectedDates = auditDateRangeFilter._flatpickr.selectedDates;
                var from = new Date(selectedDates[0].getTime());
                var to = new Date((selectedDates[1] || selectedDates[0]).getTime());
                from.setHours(0, 0, 0, 0);
                to.setHours(23, 59, 59, 999);

                return { from: from, to: to };
            }

            function applyAuditFilters() {
                var term = auditSearch ? auditSearch.value.toLowerCase().trim() : '';
                var selectedAction = auditActionFilter ? auditActionFilter.value : 'all';
                var selectedActivity = auditActivityFilter ? auditActivityFilter.value : 'all';
                var range = selectedAuditDateRange();
                var visibleRows = [];

                auditRows.forEach(function (row) {
                    var rowText = row.textContent.toLowerCase();
                    var action = (row.querySelector('.audit_action_type')?.textContent || '').trim();
                    var activity = (row.querySelector('.audit_activity_type')?.textContent || '').trim();
                    var timestamp = Number(row.querySelector('.audit_date')?.dataset.timestamp || 0);
                    var rowDate = timestamp ? new Date(timestamp * 1000) : null;
                    var matches = true;

                    if (term && rowText.indexOf(term) === -1) {
                        matches = false;
                    }

                    if (selectedAction !== 'all' && action !== selectedAction) {
                        matches = false;
                    }

                    if (selectedActivity !== 'all' && activity !== selectedActivity) {
                        matches = false;
                    }

                    if (range.from && rowDate && rowDate < range.from) {
                        matches = false;
                    }

                    if (range.to && rowDate && rowDate > range.to) {
                        matches = false;
                    }

                    row.dataset.auditFilterMatch = matches ? 'true' : 'false';
                    if (matches) visibleRows.push(row);
                });

                renderAuditPagination(visibleRows);

                if (emptyRow) {
                    emptyRow.style.display = visibleRows.length === 0 ? '' : 'none';
                    var emptyCell = emptyRow.querySelector('td');
                    if (emptyCell && auditRows.length > 0) {
                        emptyCell.textContent = @json(__('No audit logs matched your filters.'));
                    }
                }
            }

            fillSelect(auditActionFilter, uniqueCellValues('.audit_action_type'));
            fillSelect(auditActivityFilter, uniqueCellValues('.audit_activity_type'));

            var isKhmerDateLocale = @json(session('lang', app()->getLocale())) === 'kh';
            window.uhsFlatpickrLocale = isKhmerDateLocale ? {
                weekdays: {
                    shorthand: ['អា', 'ច', 'អ', 'ព', 'ព្រ', 'សុ', 'ស'],
                    longhand: ['អាទិត្យ', 'ចន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍']
                },
                months: {
                    shorthand: ['មក', 'កុ', 'មី', 'មេស', 'ឧស', 'មិថ', 'កក្ក', 'សី', 'កញ', 'តុ', 'វិ', 'ធ្នូ'],
                    longhand: ['មករា', 'កុម្ភៈ', 'មីនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ']
                },
                rangeSeparator: ' ដល់ ',
                firstDayOfWeek: 1
            } : 'default';

            if (auditDateRangeFilter) {
                auditDateRangeFilter.setAttribute('readonly', 'readonly');

                if (typeof flatpickr !== 'undefined') {
                    if (auditDateRangeFilter._flatpickr) {
                        auditDateRangeFilter._flatpickr.destroy();
                    }

                    flatpickr(auditDateRangeFilter, {
                        mode: 'range',
                        dateFormat: isKhmerDateLocale ? 'd F, Y' : 'd M, Y',
                        locale: window.uhsFlatpickrLocale,
                        allowInput: false,
                        onChange: function () {
                            auditCurrentPage = 1;
                            applyAuditFilters();
                        },
                    });
                }
            }

            if (auditSearch) auditSearch.addEventListener('input', function () {
                auditCurrentPage = 1;
                applyAuditFilters();
            });
            if (auditActionFilter) auditActionFilter.addEventListener('change', function () {
                auditCurrentPage = 1;
                applyAuditFilters();
            });
            if (auditActivityFilter) auditActivityFilter.addEventListener('change', function () {
                auditCurrentPage = 1;
                applyAuditFilters();
            });
            if (auditResetFilterBtn) auditResetFilterBtn.addEventListener('click', function () {
                if (auditDateRangeFilter && auditDateRangeFilter._flatpickr) {
                    auditDateRangeFilter._flatpickr.clear();
                } else if (auditDateRangeFilter) {
                    auditDateRangeFilter.value = '';
                }
                if (auditActionFilter) auditActionFilter.value = 'all';
                if (auditActivityFilter) auditActivityFilter.value = 'all';
                if (auditSearch) auditSearch.value = '';
                auditCurrentPage = 1;
                applyAuditFilters();
            });
            if (auditPaginationPrev) auditPaginationPrev.addEventListener('click', function () {
                if (auditCurrentPage > 1) {
                    auditCurrentPage--;
                    applyAuditFilters();
                }
            });
            if (auditPaginationNext) auditPaginationNext.addEventListener('click', function () {
                auditCurrentPage++;
                applyAuditFilters();
            });
            if (auditPageNumbers) auditPageNumbers.addEventListener('click', function (event) {
                var target = event.target.closest('[data-page]');
                if (!target) return;
                auditCurrentPage = Number(target.dataset.page || 1);
                applyAuditFilters();
            });

            if (!emptyRow && auditRows.length > 0) {
                var tbody = auditTable.querySelector('tbody');
                if (tbody) {
                    emptyRow = document.createElement('tr');
                    emptyRow.style.display = 'none';
                    emptyRow.innerHTML = '<td colspan="5" class="text-center text-muted py-4">' + @json(__('No audit logs matched your filters.')) + '</td>';
                    tbody.appendChild(emptyRow);
                }
            }

            document.addEventListener('dashboard-data-table:sorted', function (event) {
                if (!event.detail || event.detail.table !== auditTable) {
                    return;
                }

                auditRows = Array.prototype.slice.call(auditTable.querySelectorAll('tbody tr')).filter(function (row) {
                    return !row.querySelector('td[colspan]');
                });
                auditCurrentPage = 1;
                applyAuditFilters();
            });

            applyAuditFilters();
        })();
    </script>
    <script>
        (function () {
            var listContainer = document.getElementById('customerList');
            var table = document.getElementById('customerTable');
            if (!listContainer || !table || typeof List === 'undefined') {
                return;
            }

            function pageSize() {
                return 10;
            }

            var perPage = pageSize();
            var customerList = new List('customerList', {
                valueNames: ['uhs_code', 'registry_document_number', 'finished_document_number', 'requested_date', 'customer_name', 'email', 'from', 'tracking_id', 'date', 'current_holder', '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);
            });
            var statusFilter = document.getElementById('statusFilter');
            var dateRangeFilter = document.getElementById('dateRangeFilter');
            var documentTypeFilter = document.getElementById('documentTypeFilter');
            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');
            var statusFilterMap = @json(collect(\App\Support\WorkflowPermission::dashboardStatusFilterMap((string) (Auth::user()->role ?? 'admin')))
                ->mapWithKeys(fn ($statuses, $label) => [__($label) => array_map(fn ($status) => __($status), $statuses)])
                ->toArray());

            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);
                }

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

            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 (event) {
                event.preventDefault();
                if (!this.classList.contains('disabled')) {
                    customerList.show(Math.max(1, customerList.i - perPage), perPage);
                }
            });
            if (nextBtn) nextBtn.addEventListener('click', function (event) {
                event.preventDefault();
                if (!this.classList.contains('disabled')) {
                    customerList.show(customerList.i + perPage, perPage);
                }
            });

            window.addEventListener('resize', function () {
                var nextPageSize = pageSize();
                if (nextPageSize === perPage) return;
                perPage = nextPageSize;
                customerList.page = perPage;
                customerList.update();
            });

            if (dateRangeFilter) {
                dateRangeFilter.setAttribute('readonly', 'readonly');
                if (typeof flatpickr !== 'undefined') {
                    if (dateRangeFilter._flatpickr) {
                        dateRangeFilter._flatpickr.destroy();
                    }
                    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);
                    };
                    var dashboardUsesKhmerDates = @json(session('lang', app()->getLocale())) === 'kh';
                    var dashboardKhmerDateLocale = {
                        weekdays: {
                            shorthand: ['អា', 'ច', 'អ', 'ព', 'ព្រ', 'សុ', 'ស'],
                            longhand: ['អាទិត្យ', 'ចន្ទ', 'អង្គារ', 'ពុធ', 'ព្រហស្បតិ៍', 'សុក្រ', 'សៅរ៍']
                        },
                        months: {
                            shorthand: ['មក', 'កុ', 'មី', 'មេស', 'ឧស', 'មិថ', 'កក្ក', 'សី', 'កញ', 'តុ', 'វិ', 'ធ្នូ'],
                            longhand: ['មករា', 'កុម្ភៈ', 'មីនា', 'មេសា', 'ឧសភា', 'មិថុនា', 'កក្កដា', 'សីហា', 'កញ្ញា', 'តុលា', 'វិច្ឆិកា', 'ធ្នូ']
                        },
                        rangeSeparator: ' ដល់ ',
                        firstDayOfWeek: 1
                    };

                    flatpickr(dateRangeFilter, {
                        mode: 'range',
                        dateFormat: dashboardUsesKhmerDates ? 'd F, Y' : 'd M, Y',
                        locale: dashboardUsesKhmerDates ? dashboardKhmerDateLocale : 'default',
                        allowInput: false,
                        onReady: addDateRangeHelp,
                        onOpen: addDateRangeHelp
                    });
                }
            }

            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,
                    feb: 1, february: 1,
                    mar: 2, march: 2,
                    apr: 3, april: 3,
                    may: 4,
                    jun: 5, june: 5,
                    jul: 6, july: 6,
                    aug: 7, august: 7,
                    sep: 8, september: 8,
                    oct: 9, october: 9,
                    nov: 10, november: 10,
                    dec: 11, december: 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 monthKey = match[2].trim().toLowerCase();
                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() : '';
                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) from.setHours(0, 0, 0, 0);
                if (to) to.setHours(23, 59, 59, 999);
                return { from: from, to: to };
            }

            function cleanStatus(statusHtml) {
                return new DOMParser().parseFromString(statusHtml || '', 'text/html').body.textContent.trim();
            }

            function applyTableFilters() {
                var selected = statusFilter ? statusFilter.value : @json(__('All Status'));
                var selectedDocumentType = documentTypeFilter ? documentTypeFilter.value : '';
                var range = parseDateRange(dateRangeFilter ? dateRangeFilter.value : '');

                customerList.filter(function (item) {
                    if (selectedDocumentType && item.elm && item.elm.getAttribute('data-document-type-key') !== selectedDocumentType) {
                        return false;
                    }

                    if (selected !== @json(__('All Status'))) {
                        var allowed = statusFilterMap[selected] || [selected];
                        if (allowed.indexOf(cleanStatus(item.values().status)) === -1) {
                            return false;
                        }
                    }

                    if (!range.from && !range.to) 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 (range.from && rowDate < range.from) return false;
                    if (range.to && rowDate > range.to) return false;
                    return true;
                });
            

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

            function visibleHeaders() {
                return Array.prototype.slice.call(table.querySelectorAll('thead th[data-sort]'))
                    .map(function (th) { return (th.textContent || '').trim(); });
            }

            function exportColumnKeys() {
                return Array.prototype.slice.call(table.querySelectorAll('thead th[data-sort]'))
                    .map(function (th) { return th.getAttribute('data-sort'); });
            }

            function selectedExportFilters() {
                return typeof window.dashboardExportFilterRows === 'function'
                    ? window.dashboardExportFilterRows()
                    : [];
            }

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

            function downloadBlob(contents, type, extension) {
                var blob = new Blob([contents], { type: type });
                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 + extension;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }

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

            function exportCsv() {
                var rows = [visibleHeaders()].concat(customerList.matchingItems.map(visibleRowValues));
                var filters = selectedExportFilters();
                var csvRows = filters.length
                    ? [[@json(__('Selected Filters')), '']].concat(filters, [[]], rows)
                    : rows;
                downloadBlob('\uFEFF' + csvRows.map(function (row) { return row.map(csvCell).join(','); }).join('\r\n'), 'text/csv;charset=utf-8;', '.csv');
            }

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

            function exportExcel() {
                var rows = [visibleHeaders()].concat(customerList.matchingItems.map(visibleRowValues));
                var filters = selectedExportFilters();
                var filterHtml = filters.length
                    ? '<h4>' + htmlCell(@json(__('Selected Filters')), 'span') + '</h4><table border="1">' + filters.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>';
                downloadBlob('\uFEFF' + html, 'application/vnd.ms-excel;charset=utf-8;', '.xls');
            }

            function exportPdf() {
                var headers = visibleHeaders();
                var rows = customerList.matchingItems.map(visibleRowValues);
                var filters = selectedExportFilters();
                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 filterHtml = filters.length
                        ? '<div style="margin:0 0 14px;font-size:12px;"><strong>' + htmlCell(@json(__('Selected Filters')), 'span') + ':</strong> ' + filters.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: 'a4' });
                    var pageWidth = pdf.internal.pageSize.getWidth();
                    var pageHeight = pdf.internal.pageSize.getHeight();
                    var marginX = 28;
                    var marginY = 34;
                    var usableWidth = pageWidth - marginX * 2;
                    var imgWidth = usableWidth;
                    var imgHeight = canvas.height * imgWidth / canvas.width;
                    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 (statusFilter) statusFilter.addEventListener('change', applyTableFilters);
            if (documentTypeFilter) documentTypeFilter.addEventListener('change', applyTableFilters);
            if (dateRangeFilter) dateRangeFilter.addEventListener('change', applyTableFilters);
            if (resetTableFiltersBtn) {
                resetTableFiltersBtn.addEventListener('click', resetDashboardTableFilters);
            }
            if (exportCsvBtn) exportCsvBtn.addEventListener('click', exportCsv);
            if (exportExcelBtn) exportExcelBtn.addEventListener('click', exportExcel);
            if (exportPdfBtn) exportPdfBtn.addEventListener('click', exportPdf);

            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) {
                        if (statusFilter) {
                            statusFilter.selectedIndex = 0;
                            statusFilter.value = @json(__('All Status'));
                        }
                        applyTableFilters();
                        window.dispatchEvent(new CustomEvent('dashboard:filters-updated'));
                        return;
                    }

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

            applyTableFilters();
        })();
    </script>
    <script>
        document.addEventListener('show.bs.dropdown', function (event) {
            var trigger = event.target && event.target.matches && event.target.matches('.admin-action-menu-trigger')
                ? event.target
                : (event.target && event.target.querySelector ? event.target.querySelector('.admin-action-menu-trigger') : null);
            if (!trigger) {
                return;
            }

            var tableWrapper = trigger.closest('.table-responsive.table-card');
            if (tableWrapper) {
                tableWrapper.classList.add('admin-dropdown-open');
            }

            var tableCell = trigger.closest('th, td');
            if (tableCell) {
                tableCell.classList.add('admin-dropdown-cell-open');
            }
        });

        document.addEventListener('hidden.bs.dropdown', function (event) {
            var trigger = event.target && event.target.matches && event.target.matches('.admin-action-menu-trigger')
                ? event.target
                : (event.target && event.target.querySelector ? event.target.querySelector('.admin-action-menu-trigger') : null);
            if (!trigger) {
                return;
            }

            var tableWrapper = trigger.closest('.table-responsive.table-card');
            if (tableWrapper) {
                tableWrapper.classList.remove('admin-dropdown-open');
            }
            var tableCell = trigger.closest('th, td');
            if (tableCell) {
                tableCell.classList.remove('admin-dropdown-cell-open');
            }
        });
    </script>
    <script>
        (function () {
            function tableTitle(table) {
                var card = table ? table.closest('.card') : null;
                var title = card ? card.querySelector('.card-title') : null;
                return title ? title.textContent.trim() : @json(__('Export'));
            }

            function exportStamp() {
                var now = new Date();
                return [
                    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('');
            }

            function exportFileBase(table) {
                return (tableTitle(table) || 'export')
                    .toLowerCase()
                    .replace(/[^a-z0-9\u1780-\u17ff]+/gi, '-')
                    .replace(/^-+|-+$/g, '') || 'export';
            }

            function normalizedText(value) {
                return (value || '').replace(/\s+/g, ' ').trim();
            }

            function adminExportFilterRows(table) {
                var card = table ? table.closest('.card') : null;
                if (!card) return [];

                var labels = {
                    auditDateRangeFilter: @json(__('Date Range')),
                    auditActionFilter: @json(__('Action')),
                    auditActivityFilter: @json(__('Activity')),
                    userSearch: @json(__('Search')),
                    userRoleFilter: @json(__('Role')),
                    userOrganizationFilter: @json(__('Organization')),
                    organizationSearch: @json(__('Search')),
                    organizationStatusFilter: @json(__('Status')),
                    dtSearch: @json(__('Search')),
                    dtStatusFilter: @json(__('Status')),
                    wfSearch: @json(__('Search'))
                };
                var rows = [];

                Array.prototype.slice.call(card.querySelectorAll('input[type="text"], input[type="search"], select')).forEach(function (control) {
                    var value = '';
                    if (control.tagName === 'SELECT') {
                        if (!control.value || control.value === 'all' || control.selectedIndex <= 0) return;
                        value = control.selectedOptions.length ? control.selectedOptions[0].textContent : control.value;
                    } else {
                        value = control.value;
                        if (!normalizedText(value)) return;
                    }

                    var label = labels[control.id]
                        || control.getAttribute('aria-label')
                        || control.getAttribute('title')
                        || (control.classList.contains('search') ? @json(__('Search')) : control.getAttribute('placeholder'))
                        || @json(__('Filter'));
                    rows.push([normalizedText(label), normalizedText(value)]);
                });

                return rows;
            }

            function readableCellText(cell) {
                var checkbox = cell.querySelector('input[type="checkbox"]');
                if (checkbox) {
                    return checkbox.checked ? @json(__('Enabled')) : @json(__('Disabled'));
                }

                var clone = cell.cloneNode(true);
                clone.querySelectorAll('.dropdown-menu, .admin-action-menu-trigger, button, a.btn, input, select, textarea, script, style').forEach(function (node) {
                    node.remove();
                });

                return normalizedText(clone.textContent || cell.textContent || '');
            }

            function readableHeaderText(header) {
                var explicitLabel = header.getAttribute('data-export-label');
                if (explicitLabel) {
                    return normalizedText(explicitLabel);
                }

                var clone = header.cloneNode(true);
                clone.querySelectorAll([
                    '.dropdown',
                    '.dropdown-menu',
                    '.admin-action-menu-trigger',
                    '.dashboard-column-resizer',
                    '.dashboard-column-tools',
                    '.sort-indicator',
                    'button',
                    'script',
                    'style'
                ].join(',')).forEach(function (node) {
                    node.remove();
                });

                return normalizedText(clone.textContent || header.textContent || '');
            }

            function adminTableRows(table) {
                var headers = Array.prototype.slice.call(table.querySelectorAll('thead th'));
                var includedIndexes = headers.map(function (header, index) {
                    var label = readableHeaderText(header);
                    var ignored = header.hasAttribute('data-export-ignore')
                        || [@json(__('Action')), @json(__('Actions'))].indexOf(label) !== -1;
                    return label && !ignored ? index : null;
                }).filter(function (index) {
                    return index !== null;
                });

                var headerValues = includedIndexes.map(function (index) {
                    return readableHeaderText(headers[index]);
                });

                var rows = [headerValues];
                Array.prototype.slice.call(table.querySelectorAll('tbody tr')).forEach(function (row) {
                    if (table.id === 'auditTrailTable' && row.dataset.auditFilterMatch === 'false') {
                        return;
                    }

                    if (table.id !== 'auditTrailTable' && row.style.display === 'none') {
                        return;
                    }

                    if (row.querySelector('td[colspan]') && row.cells.length === 1) {
                        rows.push([readableCellText(row.cells[0])]);
                        return;
                    }

                    var values = includedIndexes.map(function (index) {
                        return row.cells[index] ? readableCellText(row.cells[index]) : '';
                    });

                    if (values.some(function (value) { return value !== ''; })) {
                        rows.push(values);
                    }
                });

                return rows;
            }

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

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

            function downloadAdminExport(table, contents, type, extension) {
                var blob = new Blob([contents], { type: type });
                var url = URL.createObjectURL(blob);
                var link = document.createElement('a');
                link.href = url;
                link.download = exportFileBase(table) + '-' + exportStamp() + extension;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
            }

            function exportAdminTableCsv(table) {
                var rows = adminTableRows(table);
                var filters = adminExportFilterRows(table);
                var csvRows = [];
                if (filters.length) {
                    csvRows.push([@json(__('Selected Filters')), '']);
                    csvRows = csvRows.concat(filters, [[]]);
                }
                csvRows = csvRows.concat(rows);
                downloadAdminExport(
                    table,
                    '\uFEFF' + csvRows.map(function (row) { return row.map(csvCell).join(','); }).join('\r\n'),
                    'text/csv;charset=utf-8;',
                    '.csv'
                );
            }

            function exportAdminTableExcel(table) {
                var rows = adminTableRows(table);
                var filters = adminExportFilterRows(table);
                var filterHtml = filters.length
                    ? '<h4>' + htmlCell(@json(__('Selected Filters')), 'span') + '</h4><table border="1">' + filters.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>';

                downloadAdminExport(table, '\uFEFF' + html, 'application/vnd.ms-excel;charset=utf-8;', '.xls');
            }

            function ensureExportScript(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 buildAdminExportTable(table) {
                var rows = adminTableRows(table);
                var filters = adminExportFilterRows(table);
                var wrap = document.createElement('div');
                wrap.style.position = 'fixed';
                wrap.style.left = '-10000px';
                wrap.style.top = '0';
                wrap.style.width = Math.max(1120, (rows[0] || []).length * 180) + '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 filterHtml = filters.length
                    ? '<div style="margin:0 0 14px;font-size:12px;"><strong>' + htmlCell(@json(__('Selected Filters')), 'span') + ':</strong> ' + filters.map(function (row) { return htmlCell(row[0] + ': ' + row[1], 'span'); }).join(' &nbsp; | &nbsp; ') + '</div>'
                    : '';
                wrap.innerHTML = '<h3 style="margin:0 0 14px;font-size:18px;">' + htmlCell(tableTitle(table), 'span') + '</h3>' + filterHtml
                    + '<table style="width:100%;border-collapse:collapse;font-size:12px;"><thead><tr>'
                    + (rows[0] || []).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.slice(1).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;
            }

            function exportAdminTablePdf(table) {
                Promise.all([
                    ensureExportScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'data-export-html2canvas', function () { return !!window.html2canvas; }),
                    ensureExportScript('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 = buildAdminExportTable(table);
                    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: 'a4' });
                    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;

                    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(exportFileBase(table) + '-' + exportStamp() + '.pdf');
                }).catch(function () {
                    alert(@json(__('Unable to export PDF right now. Please try again.')));
                });
            }

            document.addEventListener('click', function (event) {
                var trigger = event.target instanceof Element ? event.target.closest('.admin-table-export') : null;
                if (!trigger) {
                    return;
                }

                var table = document.getElementById(trigger.getAttribute('data-table-id') || '');
                if (!table) {
                    return;
                }

                var format = trigger.getAttribute('data-export-format') || 'csv';
                if (format === 'pdf') {
                    exportAdminTablePdf(table);
                } else if (format === 'excel') {
                    exportAdminTableExcel(table);
                } else {
                    exportAdminTableCsv(table);
                }
            });
        })();
    </script>
    @if(session('success'))
    <script>
        (function showAdminSuccessMessage() {
            if (typeof Swal === 'undefined') {
                return;
            }

            Swal.fire({
                title: '{{ __('Saved') }}',
                text: @json((string) session('success')),
                icon: 'success',
                confirmButtonText: '{{ __('OK') }}',
                customClass: {
                    confirmButton: 'btn btn-primary w-xs mt-2'
                },
                buttonsStyling: false
            });
        })();
    </script>
    @endif
    @if(session('error'))
    <script>
        (function showAdminErrorMessage() {
            if (typeof Swal === 'undefined') {
                return;
            }

            Swal.fire({
                title: '{{ __('Action Failed') }}',
                text: @json((string) session('error')),
                icon: 'error',
                confirmButtonText: '{{ __('OK') }}',
                customClass: {
                    confirmButton: 'btn btn-primary w-xs mt-2'
                },
                buttonsStyling: false
            });
        })();
    </script>
    @endif
    @if($activeAdminTab === 'role-permissions')
    <script>
        (function initializeRolePermissionsTab() {
            var editRoleModal = document.getElementById('modalEditRolePermission');
            if (editRoleModal) {
                editRoleModal.addEventListener('show.bs.modal', function (event) {
                    var trigger = event.relatedTarget;
                    if (!trigger) {
                        return;
                    }

                    var role = trigger.getAttribute('data-role') || '';
                    var urlTemplate = editRoleModal.getAttribute('data-update-url-template') || '';
                    var form = document.getElementById('editRolePermissionForm');
                    var nameEn = document.getElementById('editRoleNameEn');
                    var nameKh = document.getElementById('editRoleNameKh');
                    var isPermissionLockedRole = trigger.getAttribute('data-permission-locked') === '1';
                    var permissionFieldset = document.getElementById('editRolePermissionsFieldset');
                    var lockedNotice = document.getElementById('editRolePermissionsLockedNotice');
                    var permissions = [];

                    try {
                        permissions = JSON.parse(trigger.getAttribute('data-permissions') || '[]');
                    } catch (error) {
                        permissions = [];
                    }

                    if (form && urlTemplate && role) {
                        form.action = urlTemplate.replace('__ROLE__', encodeURIComponent(role));
                    }
                    if (nameEn) {
                        nameEn.value = trigger.getAttribute('data-name-en') || '';
                    }
                    if (nameKh) {
                        nameKh.value = trigger.getAttribute('data-name-kh') || '';
                    }
                    if (permissionFieldset) {
                        permissionFieldset.disabled = isPermissionLockedRole;
                    }
                    if (lockedNotice) {
                        lockedNotice.classList.toggle('d-none', !isPermissionLockedRole);
                    }

                    editRoleModal.querySelectorAll('.js-edit-role-permission-toggle').forEach(function (input) {
                        input.checked = permissions.indexOf(input.value) !== -1;
                        input.disabled = isPermissionLockedRole || input.getAttribute('data-locked-permission') === '1';
                    });
                });
            }

            if (typeof Swal === 'undefined') {
                return;
            }

            var rolePermissionsForm = document.getElementById('rolePermissionsForm');
            if (!rolePermissionsForm) {
                return;
            }

            var permissionToggles = Array.prototype.slice.call(rolePermissionsForm.querySelectorAll('input[type="checkbox"][name^="role_permissions["]'));
            if (permissionToggles.length === 0) {
                return;
            }

            var rolePermissionRows = Array.prototype.slice.call(document.querySelectorAll('#rolePermissionsTable .role-permission-row'));
            var rolePermissionSectionRows = Array.prototype.slice.call(document.querySelectorAll('#rolePermissionsTable .role-permission-section-row'));
            var rolePermissionsPaginationWrap = document.getElementById('rolePermissionsPaginationWrap');
            var rolePermissionsPaginationPrev = document.getElementById('rolePermissionsPaginationPrev');
            var rolePermissionsPaginationNext = document.getElementById('rolePermissionsPaginationNext');
            var rolePermissionsPageNumbers = document.getElementById('rolePermissionsPageNumbers');
            var rolePermissionsPage = 1;
            var rolePermissionsPerPage = 10;
            var preservedRolePermissionState = window.consumeAdminTabUiState('role-permissions');
            if (preservedRolePermissionState) {
                rolePermissionsPage = Math.max(1, Number(preservedRolePermissionState.page) || 1);
            }

            function renderRolePermissionPageButtons(totalPages) {
                if (!rolePermissionsPageNumbers) return;
                rolePermissionsPageNumbers.innerHTML = '';

                for (var page = 1; page <= totalPages; page++) {
                    var li = document.createElement('li');
                    li.className = 'page-item' + (page === rolePermissionsPage ? ' active' : '');
                    var link = document.createElement('a');
                    link.className = 'page-link';
                    link.href = 'javascript:void(0);';
                    link.textContent = page;
                    link.dataset.page = String(page);
                    li.appendChild(link);
                    rolePermissionsPageNumbers.appendChild(li);
                }
            }

            function applyRolePermissionPagination() {
                var totalPages = Math.max(1, Math.ceil(rolePermissionRows.length / rolePermissionsPerPage));
                rolePermissionsPage = Math.min(Math.max(1, rolePermissionsPage), totalPages);
                var start = (rolePermissionsPage - 1) * rolePermissionsPerPage;
                var visibleSections = {};

                rolePermissionRows.forEach(function (row, index) {
                    var visible = index >= start && index < start + rolePermissionsPerPage;
                    row.style.display = visible ? '' : 'none';
                    if (visible) {
                        visibleSections[row.dataset.section || ''] = true;
                    }
                });

                rolePermissionSectionRows.forEach(function (row) {
                    row.style.display = visibleSections[row.dataset.section || ''] ? '' : 'none';
                });

                if (rolePermissionsPaginationWrap) {
                    rolePermissionsPaginationWrap.style.display = rolePermissionRows.length > rolePermissionsPerPage ? 'flex' : 'none';
                }
                if (rolePermissionsPaginationPrev) {
                    rolePermissionsPaginationPrev.classList.toggle('disabled', rolePermissionsPage <= 1);
                }
                if (rolePermissionsPaginationNext) {
                    rolePermissionsPaginationNext.classList.toggle('disabled', rolePermissionsPage >= totalPages);
                }
                renderRolePermissionPageButtons(totalPages);
            }

            if (rolePermissionsPaginationPrev) {
                rolePermissionsPaginationPrev.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        rolePermissionsPage--;
                        applyRolePermissionPagination();
                    }
                });
            }
            if (rolePermissionsPaginationNext) {
                rolePermissionsPaginationNext.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        rolePermissionsPage++;
                        applyRolePermissionPagination();
                    }
                });
            }
            if (rolePermissionsPageNumbers) {
                rolePermissionsPageNumbers.addEventListener('click', function (event) {
                    var target = event.target.closest('[data-page]');
                    if (!target) return;
                    rolePermissionsPage = Number(target.dataset.page || 1);
                    applyRolePermissionPagination();
                });
            }

            function reorderRolePermissionRowsBySection() {
                var rolePermissionsTable = document.getElementById('rolePermissionsTable');
                var tbody = rolePermissionsTable ? rolePermissionsTable.querySelector('tbody') : null;
                if (!tbody) {
                    return;
                }

                rolePermissionSectionRows.forEach(function (sectionRow) {
                    var sectionKey = sectionRow.dataset.section || '';
                    tbody.appendChild(sectionRow);
                    rolePermissionRows
                        .filter(function (row) { return (row.dataset.section || '') === sectionKey; })
                        .forEach(function (row) { tbody.appendChild(row); });
                });
            }

            document.addEventListener('dashboard-data-table:sort', function (event) {
                if (!event.detail || !event.detail.table || event.detail.table.id !== 'rolePermissionsTable') {
                    return;
                }

                if (Number(event.detail.columnIndex || 0) !== 0) {
                    return;
                }

                event.preventDefault();
                event.detail.handled = true;
                rolePermissionRows = sortAdminDashboardRows(rolePermissionRows, 0, event.detail.order);
                reorderRolePermissionRowsBySection();
                rolePermissionsPage = 1;
                applyRolePermissionPagination();
            });

            applyRolePermissionPagination();

            document.querySelectorAll('.role-action-confirm-form').forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    var submitter = event.submitter || document.querySelector('button[form="' + form.id + '"]');
                    var message = submitter ? (submitter.getAttribute('data-confirm') || '') : '';
                    if (message === '') {
                        return;
                    }

                    event.preventDefault();
                    Swal.fire({
                        title: '{{ __('Confirm Action') }}',
                        text: message,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Continue') }}',
                        cancelButtonText: '{{ __('Cancel') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                            cancelButton: 'btn btn-light w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.value) {
                            window.submitAdminActionWithoutReload(form, 'role-permissions', '{{ __('Role Deleted') }}');
                        }
                    });
                });
            });

            function buildSnapshot() {
                return permissionToggles.map(function (input) {
                    return (input.name || '') + '|' + input.value + '|' + (input.checked ? '1' : '0');
                }).join('||');
            }

            var initialSnapshot = buildSnapshot();
            var allowNavigation = false;
            var saveInProgress = false;

            function hasUnsavedChanges() {
                return buildSnapshot() !== initialSnapshot;
            }

            function getFirstValidationError(payload) {
                if (!payload || typeof payload !== 'object') return '';
                if (payload.errors && typeof payload.errors === 'object') {
                    var keys = Object.keys(payload.errors);
                    if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                        return payload.errors[keys[0]][0];
                    }
                }
                return payload.message || '';
            }

            function submitRolePermissionFormWithAlert(formEl) {
                if (!formEl || saveInProgress) {
                    return;
                }

                saveInProgress = true;
                allowNavigation = true;

                var submitBtn = formEl.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                }

                fetch(formEl.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: new FormData(formEl)
                })
                .then(function (response) {
                    return response.json().catch(function () {
                        return {};
                    }).then(function (payload) {
                        if (!response.ok) {
                            throw new Error(getFirstValidationError(payload) || '{{ __('Unable to save role permissions.') }}');
                        }
                        return payload;
                    });
                })
                .then(function (payload) {
                    initialSnapshot = buildSnapshot();
                    allowNavigation = false;
                    return Swal.fire({
                        title: '{{ __('Saved') }}',
                        text: payload.message || '{{ __('Role permissions updated successfully.') }}',
                        icon: 'success',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .catch(function (error) {
                    allowNavigation = false;
                    Swal.fire({
                        title: '{{ __('Save Failed') }}',
                        text: error.message || '{{ __('Please try again.') }}',
                        icon: 'error',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .finally(function () {
                    saveInProgress = false;
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                });
            }

            function submitRoleSaveFormWithAlert(formEl) {
                if (!formEl || saveInProgress) {
                    return;
                }

                saveInProgress = true;
                allowNavigation = true;

                var submitBtn = formEl.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                }

                fetch(formEl.action, {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: new FormData(formEl)
                })
                .then(function (response) {
                    return response.json().catch(function () {
                        return {};
                    }).then(function (payload) {
                        if (!response.ok) {
                            throw new Error(getFirstValidationError(payload) || '{{ __('Unable to save role.') }}');
                        }
                        return payload;
                    });
                })
                .then(function (payload) {
                    allowNavigation = true;
                    return Swal.fire({
                        title: '{{ __('Saved') }}',
                        text: payload.message || '{{ __('Role updated successfully.') }}',
                        icon: 'success',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function () {
                        window.refreshAdminTabContent('role-permissions', @json(route('role.dashboard', ['admin_tab' => 'role-permissions'])));
                    });
                })
                .catch(function (error) {
                    allowNavigation = false;
                    Swal.fire({
                        title: '{{ __('Save Failed') }}',
                        text: error.message || '{{ __('Please try again.') }}',
                        icon: 'error',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs mt-2'
                        },
                        buttonsStyling: false
                    });
                })
                .finally(function () {
                    saveInProgress = false;
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                });
            }

            document.addEventListener('submit', function (event) {
                var target = event.target;
                if (!(target instanceof HTMLFormElement)) {
                    return;
                }

                if ((target.id || '') === 'rolePermissionsForm') {
                    event.preventDefault();
                    submitRolePermissionFormWithAlert(target);
                }

                if (target.getAttribute('data-role-save-form') === '1') {
                    event.preventDefault();
                    submitRoleSaveFormWithAlert(target);
                }
            }, true);

            document.addEventListener('click', function (event) {
                if (allowNavigation || saveInProgress || !hasUnsavedChanges()) {
                    return;
                }

                var anchor = event.target instanceof Element
                    ? event.target.closest('a[href]')
                    : null;

                if (!anchor) {
                    return;
                }

                var href = anchor.getAttribute('href') || '';
                if (href === '' || href.charAt(0) === '#') {
                    return;
                }

                var isNewTab = anchor.target === '_blank' || event.ctrlKey || event.metaKey || event.shiftKey || event.button === 1;
                if (isNewTab) {
                    return;
                }

                event.preventDefault();

                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You changed role permissions. Save before leaving this tab?') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowNavigation = true;
                        window.navigateDashboardContent(anchor.href);
                    }
                });
            }, true);

            window.addEventListener('beforeunload', function (event) {
                if (allowNavigation || saveInProgress || !hasUnsavedChanges()) {
                    return;
                }

                event.preventDefault();
                event.returnValue = '';
            });
        })();
    </script>
    @endif
    <script>
        window.refreshAdminTabContent = function (adminTab, url) {
            window.captureAdminTabUiState(adminTab);
            window.navigateDashboardContent(url);
        };

        window.submitAdminActionWithoutReload = function (form, adminTab, successTitle) {
            if (!form || form.dataset.submitting === '1') {
                return Promise.resolve();
            }

            form.dataset.submitting = '1';

            return fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: new FormData(form)
            })
            .then(function (response) {
                return response.json().catch(function () {
                    return {};
                }).then(function (payload) {
                    if (!response.ok) {
                        throw new Error(payload.message || '{{ __('Unable to complete this action.') }}');
                    }

                    return payload;
                });
            })
            .then(function (payload) {
                return Swal.fire({
                    title: successTitle || '{{ __('Deleted') }}',
                    text: payload.message || '{{ __('Deleted successfully.') }}',
                    icon: 'success',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .then(function () {
                var targetUrl = new URL(@json(route('role.dashboard')), window.location.origin);
                targetUrl.searchParams.set('admin_tab', adminTab);
                window.refreshAdminTabContent(adminTab, targetUrl.toString());
            })
            .catch(function (error) {
                return Swal.fire({
                    title: '{{ __('Action Failed') }}',
                    text: error && error.message ? error.message : '{{ __('Please try again.') }}',
                    icon: 'error',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .finally(function () {
                delete form.dataset.submitting;
            });
        };

        function getResponsiveAdminTablePageSize() {
            return 10;
        }

        function normalizeAdminDashboardSortText(value) {
            return (value || '').toString().replace(/\s+/g, ' ').trim();
        }

        function adminDashboardSortValue(row, columnIndex) {
            var cell = row && row.cells ? row.cells[columnIndex] : null;
            if (!cell) {
                return '';
            }

            var timestampSource = cell.matches('[data-timestamp]') ? cell : cell.querySelector('[data-timestamp]');
            if (timestampSource && timestampSource.dataset.timestamp) {
                var timestamp = Number(timestampSource.dataset.timestamp);
                if (!Number.isNaN(timestamp)) {
                    return timestamp;
                }
            }

            var checkbox = cell.querySelector('input[type="checkbox"]');
            if (checkbox) {
                return checkbox.checked ? 1 : 0;
            }

            var text = normalizeAdminDashboardSortText(cell.textContent || '');
            var numericText = text.replace(/,/g, '');
            var number = Number(numericText);

            if (text !== '' && !Number.isNaN(number) && /^-?\d+(?:\.\d+)?$/.test(numericText)) {
                return number;
            }

            return text.toLowerCase();
        }

        function compareAdminDashboardRows(rowA, rowB, columnIndex, order) {
            var a = adminDashboardSortValue(rowA, columnIndex);
            var b = adminDashboardSortValue(rowB, columnIndex);
            var result;

            if (typeof a === 'number' && typeof b === 'number') {
                result = a - b;
            } else {
                result = String(a).localeCompare(String(b), undefined, {
                    numeric: true,
                    sensitivity: 'base'
                });
            }

            return order === 'desc' ? result * -1 : result;
        }

        function sortAdminDashboardRows(rows, columnIndex, order) {
            var sortedRows = Array.prototype.slice.call(rows || []).sort(function (rowA, rowB) {
                return compareAdminDashboardRows(rowA, rowB, columnIndex, order);
            });

            var tbody = sortedRows.length > 0 ? sortedRows[0].parentNode : null;
            if (tbody) {
                sortedRows.forEach(function (row) {
                    tbody.appendChild(row);
                });
            }

            return sortedRows;
        }

        (function () {
            var usersTable = document.getElementById('usersTable');
            if (usersTable) {
                var userSearch = document.getElementById('userSearch');
                var userRoleFilter = document.getElementById('userRoleFilter');
                var userOrganizationFilter = document.getElementById('userOrganizationFilter');
                var userResetFilterBtn = document.getElementById('userResetFilterBtn');
                var userUrlParams = new URLSearchParams(window.location.search);
                var initialUserSearch = (userUrlParams.get('user_search') || '').trim();
                var initialUserRole = (userUrlParams.get('user_role') || 'all').trim();
                var initialUserOrganization = (userUrlParams.get('user_organization') || 'all').trim();
                if (userSearch && initialUserSearch !== '') {
                    userSearch.value = initialUserSearch;
                }
                if (userRoleFilter) {
                    userRoleFilter.value = initialUserRole !== '' && userRoleFilter.querySelector('option[value="' + initialUserRole + '"]')
                        ? initialUserRole
                        : 'all';
                }
                if (userOrganizationFilter) {
                    userOrganizationFilter.value = initialUserOrganization !== '' ? initialUserOrganization : 'all';
                    if (userOrganizationFilter.value !== initialUserOrganization && initialUserOrganization !== 'all') {
                        userOrganizationFilter.value = 'all';
                    }
                }
                var userRows = Array.prototype.slice.call(document.querySelectorAll('#usersTable .user-row'));
                var usersPaginationWrap = document.getElementById('usersPaginationWrap');
                var usersPaginationPrev = document.getElementById('usersPaginationPrev');
                var usersPaginationNext = document.getElementById('usersPaginationNext');
                var usersPageNumbers    = document.getElementById('usersPageNumbers');
                var usersPage = 1;
                var usersPerPage = getResponsiveAdminTablePageSize();
                var preservedUserState = window.consumeAdminTabUiState('users');
                if (preservedUserState) {
                    var preservedUserValues = preservedUserState.values || {};
                    if (userSearch && Object.prototype.hasOwnProperty.call(preservedUserValues, 'userSearch')) {
                        userSearch.value = preservedUserValues.userSearch;
                    }
                    if (userRoleFilter && Object.prototype.hasOwnProperty.call(preservedUserValues, 'userRoleFilter')) {
                        userRoleFilter.value = preservedUserValues.userRoleFilter;
                    }
                    if (userOrganizationFilter && Object.prototype.hasOwnProperty.call(preservedUserValues, 'userOrganizationFilter')) {
                        userOrganizationFilter.value = preservedUserValues.userOrganizationFilter;
                    }
                    usersPage = Math.max(1, Number(preservedUserState.page) || 1);
                }

                function renderUsersPageButtons(totalPages) {
                    if (!usersPageNumbers) return;
                    usersPageNumbers.innerHTML = '';
                    var range = 2;
                    for (var p = 1; p <= totalPages; p++) {
                        if (p === 1 || p === totalPages || (p >= usersPage - range && p <= usersPage + range)) {
                            var li = document.createElement('li');
                            li.className = 'page-item' + (p === usersPage ? ' active' : '');
                            li.innerHTML = '<a class="page-link" href="javascript:void(0);">' + p + '</a>';
                            (function (page) {
                                li.addEventListener('click', function () {
                                    usersPage = page;
                                    applyUserFilter();
                                });
                            })(p);
                            usersPageNumbers.appendChild(li);
                        } else if (
                            (p === usersPage - range - 1 && p > 1) ||
                            (p === usersPage + range + 1 && p < totalPages)
                        ) {
                            var liDot = document.createElement('li');
                            liDot.className = 'page-item disabled';
                            liDot.innerHTML = '<a class="page-link" href="javascript:void(0);">...</a>';
                            usersPageNumbers.appendChild(liDot);
                        }
                    }
                }

                var applyUserFilter = function () {
                    var searchValue = (userSearch && userSearch.value ? userSearch.value : '').toLowerCase().trim();
                    var roleValue = userRoleFilter ? userRoleFilter.value : 'all';
                    var organizationValue = userOrganizationFilter ? userOrganizationFilter.value : 'all';
                    var filteredRows = [];

                    userRows.forEach(function (row) {
                        var matchesRole = roleValue === 'all' || row.dataset.role === roleValue;
                        var rowOrganization = row.dataset.organizationName || '';
                        var matchesOrganization = organizationValue === 'all'
                            || (organizationValue === '__none__' && rowOrganization.trim() === '')
                            || rowOrganization === organizationValue;
                        var haystack = [
                            row.dataset.name,
                            row.dataset.email,
                            row.dataset.empid,
                            rowOrganization.toLowerCase()
                        ].join(' ');
                        var matchesSearch = searchValue === '' || haystack.indexOf(searchValue) !== -1;
                        if (matchesRole && matchesOrganization && matchesSearch) {
                            filteredRows.push(row);
                        }
                        row.style.display = 'none';
                    });

                    var totalPages = Math.max(1, Math.ceil(filteredRows.length / usersPerPage));
                    if (usersPage > totalPages) usersPage = totalPages;

                    var startIndex = (usersPage - 1) * usersPerPage;
                    filteredRows.slice(startIndex, startIndex + usersPerPage).forEach(function (row) {
                        row.style.display = '';
                    });

                    var showPagination = filteredRows.length > usersPerPage;
                    if (usersPaginationWrap) usersPaginationWrap.style.display = showPagination ? 'flex' : 'none';
                    if (showPagination) renderUsersPageButtons(totalPages);
                    if (usersPaginationPrev) usersPaginationPrev.classList.toggle('disabled', usersPage <= 1);
                    if (usersPaginationNext) usersPaginationNext.classList.toggle('disabled', usersPage >= totalPages);
                };

                if (userSearch) {
                    userSearch.addEventListener('input', function () {
                        usersPage = 1;
                        applyUserFilter();
                    });
                }
                if (userRoleFilter) {
                    userRoleFilter.addEventListener('change', function () {
                        usersPage = 1;
                        applyUserFilter();
                    });
                }
                if (userOrganizationFilter) {
                    userOrganizationFilter.addEventListener('change', function () {
                        usersPage = 1;
                        applyUserFilter();
                    });
                }
                if (userResetFilterBtn) {
                    userResetFilterBtn.addEventListener('click', function () {
                        if (userSearch) userSearch.value = '';
                        if (userRoleFilter) userRoleFilter.value = 'all';
                        if (userOrganizationFilter) userOrganizationFilter.value = 'all';
                        usersPage = 1;
                        applyUserFilter();
                    });
                }
                if (usersPaginationPrev) {
                    usersPaginationPrev.addEventListener('click', function (e) {
                        e.preventDefault();
                        if (!this.classList.contains('disabled')) {
                            usersPage = Math.max(1, usersPage - 1);
                            applyUserFilter();
                        }
                    });
                }
                if (usersPaginationNext) {
                    usersPaginationNext.addEventListener('click', function (e) {
                        e.preventDefault();
                        if (!this.classList.contains('disabled')) {
                            usersPage = usersPage + 1;
                            applyUserFilter();
                        }
                    });
                }
                window.addEventListener('resize', function () {
                    var nextPerPage = getResponsiveAdminTablePageSize();
                    if (nextPerPage !== usersPerPage) {
                        usersPerPage = nextPerPage;
                        usersPage = 1;
                        applyUserFilter();
                    }
                });

                document.addEventListener('dashboard-data-table:sort', function (event) {
                    if (!event.detail || !event.detail.table || event.detail.table.id !== 'usersTable') {
                        return;
                    }

                    event.preventDefault();
                    event.detail.handled = true;
                    userRows = sortAdminDashboardRows(userRows, event.detail.columnIndex, event.detail.order);
                    usersPage = 1;
                    applyUserFilter();
                });

                applyUserFilter();

                var roleOrganizationOfficerMap = @json($roleOrganizationOfficerMap ?? []);

                function roleIsOrganizationOfficer(role) {
                    return !!roleOrganizationOfficerMap[(role || '').toString()];
                }

                // Helper function to toggle organization field visibility and filter options
                function toggleOrganizationField() {
                    var roleSelect = document.getElementById('editUserRole');
                    var organizationWrapper = document.getElementById('editUserOrganizationWrapper');
                    var organizationSelect = document.getElementById('editUserOrganization');
                    var organizationLabel = document.getElementById('editUserOrganizationLabel');

                    if (roleSelect && organizationWrapper && organizationSelect) {
                        var selectedRole = roleSelect.value;
                        var shouldHide = !roleIsOrganizationOfficer(selectedRole);

                        if (shouldHide) {
                            organizationWrapper.style.display = 'none';
                            organizationSelect.value = '';
                        } else {
                            organizationWrapper.style.display = '';
                            filterOrganizationOptions(organizationSelect, selectedRole);

                            // Update label based on role.
                            if (organizationLabel) {
                                organizationLabel.textContent = '{{ __('Organization') }}';
                            }

                            var placeholderOption = organizationSelect.querySelector('option[value=""]');
                            if (placeholderOption) {
                                placeholderOption.textContent = '-- {{ __('Please select an organization') }} --';
                            }
                        }
                    }
                }

                // Helper function to filter organization dropdown options based on role
                function filterOrganizationOptions(organizationSelect, role) {
                    if (!organizationSelect) return;
                    var options = organizationSelect.querySelectorAll('option');
                    var currentValue = organizationSelect.value;
                    var hasValidOption = false;

                    options.forEach(function (option) {
                        if (option.value === '') {
                            // Always show the "Please select an organization" option
                            option.style.display = '';
                            return;
                        }
                        var shouldShow = true;

                        option.style.display = shouldShow ? '' : 'none';
                        
                        // Track if current value is still valid
                        if (option.value === currentValue && shouldShow) {
                            hasValidOption = true;
                        }
                    });

                    // Reset value if current selection is no longer valid
                    if (!hasValidOption) {
                        organizationSelect.value = '';
                    }
                }

                // Add event listener to role dropdown to toggle organization field
                var editUserRoleSelect = document.getElementById('editUserRole');
                if (editUserRoleSelect) {
                    editUserRoleSelect.addEventListener('change', function () {
                        toggleOrganizationField();
                    });
                }

                // Helper function to toggle organization field visibility in Add New User modal
                function toggleAddUserOrganizationField() {
                    var roleSelect = document.getElementById('addUserRole');
                    var organizationWrapper = document.getElementById('addUserOrganizationWrapper');
                    var organizationCheckboxes = document.getElementById('addUserOrganizationCheckboxes');
                    var organizationSelect = document.getElementById('addUserOrganizationSelect');
                    var organizationLabel = document.getElementById('addUserOrganizationLabel');

                    if (roleSelect && organizationWrapper) {
                        var selectedRole = roleSelect.value;
                        var shouldHide = !roleIsOrganizationOfficer(selectedRole);

                        if (shouldHide) {
                            organizationWrapper.style.display = 'none';
                            if (organizationSelect) organizationSelect.value = '';
                            if (organizationCheckboxes) {
                                organizationCheckboxes.style.display = 'none';
                                var checkboxes = organizationCheckboxes.querySelectorAll('input[type="checkbox"]');
                                checkboxes.forEach(function(cb) { cb.checked = false; });
                            }
                        } else {
                            organizationWrapper.style.display = '';
                            if (organizationCheckboxes) organizationCheckboxes.style.display = '';
                            filterOrganizationOptions(organizationSelect, selectedRole);

                            // Update label based on role.
                            if (organizationLabel) {
                                organizationLabel.textContent = '{{ __('Organization') }}';
                            }

                            var placeholderOption = organizationSelect.querySelector('option[value=""]');
                            if (placeholderOption) {
                                placeholderOption.textContent = '-- {{ __('Please select an organization') }} --';
                            }
                        }
                    }
                }

                // Add event listener to Add New User role dropdown
                var addUserRoleSelect = document.getElementById('addUserRole');
                if (addUserRoleSelect) {
                    addUserRoleSelect.addEventListener('change', function () {
                        toggleAddUserOrganizationField();
                    });
                }

                // Initialize organization field visibility for Add New User modal
                var addUserModal = document.getElementById('modalCreateUser');
                var addUserModalInitialState = '';
                var allowAddUserModalClose = false;
                if (addUserModal) {
                    addUserModal.addEventListener('shown.bs.modal', function () {
                        toggleAddUserOrganizationField();
                        allowAddUserModalClose = false;
                        addUserModalInitialState = getAddUserSnapshot();
                    });

                    addUserModal.addEventListener('hide.bs.modal', function (event) {
                        if (allowAddUserModalClose) {
                            allowAddUserModalClose = false;
                            return;
                        }

                        if (!addUserModalInitialState || getAddUserSnapshot() === addUserModalInitialState) {
                            return;
                        }

                        event.preventDefault();
                        Swal.fire({
                            title: '{{ __('Unsaved Changes') }}',
                            text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: '{{ __('Leave Without Saving') }}',
                            cancelButtonText: '{{ __('Stay') }}',
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                                cancelButton: 'btn btn-light w-xs mt-2'
                            },
                            buttonsStyling: false
                        }).then(function (result) {
                            if (result.value) {
                                allowAddUserModalClose = true;
                                var modalInstance = bootstrap.Modal.getInstance(addUserModal);
                                if (modalInstance) {
                                    modalInstance.hide();
                                }
                            }
                        });
                    });
                }

                // Initialize organization field visibility for Edit User modal
                var editUserModal = document.getElementById('modalEditUser');
                var editUserModalInitialState = '';
                var allowEditUserModalClose = false;
                if (editUserModal) {
                    editUserModal.addEventListener('shown.bs.modal', function () {
                        toggleOrganizationField();
                        allowEditUserModalClose = false;
                        editUserModalInitialState = getEditUserSnapshot();
                    });

                    editUserModal.addEventListener('hide.bs.modal', function (event) {
                        if (allowEditUserModalClose) {
                            allowEditUserModalClose = false;
                            return;
                        }

                        if (!editUserModalInitialState || getEditUserSnapshot() === editUserModalInitialState) {
                            return;
                        }

                        event.preventDefault();
                        Swal.fire({
                            title: '{{ __('Unsaved Changes') }}',
                            text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: '{{ __('Leave Without Saving') }}',
                            cancelButtonText: '{{ __('Stay') }}',
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                                cancelButton: 'btn btn-light w-xs mt-2'
                            },
                            buttonsStyling: false
                        }).then(function (result) {
                            if (result.value) {
                                allowEditUserModalClose = true;
                                var modalInstance = bootstrap.Modal.getInstance(editUserModal);
                                if (modalInstance) {
                                    modalInstance.hide();
                                }
                            }
                        });
                    });
                }

                function getAddUserSnapshot() {
                    var form = document.getElementById('formCreateUser');
                    if (!form) return '';
                    var inputs = form.querySelectorAll('input, select, textarea');
                    var data = {};
                    inputs.forEach(function (input) {
                        if (input.name) {
                            if (input.type === 'checkbox') {
                                data[input.name] = input.checked ? '1' : '0';
                            } else {
                                data[input.name] = input.value || '';
                            }
                        }
                    });
                    return JSON.stringify(data);
                }

                function getEditUserSnapshot() {
                    return JSON.stringify({
                        first_name: (document.getElementById('editUserFirstName') || {}).value || '',
                        last_name: (document.getElementById('editUserLastName') || {}).value || '',
                        email: (document.getElementById('editUserEmail') || {}).value || '',
                        role: (document.getElementById('editUserRole') || {}).value || '',
                        organization_name: (document.getElementById('editUserOrganization') || {}).value || ''
                    });
                }

                function getFirstValidationError(payload) {
                    if (!payload || typeof payload !== 'object') return '';
                    if (payload.errors && typeof payload.errors === 'object') {
                        var keys = Object.keys(payload.errors);
                        if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                            return payload.errors[keys[0]][0];
                        }
                    }
                    return payload.message || '';
                }

                function submitUserFormWithAlert(formEl, successTitle) {
                    if (!formEl) return;

                    var submitBtn = formEl.querySelector('button[type="submit"]');
                    if (submitBtn) submitBtn.disabled = true;

                    fetch(formEl.action, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        body: new FormData(formEl)
                    })
                    .then(function (response) {
                        return response.json().catch(function () {
                            return {};
                        }).then(function (payload) {
                            if (!response.ok) {
                                throw new Error(getFirstValidationError(payload) || '{{ __('Unable to save user.') }}');
                            }
                            return payload;
                        });
                    })
                    .then(function (payload) {
                        var modalEl = formEl.closest('.modal');
                        if (modalEl) {
                            if (formEl.id === 'formCreateUser') {
                                allowAddUserModalClose = true;
                            } else if (formEl.id === 'formEditUser') {
                                allowEditUserModalClose = true;
                            }
                            var modalInstance = bootstrap.Modal.getInstance(modalEl);
                            if (modalInstance) modalInstance.hide();
                        }

                        return Swal.fire({
                            title: successTitle,
                            text: payload.message || '{{ __('Saved successfully.') }}',
                            icon: 'success',
                            confirmButtonText: '{{ __('OK') }}',
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs mt-2'
                            },
                            buttonsStyling: false
                        });
                    })
                    .then(function () {
                        // Navigate to the dashboard with users tab instead of just reloading
                        window.refreshAdminTabContent('users', @json(route('role.dashboard', ['admin_tab' => 'users'])));
                    })
                    .catch(function (error) {
                        var errorMessage = error && error.message ? error.message : '{{ __('Please check your input and try again.') }}';
                        Swal.fire({
                            title: '{{ __('Save Failed') }}',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: '{{ __('OK') }}',
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs mt-2'
                            },
                            buttonsStyling: false
                        });
                    })
                    .finally(function () {
                        if (submitBtn) submitBtn.disabled = false;
                    });
                }

                var createUserForm = document.getElementById('formCreateUser');
                if (createUserForm) {
                    createUserForm.addEventListener('submit', function (e) {
                        e.preventDefault();
                        submitUserFormWithAlert(createUserForm, '{{ __('User Created') }}');
                    });
                }

                var editUserForm = document.getElementById('formEditUser');
                if (editUserForm) {
                    editUserForm.addEventListener('submit', function (e) {
                        e.preventDefault();
                        submitUserFormWithAlert(editUserForm, '{{ __('User Updated') }}');
                    });
                }

                var resetUserPasswordModal = document.getElementById('modalResetUserPassword');
                var resetUserPasswordForm = document.getElementById('formResetUserPassword');
                var resetPasswordInput = document.getElementById('resetUserPasswordValue');
                var resetPasswordToggle = document.getElementById('toggleResetPasswordVisibility');
                var resetPasswordConfirmText = document.getElementById('resetPasswordConfirmText');
                var resetPasswordWarning = document.getElementById('resetPasswordWarning');
                var resetPasswordResult = document.getElementById('resetPasswordResult');
                var resetPasswordSubmitBtn = document.getElementById('resetPasswordSubmitBtn');
                var resetPasswordCancelBtn = document.getElementById('resetPasswordCancelBtn');
                var resetPasswordCloseBtn = document.getElementById('resetPasswordCloseBtn');

                function setResetPasswordModalState(isDone) {
                    if (resetPasswordConfirmText) resetPasswordConfirmText.classList.toggle('d-none', isDone);
                    if (resetPasswordWarning) resetPasswordWarning.classList.toggle('d-none', isDone);
                    if (resetPasswordResult) resetPasswordResult.classList.toggle('d-none', !isDone);
                    if (resetPasswordSubmitBtn) resetPasswordSubmitBtn.classList.toggle('d-none', isDone);
                    if (resetPasswordCancelBtn) resetPasswordCancelBtn.classList.toggle('d-none', isDone);
                    if (resetPasswordCloseBtn) resetPasswordCloseBtn.classList.toggle('d-none', !isDone);
                }

                if (resetPasswordToggle && resetPasswordInput) {
                    resetPasswordToggle.addEventListener('click', function () {
                        var isHidden = resetPasswordInput.type === 'password';
                        resetPasswordInput.type = isHidden ? 'text' : 'password';
                        resetPasswordToggle.innerHTML = '<i class="' + (isHidden ? 'ri-eye-off-line' : 'ri-eye-line') + '"></i>';
                        resetPasswordToggle.setAttribute('aria-label', isHidden ? '{{ __('Hide password') }}' : '{{ __('Show password') }}');
                    });
                }

                if (resetUserPasswordForm) {
                    resetUserPasswordForm.addEventListener('submit', function (e) {
                        e.preventDefault();
                        if (resetPasswordSubmitBtn) resetPasswordSubmitBtn.disabled = true;

                        fetch(resetUserPasswordForm.action, {
                            method: 'POST',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest',
                                'Accept': 'application/json'
                            },
                            body: new FormData(resetUserPasswordForm)
                        })
                        .then(function (response) {
                            return response.json().catch(function () {
                                return {};
                            }).then(function (payload) {
                                if (!response.ok) {
                                    throw new Error(getFirstValidationError(payload) || '{{ __('Unable to reset password.') }}');
                                }
                                return payload;
                            });
                        })
                        .then(function (payload) {
                            if (resetPasswordInput) {
                                resetPasswordInput.type = 'password';
                                resetPasswordInput.value = payload.password || '12345678';
                            }
                            if (resetPasswordToggle) {
                                resetPasswordToggle.innerHTML = '<i class="ri-eye-line"></i>';
                                resetPasswordToggle.setAttribute('aria-label', '{{ __('Show password') }}');
                            }
                            setResetPasswordModalState(true);
                        })
                        .catch(function (error) {
                            Swal.fire({
                                title: '{{ __('Reset Failed') }}',
                                text: error && error.message ? error.message : '{{ __('Unable to reset password.') }}',
                                icon: 'error',
                                confirmButtonText: '{{ __('OK') }}',
                                customClass: {
                                    confirmButton: 'btn btn-primary w-xs mt-2'
                                },
                                buttonsStyling: false
                            });
                        })
                        .finally(function () {
                            if (resetPasswordSubmitBtn) resetPasswordSubmitBtn.disabled = false;
                        });
                    });
                }

                // Edit button
                usersTable.addEventListener('click', function (e) {
                    var editBtn = e.target.closest('.edit-item-btn');
                    if (editBtn) {
                        var row = editBtn.closest('tr');
                        var userId = row.dataset.id;
                        var firstName = (row.dataset.firstName || '').trim();
                        var lastName = (row.dataset.lastName || '').trim();
                        if (!firstName && !lastName) {
                            var fallbackFullName = (row.dataset.fullname || '').trim();
                            if (fallbackFullName) {
                                var parts = fallbackFullName.split(/\s+/);
                                firstName = parts.shift() || '';
                                lastName = parts.join(' ');
                            }
                        }
                        document.getElementById('editUserFirstName').value = firstName;
                        document.getElementById('editUserLastName').value = lastName;
                        document.getElementById('editUserEmail').value = row.dataset.userEmail;
                        var rawRole = (row.dataset.userRole || '').toLowerCase();
                        var normalizedRole = row.dataset.userRole;
                        document.getElementById('editUserRole').value = normalizedRole;
                        document.getElementById('editUserOrganization').value = row.dataset.organizationName || '';
                        document.getElementById('formEditUser').action = '/admin/users/' + userId;
                        var modal = new bootstrap.Modal(document.getElementById('modalEditUser'));
                        modal.show();
                        
                        // Toggle organization field visibility based on role
                        toggleOrganizationField();
                    }

                    var resetPasswordBtn = e.target.closest('.reset-password-btn');
                    if (resetPasswordBtn) {
                        var row = resetPasswordBtn.closest('tr');
                        var userId = row.dataset.id;
                        var userName = row.dataset.fullname || '';
                        var resetUserName = document.getElementById('resetPasswordUserName');
                        if (resetUserName) {
                            resetUserName.textContent = userName;
                        }
                        if (resetPasswordInput) {
                            resetPasswordInput.type = 'password';
                            resetPasswordInput.value = '12345678';
                        }
                        if (resetPasswordToggle) {
                            resetPasswordToggle.innerHTML = '<i class="ri-eye-line"></i>';
                            resetPasswordToggle.setAttribute('aria-label', '{{ __('Show password') }}');
                        }
                        if (resetUserPasswordForm) {
                            resetUserPasswordForm.action = '/admin/users/' + userId + '/reset-password';
                        }
                        setResetPasswordModalState(false);
                        var resetModal = new bootstrap.Modal(resetUserPasswordModal);
                        resetModal.show();
                    }

                    // Disable / Enable button
                    var disableBtn = e.target.closest('.disable-item-btn');
                    if (disableBtn) {
                        var row = disableBtn.closest('tr');
                        var userId = row.dataset.id;
                        var isDisabling = disableBtn.dataset.action === 'disable';
                        if (isDisabling && String(userId) === '{{ Auth::id() }}') {
                            Swal.fire({
                                title: '{{ __('Action not allowed') }}',
                                text: '{{ __('You cannot disable your own account.') }}',
                                icon: 'warning',
                                customClass: {
                                    confirmButton: 'btn btn-primary w-xs mt-2',
                                },
                                confirmButtonText: '{{ __('OK') }}',
                                buttonsStyling: false,
                                showCloseButton: true
                            });
                            return;
                        }

                        Swal.fire({
                            title: isDisabling ? '{{ __('Disable this user?') }}' : '{{ __('Enable this user?') }}',
                            text: isDisabling ? '{{ __('They will not be able to log in until re-enabled.') }}' : '{{ __('This user will be able to log in again.') }}',
                            icon: 'warning',
                            showCancelButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                                cancelButton: 'btn btn-danger w-xs mt-2',
                            },
                            confirmButtonText: isDisabling ? '{{ __('Yes, disable!') }}' : '{{ __('Yes, enable!') }}',
                            cancelButtonText: '{{ __('Cancel') }}',
                            buttonsStyling: false,
                            showCloseButton: true
                        }).then(function (result) {
                            if (result.value) {
                                var form = document.getElementById('formToggleUser');
                                form.action = '/admin/users/' + userId + '/status';
                                window.captureAdminTabUiState('users');
                                form.submit();
                            }
                        });
                    }

                    var deleteBtn = e.target.closest('.delete-item-btn');
                    if (deleteBtn) {
                        var deleteRow = deleteBtn.closest('tr');
                        var deleteUserId = deleteRow.dataset.id;
                        var deleteUserName = deleteRow.dataset.fullname || '{{ __('this user') }}';

                        if (String(deleteUserId) === '{{ Auth::id() }}') {
                            Swal.fire({
                                title: '{{ __('Action not allowed') }}',
                                text: '{{ __('You cannot delete your own account.') }}',
                                icon: 'warning',
                                customClass: {
                                    confirmButton: 'btn btn-primary w-xs mt-2',
                                },
                                confirmButtonText: '{{ __('OK') }}',
                                buttonsStyling: false,
                                showCloseButton: true
                            });
                            return;
                        }

                        Swal.fire({
                            title: '{{ __('Delete this user?') }}',
                            text: '{{ __('Delete') }} "' + deleteUserName + '"? {{ __('This action cannot be undone.') }}',
                            icon: 'warning',
                            showCancelButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                                cancelButton: 'btn btn-danger w-xs mt-2',
                            },
                            confirmButtonText: '{{ __('Yes, delete it!') }}',
                            cancelButtonText: '{{ __('Cancel') }}',
                            buttonsStyling: false,
                            showCloseButton: true
                        }).then(function (result) {
                            if (result.value) {
                                var form = document.getElementById('formDeleteUser');
                                form.action = '/admin/users/' + deleteUserId;
                                window.submitAdminActionWithoutReload(form, 'users', '{{ __('User Deleted') }}');
                            }
                        });
                    }
                });
            }
        var organizationResetFilterBtn = document.getElementById('organizationResetFilterBtn');
        var organizationRows = Array.prototype.slice.call(document.querySelectorAll('#organizationTable .organization-row'));
        var organizationPaginationWrap = document.getElementById('organizationPaginationWrap');
        var organizationPaginationPrev = document.getElementById('organizationPaginationPrev');
        var organizationPaginationNext = document.getElementById('organizationPaginationNext');
        var organizationPageNumbers = document.getElementById('organizationPageNumbers');
        var organizationPage = 1;
        var organizationPerPage = getResponsiveAdminTablePageSize();
        var preservedOrganizationState = window.consumeAdminTabUiState('organizations');
        if (preservedOrganizationState) {
            var preservedOrganizationValues = preservedOrganizationState.values || {};
            if (organizationSearch && Object.prototype.hasOwnProperty.call(preservedOrganizationValues, 'organizationSearch')) {
                organizationSearch.value = preservedOrganizationValues.organizationSearch;
            }
            if (organizationStatusFilter && Object.prototype.hasOwnProperty.call(preservedOrganizationValues, 'organizationStatusFilter')) {
                organizationStatusFilter.value = preservedOrganizationValues.organizationStatusFilter;
            }
            organizationPage = Math.max(1, Number(preservedOrganizationState.page) || 1);
        }

        function renderOrganizationPageButtons(totalPages) {
            if (!organizationPageNumbers) return;
            organizationPageNumbers.innerHTML = '';
            var range = 2;
            for (var p = 1; p <= totalPages; p++) {
                if (p === 1 || p === totalPages || (p >= organizationPage - range && p <= organizationPage + range)) {
                    var li = document.createElement('li');
                    li.className = 'page-item' + (p === organizationPage ? ' active' : '');
                    li.innerHTML = '<a class="page-link" href="javascript:void(0);">' + p + '</a>';
                    (function (page) {
                        li.addEventListener('click', function () {
                            organizationPage = page;
                            applyOrganizationFilter();
                        });
                    })(p);
                    organizationPageNumbers.appendChild(li);
                } else if ((p === organizationPage - range - 1 && p > 1) || (p === organizationPage + range + 1 && p < totalPages)) {
                    var liDot = document.createElement('li');
                    liDot.className = 'page-item disabled';
                    liDot.innerHTML = '<a class="page-link" href="javascript:void(0);">...</a>';
                    organizationPageNumbers.appendChild(liDot);
                }
            }
        }

        function applyOrganizationFilter() {
            var search = organizationSearch ? organizationSearch.value.toLowerCase().trim() : '';
            var status = organizationStatusFilter ? organizationStatusFilter.value : 'all';
            var filteredRows = [];

            organizationRows.forEach(function (row) {
                var matchSearch = search === '' || row.dataset.nameSearch.indexOf(search) !== -1;
                var matchStatus = status === 'all' || row.dataset.status === status;
                row.style.display = 'none';
                if (matchSearch && matchStatus) {
                    filteredRows.push(row);
                }
            });

            var totalPages = Math.max(1, Math.ceil(filteredRows.length / organizationPerPage));
            if (organizationPage > totalPages) organizationPage = totalPages;

            filteredRows.slice((organizationPage - 1) * organizationPerPage, organizationPage * organizationPerPage).forEach(function (row) {
                row.style.display = '';
            });

            var showPagination = filteredRows.length > organizationPerPage;
            if (organizationPaginationWrap) organizationPaginationWrap.style.display = showPagination ? 'flex' : 'none';
            if (showPagination) renderOrganizationPageButtons(totalPages);
            if (organizationPaginationPrev) organizationPaginationPrev.classList.toggle('disabled', organizationPage <= 1);
            if (organizationPaginationNext) organizationPaginationNext.classList.toggle('disabled', organizationPage >= totalPages);
        }

        if (organizationSearch) organizationSearch.addEventListener('input', function () {
            organizationPage = 1;
            applyOrganizationFilter();
        });
        if (organizationStatusFilter) organizationStatusFilter.addEventListener('change', function () {
            organizationPage = 1;
            applyOrganizationFilter();
        });
        if (organizationResetFilterBtn) organizationResetFilterBtn.addEventListener('click', function () {
            if (organizationSearch) organizationSearch.value = '';
            if (organizationStatusFilter) organizationStatusFilter.value = 'all';
            organizationPage = 1;
            applyOrganizationFilter();
        });
        if (organizationPaginationPrev) organizationPaginationPrev.addEventListener('click', function (e) {
            e.preventDefault();
            if (!this.classList.contains('disabled')) {
                organizationPage = Math.max(1, organizationPage - 1);
                applyOrganizationFilter();
            }
        });
        if (organizationPaginationNext) organizationPaginationNext.addEventListener('click', function (e) {
            e.preventDefault();
            if (!this.classList.contains('disabled')) {
                organizationPage = organizationPage + 1;
                applyOrganizationFilter();
            }
        });
        window.addEventListener('resize', function () {
            var nextPerPage = getResponsiveAdminTablePageSize();
            if (nextPerPage !== organizationPerPage) {
                organizationPerPage = nextPerPage;
                organizationPage = 1;
                applyOrganizationFilter();
            }
        });

        document.addEventListener('dashboard-data-table:sort', function (event) {
            if (!event.detail || !event.detail.table || event.detail.table.id !== 'organizationTable') {
                return;
            }

            event.preventDefault();
            event.detail.handled = true;
            organizationRows = sortAdminDashboardRows(organizationRows, event.detail.columnIndex, event.detail.order);
            organizationPage = 1;
            applyOrganizationFilter();
        });

        function getOrganizationFormError(payload) {
            if (!payload || typeof payload !== 'object') return '';
            if (payload.errors && typeof payload.errors === 'object') {
                var keys = Object.keys(payload.errors);
                if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                    return payload.errors[keys[0]][0];
                }
            }
            return payload.message || '';
        }

        function submitOrganizationFormWithAlert(formEl, successTitle) {
            if (!formEl) return;

            var submitBtn = formEl.querySelector('button[type="submit"]');
            if (submitBtn) submitBtn.disabled = true;

            fetch(formEl.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: new FormData(formEl)
            })
            .then(function (response) {
                return response.json().catch(function () {
                    return {};
                }).then(function (payload) {
                    if (!response.ok) {
                        throw new Error(getOrganizationFormError(payload) || '{{ __('Unable to save organization.') }}');
                    }
                    return payload;
                });
            })
            .then(function (payload) {
                var modalEl = formEl.closest('.modal');
                if (modalEl) {
                    if (formEl.id === 'formCreateOrganization') {
                        allowCreateOrganizationModalClose = true;
                    } else if (formEl.id === 'formEditOrganization') {
                        allowEditOrganizationModalClose = true;
                    }

                    var modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                }

                return Swal.fire({
                    title: successTitle,
                    text: payload.message || '{{ __('Saved successfully.') }}',
                    icon: 'success',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .then(function () {
                window.refreshAdminTabContent('organizations', @json(route('role.dashboard', ['admin_tab' => 'organizations'])));
            })
            .catch(function (error) {
                Swal.fire({
                    title: '{{ __('Save Failed') }}',
                    text: error.message || '{{ __('Please check your input and try again.') }}',
                    icon: 'error',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .finally(function () {
                if (submitBtn) submitBtn.disabled = false;
            });
        }

        var createOrganizationForm = document.getElementById('formCreateOrganization');
        var createOrganizationModalEl = document.getElementById('modalCreateOrganization');
        var createOrganizationInitialState = '';
        var allowCreateOrganizationModalClose = false;

        if (createOrganizationForm) {
            createOrganizationForm.addEventListener('submit', function (e) {
                e.preventDefault();
                submitOrganizationFormWithAlert(createOrganizationForm, '{{ __('Organization Created') }}');
            });
        }

        if (createOrganizationModalEl) {
            createOrganizationModalEl.addEventListener('shown.bs.modal', function () {
                allowCreateOrganizationModalClose = false;
                createOrganizationInitialState = getCreateOrganizationSnapshot();
            });

            createOrganizationModalEl.addEventListener('hide.bs.modal', function (event) {
                if (allowCreateOrganizationModalClose) {
                    allowCreateOrganizationModalClose = false;
                    return;
                }

                if (!createOrganizationInitialState || getCreateOrganizationSnapshot() === createOrganizationInitialState) {
                    return;
                }

                event.preventDefault();
                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowCreateOrganizationModalClose = true;
                        var modalInstance = bootstrap.Modal.getInstance(createOrganizationModalEl);
                        if (modalInstance) {
                            modalInstance.hide();
                        }
                    }
                });
            });
        }

        function getCreateOrganizationSnapshot() {
            var form = document.getElementById('formCreateOrganization');
            if (!form) return '';
            return JSON.stringify({
                name_kh: (form.querySelector('input[name="name_kh"]') || {}).value || '',
                name_en: (form.querySelector('input[name="name_en"]') || {}).value || '',
                is_active: !!((form.querySelector('input[name="is_active"]') || {}).checked)
            });
        }

        var editOrganizationForm = document.getElementById('formEditOrganization');
        var editOrganizationModalEl = document.getElementById('modalEditOrganization');
        var editOrganizationInitialState = '';
        var allowEditOrganizationModalClose = false;

        function getEditOrganizationSnapshot() {
            return JSON.stringify({
                name_en: (document.getElementById('editOrganizationNameEn') || {}).value || '',
                name_kh: (document.getElementById('editOrganizationNameKh') || {}).value || ''
            });
        }

        if (editOrganizationForm) {
            editOrganizationForm.addEventListener('submit', function (e) {
                e.preventDefault();
                submitOrganizationFormWithAlert(editOrganizationForm, '{{ __('Organization Updated') }}');
            });
        }

        if (editOrganizationModalEl && editOrganizationForm) {
            editOrganizationModalEl.addEventListener('shown.bs.modal', function () {
                allowEditOrganizationModalClose = false;
                editOrganizationInitialState = getEditOrganizationSnapshot();
            });

            editOrganizationModalEl.addEventListener('hide.bs.modal', function (event) {
                if (allowEditOrganizationModalClose) {
                    allowEditOrganizationModalClose = false;
                    return;
                }

                if (!editOrganizationInitialState || getEditOrganizationSnapshot() === editOrganizationInitialState) {
                    return;
                }

                event.preventDefault();
                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowEditOrganizationModalClose = true;
                        var modalInstance = bootstrap.Modal.getInstance(editOrganizationModalEl);
                        if (modalInstance) {
                            modalInstance.hide();
                        }
                    }
                });
            });
        }

        organizationTable.addEventListener('click', function (e) {
            var row = e.target.closest('tr.organization-row');
            if (!row) return;
            var organizationId = row.dataset.id;

            var usersLink = e.target.closest('.organization-users-link');
            if (usersLink) {
                e.preventDefault();
                var usersSearch = usersLink.dataset.usersSearch || '';
                var targetUrl = new URL(window.location.href);
                targetUrl.searchParams.set('admin_tab', 'users');
                targetUrl.searchParams.set('user_organization', usersSearch);
                targetUrl.searchParams.delete('user_search');
                targetUrl.searchParams.delete('user_role');
                window.navigateDashboardContent(targetUrl.toString());
                return;
            }

            if (e.target.closest('.organization-edit-btn')) {
                fetch('/admin/organizations/' + organizationId, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var form = document.getElementById('formEditOrganization');
                    form.action = '/admin/organizations/' + organizationId;
                    document.getElementById('editOrganizationNameEn').value = data.name_en || data.name || '';
                    document.getElementById('editOrganizationNameKh').value = data.name_kh || data.name || '';
                    new bootstrap.Modal(document.getElementById('modalEditOrganization')).show();
                });
            }

            if (e.target.closest('.organization-toggle-btn')) {
                var btn = e.target.closest('.organization-toggle-btn');
                var isDisabling = btn.dataset.action === 'disable';
                Swal.fire({
                    title: isDisabling ? '{{ __('Disable this organization?') }}' : '{{ __('Enable this organization?') }}',
                    text: isDisabling ? '{{ __('This organization will be hidden from new user assignments and workflow stages. Existing records stay unchanged, but pending documents assigned here must be reassigned or the organization re-enabled.') }}' : '{{ __('It will become selectable again for users and workflow stages.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-danger w-xs mt-2' },
                    confirmButtonText: isDisabling ? '{{ __('Yes, disable!') }}' : '{{ __('Yes, enable!') }}',
                    cancelButtonText: '{{ __('Cancel') }}',
                    buttonsStyling: false,
                    showCloseButton: true
                }).then(function (result) {
                    if (result.value) {
                        var form = document.getElementById('formToggleOrganization');
                        form.action = '/admin/organizations/' + organizationId + '/status';
                        window.captureAdminTabUiState('organizations');
                        form.submit();
                    }
                });
            }

            if (e.target.closest('.organization-delete-btn')) {
                var organizationName = row.querySelector('p.fw-semibold')
                    ? row.querySelector('p.fw-semibold').textContent.trim()
                    : '{{ __('this organization') }}';

                Swal.fire({
                    title: '{{ __('Are you sure?') }}',
                    text: '{{ __('Delete') }} "' + organizationName + '"? {{ __('This action cannot be undone.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-danger w-xs mt-2'
                    },
                    confirmButtonText: '{{ __('Yes, delete it!') }}',
                    cancelButtonText: '{{ __('Cancel') }}',
                    buttonsStyling: false,
                    showCloseButton: true
                }).then(function (result) {
                    if (result.isConfirmed || result.value) {
                        var form = document.getElementById('formDeleteOrganization');

                        if (!form) {
                            console.error('formDeleteOrganization not found.');
                            alert('Delete form not found.');
                            return;
                        }

                        form.action = '/admin/organizations/' + encodeURIComponent(organizationId) + '?admin_tab=organizations';
                        window.submitAdminActionWithoutReload(form, 'organizations', '{{ __('Organization Deleted') }}');
                    }
                });
            }
        });

        applyOrganizationFilter();
    })();
    </script>
    <script>
    // Document Types Tab JS
    (function () {
        var dtTable = document.getElementById('dtTable');
        if (!dtTable) return;

        var dtSearch       = document.getElementById('dtSearch');
        var dtStatusFilter = document.getElementById('dtStatusFilter');
        var dtResetFilterBtn = document.getElementById('dtResetFilterBtn');
        var dtRows         = Array.prototype.slice.call(document.querySelectorAll('#dtTable .dt-row'));
        var dtPaginationWrap = document.getElementById('dtPaginationWrap');
        var dtPaginationPrev = document.getElementById('dtPaginationPrev');
        var dtPaginationNext = document.getElementById('dtPaginationNext');
        var dtPageNumbers    = document.getElementById('dtPageNumbers');
        var dtPage = 1;
        var dtPerPage = getResponsiveAdminTablePageSize();
        var preservedDocumentTypeState = window.consumeAdminTabUiState('document-types');
        if (preservedDocumentTypeState) {
            var preservedDocumentTypeValues = preservedDocumentTypeState.values || {};
            if (dtSearch && Object.prototype.hasOwnProperty.call(preservedDocumentTypeValues, 'dtSearch')) {
                dtSearch.value = preservedDocumentTypeValues.dtSearch;
            }
            if (dtStatusFilter && Object.prototype.hasOwnProperty.call(preservedDocumentTypeValues, 'dtStatusFilter')) {
                dtStatusFilter.value = preservedDocumentTypeValues.dtStatusFilter;
            }
            dtPage = Math.max(1, Number(preservedDocumentTypeState.page) || 1);
        }

        function renderDtPageButtons(total) {
            if (!dtPageNumbers) return;
            dtPageNumbers.innerHTML = '';
            var range = 2;
            for (var p = 1; p <= total; p++) {
                if (p === 1 || p === total || (p >= dtPage - range && p <= dtPage + range)) {
                    var li = document.createElement('li');
                    li.className = 'page-item' + (p === dtPage ? ' active' : '');
                    li.innerHTML = '<a class="page-link" href="javascript:void(0);">' + p + '</a>';
                    (function (page) {
                        li.addEventListener('click', function () { dtPage = page; applyDtFilter(); });
                    })(p);
                    dtPageNumbers.appendChild(li);
                } else if (
                    (p === dtPage - range - 1 && p > 1) ||
                    (p === dtPage + range + 1 && p < total)
                ) {
                    var liDot = document.createElement('li');
                    liDot.className = 'page-item disabled';
                    liDot.innerHTML = '<a class="page-link" href="javascript:void(0);">\u2026</a>';
                    dtPageNumbers.appendChild(liDot);
                }
            }
        }

        function applyDtFilter() {
            var search = (dtSearch ? dtSearch.value : '').toLowerCase().trim();
            var status = dtStatusFilter ? dtStatusFilter.value : 'all';
            var filtered = [];

            dtRows.forEach(function (row) {
                var matchStatus = status === 'all' || row.dataset.status === status;
                var matchSearch = search === '' || row.dataset.nameSearch.indexOf(search) !== -1;
                row.style.display = 'none';
                if (matchStatus && matchSearch) filtered.push(row);
            });

            var totalPages = Math.max(1, Math.ceil(filtered.length / dtPerPage));
            if (dtPage > totalPages) dtPage = totalPages;

            filtered.slice((dtPage - 1) * dtPerPage, dtPage * dtPerPage).forEach(function (r) { r.style.display = ''; });

            var show = filtered.length > dtPerPage;
            if (dtPaginationWrap) dtPaginationWrap.style.display = show ? 'flex' : 'none';
            if (show) renderDtPageButtons(totalPages);
            if (dtPaginationPrev) dtPaginationPrev.classList.toggle('disabled', dtPage <= 1);
            if (dtPaginationNext) dtPaginationNext.classList.toggle('disabled', dtPage >= totalPages);
        }

        var dtUrlParams = new URLSearchParams(window.location.search);
        var initialDtSearch = dtUrlParams.get('dt_search') || '';

        if (initialDtSearch && dtSearch) {
            dtSearch.value = initialDtSearch;
        }

        if (dtSearch)       dtSearch.addEventListener('input',  function () { dtPage = 1; applyDtFilter(); });
        if (dtStatusFilter) dtStatusFilter.addEventListener('change', function () { dtPage = 1; applyDtFilter(); });
        if (dtResetFilterBtn) dtResetFilterBtn.addEventListener('click', function () {
            if (dtSearch) dtSearch.value = '';
            if (dtStatusFilter) dtStatusFilter.value = 'all';
            dtPage = 1;
            applyDtFilter();
        });
        if (dtPaginationPrev) dtPaginationPrev.addEventListener('click', function (e) { e.preventDefault(); if (!this.classList.contains('disabled')) { dtPage--; applyDtFilter(); } });
        if (dtPaginationNext) dtPaginationNext.addEventListener('click', function (e) { e.preventDefault(); if (!this.classList.contains('disabled')) { dtPage++; applyDtFilter(); } });
        window.addEventListener('resize', function () {
            var nextPerPage = getResponsiveAdminTablePageSize();
            if (nextPerPage !== dtPerPage) {
                dtPerPage = nextPerPage;
                dtPage = 1;
                applyDtFilter();
            }
        });

        document.addEventListener('dashboard-data-table:sort', function (event) {
            if (!event.detail || !event.detail.table || event.detail.table.id !== 'dtTable') {
                return;
            }

            event.preventDefault();
            event.detail.handled = true;
            dtRows = sortAdminDashboardRows(dtRows, event.detail.columnIndex, event.detail.order);
            dtPage = 1;
            applyDtFilter();
        });

        applyDtFilter();

        function getDocumentTypeFormError(payload) {
            if (!payload || typeof payload !== 'object') return '';
            if (payload.errors && typeof payload.errors === 'object') {
                var keys = Object.keys(payload.errors);
                if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                    return payload.errors[keys[0]][0];
                }
            }
            return payload.message || '';
        }

        function submitDocumentTypeFormWithAlert(formEl, successTitle) {
            if (!formEl) return;

            var submitBtn = formEl.querySelector('button[type="submit"]');
            if (submitBtn) submitBtn.disabled = true;

            fetch(formEl.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: new FormData(formEl)
            })
            .then(function (response) {
                return response.json().catch(function () {
                    return {};
                }).then(function (payload) {
                    if (!response.ok) {
                        throw new Error(getDocumentTypeFormError(payload) || '{{ __('Unable to save document type.') }}');
                        if (formEl.id === 'formEditOrganization') {
                            allowEditOrganizationModalClose = true;
                        }
                    }
                    return payload;
                });
            })
            .then(function (payload) {
                var modalEl = formEl.closest('.modal');
                if (modalEl) {
                    if (formEl.id === 'formCreateDocType') {
                        allowCreateDocTypeModalClose = true;
                    } else if (formEl.id === 'formEditDocType') {
                        allowEditDocTypeModalClose = true;
                    }
                    var modalInstance = bootstrap.Modal.getInstance(modalEl);
                    if (modalInstance) modalInstance.hide();
                }

                return Swal.fire({
                    title: successTitle,
                    text: payload.message || '{{ __('Saved successfully.') }}',
                    icon: 'success',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .then(function () {
                window.refreshAdminTabContent('document-types', @json(route('role.dashboard', ['admin_tab' => 'document-types'])));
            })
            .catch(function (error) {
                Swal.fire({
                    title: '{{ __('Save Failed') }}',
                    text: error.message || '{{ __('Please check your input and try again.') }}',
                    icon: 'error',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                    buttonsStyling: false
                });
            })
            .finally(function () {
                if (submitBtn) submitBtn.disabled = false;
            });
        }

        var createDocTypeForm = document.getElementById('formCreateDocType');
        var createDocTypeModalEl = document.getElementById('modalCreateDocType');
        var createDocTypeInitialState = '';
        var allowCreateDocTypeModalClose = false;

        if (createDocTypeForm) {
            createDocTypeForm.addEventListener('submit', function (e) {
                e.preventDefault();
                submitDocumentTypeFormWithAlert(createDocTypeForm, '{{ __('Document Type Created') }}');
            });
        }

        function collectCreateDocTypeSubmitterRoles() {
            if (!createDocTypeForm) {
                return [];
            }

            return Array.prototype.slice.call(createDocTypeForm.querySelectorAll('input[name="allowed_submitter_roles[]"]:checked'))
                .map(function (input) { return (input.value || '').toString(); })
                .filter(function (value) { return value !== ''; })
                .sort();
        }

        function getCreateDocTypeSnapshot() {
            if (!createDocTypeForm) {
                return '';
            }

            return JSON.stringify({
                name_en: (document.getElementById('createDtNameEn') || {}).value || '',
                name_kh: (document.getElementById('createDtNameKh') || {}).value || '',
                workflow_template_id: (createDocTypeForm.querySelector('select[name="workflow_template_id"]') || {}).value || '',
                allowed_submitter_roles: collectCreateDocTypeSubmitterRoles(),
                is_active: !!((document.getElementById('createDtActive') || {}).checked)
            });
        }

        if (createDocTypeModalEl) {
            createDocTypeModalEl.addEventListener('shown.bs.modal', function () {
                allowCreateDocTypeModalClose = false;
                createDocTypeInitialState = getCreateDocTypeSnapshot();
            });

            createDocTypeModalEl.addEventListener('hide.bs.modal', function (event) {
                if (allowCreateDocTypeModalClose) {
                    allowCreateDocTypeModalClose = false;
                    return;
                }

                if (!createDocTypeInitialState || getCreateDocTypeSnapshot() === createDocTypeInitialState) {
                    return;
                }

                event.preventDefault();
                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowCreateDocTypeModalClose = true;
                        var modalInstance = bootstrap.Modal.getInstance(createDocTypeModalEl);
                        if (modalInstance) {
                            modalInstance.hide();
                        }
                    }
                });
            });
        }

        var editDocTypeForm = document.getElementById('formEditDocType');
        var editDocTypeModalEl = document.getElementById('modalEditDocType');
        var editDocTypeInitialState = '';
        var allowEditDocTypeModalClose = false;
        var defaultSubmitterRoles = @json(array_keys((array) ($submitterRoleOptions ?? [])));

        function collectEditDocTypeSubmitterRoles() {
            if (!editDocTypeForm) {
                return [];
            }

            return Array.prototype.slice.call(editDocTypeForm.querySelectorAll('input[name="allowed_submitter_roles[]"]:checked'))
                .map(function (input) { return (input.value || '').toString(); })
                .filter(function (value) { return value !== ''; })
                .sort();
        }

        function applyEditDocTypeSubmitterRoles(selectedRoles) {
            if (!editDocTypeForm) {
                return;
            }

            var selected = Array.isArray(selectedRoles) && selectedRoles.length
                ? selectedRoles.map(function (role) { return (role || '').toString(); })
                : defaultSubmitterRoles.slice();

            var selectedMap = {};
            selected.forEach(function (role) {
                if (role) {
                    selectedMap[role] = true;
                }
            });

            Array.prototype.slice.call(editDocTypeForm.querySelectorAll('input[name="allowed_submitter_roles[]"]')).forEach(function (input) {
                input.checked = !!selectedMap[(input.value || '').toString()];
            });
        }

        function getEditDocTypeSnapshot() {
            if (!editDocTypeForm) {
                return '';
            }

            return JSON.stringify({
                name_en: (document.getElementById('editDtNameEn') || {}).value || '',
                name_kh: (document.getElementById('editDtNameKh') || {}).value || '',
                workflow_template_id: (document.getElementById('editDtTemplate') || {}).value || '',
                allowed_submitter_roles: collectEditDocTypeSubmitterRoles(),
                is_active: !!((document.getElementById('editDtActive') || {}).checked)
            });
        }

        if (editDocTypeForm) {
            editDocTypeForm.addEventListener('submit', function (e) {
                e.preventDefault();
                submitDocumentTypeFormWithAlert(editDocTypeForm, '{{ __('Document Type Updated') }}');
            });
        }

        if (editDocTypeModalEl && editDocTypeForm) {
            editDocTypeModalEl.addEventListener('show.bs.modal', function () {
                allowEditDocTypeModalClose = false;
                editDocTypeInitialState = getEditDocTypeSnapshot();
            });

            editDocTypeModalEl.addEventListener('hide.bs.modal', function (event) {
                if (allowEditDocTypeModalClose) {
                    allowEditDocTypeModalClose = false;
                    return;
                }

                if (!editDocTypeInitialState || getEditDocTypeSnapshot() === editDocTypeInitialState) {
                    return;
                }

                event.preventDefault();
                Swal.fire({
                    title: '{{ __('Unsaved Changes') }}',
                    text: '{{ __('You have unsaved changes. Save first before leaving.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '{{ __('Leave Without Saving') }}',
                    cancelButtonText: '{{ __('Stay') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if (result.value) {
                        allowEditDocTypeModalClose = true;
                        var modalInstance = bootstrap.Modal.getInstance(editDocTypeModalEl);
                        if (modalInstance) {
                            modalInstance.hide();
                        }
                    }
                });
            });
        }

        var editDtTemplate = document.getElementById('editDtTemplate');

        if (editDtTemplate && typeof Choices !== 'undefined' && !window.editDtTemplateChoices) {
            window.editDtTemplateChoices = new Choices(editDtTemplate, {
                searchEnabled: true,
                shouldSort: false,
                searchPlaceholderValue: '{{ __("Search workflow template...") }}'
            });

            editDtTemplate.choices = window.editDtTemplateChoices;
        }

        // Table row actions
        dtTable.addEventListener('click', function (e) {
            var row = e.target.closest('tr.dt-row');
            if (!row) return;
            var dtId = row.dataset.id;

            // Edit
            if (e.target.closest('.dt-edit-btn')) {
                fetch('/admin/document-types/' + dtId, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    var form = document.getElementById('formEditDocType');
                    form.action = '/admin/document-types/' + dtId;
                    document.getElementById('editDtNameEn').value  = data.name_en || data.name || '';
                    document.getElementById('editDtNameKh').value  = data.name_kh || data.name || '';
                    var tmpl = document.getElementById('editDtTemplate');
                    var templateValue = data.workflow_template_id ? String(data.workflow_template_id) : '';

                    if (tmpl) {
                        tmpl.value = templateValue;

                        if (tmpl.choices) {
                            tmpl.choices.setChoiceByValue(templateValue);
                        } else if (window.editDtTemplateChoices) {
                            window.editDtTemplateChoices.setChoiceByValue(templateValue);
                        }
                    }
                    applyEditDocTypeSubmitterRoles(data.allowed_submitter_roles || []);
                    var activeChk = document.getElementById('editDtActive');
                    if (activeChk) activeChk.checked = !!data.is_active;
                    new bootstrap.Modal(document.getElementById('modalEditDocType')).show();
                });
            }

            // Toggle
            if (e.target.closest('.dt-toggle-btn')) {
                var btn = e.target.closest('.dt-toggle-btn');
                var isDisabling = btn.dataset.action === 'disable';

                Swal.fire({
                    title: isDisabling ? '{{ __('Disable this document type?') }}' : '{{ __('Enable this document type?') }}',
                    text: isDisabling ? '{{ __('It will not be available for new requests.') }}' : '{{ __('It will become available for requests.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-danger w-xs mt-2' },
                    confirmButtonText: isDisabling ? '{{ __('Yes, disable!') }}' : '{{ __('Yes, enable!') }}',
                    cancelButtonText: '{{ __('Cancel') }}',
                    buttonsStyling: false,
                    showCloseButton: true
                }).then(function (result) {
                    if (result.value) {
                        var form = document.getElementById('formToggleDocType');
                        form.action = '/admin/document-types/' + dtId + '/status';
                        window.captureAdminTabUiState('document-types');
                        form.submit();
                    }
                });
            }

            // Delete
            if (e.target.closest('.dt-delete-btn')) {
                var dtName = row.querySelector('p.fw-semibold') ? row.querySelector('p.fw-semibold').textContent.trim() : '{{ __('this type') }}';
                Swal.fire({
                    title: '{{ __('Are you sure?') }}',
                    text: '{{ __('Delete') }} "' + dtName + '"? {{ __('This cannot be undone.') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-danger w-xs mt-2' },
                    confirmButtonText: '{{ __('Yes, delete it!') }}',
                    cancelButtonText: '{{ __('Cancel') }}',
                    buttonsStyling: false,
                    showCloseButton: true
                }).then(function (result) {
                    if (result.value) {
                        var form = document.getElementById('formDeleteDocType');
                        form.action = '/admin/document-types/' + dtId;
                        window.submitAdminActionWithoutReload(form, 'document-types', '{{ __('Document Type Deleted') }}');
                    }
                });
            }
        });
    })();
    </script>
    <script>
    (function () {
        var wfTable = document.getElementById('wfTable');
        var createWorkflowForm = document.getElementById('formCreateWorkflow');
        var editWorkflowForm = document.getElementById('formEditWorkflow');
        var workflowOptions = {
            organizations: @json($generalWorkflowOrganizationOptions ?? []),
            rectors: @json($rectorOnlyOptionsJs ?? []),
            viceRectors: @json($viceRectorOnlyOptionsJs ?? []),
            roleLabels: {
                rector: '{{ __('Rector') }}',
                vice_rector: '{{ __('Vice Rector') }}'
            },
            permissionTypes: [
                { value: 'reviewer', label: '{{ __('Reviewer') }}' },
                { value: 'approver', label: '{{ __('Approver') }}' }
            ],
        };
        var workflowInitialSnapshots = new WeakMap();
        var workflowAllowedModalCloses = new WeakSet();
        var workflowAllowNavigation = false;
        var workflowSaveInProgress = false;

        function workflowFormSnapshot(form) {
            if (!form) return '';

            return JSON.stringify(Array.prototype.slice.call(form.querySelectorAll('input, select, textarea'))
                .filter(function (field) {
                    return !field.classList.contains('wf-generated-input')
                        && ['button', 'submit', 'reset'].indexOf(field.type) === -1
                        && field.name !== '_token'
                        && field.name !== '_method';
                })
                .map(function (field, index) {
                    var stage = field.closest('.wf-stage-card');
                    return {
                        index: index,
                        tag: field.tagName,
                        type: field.type,
                        name: field.name || '',
                        className: field.className || '',
                        stageType: stage ? (stage.dataset.stepType || '') : '',
                        value: field.value,
                        checked: field.type === 'checkbox' || field.type === 'radio' ? field.checked : null
                    };
                }));
        }

        function rememberWorkflowForm(form) {
            if (form) workflowInitialSnapshots.set(form, workflowFormSnapshot(form));
        }

        function workflowFormHasUnsavedChanges(form) {
            return !!form
                && workflowInitialSnapshots.has(form)
                && workflowFormSnapshot(form) !== workflowInitialSnapshots.get(form);
        }

        function openDirtyWorkflowForm() {
            var forms = [createWorkflowForm, editWorkflowForm];
            return forms.find(function (form) {
                var modal = form ? form.closest('.modal') : null;
                return modal && modal.classList.contains('show') && workflowFormHasUnsavedChanges(form);
            }) || null;
        }

        function confirmLeaveWorkflow(onConfirm) {
            var warningText = @json(__('You have unsaved changes. Leave without saving?'));

            if (window.Swal) {
                Swal.fire({
                    title: @json(__('Unsaved Changes')),
                    text: warningText,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: @json(__('Leave Without Saving')),
                    cancelButtonText: @json(__('Stay')),
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                        cancelButton: 'btn btn-light w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function (result) {
                    if ((result.isConfirmed || result.value) && typeof onConfirm === 'function') {
                        onConfirm();
                    }
                });
                return;
            }

            if (window.confirm(warningText) && typeof onConfirm === 'function') {
                onConfirm();
            }
        }

        function visitWorkflowTarget(url) {
            if (typeof window.navigateDashboardContent === 'function') {
                window.navigateDashboardContent(url);
                return;
            }

            if (window.Turbo && typeof window.Turbo.visit === 'function') {
                window.Turbo.visit(url, { action: 'advance' });
                return;
            }

            window.location.assign(url);
        }

        function escapeHtml(value) {
            return (value == null ? '' : String(value)).replace(/[&<>"']/g, function (char) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[char];
            });
        }

        function normalizeSteps(steps) {
            return Array.isArray(steps) ? steps.filter(function (step) { return step && typeof step === 'object'; }) : [];
        }

        function stageTitle(type) {
            return {
                organization: '{{ __('Organization Stage') }}',
                vice_rector: '{{ __('Vice Rector Stage') }}',
                approval: '{{ __('Rector Stage') }}'
            }[type] || '{{ __('Workflow Stage') }}';
        }

        function optionTags(options, selected) {
            return (Array.isArray(options) ? options : []).map(function (option) {
                var value = typeof option === 'object' ? (option.value !== undefined ? option.value : option.id) : option;
                var label = typeof option === 'object'
                    ? (option.label || (option.name + (option.role ? ' (' + (workflowOptions.roleLabels[option.role] || option.role.replace('_', ' ')) + ')' : '')))
                    : option;
                return '<option value="' + escapeHtml(value) + '"' + (String(value) === String(selected || '') ? ' selected' : '') + '>' + escapeHtml(label) + '</option>';
            }).join('');
        }

        function optionLabel(options, selected) {
            var selectedValue = String(selected || '');
            var match = (Array.isArray(options) ? options : []).find(function (option) {
                var value = typeof option === 'object' ? (option.value !== undefined ? option.value : option.id) : option;
                return String(value) === selectedValue;
            });
            if (!match) return '';
            return typeof match === 'object'
                ? (match.label || (match.name + (match.role ? ' (' + (workflowOptions.roleLabels[match.role] || match.role.replace('_', ' ')) + ')' : '')))
                : match;
        }

        function inferType(step) {
            var type = (step.step_type || '').toString();
            var role = (step.actor_role || '').toString();
            if (type) return type;
            if (role === 'vice_rector') return 'vice_rector';
            if (role === 'rector') return 'approval';
            return 'organization';
        }

        function addStage(flowId, rawStep) {
            var flow = document.getElementById(flowId);
            if (!flow) return;

            var step = rawStep || {};
            var type = inferType(step);
            var orgOptions = workflowOptions.organizations;
            var assigneeOptions = type === 'vice_rector' ? workflowOptions.viceRectors : workflowOptions.rectors;
            var assigneeLabel = type === 'vice_rector' ? '{{ __('Assigned Vice Rector') }}' : '{{ __('Assigned Rector') }}';
            var organizationName = step.organization_name || '';
            var rectorUserId = step.rector_user_id || '';
            if (type === 'approval' && assigneeOptions.length > 0) {
                rectorUserId = assigneeOptions[0].id || assigneeOptions[0].value || '';
            }
            var permissionType = (step.permission_type || '').toString();
            if (['reviewer', 'approver'].indexOf(permissionType) === -1) {
                permissionType = ['approval', 'vice_rector'].indexOf(type) !== -1 ? 'approver' : 'reviewer';
            }
            var slaDays = parseInt(step.sla_days || 2, 10);
            if (!isFinite(slaDays) || slaDays < 1) slaDays = 2;
            var assigneeControl = type === 'vice_rector'
                ? '<select class="form-select form-select-sm wf-rector">' +
                    '<option value="">{{ __('Select vice rector') }}</option>' +
                    optionTags(assigneeOptions, rectorUserId) +
                '</select>'
                : '<input type="hidden" class="wf-rector" value="' + escapeHtml(rectorUserId) + '" data-assignee-label="' + escapeHtml(optionLabel(assigneeOptions, rectorUserId)) + '">' +
                    '<input type="text" class="form-control form-control-sm wf-rector-display" value="' + escapeHtml(optionLabel(assigneeOptions, rectorUserId) || '{{ __('Please create one active rector before adding a Rector stage.') }}') + '" readonly>';

            var card = document.createElement('div');
            card.className = 'border rounded p-3 mb-2 wf-stage-card';
            card.dataset.stepType = type;
            card.innerHTML =
                '<div class="d-flex align-items-start justify-content-between gap-2 mb-3">' +
                    '<div><p class="mb-0 fw-semibold">' + escapeHtml(stageTitle(type)) + '</p><small class="text-muted wf-stage-order"></small></div>' +
                    '<div class="btn-group btn-group-sm">' +
                        '<button type="button" class="btn btn-light wf-move-up" title="{{ __('Move Up') }}"><i class="ri-arrow-up-line"></i></button>' +
                        '<button type="button" class="btn btn-light wf-move-down" title="{{ __('Move Down') }}"><i class="ri-arrow-down-line"></i></button>' +
                        '<button type="button" class="btn btn-danger wf-remove-stage" title="{{ __('Remove') }}"><i class="ri-delete-bin-line"></i></button>' +
                    '</div>' +
                '</div>' +
                '<div class="row g-2">' +
                    '<div class="col-md-4 wf-organization-wrap">' +
                        '<label class="form-label small mb-1">{{ __('Next Organization') }}</label>' +
                        '<select class="form-select form-select-sm wf-organization">' +
                            '<option value="">{{ __('Select organization') }}</option>' +
                            optionTags(orgOptions, organizationName) +
                        '</select>' +
                    '</div>' +
                    '<div class="col-md-4 wf-rector-wrap">' +
                        '<label class="form-label small mb-1 wf-assignee-label">' + assigneeLabel + '</label>' +
                        assigneeControl +
                    '</div>' +
                    '<div class="col-md-4">' +
                        '<label class="form-label small mb-1">{{ __('Permission') }}</label>' +
                        '<select class="form-select form-select-sm wf-permission-type">' +
                            optionTags(workflowOptions.permissionTypes, permissionType) +
                        '</select>' +
                    '</div>' +
                    '<div class="col-md-2">' +
                        '<label class="form-label small mb-1">{{ __('SLA Days') }}</label>' +
                        '<input type="number" min="1" class="form-control form-control-sm wf-sla" value="' + escapeHtml(slaDays) + '">' +
                    '</div>' +
                '</div>';

            flow.appendChild(card);
            updateStageVisibility(card);
            refreshFlow(flowId);
        }

        function updateStageVisibility(card) {
            var type = card.dataset.stepType;
            var orgWrap = card.querySelector('.wf-organization-wrap');
            var rectorWrap = card.querySelector('.wf-rector-wrap');
            if (orgWrap) orgWrap.style.display = type === 'organization' ? '' : 'none';
            if (rectorWrap) rectorWrap.style.display = ['vice_rector', 'approval'].indexOf(type) !== -1 ? '' : 'none';
        }

        function refreshFlow(flowId) {
            var flow = document.getElementById(flowId);
            if (!flow) return;
            var cards = Array.prototype.slice.call(flow.querySelectorAll('.wf-stage-card'));
            cards.forEach(function (card, index) {
                var label = card.querySelector('.wf-stage-order');
                if (label) label.textContent = '{{ __('Stage') }} ' + (index + 1);
            });
            var empty = document.getElementById(flowId.replace('StepsFlow', 'StepsEmpty'));
            if (empty) empty.style.display = cards.length ? 'none' : '';
        }

        function buildStep(card, index, previousState) {
            var type = card.dataset.stepType || 'organization';
            var org = (card.querySelector('.wf-organization') || {}).value || '';
            var rectorId = (card.querySelector('.wf-rector') || {}).value || '';
            var permissionType = (card.querySelector('.wf-permission-type') || {}).value || '';
            if (['reviewer', 'approver'].indexOf(permissionType) === -1) {
                permissionType = ['approval', 'vice_rector'].indexOf(type) !== -1 ? 'approver' : 'reviewer';
            }
            var sla = parseInt((card.querySelector('.wf-sla') || {}).value || 2, 10);
            if (!isFinite(sla) || sla < 1) sla = 2;

            var step = {
                order: index + 1,
                step_type: type,
                from_state: previousState || 'submitted',
                to_state: 'organization_review',
                actor_role: 'user',
                permission_type: permissionType,
                label: org || '{{ __('Organization Stage') }}',
                organization_name: org || null,
                rector_user_id: null,
                sla_days: sla
            };

            if (type === 'vice_rector') {
                if (!rectorId) {
                    throw new Error('{{ __('Please select a vice rector for every Vice Rector stage.') }}');
                }
                step.to_state = 'rector_review';
                step.actor_role = 'vice_rector';
                step.label = 'Vice Rector';
                step.organization_name = null;
                step.rector_user_id = rectorId || null;
            } else if (type === 'approval') {
                if (!rectorId && workflowOptions.rectors.length > 0) {
                    rectorId = workflowOptions.rectors[0].id || workflowOptions.rectors[0].value || '';
                }
                if (!rectorId) {
                    throw new Error('{{ __('Please create one active rector before adding a Rector stage.') }}');
                }
                step.to_state = 'rector_review';
                step.actor_role = 'rector';
                step.label = 'Rector';
                step.organization_name = null;
                step.rector_user_id = rectorId || null;
            }

            return step;
        }

        function stagePermission(card) {
            var permissionInput = card ? card.querySelector('.wf-permission-type') : null;
            return permissionInput ? permissionInput.value : '';
        }

        function setStagePermission(card, permission) {
            var permissionInput = card ? card.querySelector('.wf-permission-type') : null;
            if (permissionInput) {
                permissionInput.value = permission;
            }
        }

        function stageChoiceLabel(card, index) {
            var type = card.dataset.stepType || 'organization';
            var title = stageTitle(type);
            var detail = '';

            if (type === 'organization') {
                detail = (card.querySelector('.wf-organization') || {}).value || '';
            } else {
                var rectorSelect = card.querySelector('.wf-rector');
                detail = rectorSelect && rectorSelect.selectedOptions && rectorSelect.selectedOptions.length
                    ? rectorSelect.selectedOptions[0].textContent.trim()
                    : (rectorSelect ? (rectorSelect.getAttribute('data-assignee-label') || '') : '');
            }

            return '{{ __('Stage') }} ' + (index + 1) + ' - ' + title + (detail ? ' (' + detail + ')' : '');
        }

        function chooseReplacementApprover(flow, removedCard) {
            var cards = Array.prototype.slice.call(flow.querySelectorAll('.wf-stage-card'));
            var remainingCards = cards.filter(function (candidate) {
                return candidate !== removedCard;
            });
            var otherApproverExists = remainingCards.some(function (candidate) {
                return stagePermission(candidate) === 'approver';
            });

            if (stagePermission(removedCard) !== 'approver' || otherApproverExists) {
                return Promise.resolve(true);
            }

            if (!remainingCards.length) {
                if (window.Swal) {
                    return Swal.fire({
                        title: '{{ __('Workflow needs an approver') }}',
                        text: '{{ __('Add another stage or keep this stage because every workflow must include at least one approver.') }}',
                        icon: 'warning',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                        buttonsStyling: false
                    }).then(function () {
                        return false;
                    });
                }

                alert('{{ __('Add another stage or keep this stage because every workflow must include at least one approver.') }}');
                return Promise.resolve(false);
            }

            if (!window.Swal) {
                setStagePermission(remainingCards[0], 'approver');
                return Promise.resolve(true);
            }

            var inputOptions = {};
            remainingCards.forEach(function (candidate, index) {
                inputOptions[String(index)] = stageChoiceLabel(candidate, index);
            });

            return Swal.fire({
                title: '{{ __('Select replacement approver') }}',
                text: '{{ __('This is the last approver stage. Choose one remaining stage to become the approver before deleting it.') }}',
                input: 'select',
                inputOptions: inputOptions,
                inputPlaceholder: '{{ __('Select a stage') }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '{{ __('Use selected stage') }}',
                cancelButtonText: '{{ __('Cancel') }}',
                inputValidator: function (value) {
                    if (value === '') {
                        return '{{ __('Please select one remaining stage as approver.') }}';
                    }
                    return null;
                },
                customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-light w-xs mt-2' },
                buttonsStyling: false
            }).then(function (result) {
                if (!result.value && result.value !== '0') {
                    return false;
                }

                var selectedCard = remainingCards[parseInt(result.value, 10)];
                setStagePermission(selectedCard, 'approver');
                return true;
            });
        }

        function syncStepsIntoForm(form, flowId) {
            if (!form) return;
            form.querySelectorAll('.wf-generated-input').forEach(function (input) { input.remove(); });

            var flow = document.getElementById(flowId);
            var cards = flow ? Array.prototype.slice.call(flow.querySelectorAll('.wf-stage-card')) : [];
            var previousState = 'submitted';
            var hasApprover = false;
            try {
                cards.forEach(function (card, index) {
                    var step = buildStep(card, index, previousState);
                    if (step.permission_type === 'approver') {
                        hasApprover = true;
                    }
                    previousState = step.to_state;
                    Object.keys(step).forEach(function (key) {
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.className = 'wf-generated-input';
                        input.name = 'steps[' + index + '][' + key + ']';
                        input.value = step[key] == null ? '' : step[key];
                        form.appendChild(input);
                    });
                });
                if (!hasApprover) {
                    throw new Error('{{ __('Workflow flow must include at least one approver stage.') }}');
                }
            } catch (error) {
                if (window.Swal) {
                    Swal.fire({
                        title: '{{ __('Workflow stage incomplete') }}',
                        text: error.message || '{{ __('Please complete all workflow stages.') }}',
                        icon: 'warning',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                        buttonsStyling: false
                    });
                } else {
                    alert(error.message || '{{ __('Please complete all workflow stages.') }}');
                }
                throw error;
            }
        }

        function hydrateFlow(flowId, steps) {
            var flow = document.getElementById(flowId);
            if (!flow) return;
            flow.innerHTML = '';
            normalizeSteps(steps).forEach(function (step) { addStage(flowId, step); });
            refreshFlow(flowId);
        }

        [document.getElementById('modalCreateWorkflow'), document.getElementById('modalEditWorkflow')]
            .filter(Boolean)
            .forEach(function (modal) {
                var form = modal.querySelector('form');

                modal.addEventListener('hide.bs.modal', function (event) {
                    if (!form
                        || workflowSaveInProgress
                        || workflowAllowedModalCloses.has(modal)
                        || !workflowFormHasUnsavedChanges(form)) {
                        return;
                    }

                    event.preventDefault();
                    confirmLeaveWorkflow(function () {
                        workflowAllowedModalCloses.add(modal);
                        bootstrap.Modal.getOrCreateInstance(modal).hide();
                    });
                });

                modal.addEventListener('hidden.bs.modal', function () {
                    workflowAllowedModalCloses.delete(modal);

                    if (form === createWorkflowForm) {
                        form.reset();
                        hydrateFlow('createStepsFlow', []);
                    }

                    rememberWorkflowForm(form);
                });
            });

        rememberWorkflowForm(createWorkflowForm);
        rememberWorkflowForm(editWorkflowForm);

        document.querySelectorAll('.wf-add-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                addStage(btn.dataset.flow, { step_type: btn.dataset.stepType });
            });
        });

        document.addEventListener('click', function (event) {
            var card = event.target.closest('.wf-stage-card');
            if (!card) return;
            var flow = card.parentElement;
            if (event.target.closest('.wf-remove-stage')) {
                chooseReplacementApprover(flow, card).then(function (canRemove) {
                    if (!canRemove) return;
                    card.remove();
                    refreshFlow(flow.id);
                });
            } else if (event.target.closest('.wf-move-up') && card.previousElementSibling) {
                flow.insertBefore(card, card.previousElementSibling);
                refreshFlow(flow.id);
            } else if (event.target.closest('.wf-move-down') && card.nextElementSibling) {
                flow.insertBefore(card.nextElementSibling, card);
                refreshFlow(flow.id);
            }
        });

        function workflowFormError(payload) {
            if (!payload || typeof payload !== 'object') {
                return '';
            }

            if (payload.errors && typeof payload.errors === 'object') {
                var keys = Object.keys(payload.errors);
                if (keys.length > 0 && Array.isArray(payload.errors[keys[0]]) && payload.errors[keys[0]].length > 0) {
                    return payload.errors[keys[0]][0];
                }
            }

            return payload.message || '';
        }

        function submitWorkflowFormWithAlert(form, flowId) {
            try {
                syncStepsIntoForm(form, flowId);
            } catch (error) {
                return;
            }

            var submitBtn = form.querySelector('button[type="submit"]');
            workflowSaveInProgress = true;
            if (submitBtn) {
                submitBtn.disabled = true;
            }

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: new FormData(form)
            })
            .then(function (response) {
                return response.json().catch(function () {
                    return {};
                }).then(function (payload) {
                    if (!response.ok) {
                        throw new Error(workflowFormError(payload) || '{{ __('Unable to save workflow template.') }}');
                    }

                    return payload;
                });
            })
            .then(function (payload) {
                rememberWorkflowForm(form);
                workflowAllowNavigation = true;
                return Swal.fire({
                    title: '{{ __('Saved') }}',
                    text: payload.message || '{{ __('Workflow template saved successfully.') }}',
                    icon: 'success',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs mt-2'
                    },
                    buttonsStyling: false
                }).then(function () {
                    window.refreshAdminTabContent('workflow-templates', @json(route('role.dashboard', ['admin_tab' => 'workflow-templates'])));
                });
            })
            .catch(function (error) {
                workflowAllowNavigation = false;
                Swal.fire({
                    title: '{{ __('Save Failed') }}',
                    text: error.message || '{{ __('Please try again.') }}',
                    icon: 'error',
                    confirmButtonText: '{{ __('OK') }}',
                    customClass: {
                        confirmButton: 'btn btn-primary w-xs mt-2'
                    },
                    buttonsStyling: false
                });
            })
            .finally(function () {
                workflowSaveInProgress = false;
                if (submitBtn) {
                    submitBtn.disabled = false;
                }
            });
        }

        if (createWorkflowForm) {
            createWorkflowForm.addEventListener('submit', function (event) {
                event.preventDefault();
                submitWorkflowFormWithAlert(createWorkflowForm, 'createStepsFlow');
            });
        }

        if (editWorkflowForm) {
            editWorkflowForm.addEventListener('submit', function (event) {
                event.preventDefault();
                submitWorkflowFormWithAlert(editWorkflowForm, 'editStepsFlow');
            });
        }

        if (wfTable) {
            wfTable.addEventListener('click', function (event) {
                var row = event.target.closest('tr.wf-row');
                if (!row) return;
                var id = row.dataset.id;

                if (event.target.closest('.wf-edit-btn')) {
                    fetch('/admin/workflow-templates/' + id, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                    })
                    .then(function (response) { return response.json(); })
                    .then(function (data) {
                        editWorkflowForm.action = '/admin/workflow-templates/' + id;
                        editWorkflowForm.querySelector('input[name="name"]').value = data.name || '';
                        editWorkflowForm.querySelector('textarea[name="description"]').value = data.description || '';
                        var active = editWorkflowForm.querySelector('input[name="is_active"]');
                        if (active) active.checked = !!data.is_active;
                        hydrateFlow('editStepsFlow', data.steps || []);
                        rememberWorkflowForm(editWorkflowForm);
                        new bootstrap.Modal(document.getElementById('modalEditWorkflow')).show();
                    });
                }

                if (event.target.closest('.wf-toggle-btn')) {
                    var btn = event.target.closest('.wf-toggle-btn');
                    var form = document.getElementById('formToggleWorkflow');
                    form.action = '/admin/workflow-templates/' + id + '/status';
                    Swal.fire({
                        title: btn.dataset.action === 'disable' ? '{{ __('Disable this workflow?') }}' : '{{ __('Enable this workflow?') }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Yes') }}',
                        cancelButtonText: '{{ __('Cancel') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-light w-xs mt-2' },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.value) {
                            window.captureAdminTabUiState('workflow-templates');
                            form.submit();
                        }
                    });
                }

                if (event.target.closest('.wf-delete-btn')) {
                    var form = document.getElementById('formDeleteWorkflow');
                    var name = row.querySelector('p.fw-semibold') ? row.querySelector('p.fw-semibold').textContent.trim() : '{{ __('this workflow') }}';
                    form.action = '/admin/workflow-templates/' + id;
                    Swal.fire({
                        title: '{{ __('Are you sure?') }}',
                        text: '{{ __('Delete') }} "' + name + '"? {{ __('This cannot be undone.') }}',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Yes, delete it!') }}',
                        cancelButtonText: '{{ __('Cancel') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs me-2 mt-2', cancelButton: 'btn btn-light w-xs mt-2' },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.value) {
                            window.submitAdminActionWithoutReload(form, 'workflow-templates', '{{ __('Workflow Template Deleted') }}');
                        }
                    });
                }
            });
        }

        document.addEventListener('click', function (event) {
            if (workflowAllowNavigation || workflowSaveInProgress || !openDirtyWorkflowForm()) {
                return;
            }

            var anchor = event.target instanceof Element ? event.target.closest('a[href]') : null;
            if (!anchor
                || (anchor.getAttribute('target') || '').toLowerCase() === '_blank'
                || anchor.hasAttribute('download')
                || event.ctrlKey
                || event.metaKey
                || event.shiftKey
                || event.altKey) {
                return;
            }

            var href = (anchor.getAttribute('href') || '').trim();
            if (!href || href === '#' || href.indexOf('javascript:') === 0) {
                return;
            }

            event.preventDefault();
            event.stopImmediatePropagation();
            confirmLeaveWorkflow(function () {
                workflowAllowNavigation = true;
                visitWorkflowTarget(anchor.href);
            });
        }, true);

        document.addEventListener('turbo:before-visit', function (event) {
            if (workflowAllowNavigation || workflowSaveInProgress || !openDirtyWorkflowForm()) {
                return;
            }

            var targetUrl = event.detail && event.detail.url ? String(event.detail.url) : '';
            if (!targetUrl || targetUrl === window.location.href) {
                return;
            }

            event.preventDefault();
            event.stopImmediatePropagation();
            confirmLeaveWorkflow(function () {
                workflowAllowNavigation = true;
                visitWorkflowTarget(targetUrl);
            });
        }, true);

        window.addEventListener('beforeunload', function (event) {
            if (workflowAllowNavigation || workflowSaveInProgress || !openDirtyWorkflowForm()) {
                return;
            }

            event.preventDefault();
            event.returnValue = '';
        });

        var wfSearch = document.getElementById('wfSearch');
        var wfResetFilterBtn = document.getElementById('wfResetFilterBtn');
        if (wfSearch && wfTable) {
            var wfRows = Array.prototype.slice.call(wfTable.querySelectorAll('tr.wf-row'));
            var wfPaginationWrap = document.getElementById('wfPaginationWrap');
            var wfPaginationPrev = document.getElementById('wfPaginationPrev');
            var wfPaginationNext = document.getElementById('wfPaginationNext');
            var wfPageNumbers = document.getElementById('wfPageNumbers');
            var wfPage = 1;
            var wfPerPage = 10;
            var preservedWorkflowState = window.consumeAdminTabUiState('workflow-templates');
            if (preservedWorkflowState) {
                var preservedWorkflowValues = preservedWorkflowState.values || {};
                if (Object.prototype.hasOwnProperty.call(preservedWorkflowValues, 'wfSearch')) {
                    wfSearch.value = preservedWorkflowValues.wfSearch;
                }
                wfPage = Math.max(1, Number(preservedWorkflowState.page) || 1);
            }

            function renderWorkflowPageButtons(totalPages) {
                if (!wfPageNumbers) return;
                wfPageNumbers.innerHTML = '';

                for (var page = 1; page <= totalPages; page++) {
                    var li = document.createElement('li');
                    li.className = 'page-item' + (page === wfPage ? ' active' : '');
                    var link = document.createElement('a');
                    link.className = 'page-link';
                    link.href = 'javascript:void(0);';
                    link.textContent = page;
                    link.dataset.page = String(page);
                    li.appendChild(link);
                    wfPageNumbers.appendChild(li);
                }
            }

            function applyWorkflowFilter() {
                var term = wfSearch.value.toLowerCase().trim();
                var filteredRows = wfRows.filter(function (row) {
                    return !term || (row.dataset.nameSearch || '').indexOf(term) !== -1;
                });
                var totalPages = Math.max(1, Math.ceil(filteredRows.length / wfPerPage));
                wfPage = Math.min(Math.max(1, wfPage), totalPages);
                var start = (wfPage - 1) * wfPerPage;

                wfRows.forEach(function (row) {
                    row.style.display = 'none';
                });
                filteredRows.slice(start, start + wfPerPage).forEach(function (row) {
                    row.style.display = '';
                });

                if (wfPaginationWrap) {
                    wfPaginationWrap.style.display = filteredRows.length > wfPerPage ? 'flex' : 'none';
                }
                if (wfPaginationPrev) {
                    wfPaginationPrev.classList.toggle('disabled', wfPage <= 1);
                }
                if (wfPaginationNext) {
                    wfPaginationNext.classList.toggle('disabled', wfPage >= totalPages);
                }
                renderWorkflowPageButtons(totalPages);
            }

            wfSearch.addEventListener('input', function () {
                wfPage = 1;
                applyWorkflowFilter();
            });
            if (wfResetFilterBtn) {
                wfResetFilterBtn.addEventListener('click', function () {
                    wfSearch.value = '';
                    wfPage = 1;
                    applyWorkflowFilter();
                });
            }
            if (wfPaginationPrev) {
                wfPaginationPrev.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        wfPage--;
                        applyWorkflowFilter();
                    }
                });
            }
            if (wfPaginationNext) {
                wfPaginationNext.addEventListener('click', function (event) {
                    event.preventDefault();
                    if (!this.classList.contains('disabled')) {
                        wfPage++;
                        applyWorkflowFilter();
                    }
                });
            }
            if (wfPageNumbers) {
                wfPageNumbers.addEventListener('click', function (event) {
                    var target = event.target.closest('[data-page]');
                    if (!target) return;
                    wfPage = Number(target.dataset.page || 1);
                    applyWorkflowFilter();
                });
            }

            document.addEventListener('dashboard-data-table:sort', function (event) {
                if (!event.detail || !event.detail.table || event.detail.table.id !== 'wfTable') {
                    return;
                }

                event.preventDefault();
                event.detail.handled = true;
                wfRows = sortAdminDashboardRows(wfRows, event.detail.columnIndex, event.detail.order);
                wfPage = 1;
                applyWorkflowFilter();
            });

            applyWorkflowFilter();
        }

        refreshFlow('createStepsFlow');
        refreshFlow('editStepsFlow');
    })();
    (function initializeTranslatedValidationMessages() {
        var requiredMessage = @json(__('Please fill out this field.'));
        var emailMessage = @json(__('Please enter a valid email address.'));
        var selectMessage = @json(__('Please select an item from the list.'));
        var minLengthMessage = @json(__('Please use at least :min characters.'));

        function setTranslatedValidationMessage(field) {
            field.setCustomValidity('');

            if (field.validity.valueMissing) {
                if (field.tagName === 'SELECT') {
                    field.setCustomValidity(selectMessage);
                } else {
                    field.setCustomValidity(requiredMessage);
                }
                return;
            }

            if (field.validity.typeMismatch && field.type === 'email') {
                field.setCustomValidity(emailMessage);
                return;
            }

            if (field.validity.tooShort) {
                var min = field.getAttribute('minlength') || '';
                field.setCustomValidity(minLengthMessage.replace(':min', min));
            }
        }

        document.querySelectorAll('input, select, textarea').forEach(function (field) {
            field.addEventListener('invalid', function () {
                setTranslatedValidationMessage(field);
            });

            field.addEventListener('input', function () {
                field.setCustomValidity('');
            });

            field.addEventListener('change', function () {
                field.setCustomValidity('');
            });
        });
    })();
    </script>
@endsection