{{-- User Table Section (reusable for AJAX) --}}
<div class="row mt-4" id="userTableSection">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-gradient" style="background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%);">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h6 class="mb-0 text-white fw-bold">
                        <i class="bi bi-people-fill me-2"></i>Daftar Semua User
                        <span class="badge bg-light text-dark ms-2" id="userCount">{{ $totalFiltered }}</span>
                    </h6>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="card-body border-bottom bg-light py-3">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label small text-muted mb-1">
                            <i class="bi bi-search me-1"></i>Cari User
                        </label>
                        <input type="text" id="searchInput" class="form-control" placeholder="Ketik nama, jabatan, atau email..." value="{{ $search }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">
                            <i class="bi bi-building me-1"></i>Satuan
                        </label>
                        <select id="filterSatuan" class="form-select">
                            <option value="">Semua Satuan</option>
                            @foreach($allSatuan as $satuan)
                                <option value="{{ strtolower($satuan) }}" {{ strtolower($satuan) === $filterSatuan ? 'selected' : '' }}>{{ $satuan }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small text-muted mb-1">
                            <i class="bi bi-person-badge me-1"></i>Role
                        </label>
                        <select id="filterRole" class="form-select">
                            <option value="">Semua Role</option>
                            <option value="admin" {{ $filterRole === 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="pimpinan_tertinggi" {{ $filterRole === 'pimpinan_tertinggi' ? 'selected' : '' }}>Pimpinan Tertinggi</option>
                            <option value="sekretariat_pimpinan" {{ $filterRole === 'sekretariat_pimpinan' ? 'selected' : '' }}>Sekretariat Pimpinan</option>
                            <option value="pimpinan_staf" {{ $filterRole === 'pimpinan_staf' ? 'selected' : '' }}>Pimpinan Staf</option>
                            <option value="pimpinan_satuan" {{ $filterRole === 'pimpinan_satuan' ? 'selected' : '' }}>Pimpinan Satuan</option>
                            <option value="kepala_bagian" {{ $filterRole === 'kepala_bagian' ? 'selected' : '' }}>Kepala Bagian</option>
                            <option value="tata_usaha" {{ $filterRole === 'tata_usaha' ? 'selected' : '' }}>Tata Usaha</option>
                            <option value="staf_pelaksana" {{ $filterRole === 'staf_pelaksana' ? 'selected' : '' }}>Staf Pelaksana</option>
                            <option value="operator" {{ $filterRole === 'operator' ? 'selected' : '' }}>Operator</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="resetFilter" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                        </button>
                    </div>
                </div>

                <div id="filterStatus" class="mt-3" style="{{ $hasActiveFilter ? '' : 'display: none;' }}">
                    <div class="alert alert-info py-2 mb-0 d-flex align-items-center justify-content-between">
                        <span>
                            <i class="bi bi-funnel-fill me-2"></i>
                            Menampilkan <strong id="visibleCount">{{ $totalFiltered }}</strong> dari <strong>{{ $totalUsers }}</strong> user
                        </span>
                        <button type="button" class="btn btn-sm btn-outline-info" id="clearFilterBtn">
                            <i class="bi bi-x-circle me-1"></i>Hapus Filter
                        </button>
                    </div>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="userTable">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4" style="min-width: 200px;">Jabatan</th>
                                <th style="min-width: 100px;">NRP</th>
                                <th style="min-width: 100px;">Pangkat</th>
                                <th style="min-width: 120px;">Satuan</th>
                                <th style="min-width: 150px;">Atasan/Bawahan</th>
                                <th style="min-width: 140px;">Role</th>
                                <th class="text-center" style="width: 100px;">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($paginator as $user)
                            <tr>
                                <td class="ps-4">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm me-3">
                                            <div class="avatar-title rounded-circle bg-{{ $user->isAdmin() ? 'danger' : ($user->isPimpinanTertinggi() ? 'warning' : 'kopassus') }} text-white">
                                                {{ strtoupper(substr($user->jabatan_short ?? $user->jabatan, 0, 1)) }}
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">{{ $user->jabatan_with_satuan ?? $user->jabatan }}</h6>
                                            <small class="text-muted">
                                                <i class="bi bi-envelope me-1"></i>{{ $user->email }}
                                            </small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($user->nrp)
                                        <span class="badge bg-light text-dark border">{{ $user->nrp }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>{{ $user->pangkat ?? '-' }}</td>
                                <td>
                                    @if($user->satuan)
                                        <span class="badge bg-primary bg-opacity-10 text-primary border border-primary">
                                            <i class="bi bi-building me-1"></i>{{ $user->satuan }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($user->superior)
                                        <div class="mb-1">
                                            <span class="badge bg-info bg-opacity-10 text-info border border-info">
                                                <i class="bi bi-arrow-up me-1"></i>{{ $user->superior->jabatan_with_satuan ?? $user->superior->jabatan }}
                                            </span>
                                        </div>
                                    @else
                                        <div class="mb-1">
                                            <span class="badge bg-secondary bg-opacity-10 text-secondary border">
                                                <i class="bi bi-star me-1"></i>Root
                                            </span>
                                        </div>
                                    @endif
                                    @if($user->subordinates->count() > 0)
                                        <small class="text-success">
                                            <i class="bi bi-arrow-down me-1"></i>{{ $user->subordinates->count() }} bawahan
                                        </small>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $roleColors = [
                                            'admin' => 'danger',
                                            'pimpinan_tertinggi' => 'warning',
                                            'sekretariat_pimpinan' => 'info',
                                            'pimpinan_staf' => 'primary',
                                            'pimpinan_satuan' => 'secondary',
                                            'kepala_bagian' => 'dark',
                                            'tata_usaha' => 'success',
                                            'staf_pelaksana' => 'success',
                                            'operator' => 'secondary'
                                        ];
                                        $roleColor = $roleColors[$user->role] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $roleColor }} rounded-pill px-3">
                                        {{ $user->role_display_name }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('rbac.hierarchy.edit', $user->id) }}"
                                           class="btn btn-soft-primary"
                                           title="Edit User">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        @if($user->email !== 'admin@kopassus.mil.id')
                                        <form action="{{ route('rbac.hierarchy.destroy', $user->id) }}"
                                              method="POST"
                                              class="d-inline"
                                              id="delete-form-{{ $user->id }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="button"
                                                    class="btn btn-soft-danger btn-delete-confirm"
                                                    data-form-id="delete-form-{{ $user->id }}"
                                                    title="Nonaktifkan User">
                                                <i class="bi bi-person-x"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div id="emptyState" class="text-center py-5" style="{{ ($totalFiltered === 0 && $hasActiveFilter) ? '' : 'display: none;' }}">
                    <i class="bi bi-search text-muted" style="font-size: 3rem;"></i>
                    <h5 class="mt-3 text-muted">Tidak Ada Data</h5>
                    <p class="text-muted">Tidak ada user yang sesuai dengan filter yang dipilih.</p>
                    <button type="button" class="btn btn-outline-primary" id="emptyResetBtn">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>Reset Filter
                    </button>
                </div>

                @if($paginator->hasPages())
                <div class="d-flex justify-content-between align-items-center px-4 py-3 border-top">
                    <div class="text-muted small">
                        Menampilkan {{ $paginator->firstItem() }}-{{ $paginator->lastItem() }} dari {{ $paginator->total() }} user
                    </div>
                    <nav>
                        <ul class="pagination pagination-sm mb-0">
                            @if($paginator->onFirstPage())
                                <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
                            @else
                                <li class="page-item"><a class="page-link ajax-page" href="{{ $paginator->previousPageUrl() }}">&laquo;</a></li>
                            @endif

                            @foreach($paginator->getUrlRange(max(1, $paginator->currentPage() - 2), min($paginator->lastPage(), $paginator->currentPage() + 2)) as $page => $url)
                                <li class="page-item {{ $page == $paginator->currentPage() ? 'active' : '' }}">
                                    <a class="page-link ajax-page" href="{{ $url }}">{{ $page }}</a>
                                </li>
                            @endforeach

                            @if($paginator->currentPage() + 2 < $paginator->lastPage())
                                <li class="page-item disabled"><span class="page-link">...</span></li>
                                <li class="page-item"><a class="page-link ajax-page" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
                            @endif

                            @if($paginator->hasMorePages())
                                <li class="page-item"><a class="page-link ajax-page" href="{{ $paginator->nextPageUrl() }}">&raquo;</a></li>
                            @else
                                <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
                            @endif
                        </ul>
                    </nav>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>