{% extends "adminapp/master.html" %}
{% load static %}
{% block content %}
<div class="page-content py-4">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row">
            <div class="col-12 mb-3">
                <div class="page-title-box">
                    <h4 class="mb-0 fw-semibold">Manage Users</h4>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{% url 'index' %}"><i class="bi bi-house-door-fill me-1"></i>Dashboard</a></li>
                        <li class="breadcrumb-item active text-primary">Manage Users</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- User Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body ">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="6" r="4" fill="currentColor"/><path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5"/></svg> Users</h5>
                            
                          </div>
                        <div class="table-responsive">
                            <table class="table table-hover table-centered mb-0 align-middle">
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">#ID</th>
                                        <th scope="col">Username</th>
                                        <th scope="col">Email</th>
                                        <th scope="col" class="text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in data %}
                                    <tr>
                                        <td>{{ user.id }}</td>
                                        <td class="fw-medium">{{ user.username }}</td>
                                        <td>{{ user.email }}</td>
                                        <td class="text-center">
                                            {% if user.is_active %}
                                            <button class="btn btn-sm btn-danger rounded-pill px-3" onclick="confirmAction('{% url 'block_user' user.id %}', 'Block', '{{ user.username }}')">
                                                <i class="bi bi-slash-circle me-1"></i> Block
                                            </button>
                                            {% else %}
                                            <button class="btn btn-sm btn-success rounded-pill px-3" onclick="confirmAction('{% url 'unblock_user' user.id %}', 'Unblock', '{{ user.username }}')">
                                                <i class="bi bi-check-circle me-1"></i> Unblock
                                            </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">No users found</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
</div>

<!-- Confirmation Modal -->
<div class="modal fade" id="actionModal" tabindex="-1" aria-labelledby="actionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded shadow">
            <div class="modal-header bg-light border-0">
                <h5 class="modal-title fw-semibold" id="actionModalLabel">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p id="modalMessage" class="fw-bold fs-6 text-dark"></p>
            </div>
            <div class="modal-footer border-0 justify-content-center">
                <form id="actionForm" method="post" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger rounded-pill px-4" id="confirmButton"></button>
                    <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    </form>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript to Handle Custom Modal -->
<script>
    function confirmAction(url, action, username) {
        document.getElementById('actionForm').action = url;
        document.getElementById('modalMessage').innerText = `Are you sure you want to ${action.toLowerCase()} ${username}?`;
        document.getElementById('confirmButton').innerText = action;
        var actionModal = new bootstrap.Modal(document.getElementById('actionModal'));
        actionModal.show();
    }
</script>
{% endblock %}