{% extends "base.html" %}
{% load django_tables2 %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}الاعدادت - إدارة المستخدمين{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'users/css/style.css' %}">

    <form method="get" class="py-3 g-2 no-print">
        {% crispy filter.form %}
    </form>

    <div class="card border-light shadow">
        <div class="card-body p-0 table-responsive-lg">
            <!-- Render the table -->
            {% render_table table %}
        </div>
    </div>

    <div class="mt-3">
        {% if not request.user.scope %}
        <button type="button" class="btn btn-info no-print" title="إدارة النطاقات" onclick="loadScopeManager()">
            <i class="bi bi-list me-1 h4"></i> إدارة النطاقات
        </button>
        {% endif %}
        <a href="{% url 'create_user' %}" class="btn btn-secondary no-print" title="إضافة مستخدم جديد">
            <i class="bi bi-person-plus-fill text-light me-1 h4"></i> إضافة مستخدم جديد
        </a>
    </div>

    <!-- Delete Modal -->
    {% if request.user.is_superuser %}
    <form id="deleteForm" method="post">
        {% csrf_token %}
        <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">تأكيد الحذف</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>هل انت متأكد انك تريد حذف العضو <strong><span id="userName"></span></strong>؟</p>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger">نعم، احذف</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endif %}

    <!-- Scope Management Modal -->
    <div class="modal fade" id="scopeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="scopeModalBody">
                    <!-- Content loaded via AJAX -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Script for Scope Modal -->
    <script>
        // Defined globally so they can be called from injected HTML
        function loadScopeManager() {
            const modal = new bootstrap.Modal(document.getElementById('scopeModal'));
            modal.show();
            loadScopeForm("{% url 'manage_scopes' %}");
        }

        function loadScopeForm(url) {
            // Default to manage_scopes if no URL (e.g. back button cases)
            // But actually we want distinct behavior:
            // 1. Initial Load (Table)
            // 2. Load Form (Add/Edit)
            
            // If url is for the form, we fetch it. If it's for the manager (table), we fetch that.
            // The partials allow us to just dump html into the body.
            
            fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('scopeModalBody').innerHTML = data.html;
            })
            .catch(err => console.error('Error loading content:', err));
        }

        function submitScopeForm(e, url) {
            e.preventDefault();
            const form = e.target;
            const formData = new FormData(form);

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                }
            })
            .then(response => response.json())
            .then(data => {
                // Whether success or error, we replace the body with the returned HTML
                // (Updated table or Form with errors)
                document.getElementById('scopeModalBody').innerHTML = data.html;
            })
            .catch(err => console.error('Error submitting form:', err));
        }

        function deleteScope(url) {
            fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('scopeModalBody').innerHTML = data.html;
                }
            })
            .catch(err => console.error('Error deleting scope:', err));
        }
    </script>
{% endblock %}

{% block scripts %}

    <script nonce="{{ request.csp_nonce }}">
        document.addEventListener("DOMContentLoaded", function () {
            const deleteModal = document.getElementById("deleteModal");
            deleteModal.addEventListener("show.bs.modal", function (event) {
                let button = event.relatedTarget; // Button that triggered the modal
                let userId = button.getAttribute("data-user-id");
                let userName = button.getAttribute("data-user-name");
                let form = document.getElementById("deleteForm");

                // Update the modal content
                document.getElementById("userName").textContent = userName;
                form.action = "{% url 'delete_user' 0 %}".replace("/0/", `/${userId}/`);
            });
        });
    </script>

{% endblock %}