{{-- Workflow Templates Tab --}}
        @php
            // Document type names link to their tab only for users who can open it.
            $canOpenDocumentTypes = \App\Support\WorkflowPermission::canAccessAdminTab(
                (string) (auth()->user()->role ?? ''),
                'document-types'
            );
        @endphp
        <style>
            /* Row opened from a Document Types link (?workflow=<id>). */
            #wfTable tr.wf-row > td {
                transition: background-color 600ms ease;
            }
            #wfTable tr.wf-row.wf-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="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>
                                    <select class="form-select form-select-sm dashboard-filter-control dashboard-filter-status" id="wfStatusFilter">
                                        <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="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 ?? '')) }}"
                                            data-status="{{ $wft->is_active ? 'active' : 'inactive' }}">
                                            <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)
                                                            @php
                                                                $linkedDtNameEn = trim((string) ($documentType->name_en ?? $documentType->name ?? ''));
                                                                $linkedDtNameKh = trim((string) ($documentType->name_kh ?? ''));
                                                                $linkedDtName = app()->getLocale() === 'kh' && $linkedDtNameKh !== '' ? $linkedDtNameKh : $linkedDtNameEn;
                                                            @endphp
                                                            @if($canOpenDocumentTypes)
                                                                {{-- Same markup as the workflow link in the Document Types tab: arrow sits outside the badge. --}}
                                                                <a href="{{ route('role.dashboard', ['admin_tab' => 'document-types', 'document_type' => $documentType->id]) }}"
                                                                   data-turbo="true"
                                                                   class="wf-document-type-link text-decoration-none"
                                                                   title="{{ __('Open document type') }}">
                                                                    <x-ui-badge type="plain" :label="$linkedDtName" class="bg-info-subtle text-info" />
                                                                    <i class="ri-arrow-right-up-line text-info align-middle" aria-hidden="true"></i>
                                                                </a>
                                                            @else
                                                                <x-ui-badge type="plain" :label="$linkedDtName" class="bg-info-subtle text-info" />
                                                            @endif
                                                        @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
                                                            <x-ui-badge type="plain" :label="$stageDisplay" class="bg-primary-subtle text-primary" />
                                                            @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>
                                                <x-ui-badge type="status" :value="$wft->is_active ? 'active' : 'inactive'" :label="$wft->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="{{ __('Workflow actions') }}">
                                                        <i class="ri-more-2-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button type="button" class="dropdown-item wf-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 wf-toggle-btn" data-action="{{ $wft->is_active ? 'disable' : 'enable' }}">
                                                                <i class="{{ $wft->is_active ? 'ri-close-circle-line' : 'ri-checkbox-circle-line' }} me-2"></i>{{ __($wft->is_active ? 'Set Inactive' : 'Set Active') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger wf-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 workflow templates found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                        </x-dashboard-data-table>
                        <x-table-pagination
                            wrap-id="wfPaginationWrap"
                            previous-id="wfPaginationPrev"
                            numbers-id="wfPageNumbers"
                            next-id="wfPaginationNext"
                            :hidden="true"
                        />
                    </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('workflow-templates.partials.form-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('workflow-templates.partials.form-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>