<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            
            <!-- Header Section -->
            <div class="card bg-primary text-white border-0 shadow-sm mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="fw-bold text-white mb-1">
                                <i class="bi bi-shield-check me-2"></i><?= __('admin.admin_management') ?>
                            </h4>
                            <p class="text-light opacity-75 mb-0"><?= __('admin.manage_admin_users_desc') ?></p>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-light text-primary px-3 py-2">
                                <?= count($users) ?> <?= __('admin.admin_users') ?>
                            </span>
                            <a href="<?= base_url('admincontrol/admin_user_form/') ?>" class="btn btn-light">
                                <i class="bi bi-plus-circle me-2"></i><?= __('admin.add_new_admin') ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search and Filter Section -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-light border-0">
                    <h6 class="fw-bold mb-0">
                        <i class="bi bi-funnel me-2"></i><?= __('admin.search_and_filter') ?>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">
                                <i class="bi bi-search me-1"></i><?= __('admin.search') ?>
                            </label>
                            <input type="text" class="form-control" id="searchAdmins" 
                                   placeholder="<?= __('admin.search_by_name_email_username') ?>">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold">
                                <i class="bi bi-geo-alt me-1"></i><?= __('admin.country') ?>
                            </label>
                            <select class="form-select" id="filterByCountry">
                                <option value=""><?= __('admin.all_countries') ?></option>
                                <?php 
                                $countries = [];
                                foreach($users as $user) {
                                    if(!empty($user->sortname) && !in_array($user->sortname, $countries)) {
                                        $countries[] = $user->sortname;
                                    }
                                }
                                foreach($countries as $country): ?>
                                    <option value="<?= $country ?>"><?= $country ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-bold">
                                <i class="bi bi-sort-alpha-down me-1"></i><?= __('admin.sort_by') ?>
                            </label>
                            <select class="form-select" id="sortBy">
                                <option value="name"><?= __('admin.name') ?></option>
                                <option value="email"><?= __('admin.email') ?></option>
                                <option value="username"><?= __('admin.username') ?></option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label d-block">&nbsp;</label>
                            <button type="button" class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                                <i class="bi bi-x-circle me-1"></i><?= __('admin.clear') ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Admin Users Table -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-light border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold mb-0">
                            <i class="bi bi-people me-2"></i><?= __('admin.admin_users_list') ?>
                        </h6>
                        <a href="<?= base_url('admincontrol/admin_user_form/') ?>" class="btn btn-primary btn-sm">
                            <i class="bi bi-plus-circle me-1"></i><?= __('admin.add_admin') ?>
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th class="fw-bold"><?= __('admin.admin_info') ?></th>
                                    <th class="fw-bold text-center"><?= __('admin.location') ?></th>
                                    <th class="fw-bold"><?= __('admin.contact_details') ?></th>
                                    <th class="fw-bold text-center"><?= __('admin.actions') ?></th>
                                </tr>
                            </thead>
                            <tbody id="admin-users-table">
                                <?php if(empty($users)): ?>
                                    <tr>
                                        <td colspan="4" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="bi bi-shield-exclamation fs-1 mb-3"></i>
                                                <h5><?= __('admin.no_admin_users_found') ?></h5>
                                                <p><?= __('admin.create_first_admin') ?></p>
                                                <a href="<?= base_url('admincontrol/admin_user_form/') ?>" class="btn btn-primary">
                                                    <i class="bi bi-plus-circle me-2"></i><?= __('admin.add_new_admin') ?>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                <?php else: ?>
                                    <?php foreach ($users as $key => $user): ?>
                                        <tr class="admin-row" 
                                            data-name="<?= strtolower($user->firstname . ' ' . $user->lastname) ?>"
                                            data-email="<?= strtolower($user->email) ?>"
                                            data-username="<?= strtolower($user->username) ?>"
                                            data-country="<?= strtolower($user->sortname ?? '') ?>">
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="me-3 position-relative">
                                                        <?php $avatar = $user->avatar != '' ? 'users/' . $user->avatar : 'no-user_image.jpg'; ?>
                                                        <img src="<?= base_url('assets/images/' . $avatar) ?>" 
                                                             class="rounded-circle border border-2 border-primary admin-avatar" 
                                                             width="50" height="50"
                                                             style="object-fit: cover;"
                                                             data-bs-toggle="popover" 
                                                             data-bs-trigger="hover" 
                                                             data-bs-html="true" 
                                                             data-bs-content="<img src='<?= base_url('assets/images/' . $avatar) ?>' class='img-fluid rounded' style='max-width: 200px;'>">
                                                        <span class="position-absolute bottom-0 end-0 bg-success border border-white rounded-circle" 
                                                              style="width: 15px; height: 15px;" 
                                                              title="<?= __('admin.active_admin') ?>"></span>
                                                    </div>
                                                    <div>
                                                        <h6 class="fw-bold mb-1">
                                                            <?= htmlspecialchars($user->firstname . ' ' . $user->lastname) ?>
                                                        </h6>
                                                        <small class="text-muted">
                                                            <i class="bi bi-person-badge me-1"></i>@<?= htmlspecialchars($user->username) ?>
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <?php if (!empty($user->Country) && !empty($user->sortname)): ?>
                                                    <?php $flag_path = 'assets/vertical/assets/images/flags/' . strtolower($user->sortname) . '.png'; ?>
                                                    <div class="d-flex flex-column align-items-center">
                                                        <?php if (file_exists(FCPATH . $flag_path)): ?>
                                                            <img src="<?= base_url($flag_path) ?>" 
                                                                 class="rounded mb-1 flag-img" 
                                                                 width="32" height="24"
                                                                 alt="<?= htmlspecialchars($user->sortname) ?>"
                                                                 data-bs-toggle="popover" 
                                                                 data-bs-trigger="hover" 
                                                                 data-bs-html="true" 
                                                                 data-bs-content="<img src='<?= base_url($flag_path) ?>' style='width: 150px;'>">
                                                        <?php else: ?>
                                                            <i class="bi bi-geo-alt text-muted fs-4 mb-1"></i>
                                                        <?php endif; ?>
                                                        <span class="badge bg-light text-dark">
                                                            <?= htmlspecialchars($user->sortname) ?>
                                                        </span>
                                                        <?php if (!empty($user->City)): ?>
                                                            <small class="text-muted mt-1">
                                                                <?= htmlspecialchars($user->City) ?>
                                                            </small>
                                                        <?php endif; ?>
                                                    </div>
                                                <?php else: ?>
                                                    <span class="text-muted">
                                                        <i class="bi bi-geo-alt"></i> <?= __('admin.not_specified') ?>
                                                    </span>
                                                <?php endif; ?>
                                            </td>
                                            <td>
                                                <div>
                                                    <div class="d-flex align-items-center mb-2">
                                                        <i class="bi bi-envelope me-2 text-primary"></i>
                                                        <a href="mailto:<?= htmlspecialchars($user->email) ?>" 
                                                           class="text-decoration-none">
                                                            <?= htmlspecialchars($user->email) ?>
                                                        </a>
                                                    </div>
                                                    <?php if (!empty($user->PhoneNumber)): ?>
                                                        <div class="d-flex align-items-center">
                                                            <i class="bi bi-telephone me-2 text-success"></i>
                                                            <a href="tel:<?= htmlspecialchars($user->PhoneNumber) ?>" 
                                                               class="text-decoration-none">
                                                                <?= htmlspecialchars($user->PhoneNumber) ?>
                                                            </a>
                                                        </div>
                                                    <?php else: ?>
                                                        <div class="d-flex align-items-center">
                                                            <i class="bi bi-telephone me-2 text-muted"></i>
                                                            <span class="text-muted"><?= __('admin.no_phone') ?></span>
                                                        </div>
                                                    <?php endif; ?>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group" role="group">
                                                    <a href="<?= base_url('admincontrol/admin_user_form/' . $user->id) ?>" 
                                                       class="btn btn-sm btn-outline-primary" 
                                                       title="<?= __('admin.edit_admin') ?>">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>
                                                    <button class="btn btn-sm btn-outline-danger delete-admin-btn" 
                                                            data-id="<?= $user->id ?>"
                                                            data-name="<?= htmlspecialchars($user->firstname . ' ' . $user->lastname) ?>"
                                                            title="<?= __('admin.delete_admin') ?>">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- No Results Message -->
            <div class="text-center py-5 d-none" id="noResults">
                <i class="bi bi-search text-muted" style="font-size: 3rem;"></i>
                <h4 class="text-muted mt-3"><?= __('admin.no_results_found') ?></h4>
                <p class="text-muted"><?= __('admin.try_different_search') ?></p>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // Initialize popovers
    const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });

    // Search and filter functionality
    const searchInput = document.getElementById('searchAdmins');
    const countryFilter = document.getElementById('filterByCountry');
    const sortSelect = document.getElementById('sortBy');
    const adminRows = document.querySelectorAll('.admin-row');
    const noResults = document.getElementById('noResults');

    function filterAndSortAdmins() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedCountry = countryFilter.value.toLowerCase();
        const sortBy = sortSelect.value;
        
        let visibleRows = [];
        
        adminRows.forEach(row => {
            const name = row.dataset.name;
            const email = row.dataset.email;
            const username = row.dataset.username;
            const country = row.dataset.country;
            
            const matchesSearch = !searchTerm || 
                name.includes(searchTerm) || 
                email.includes(searchTerm) || 
                username.includes(searchTerm);
            
            const matchesCountry = !selectedCountry || country.includes(selectedCountry);
            
            if (matchesSearch && matchesCountry) {
                row.style.display = '';
                visibleRows.push(row);
            } else {
                row.style.display = 'none';
            }
        });
        
        // Sort visible rows
        if (visibleRows.length > 0) {
            visibleRows.sort((a, b) => {
                let aValue, bValue;
                switch(sortBy) {
                    case 'email':
                        aValue = a.dataset.email;
                        bValue = b.dataset.email;
                        break;
                    case 'username':
                        aValue = a.dataset.username;
                        bValue = b.dataset.username;
                        break;
                    default: // name
                        aValue = a.dataset.name;
                        bValue = b.dataset.name;
                }
                return aValue.localeCompare(bValue);
            });
            
            const tbody = document.getElementById('admin-users-table');
            visibleRows.forEach(row => tbody.appendChild(row));
        }
        
        // Show/hide no results message
        if (visibleRows.length === 0 && adminRows.length > 0) {
            noResults.classList.remove('d-none');
        } else {
            noResults.classList.add('d-none');
        }
    }

    // Event listeners
    searchInput.addEventListener('input', filterAndSortAdmins);
    countryFilter.addEventListener('change', filterAndSortAdmins);
    sortSelect.addEventListener('change', filterAndSortAdmins);

    // Clear filters function
    window.clearFilters = function() {
        searchInput.value = '';
        countryFilter.value = '';
        sortSelect.value = 'name';
        filterAndSortAdmins();
    };

    // Delete admin functionality
    document.addEventListener('click', function(e) {
        if (e.target.matches('.delete-admin-btn') || e.target.closest('.delete-admin-btn')) {
            const btn = e.target.matches('.delete-admin-btn') ? e.target : e.target.closest('.delete-admin-btn');
            const adminId = btn.dataset.id;
            const adminName = btn.dataset.name;
            
            window.confirmDelete('<?= __('admin.confirm_delete_admin') ?>'.replace('%s', adminName), function() {
                const originalContent = btn.innerHTML;
                btn.disabled = true;
                btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
                
                // Redirect to delete URL (keeping existing behavior)
                window.location.href = '<?= base_url('admincontrol/admin_user_delete/') ?>' + adminId;
            });
        }
    });

    // Initialize sorting
    filterAndSortAdmins();
});
</script>