{{-- Document Types Tab --}}
        @php
            // Workflow names link to their template only for users who can open that tab.
            $canOpenWorkflowTemplates = \App\Support\WorkflowPermission::canAccessAdminTab(
                (string) (auth()->user()->role ?? ''),
                'workflow-templates'
            );
        @endphp
        <style>
            /* Row opened from a Workflow Templates link (?document_type=<id>). */
            #dtTable tr.dt-row > td {
                transition: background-color 600ms ease;
            }
            #dtTable tr.dt-row.dt-row-focus > td {
                background-color: var(--df-primary-soft, #eff6ff) !important;
            }
        </style>
        <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 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 && $canOpenWorkflowTemplates)
                                                    <a href="{{ route('role.dashboard', ['admin_tab' => 'workflow-templates', 'workflow' => $dt->workflowTemplate->id]) }}"
                                                       class="dt-workflow-link text-decoration-none"
                                                       title="{{ __('Open workflow template') }}">
                                                        <x-ui-badge type="plain" :label="$dt->workflowTemplate->name" class="bg-info-subtle text-info" />
                                                        <i class="ri-arrow-right-up-line text-info align-middle" aria-hidden="true"></i>
                                                    </a>
                                                @elseif($dt->workflowTemplate)
                                                    <x-ui-badge type="plain" :label="$dt->workflowTemplate->name" class="bg-info-subtle text-info" />
                                                @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
                                                        <x-ui-badge type="plain" :label="$submitterRoleShort" :title="__($submitterRoleLabel)" class="bg-primary-subtle text-primary" />
                                                    @endforeach
                                                </div>
                                            </td>
                                            <td>
                                                <x-ui-badge type="status" :value="$dt->is_active ? 'active' : 'inactive'" :label="$dt->is_active ? 'Active' : 'Inactive'" />
                                            </td>
                                            <td class="text-end">
                                                <div class="dropdown d-inline-block">
                                                    <button class="btn btn-sm btn-icon btn-ghost-secondary admin-action-menu-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('Document type actions') }}">
                                                        <i class="ri-more-2-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        {{-- Form Builder is temporarily hidden; routes and implementation remain intact. --}}
                                                        <li>
                                                            <button type="button" class="dropdown-item dt-edit-btn">
                                                                <i class="ri-pencil-line me-2"></i>{{ __('Edit') }}
                                                            </button>
                                                        </li>
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li>
                                                            <button type="button" class="dropdown-item dt-toggle-btn" data-action="{{ $dt->is_active ? 'disable' : 'enable' }}">
                                                                <i class="{{ $dt->is_active ? 'ri-close-circle-line' : 'ri-checkbox-circle-line' }} me-2"></i>{{ __($dt->is_active ? 'Set Inactive' : 'Set Active') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger dt-delete-btn">
                                                                <i class="ri-delete-bin-line me-2"></i>{{ __('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>
                        <x-table-pagination
                            wrap-id="dtPaginationWrap"
                            previous-id="dtPaginationPrev"
                            numbers-id="dtPageNumbers"
                            next-id="dtPaginationNext"
                            :hidden="true"
                        />
                    </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>