<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <h4 class="page-title mb-0"><i class="bi bi-person-lines-fill me-2 text-primary"></i><?= lang('Admin.user_list') ?></h4>
    <div class="d-flex gap-2">
        <a href="<?= site_url('admin/users/export') ?>" class="btn btn-outline-success btn-sm">
            <i class="bi bi-file-earmark-spreadsheet me-1"></i><?= lang('Admin.export_csv') ?>
        </a>
        <a href="<?= site_url('admin/users/create') ?>" class="btn btn-primary btn-sm">
            <i class="bi bi-person-plus me-1"></i><?= lang('Admin.add_user') ?>
        </a>
    </div>
</div>

<!-- Filters -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body py-3">
        <form method="get" class="row g-2 align-items-end">
            <div class="col-md-5">
                <label class="form-label small fw-medium mb-1"><?= lang('Admin.search') ?></label>
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" class="form-control"
                           placeholder="Search by name, company or designation..."
                           value="<?= esc($filters['search']) ?>">
                    <span class="input-group-text text-muted" style="font-size:.72rem" title="Email, mobile & address are encrypted and cannot be searched">
                        <i class="bi bi-lock-fill text-success"></i>
                    </span>
                </div>
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-medium mb-1"><?= lang('Admin.status') ?></label>
                <select name="is_active" class="form-select form-select-sm">
                    <option value="">All Status</option>
                    <option value="1" <?= $filters['is_active']==='1' ? 'selected':'' ?>><?= lang('Admin.active') ?></option>
                    <option value="0" <?= $filters['is_active']==='0' ? 'selected':'' ?>><?= lang('Admin.inactive') ?></option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-medium mb-1">Per Page</label>
                <select name="per_page" class="form-select form-select-sm">
                    <?php foreach ([10,15,25,50] as $n): ?>
                    <option value="<?= $n ?>" <?= $perPage==$n ? 'selected':'' ?>><?= $n ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-1">
                <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                    <i class="bi bi-funnel me-1"></i><?= lang('Admin.filter') ?>
                </button>
                <a href="<?= site_url('admin/users') ?>" class="btn btn-outline-secondary btn-sm" title="Reset">
                    <i class="bi bi-x"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Table -->
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3" style="width:40px">#</th>
                        <th><?= lang('Admin.name') ?></th>
                        <th class="d-none d-md-table-cell"><?= lang('Admin.company_name') ?></th>
                        <th class="d-none d-lg-table-cell"><?= lang('Admin.mobile') ?></th>
                        <th class="d-none d-lg-table-cell"><?= lang('Admin.email') ?></th>
                        <th><?= lang('Admin.status') ?></th>
                        <th class="pe-3"><?= lang('Admin.actions') ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($profiles)): ?>
                    <tr><td colspan="7" class="text-center text-muted py-5"><?= lang('Admin.no_records') ?></td></tr>
                    <?php else: ?>
                    <?php $i = 1; foreach ($profiles as $p): ?>
                    <tr>
                        <td class="ps-3 text-muted small"><?= $i++ ?></td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="<?= profile_photo_url($p['profile_photo']) ?>"
                                     class="rounded-circle flex-shrink-0" width="38" height="38"
                                     style="object-fit:cover" alt="">
                                <div>
                                    <div class="fw-medium unicode-text"><?= esc($p['name']) ?></div>
                                    <div class="text-muted small unicode-text"><?= esc($p['designation'] ?? '') ?></div>
                                </div>
                            </div>
                        </td>
                        <td class="d-none d-md-table-cell small unicode-text"><?= esc($p['company_name'] ?? '—') ?></td>
                        <td class="d-none d-lg-table-cell small">
                            <?php if (!empty($p['mobile'])): ?>
                                <?= esc(($p['mobile_country_code'] ?? '') . ' ' . $p['mobile']) ?>
                            <?php else: ?>—<?php endif; ?>
                        </td>
                        <td class="d-none d-lg-table-cell small"><?= esc($p['email'] ?? '—') ?></td>
                        <td>
                            <form action="<?= site_url('admin/users/toggle/'.$p['id']) ?>" method="post" class="d-inline">
                                <?= csrf_field() ?>
                                <button type="submit"
                                    class="badge border-0 <?= $p['is_active'] ? 'bg-success' : 'bg-secondary' ?>"
                                    style="cursor:pointer"
                                    title="Click to toggle">
                                    <?= $p['is_active'] ? lang('Admin.active') : lang('Admin.inactive') ?>
                                </button>
                            </form>
                        </td>
                        <td class="pe-3">
                            <div class="d-flex gap-1">
                                <a href="<?= site_url('admin/users/view/'.$p['id']) ?>"
                                   class="btn btn-xs btn-outline-info" title="<?= lang('Admin.view') ?>">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="<?= site_url('admin/users/edit/'.$p['id']) ?>"
                                   class="btn btn-xs btn-outline-primary" title="<?= lang('Admin.edit') ?>">
                                    <i class="bi bi-pencil"></i>
                                </a>
                               
                                <button type="button"
                                        class="btn btn-xs btn-outline-danger btn-delete"
                                        data-id="<?= $p['id'] ?>"
                                        data-name="<?= esc($p['name']) ?>"
                                        title="<?= lang('Admin.delete') ?>">
                                    <i class="bi bi-trash"></i>
                                </button>
                                <!-- Hidden delete form -->
                                <form id="del-<?= $p['id'] ?>" action="<?= site_url('admin/users/delete/'.$p['id']) ?>" method="post" class="d-none">
                                    <?= csrf_field() ?>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php if ($pager): ?>
    <div class="card-footer bg-white border-top d-flex align-items-center justify-content-between py-2 px-3">
        <small class="text-muted">Showing page results</small>
        <div><?= $pager->links('default', 'bootstrap_5') ?></div>
    </div>
    <?php endif; ?>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
// Delete confirmation
document.querySelectorAll('.btn-delete').forEach(btn => {
    btn.addEventListener('click', function () {
        const id   = this.dataset.id;
        const name = this.dataset.name;
        Swal.fire({
            title: '<?= lang('Admin.confirm_delete') ?>',
            text: name,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: '<?= lang('Admin.delete') ?>',
            cancelButtonText: '<?= lang('Admin.cancel') ?>',
        }).then(result => {
            if (result.isConfirmed) {
                document.getElementById('del-' + id).submit();
            }
        });
    });
});
</script>
<?= $this->endSection() ?>
