@extends('layouts.app')
@section('title', 'Users')

@push('stylesheets')
@include('partials.filter-card-styles')
@include('partials.index-datatable-styles')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
<style>
    .user-filter-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
    }
    .user-filter-card .card-body {
        padding: 1rem 1.25rem;
    }
    .user-filter-form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.5rem;
    }
    .user-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .user-filter-field label {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: #212529;
        margin-bottom: 0.35rem;
    }
    .user-filter-field .form-control {
        border-radius: 6px;
        min-height: 38px;
        background: #fff;
    }
    .user-filter-field select.form-control {
        min-width: 150px;
    }
    .user-filter-field .select2-container {
        min-width: 160px;
    }
    .user-filter-field .select2-container--bootstrap4 .select2-selection--single {
        min-height: 38px;
        height: auto !important;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }
    .user-filter-field .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        padding: 0.375rem 1.75rem 0.375rem 0.5rem;
        margin-top: 0;
    }
    .user-filter-field input.form-control {
        min-width: 140px;
    }
    .user-filter-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
    }
    .user-filter-actions .btn-filter {
        border-radius: 6px;
        padding: 0.4rem 1rem;
        font-weight: 600;
        min-height: 38px;
    }
    .user-filter-actions .btn-reset {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 6px;
        background: #fff;
        border: 1px solid #dee2e6;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        text-decoration: none;
    }
    .user-filter-actions .btn-reset:hover {
        background: #f8f9fa;
        color: #343a40;
    }

    #usersTableCard .pms-user-table__cell {
        vertical-align: middle !important;
        white-space: nowrap;
        min-width: 11rem;
    }
    #usersTableCard .pms-user-table__identity {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.65rem;
        max-width: 100%;
    }
    #usersTableCard .user-avatar-cell {
        flex-shrink: 0;
    }
    #usersTableCard .pms-user-table__identity .details-modal-trigger {
        white-space: nowrap;
    }
    #usersTableCard .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    #usersTableCard .table-responsive table {
        width: max-content;
        min-width: 100%;
        margin-bottom: 0;
    }
    #usersTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #usersTableCard .dropdown .dropdown-menu { position: absolute !important; }
    #usersTableCard .pms-user-dept-cell {
        max-width: 20rem;
        white-space: normal !important;
        vertical-align: middle;
    }
    #usersTableCard .pms-user-dept-in-table {
        display: inline-flex;
        align-items: flex-start;
        gap: 0.35rem;
        max-width: 100%;
        min-width: 0;
    }
    #usersTableCard .pms-user-dept-label {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    #usersTableCard .pms-user-dept-toggle {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: none;
        border-radius: 6px;
        background: rgba(6, 148, 148, 0.1);
        color: #069494;
        line-height: 1;
        cursor: pointer;
        transition: background 0.12s ease, color 0.12s ease;
    }
    #usersTableCard .pms-user-dept-toggle:hover,
    #usersTableCard .pms-user-dept-toggle:focus {
        background: rgba(6, 148, 148, 0.18);
        color: #047878;
        outline: none;
    }
    #usersTableCard .pms-user-dept-expand-all.active {
        background: rgba(6, 148, 148, 0.08) !important;
        border-color: rgba(6, 148, 148, 0.28) !important;
        color: #069494 !important;
    }
</style>
@endpush

@section('contents')
    @php
        $authUser = auth()->user();
        $authUser?->loadMissing('role');
        $viewerIsMec = $authUser && strtolower((string) ($authUser->role?->slug ?? '')) === 'mec';
        $viewerIsSuperAdmin = $authUser && $authUser->isSuperAdmin();
        $userListHeaders = ['User', 'Email', 'Contact', 'Permission', 'Designation', 'Section'];
        $userListSortColumns = ['users.name', 'users.email', 'users.phone', 'permissions.name', 'designations.name', 'sections.name'];
        if ($viewerIsSuperAdmin) {
            $userListHeaders[] = 'Department';
            $userListHeaders[] = 'Region';
            $userListSortColumns[] = null;
            $userListSortColumns[] = null;
        } elseif ($viewerIsMec) {
            $userListHeaders[] = 'Region';
            $userListSortColumns[] = null;
        } else {
            $userListHeaders[] = 'Department';
            $userListSortColumns[] = null;
        }
        $userListHeaders = array_merge($userListHeaders, ['Role', 'Status', 'Created At']);
        $userListSortColumns = array_merge($userListSortColumns, ['roles.name', 'users.status', 'users.created_at']);
        $showDepartmentColumn = $viewerIsSuperAdmin || ! $viewerIsMec;
        $filterSections = $filterSections ?? [];
        $filterDesignations = $filterDesignations ?? [];
        $filterDepartments = $filterDepartments ?? [];
        $filterPermissions = $filterPermissions ?? [];
    @endphp
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            @if (function_exists('is_mec_role') && is_mec_role())
                @include('partials.collapsible-filter-styles')
                <x-collapsible-filter-card
                    :title="__('FIND USERS')"
                    collapse-id="usersIndexFiltersCollapse"
                    form-id="usersIndexFilterForm"
                    :reset-url="route('users.index')"
                    :open="false"
                >
                    <div class="card-body">
                        <form method="GET" action="{{ route('users.index') }}" class="user-filter-form" id="usersIndexFilterForm">
                            <div class="pms-filter-field">
                                <label for="filter-search">Search</label>
                                <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                       placeholder="Search…" value="{{ $search ?? '' }}">
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_name">Name</label>
                                <input type="text" name="name" id="user_filter_name" class="form-control form-control-sm" value="{{ request('name', '') }}" placeholder="User name" autocomplete="off">
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_email">Email</label>
                                <input type="text" name="email" id="user_filter_email" class="form-control form-control-sm" value="{{ request('email', '') }}" placeholder="Email" autocomplete="off">
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_phone">Contact</label>
                                <input type="text" name="phone" id="user_filter_phone" class="form-control form-control-sm" value="{{ request('phone', '') }}" placeholder="Phone" autocomplete="off">
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_permission">Permission</label>
                                <select name="permission_id" id="user_filter_permission" class="form-control form-control-sm user-filter-select">
                                    <option value="">All Permissions</option>
                                    @foreach ($filterPermissions as $permissionId => $permissionName)
                                        <option value="{{ $permissionId }}" @selected((string) request('permission_id', '') === (string) $permissionId)>{{ $permissionName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_section">Section</label>
                                <select name="section_id" id="user_filter_section" class="form-control form-control-sm user-filter-select">
                                    <option value="">All Sections</option>
                                    @foreach ($filterSections as $sectionId => $sectionName)
                                        <option value="{{ $sectionId }}" @selected((string) request('section_id', '') === (string) $sectionId)>{{ $sectionName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="user-filter-field">
                                <label for="user_filter_designation">Designation</label>
                                <select name="designation_id" id="user_filter_designation" class="form-control form-control-sm user-filter-select">
                                    <option value="">All Designations</option>
                                    @foreach ($filterDesignations as $designationId => $designationName)
                                        <option value="{{ $designationId }}" @selected((string) request('designation_id', '') === (string) $designationId)>{{ $designationName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @if ($showDepartmentColumn)
                            <div class="user-filter-field">
                                <label for="user_filter_department">Department</label>
                                <select name="department_id" id="user_filter_department" class="form-control form-control-sm user-filter-select">
                                    <option value="">All Departments</option>
                                    @foreach ($filterDepartments as $departmentId => $departmentName)
                                        <option value="{{ $departmentId }}" @selected((string) request('department_id', '') === (string) $departmentId)>{{ $departmentName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            <div class="user-filter-field">
                                <label for="user_filter_status">Status</label>
                                <select name="status" id="user_filter_status" class="form-control form-control-sm user-filter-select">
                                    <option value="">All Statuses</option>
                                    <option value="1" @selected((string) request('status', '') === '1')>Active</option>
                                    <option value="0" @selected((string) request('status', '') === '0')>Inactive</option>
                                </select>
                            </div>
                            <div class="user-filter-actions">
                                <button type="submit" class="btn btn-primary btn-filter pms-btn-gradient">Filter</button>
                                <a href="{{ route('users.index') }}" class="btn-reset" title="Reset filters" aria-label="Reset filters"><i class="fas fa-sync-alt"></i></a>
                            </div>
                        </form>
                    </div>
                </x-collapsible-filter-card>
            @else
            <div class="card user-filter-card mb-3">
                <div class="card-body">
                    <form method="GET" action="{{ route('users.index') }}" class="user-filter-form" id="usersIndexFilterForm">
                        <div class="pms-filter-field">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search…" value="{{ $search ?? '' }}">
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_name">Name</label>
                            <input type="text" name="name" id="user_filter_name" class="form-control form-control-sm" value="{{ request('name', '') }}" placeholder="User name" autocomplete="off">
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_email">Email</label>
                            <input type="text" name="email" id="user_filter_email" class="form-control form-control-sm" value="{{ request('email', '') }}" placeholder="Email" autocomplete="off">
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_phone">Contact</label>
                            <input type="text" name="phone" id="user_filter_phone" class="form-control form-control-sm" value="{{ request('phone', '') }}" placeholder="Phone" autocomplete="off">
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_permission">Permission</label>
                            <select name="permission_id" id="user_filter_permission" class="form-control form-control-sm user-filter-select">
                                <option value="">All Permissions</option>
                                @foreach ($filterPermissions as $permissionId => $permissionName)
                                    <option value="{{ $permissionId }}" @selected((string) request('permission_id', '') === (string) $permissionId)>{{ $permissionName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_section">Section</label>
                            <select name="section_id" id="user_filter_section" class="form-control form-control-sm user-filter-select">
                                <option value="">All Sections</option>
                                @foreach ($filterSections as $sectionId => $sectionName)
                                    <option value="{{ $sectionId }}" @selected((string) request('section_id', '') === (string) $sectionId)>{{ $sectionName }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="user-filter-field">
                            <label for="user_filter_designation">Designation</label>
                            <select name="designation_id" id="user_filter_designation" class="form-control form-control-sm user-filter-select">
                                <option value="">All Designations</option>
                                @foreach ($filterDesignations as $designationId => $designationName)
                                    <option value="{{ $designationId }}" @selected((string) request('designation_id', '') === (string) $designationId)>{{ $designationName }}</option>
                                @endforeach
                            </select>
                        </div>
                        @if ($showDepartmentColumn)
                        <div class="user-filter-field">
                            <label for="user_filter_department">Department</label>
                            <select name="department_id" id="user_filter_department" class="form-control form-control-sm user-filter-select">
                                <option value="">All Departments</option>
                                @foreach ($filterDepartments as $departmentId => $departmentName)
                                    <option value="{{ $departmentId }}" @selected((string) request('department_id', '') === (string) $departmentId)>{{ $departmentName }}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                        <div class="user-filter-field">
                            <label for="user_filter_status">Status</label>
                            <select name="status" id="user_filter_status" class="form-control form-control-sm user-filter-select">
                                <option value="">All Statuses</option>
                                <option value="1" @selected((string) request('status', '') === '1')>Active</option>
                                <option value="0" @selected((string) request('status', '') === '0')>Inactive</option>
                            </select>
                        </div>
                        <div class="user-filter-actions">
                            <button type="submit" class="btn btn-primary btn-filter pms-btn-gradient">Filter</button>
                            <a href="{{ route('users.index') }}" class="btn-reset" title="Reset filters" aria-label="Reset filters"><i class="fas fa-sync-alt"></i></a>
                        </div>
                    </form>
                </div>
            </div>
            @endif

            <x-active-filter-chips :chips="$activeChips" />

            <div class="row">
                <div class="col-12" id="usersTableCard">
                    <x-layouts.index-card :createRoute="can('user', 'add') ? route('users.create') : null" tableHeading="Users" createLabel="Create User" :headers="$userListHeaders"
                        :sortColumns="$userListSortColumns"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => request()->url()])"
                        :pagination="$users->links('vendor.pagination.bootstrap-4')">
                        @foreach ($users as $data)
                            <tr>
                                <td class="pms-user-table__cell">
                                    @php
                                        $profileImgUrl = user_profile_image_url($data->image ?? null);
                                    @endphp
                                    <div class="pms-user-table__identity">
                                    <span class="d-inline-flex align-items-center user-avatar-cell">
                                        @if ($profileImgUrl !== '')
                                            <img src="{{ $profileImgUrl }}"
                                                 alt="{{ $data->name ?? 'User' }}"
                                                 class="user-avatar-img img-circle img-size-32"
                                                 style="width: 32px; height: 32px; object-fit: cover; border-radius: 50%;"
                                                 onerror="this.classList.add('d-none'); this.nextElementSibling.classList.remove('d-none');">
                                        @else
                                            <div class="user-avatar-fallback img-circle img-size-32 bg-secondary d-inline-flex align-items-center justify-content-center {{ $profileImgUrl !== '' ? 'd-none' : '' }}"
                                                style="width: 32px; height: 32px; border-radius: 50%;">
                                                <i class="fas fa-user text-white" style="font-size: 16px;"></i>
                                            </div>
                                        @endif
                                    </span>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="userDetailsModal"
                                        :detailsUrl="route('users.show', $data->id)"
                                        :entityId="$data->id"
                                        :entityName="$data->name ?? 'User'"
                                        :editUrl="route('users.edit', $data->id)"
                                        :deleteUrl="route('users.destroy', $data->id)"
                                    >
                                        {{ $data->name ?? '-' }}
                                    </x-details-modal-with-actions>
                                    </div>
                                </td>
                                <td class="pms-user-table__cell">{{ $data->email ?: '-' }}</td>
                                <td class="pms-user-table__cell">{{ $data->phone ?: '-' }}</td>
                                <td>{{ $data->permission->name ?? '-' }}</td>
                                <td>{{ $data->designation->name ?? '-' }}</td>
                                <td>{{ $data->section->name ?? '-' }}</td>
                                @if ($viewerIsSuperAdmin)
                                    @include('users.partials.department-cell', ['departments' => $data->user_departments])
                                    <td>{{ $data->userMecRegions->pluck('name')->filter()->implode(', ') ?: '-' }}</td>
                                @elseif ($viewerIsMec)
                                    <td>{{ $data->userMecRegions->pluck('name')->filter()->implode(', ') ?: '-' }}</td>
                                @else
                                    @include('users.partials.department-cell', ['departments' => $data->user_departments])
                                @endif
                                <td>
                                    @php
                                        $roleNames = collect($data->userRoles ?? [])
                                            ->map(fn ($m) => role_display_name($m->role->name ?? null))
                                            ->filter()
                                            ->unique()
                                            ->values();
                                        if ($roleNames->isEmpty()) {
                                            $roleNames = collect([role_display_name($data->role->name ?? null)])->filter();
                                        }
                                    @endphp
                                    @forelse ($roleNames as $roleName)
                                        <span class="badge badge-light border mr-1 mb-1">{{ $roleName }}</span>
                                    @empty
                                        -
                                    @endforelse
                                </td>
                                <td>
                                    @if($data->status)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $data->created_at->format('d M Y') }}</td>
                            </tr>
                        @endforeach
                    </x-layouts.index-card>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->

    <x-details-modal-with-actions
        modalId="userDetailsModal"
        entityLabel="User"
        historyTarget="#versionHistoryModal"
        form="user"
        formKey="user"
    />

    <x-version-history-modal form="user" entityLabel="User" />
@endsection
@push('scripts')
@include('partials.index-datatable-scripts')
@include('partials.collapsible-filter-scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
    $(function () {
        var usersDeptCard = '#usersTableCard';
        var usersDeptExpandedClass = 'pms-user-dept-expanded';
        var usersDeptGlobalExpandedClass = 'pms-user-dept-global-expanded';
        var showDepartmentColumn = @json($showDepartmentColumn);

        if (typeof $.fn.select2 !== 'undefined') {
            $('#usersIndexFilterForm select.user-filter-select').each(function () {
                var $el = $(this);
                $el.select2({
                    theme: 'bootstrap4',
                    width: '100%',
                    allowClear: true,
                    placeholder: $el.find('option[value=""]').text() || 'Select…'
                });
            });
        }

        function decodeDeptLabel(text) {
            if (text === undefined || text === null) {
                return '';
            }
            return window.pmsDecodeHtmlEntities
                ? window.pmsDecodeHtmlEntities(String(text))
                : String(text);
        }

        function applyUserDeptCell($wrap) {
            if (!$wrap.length) {
                return;
            }
            var full = decodeDeptLabel($wrap.attr('data-pms-full'));
            var short = decodeDeptLabel($wrap.attr('data-pms-short') || full);
            var $label = $wrap.find('.pms-user-dept-label');
            var $toggle = $wrap.find('.pms-user-dept-toggle');
            var globalExpanded = $(usersDeptCard).hasClass(usersDeptGlobalExpandedClass);
            var rowExpanded = $wrap.hasClass(usersDeptExpandedClass);

            if (globalExpanded) {
                $label.text(full);
                $toggle.addClass('d-none');
                return;
            }

            var expanded = rowExpanded;
            $label.text(expanded ? full : short);
            $toggle.removeClass('d-none');
            $toggle.attr('aria-expanded', expanded ? 'true' : 'false');
            $toggle.attr('title', expanded ? 'See less' : 'See more departments');
            $toggle.attr('aria-label', expanded ? 'See less departments' : 'See more departments');
            $toggle.find('i')
                .removeClass('fa-ellipsis-h fa-chevron-up')
                .addClass(expanded ? 'fa-chevron-up' : 'fa-ellipsis-h');
        }

        function refreshUserDeptCells() {
            $(usersDeptCard + ' .pms-user-dept-in-table').each(function () {
                applyUserDeptCell($(this));
            });
        }

        function setUserDeptGlobalExpanded(expanded) {
            var $card = $(usersDeptCard);
            $card.toggleClass(usersDeptGlobalExpandedClass, expanded);
            if (expanded) {
                $card.find('.pms-user-dept-in-table').removeClass(usersDeptExpandedClass);
            }
            var $btn = $card.find('.pms-user-dept-expand-all');
            $btn.attr('aria-pressed', expanded ? 'true' : 'false');
            $btn.toggleClass('active', expanded);
            $btn.find('.pms-dt-export-btn__label').text(expanded ? 'Hide departments' : 'Show all departments');
            $btn.find('i.fas')
                .removeClass('fa-building fa-compress-alt')
                .addClass(expanded ? 'fa-compress-alt' : 'fa-building');
            $btn.attr('title', expanded ? 'Hide all department names' : 'Show all department names');
            refreshUserDeptCells();
        }

        function mountUserDeptToolbarButton() {
            if (!showDepartmentColumn) {
                return;
            }
            var $toolbar = $(usersDeptCard).find('.pms-dt-toolbar .dt-buttons');
            if (!$toolbar.length || $(usersDeptCard).find('.pms-user-dept-expand-all').length) {
                return;
            }
            var $btn = $(
                '<button type="button" class="btn pms-dt-export-btn pms-user-dept-expand-all" aria-pressed="false" title="Show all department names">'
                + '<i class="fas fa-building" aria-hidden="true"></i>'
                + '<span class="pms-dt-export-btn__label">Show all departments</span>'
                + '</button>'
            );
            $toolbar.append($btn);
            if ($(usersDeptCard + ' .pms-user-dept-in-table').length === 0) {
                $btn.hide();
            }
        }

        // Laravel-paginated listing: disable DT paging so server pagination remains the source of truth.
        if ($('#example1').length && typeof window.PmsIndexDataTable !== 'undefined') {
            PmsIndexDataTable.initLaravelPaginated('#example1', {
                initComplete: function () {
                    mountUserDeptToolbarButton();
                    refreshUserDeptCells();
                },
                drawCallback: function () {
                    refreshUserDeptCells();
                }
            });
            PmsIndexDataTable.attachServerSort('#example1', {
                sortColParam: 'sort_col',
                sortDirParam: 'sort_dir',
                currentSortCol: '{{ request("sort_col", "users.id") }}',
                currentSortDir: '{{ request("sort_dir", "desc") }}',
                currentQuery: @json(request()->except(['page', 'sort_col', 'sort_dir']))
            });
        }

        $(document).on('click', usersDeptCard + ' .pms-user-dept-toggle', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var $wrap = $(this).closest('.pms-user-dept-in-table');
            $wrap.toggleClass(usersDeptExpandedClass);
            applyUserDeptCell($wrap);
        });

        $(document).on('click', usersDeptCard + ' .pms-user-dept-expand-all', function (e) {
            e.preventDefault();
            setUserDeptGlobalExpanded(!$(usersDeptCard).hasClass(usersDeptGlobalExpandedClass));
        });
    });

    // Delete confirmation for user row actions and details modal delete
    $(document).on('click', '.user-delete-btn, .action-dropdown-delete, .btn-details-modal-delete', function(e) {
        e.preventDefault();
        var form = $(this).closest('form');
        Swal.fire({
            title: 'Are you sure?',
            text: "You will not be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then(function(result) {
            if (result.isConfirmed) form.submit();
        });
    });

    $(document).on('click', '.details-modal-trigger', function(e) {
        e.preventDefault();
        var $t = $(this);
        var modalId = $t.data('modal-id');
        if (modalId !== 'userDetailsModal') return;
        var detailsUrl = $t.data('details-url');
        var id = $t.data('entity-id');
        var name = $t.data('entity-name') || 'User';
        var editUrl = $t.data('edit-url');
        var deleteUrl = $t.data('delete-url');

        $('#' + modalId + '-title-name').text(name);
        $('#' + modalId + '-body').html(window.PmsDetailsModal ? PmsDetailsModal.loadingHtml() : '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p class="mt-2">Loading...</p></div>');
        var $editBtn = $('#' + modalId + '-edit-btn');
        var $deleteForm = $('#' + modalId + '-delete-form');
        var $historyBtn = $('#' + modalId + '-history-btn');
        if ($editBtn.length) { $editBtn.hide().attr('href', '#'); }
        if ($deleteForm.length) { $deleteForm.hide().attr('action', '#'); }
        if ($historyBtn.length) { $historyBtn.hide().removeData('id').removeData('name').attr('data-id', id).attr('data-name', name); }
        $('#' + modalId).modal('show');

        $.ajax({
            url: detailsUrl,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(res) {
                if (res.status === 200 && res.data) {
                    $('#' + modalId + '-body').html(PmsDetailsModal.renderUserDetails(res.data));
                    if ($editBtn.length && editUrl) { $editBtn.attr('href', editUrl).show(); }
                    if ($deleteForm.length && deleteUrl) { $deleteForm.attr('action', deleteUrl).show(); }
                    if ($historyBtn.length) { $historyBtn.show(); }
                } else {
                    $('#' + modalId + '-body').html('<div class="alert alert-warning">Unable to load user details.</div>');
                }
            },
            error: function(xhr) {
                var msg = 'Failed to load user details.';
                if (xhr.status === 403) msg = 'Permission denied.';
                if (xhr.status === 404) msg = 'User not found.';
                $('#' + modalId + '-body').html('<div class="alert alert-danger">' + msg + '</div>');
            }
        });
    });

</script>
@endpush