{{-- 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 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>
                                                <x-ui-badge type="status" :value="$organization->is_active ? 'active' : 'inactive'" :label="$organization->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="{{ __('Organization actions') }}">
                                                        <i class="ri-more-2-fill"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <button type="button" class="dropdown-item organization-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 organization-toggle-btn" data-action="{{ $organization->is_active ? 'disable' : 'enable' }}">
                                                                <i class="{{ $organization->is_active ? 'ri-close-circle-line' : 'ri-checkbox-circle-line' }} me-2"></i>{{ __($organization->is_active ? 'Set Inactive' : 'Set Active') }}
                                                            </button>
                                                        </li>
                                                        <li>
                                                            <button type="button" class="dropdown-item text-danger organization-delete-btn">
                                                                <i class="ri-delete-bin-line me-2"></i>{{ __('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>
                        <x-table-pagination
                            wrap-id="organizationPaginationWrap"
                            previous-id="organizationPaginationPrev"
                            numbers-id="organizationPageNumbers"
                            next-id="organizationPaginationNext"
                            :hidden="true"
                        />
                    </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>