<?php $__env->startSection('content'); ?>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-0 gradient-title">Users</h4>
            <div class="text-muted small">Kelola akun & role</div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#syncPreviewModal">
                <i class="bi bi-arrow-repeat me-1"></i>Sync from SKSP
            </button>
            <form id="syncForm" action="<?php echo e(route('admin.users.sync')); ?>" method="POST" class="d-none">
                <?php echo csrf_field(); ?>
            </form>
            <a href="<?php echo e(route('admin.users.create')); ?>" class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i>Tambah
                User</a>
        </div>
    </div>

    <div class="card card-glass mb-3">
        <div class="card-body">
            <form class="row g-2">
                <div class="col-md-4">
                    <label class="form-label">Cari nama/email</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" name="q" class="form-control" value="<?php echo e(request('q')); ?>" placeholder="Keyword">
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Role</label>
                    <select name="role_id" class="form-select">
                        <option value="">Semua</option>
                        <?php $__currentLoopData = $roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $role): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($role->id); ?>" <?php echo e(request('role_id') == $role->id ? 'selected' : ''); ?>>
                                <?php echo e($role->app); ?>: <?php echo e($role->key); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end gap-2">
                    <button class="btn btn-primary w-100"><i class="bi bi-funnel me-1"></i>Filter</button>
                    <a href="<?php echo e(route('admin.users.index')); ?>" class="btn btn-outline-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card card-glass">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr>
                            <?php
                                $nextDir = $dir === 'asc' ? 'desc' : 'asc';
                                function sortLink($label, $field, $currentSort, $currentDir)
                                {
                                    $dir = ($currentSort === $field && $currentDir === 'asc') ? 'desc' : 'asc';
                                    $icon = '';
                                    if ($currentSort === $field) {
                                        $icon = $currentDir === 'asc' ? '↑' : '↓';
                                    }
                                    $query = array_merge(request()->query(), ['sort' => $field, 'dir' => $dir]);
                                    $url = request()->url() . '?' . http_build_query($query);
                                    return '<a href="' . $url . '" class="text-decoration-none">' . $label . ' ' . $icon . '</a>';
                                }
                            ?>
                            <th><?php echo sortLink('ID', 'id', $sort, $dir); ?></th>
                            <th><?php echo sortLink('Nama', 'name', $sort, $dir); ?></th>
                            <th><?php echo sortLink('Email', 'email', $sort, $dir); ?></th>
                            <th>Roles</th>
                            <th>MFA</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__empty_1 = true; $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr>
                                <td><?php echo e($user->id); ?></td>
                                <td><?php echo e($user->name); ?></td>
                                <td><?php echo e($user->email); ?></td>
                                <td>
                                    <?php $__currentLoopData = $user->roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $role): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <span class="badge badge-soft border"><?php echo e($role->app); ?>:<?php echo e($role->key); ?></span>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </td>
                                <td>
                                    <?php if($user->mfa_enabled_at): ?>
                                        <span class="badge bg-success"><i class="bi bi-shield-lock-fill me-1"></i>Aktif</span>
                                    <?php else: ?>
                                        <span class="badge bg-secondary">Off</span>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-outline-primary" href="<?php echo e(route('admin.users.edit', $user)); ?>"><i
                                            class="bi bi-pencil-square me-1"></i>Edit</a>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="6" class="text-center text-muted">Belum ada user.</td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
            <?php echo e($users->links()); ?>

        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
    <div class="modal fade" id="syncPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Sync Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="syncLoading" class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Connecting to SKSP database...</p>
                    </div>

                    <div id="syncStats" class="d-none">
                        <div class="row text-center mb-4">
                            <div class="col-4">
                                <h3 class="fw-bold text-primary" id="statFound">0</h3>
                                <div class="text-muted small">Total Users Found</div>
                            </div>
                            <div class="col-4">
                                <h3 class="fw-bold text-success" id="statNew">0</h3>
                                <div class="text-muted small">New Users</div>
                            </div>
                            <div class="col-4">
                                <h3 class="fw-bold text-info" id="statUpdates">0</h3>
                                <div class="text-muted small">Updates</div>
                            </div>
                        </div>

                        <h6 class="fw-bold mb-2">New Users List</h6>
                        <div class="table-responsive border rounded" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm mb-0">
                                <thead class="sticky-top" style="background: var(--bg-card); z-index: 5;">
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                    </tr>
                                </thead>
                                <tbody id="newUsersTableBody">
                                    <!-- Populated by JS -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="syncError" class="alert alert-danger d-none mt-3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" onclick="document.getElementById('syncForm').submit()">
                        <i class="bi bi-arrow-repeat me-1"></i>Confirm Sync
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modal = document.getElementById('syncPreviewModal');
            const loading = document.getElementById('syncLoading');
            const stats = document.getElementById('syncStats');
            const errorDiv = document.getElementById('syncError');
            const tbody = document.getElementById('newUsersTableBody');

            modal.addEventListener('show.bs.modal', function () {
                // Reset state
                loading.classList.remove('d-none');
                stats.classList.add('d-none');
                errorDiv.classList.add('d-none');
                tbody.innerHTML = '';

                fetch('<?php echo e(route("admin.users.sync.preview")); ?>')
                    .then(response => response.json())
                    .then(data => {
                        loading.classList.add('d-none');

                        if (data.error) {
                            errorDiv.textContent = data.error;
                            errorDiv.classList.remove('d-none');
                            return;
                        }

                        stats.classList.remove('d-none');
                        document.getElementById('statFound').textContent = data.found || 0;
                        document.getElementById('statNew').textContent = data.new_count || 0;
                        document.getElementById('statUpdates').textContent = data.update_count || 0;

                        if (data.new_users && data.new_users.length > 0) {
                            data.new_users.forEach(user => {
                                const tr = document.createElement('tr');
                                tr.innerHTML = `<td>${user.name}</td><td>${user.email}</td><td><span class="badge badge-soft">${user.role_name || 'User'}</span></td>`;
                                tbody.appendChild(tr);
                            });
                        } else {
                            tbody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">No new users found.</td></tr>';
                        }
                    })
                    .catch(err => {
                        loading.classList.add('d-none');
                        errorDiv.textContent = 'Failed to load preview: ' + err.message;
                        errorDiv.classList.remove('d-none');
                    });
            });
        });
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/sppsynergo/public_html/sso.synergo.id/resources/views/admin/users/index.blade.php ENDPATH**/ ?>