{% extends "base.html" %}

{% block content %}

<div class="page-hero">
    <div>
        <h2><i class="bi bi-shield-lock text-primary"></i> {{ l('Users & Roles Management', 'ব্যবহারকারী ও রোল ব্যবস্থাপনা') }}</h2>
        <p class="page-subtitle">{{ l('Create staff accounts and assign system permissions for Cashiers, Managers, Salesmen', 'নতুন স্টাফ ইউজার তৈরি করুন এবং পারমিশন সেট করুন') }}</p>
    </div>
</div>

<!-- USER STATS -->
<div class="stat-grid" style="margin-bottom:20px;">
    <div class="stat-card" style="background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;">
        <div class="stat-icon" style="background:#4f46e5;color:#fff;"><i class="bi bi-people-fill"></i></div>
        <div class="stat-label">{{ l('Total Users', 'মোট ইউজার') }}</div>
        <div class="stat-value" style="color:#1e1b4b;">{{ users|length }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#fff1f2,#ffe4e6);border:1px solid #fecdd3;">
        <div class="stat-icon" style="background:#dc2626;color:#fff;"><i class="bi bi-shield-fill"></i></div>
        <div class="stat-label">{{ l('Admins / Owners', 'অ্যাডমিন / মালিক') }}</div>
        <div class="stat-value" style="color:#991b1b;">{{ users|selectattr('role','in',['admin','owner'])|list|length }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#fefce8,#fef9c3);border:1px solid #fde68a;">
        <div class="stat-icon" style="background:#ca8a04;color:#fff;"><i class="bi bi-person-badge-fill"></i></div>
        <div class="stat-label">{{ l('Managers', 'ম্যানেজার') }}</div>
        <div class="stat-value" style="color:#713f12;">{{ users|selectattr('role','equalto','manager')|list|length }}</div>
    </div>
    <div class="stat-card" style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;">
        <div class="stat-icon" style="background:#0284c7;color:#fff;"><i class="bi bi-calculator-fill"></i></div>
        <div class="stat-label">{{ l('Cashiers / Staff', 'ক্যাশিয়ার / স্টাফ') }}</div>
        <div class="stat-value" style="color:#0c4a6e;">{{ users|selectattr('role','in',['cashier','salesman'])|list|length }}</div>
    </div>
</div>

<!-- ADD NEW USER FORM -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-person-plus text-primary me-2"></i>{{ l('Add New Staff User', 'নতুন স্টাফ ইউজার যোগ করুন') }}</h5>
    </div>
    <div class="card-body p-4">
        <form method="POST" action="/add-user">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="row g-4">
            <!-- LEFT: Credentials -->
            <div class="col-md-6 border-end-md pe-md-4">
                <div class="d-flex align-items-center mb-3 text-primary fw-bold">
                    <i class="bi bi-person-badge me-2 fs-5"></i>
                    <span>{{ l('1. Staff Credentials', '১. ইউজারের ইউজারনেম ও পাসওয়ার্ড') }}</span>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Name / Username', 'নাম / ইউজারনেম') }} <span class="text-danger">*</span></label>
                    <input class="form-control form-control-lg fs-6" name="username" placeholder="{{ l('e.g. Tanvir, Rahim', 'যেমন: তানভীর, রহিম') }}" required>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('Login Password', 'পাসওয়ার্ড') }} <span class="text-danger">*</span></label>
                    <input class="form-control form-control-lg fs-6" type="password" name="password" placeholder="{{ l('Enter login password...', 'পাসওয়ার্ড দিন...') }}" required>
                </div>
            </div>

            <!-- RIGHT: Contact & Role -->
            <div class="col-md-6 ps-md-4">
                <div class="d-flex align-items-center mb-3 text-success fw-bold">
                    <i class="bi bi-shield-check me-2 fs-5"></i>
                    <span>{{ l('2. Contact Info & Role Access', '২. যোগাযোগের তথ্য ও রোল (পদবি)') }}</span>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Gmail Address', 'জিমেইল ঠিকানা') }}</label>
                        <input class="form-control" type="email" name="email" placeholder="tanvir@gmail.com">
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold text-dark small">{{ l('Phone Number', 'মোবাইল নম্বর') }}</label>
                        <input class="form-control" name="phone" placeholder="01712345678">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold text-dark small">{{ l('System Role (Access Level)', 'রোল (পদবি ও পারমিশন)') }}</label>
                    <select class="form-select form-select-lg fs-6" name="role">
                        {% for r in roles %}
                        <option value="{{ r }}" {% if r=='cashier' %}selected{% endif %}>{{ r|capitalize }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end align-items-center mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary btn-lg px-5 fw-bold shadow-sm">
                <i class="bi bi-plus-circle me-1"></i> {{ l('Add Staff User', 'ইউজার সেভ করুন') }}
            </button>
        </div>

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

<!-- USERS TABLE -->
<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
    <div class="card-header bg-light border-bottom py-3 px-4 d-flex align-items-center justify-content-between flex-wrap gap-2">
        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-people text-primary me-2"></i>{{ l('Existing Users List', 'বিদ্যমান ইউজারদের তালিকা') }}</h5>
        <div style="width:260px;">
            <input type="text" id="userSearch" class="form-control form-control-sm"
                   placeholder="{{ l('Search by username or role...', 'নাম বা রোল দিয়ে খুঁজুন...') }}">
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0" id="userTable">
            <thead class="table-light">
                <tr>
                    <th class="ps-4">{{ l('User Name', 'ইউজার নাম') }}</th>
                    <th>{{ l('Login Gmail / Phone', 'লগইন জিমেইল / ফোন') }}</th>
                    <th>{{ l('Current Role', 'বর্তমান রোল') }}</th>
                    <th>{{ l('Update Role / Password', 'রোল বা পাসওয়ার্ড পরিবর্তন') }}</th>
                    <th class="pe-4 text-end">{{ l('Action', 'অ্যাকশন') }}</th>
                </tr>
            </thead>
            <tbody>
            {% for u in users %}
                <tr class="user-row" data-search="{{ (u.username + ' ' + (u.role or '') + ' ' + (u.email or '') + ' ' + (u.phone or ''))|lower }}">
                    <td class="ps-4 fw-bold text-dark">
                        <i class="bi bi-person-circle me-1 text-primary"></i>{{ u.username }}
                    </td>
                    <td>
                        <div class="small">
                            {% if u.email %}<i class="bi bi-envelope text-muted me-1"></i>{{ u.email }}<br>{% endif %}
                            {% if u.phone %}<i class="bi bi-telephone text-muted me-1"></i>{{ u.phone }}{% endif %}
                            {% if not u.email and not u.phone %}<span class="text-muted fst-italic">No Gmail/Phone</span>{% endif %}
                        </div>
                    </td>
                    <td>
                        {% set r = u.role|lower %}
                        {% if r in ['owner', 'admin'] %}
                            <span class="badge bg-danger py-1 px-3"><i class="bi bi-shield-check me-1"></i>Admin</span>
                        {% elif r == 'manager' %}
                            <span class="badge bg-warning text-dark py-1 px-3"><i class="bi bi-person-badge me-1"></i>Manager</span>
                        {% elif r == 'cashier' %}
                            <span class="badge bg-info text-dark py-1 px-3"><i class="bi bi-calculator me-1"></i>Cashier</span>
                        {% elif r == 'salesman' %}
                            <span class="badge bg-secondary py-1 px-3"><i class="bi bi-cart me-1"></i>Salesman</span>
                        {% else %}
                            <span class="badge bg-dark py-1 px-3">{{ u.role|title }}</span>
                        {% endif %}
                    </td>
                    <td>
                        <form method="POST" action="/edit-user/{{ u.id }}" class="row g-2">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <div class="col-5">
                                <select class="form-select form-select-sm" name="role">
                                    {% for r in roles %}
                                    <option value="{{ r }}" {% if u.role==r %}selected{% endif %}>{{ r|capitalize }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-5">
                                <input class="form-control form-control-sm" type="password" name="password"
                                       placeholder="{{ l('New password (optional)', 'নতুন পাসওয়ার্ড (ঐচ্ছিক)') }}">
                            </div>
                            <div class="col-2">
                                <button class="btn btn-outline-primary btn-sm w-100"
                                        title="{{ l('Save User Changes', 'সেভ করুন') }}"><i class="bi bi-check-lg"></i></button>
                            </div>
                        </form>
                    </td>
                    <td class="pe-4 text-end">
                        {% if u.id != current_user.id %}
                        <form method="POST" action="/delete-user/{{ u.id }}" class="d-inline"
                              onsubmit="return confirm('{{ l('Are you sure you want to delete this user?', 'আপনি কি নিশ্চিত এই ইউজারকে মুছে ফেলতে চান?') }}')">
                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
                            <button type="submit" class="btn btn-outline-danger btn-sm">
                                <i class="bi bi-trash me-1"></i>{{ l('Delete', 'মুছুন') }}
                            </button>
                        </form>
                        {% else %}
                        <span class="badge bg-light text-muted border">{{ l('Logged In', 'লগইন আছেন') }}</span>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            <tr id="userNoResults" style="display:none;">
                <td colspan="5" class="text-center py-5 text-muted">
                    <i class="bi bi-search fs-2 d-block mb-2 opacity-40"></i>
                    {{ l('No users found matching your search.', 'আপনার সার্চের সাথে মিলে এমন কোনো ইউজার পাওয়া যায়নি।') }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('userSearch');
    if (!searchInput) return;
    searchInput.addEventListener('input', function() {
        const term = this.value.toLowerCase().trim();
        const rows = document.querySelectorAll('#userTable .user-row');
        const noResults = document.getElementById('userNoResults');
        let visible = 0;
        rows.forEach(r => {
            const text = r.getAttribute('data-search') || '';
            const show = !term || text.includes(term);
            r.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        if (noResults) noResults.style.display = visible === 0 ? '' : 'none';
    });
});
</script>

{% endblock %}