{% extends "admin/layout.html" %}

{% block page_title %}مدیریت کاربران{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="fw-bold"><i class="fas fa-users" style="color:#c41e3a;"></i> لیست کاربران</h5>
    <a href="{{ url_for('admin_user_create') }}" class="btn-admin-primary">
        <i class="fas fa-plus"></i> افزودن کاربر جدید
    </a>
</div>

<!-- فیلتر و جستجو -->
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <input type="text" id="searchInput" class="form-control" placeholder="جستجوی کاربر..." onkeyup="filterTable()">
    </div>
    <div class="col-md-3">
        <select id="roleFilter" class="form-select" onchange="filterTable()">
            <option value="">همه نقش‌ها</option>
            <option value="admin">ادمین</option>
            <option value="technician">تکنسین</option>
            <option value="user">کاربر</option>
        </select>
    </div>
</div>

<!-- جدول کاربران -->
<div class="table-responsive table-admin">
    <table class="table table-hover" id="usersTable">
        <thead>
            <tr>
                <th>#</th>
                <th>نام</th>
                <th>تلفن</th>
                <th>ایمیل</th>
                <th>نقش</th>
                <th>وضعیت</th>
                <th>تاریخ ثبت</th>
                <th>عملیات</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ loop.index }}</td>
                <td><strong>{{ user.fullname }}</strong></td>
                <td>{{ user.phone }}</td>
                <td>{{ user.email or '-' }}</td>
                <td>
                    <span class="badge bg-{% if user.role == 'admin' %}danger{% elif user.role == 'technician' %}warning{% else %}info{% endif %}">
                        {% if user.role == 'admin' %}ادمین
                        {% elif user.role == 'technician' %}تکنسین
                        {% else %}کاربر{% endif %}
                    </span>
                </td>
                <td>
                    <span class="badge bg-{% if user.is_active %}success{% else %}secondary{% endif %}">
                        {% if user.is_active %}فعال{% else %}غیرفعال{% endif %}
                    </span>
                </td>
                <td>{{ user.created_at|persian_date }}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <a href="{{ url_for('admin_user_edit', id=user.id) }}" class="btn btn-outline-primary" title="ویرایش">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{{ url_for('admin_user_delete', id=user.id) }}" class="btn btn-outline-danger" title="حذف" onclick="return confirm('آیا از حذف این کاربر مطمئن هستید؟')">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
function filterTable() {
    var input = document.getElementById('searchInput').value.toLowerCase();
    var roleFilter = document.getElementById('roleFilter').value;
    var rows = document.querySelectorAll('#usersTable tbody tr');
    
    rows.forEach(function(row) {
        var text = row.textContent.toLowerCase();
        var role = row.querySelector('td:nth-child(5) .badge').textContent;
        var show = text.includes(input);
        if (roleFilter && roleFilter !== role) {
            show = false;
        }
        row.style.display = show ? '' : 'none';
    });
}
</script>
{% endblock %}