{% extends "finance/base.html" %}
{% load static %}

{% block content %}
<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Users</h2>
    <input type="text" id="searchInput" class="form-control" placeholder="Search users..."
        style="max-width: 300px; margin-right: 1rem;">
    <div>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#userModal"
            onclick="resetForm()">
            Add New User
        </button>
        <a href="{% url 'generate_pdf_users' %}" class="btn btn-secondary">
            Generate PDF Report
        </a>
        <a href="{% url 'export_to_excel_users' %}" class="btn btn-success">Export to Excel</a>
    </div>
</div>

<div class="table-container with-bottom-padding">
    <table class="table table-striped table-hover" id="userTable">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Full Name</th>
                <th scope="col">Email</th>
                <th scope="col">Role</th>
                <th scope="col">Department</th>
                <th scope="col">Position</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% if users %}
            {% for user in users %}
            <tr data-user-id="{{ user.id }}" data-full-name="{{ user.full_name }}" data-email="{{ user.email }}"
                data-role="{{ user.role }}" data-department="{{ user.department }}" data-position="{{ user.position }}">
                <td>{{ forloop.counter }}</td>
                <td>{{ user.full_name }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.role }}</td>
                <td>{{ user.department }}</td>
                <td>{{ user.position }}</td>
                <td>
                    {% if user.role == "Super Admin" %}

                    <span class="badge bg-secondary">
                        <i class="bi bi-lock-fill"></i>
                        Protected
                    </span>

                    {% else %}

                    <div class="d-flex gap-1">

                        <button type="button" class="btn btn-sm btn-secondary" onclick="editUser('{{ user.id }}')"
                            title="Edit User">
                            <i class="bi bi-pencil-square"></i>
                        </button>

                        <form method="POST" action="{% url 'delete_user' user.id %}">
                            {% csrf_token %}

                            <button type="submit" class="btn btn-sm btn-danger" title="Delete User"
                                onclick="return confirm('Are you sure you want to delete this user?')">
                                <i class="bi bi-trash"></i>
                            </button>

                        </form>

                    </div>

                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="7" class="text-center">No users found</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
    document.getElementById('searchInput').addEventListener('keyup', function () {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#userTable tbody tr');

        rows.forEach(row => {
            let text = row.textContent.toLowerCase();
            row.style.display = text.includes(filter) ? '' : 'none';
        });
    });

    function resetForm() {
        document.getElementById('userModalLabel').innerText = 'Add New User';
        document.getElementById('userForm').action = "{% url 'save_user' %}";
        document.getElementById('fullName').value = '';
        document.getElementById('email').value = '';
        document.getElementById('role').value = 'User'; // Set default value
        document.getElementById('department').value = '';
        document.getElementById('position').value = '';
        // You might want to reset any hidden input fields for user ID if you add them later
    }

    function editUser(userId) {
        document.getElementById('userModalLabel').innerText = 'Edit User';
        document.getElementById('userForm').action = "{% url 'edit_user' 0 %}".replace('0', userId); // Set the action to the edit URL

        // Find the user data in the table rows
        const row = document.querySelector(`tr[data-user-id="${userId}"]`);
        if (row) {
            document.getElementById('fullName').value = row.dataset.fullName;
            document.getElementById('email').value = row.dataset.email;
            document.getElementById('role').value = row.dataset.role;
            document.getElementById('department').value = row.dataset.department;
            document.getElementById('position').value = row.dataset.position;
            // You might want to add a hidden input field to store the user ID for the edit form submission
            // For example:
            // const userIdInput = document.createElement('input');
            // userIdInput.type = 'hidden';
            // userIdInput.name = 'user_id';
            // userIdInput.value = userId;
            // document.getElementById('userForm').appendChild(userIdInput);
        }

        // Show the modal
        const userModal = new bootstrap.Modal(document.getElementById('userModal'));
        userModal.show();
    }
</script>

<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalLabel">Add/Edit User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="userForm" method="POST" action=""> {% csrf_token %}
                    <div class="mb-3">
                        <label for="fullName" class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="fullName" name="full_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="role" class="form-label">Role</label>
                        <select class="form-control" id="role" name="role" required>
                            <option value="Admin">Admin</option>
                            <option value="User">User</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="department" class="form-label">Department</label>
                        <input type="text" class="form-control" id="department" name="department">
                    </div>
                    <div class="mb-3">
                        <label for="position" class="form-label">Position</label>
                        <input type="text" class="form-control" id="position" name="position">
                    </div>
                    <input type="hidden" id="userId" name="user_id" value="">
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

<script>
    function resetForm() {
        document.getElementById('userModalLabel').innerText = 'Add New User';
        document.getElementById('userForm').action = "{% url 'save_user' %}";
        document.getElementById('userId').value = ''; // Clear user ID for adding
        document.getElementById('fullName').value = '';
        document.getElementById('email').value = '';
        document.getElementById('role').value = 'User';
        document.getElementById('department').value = '';
        document.getElementById('position').value = '';
    }

    function editUser(userId) {
        document.getElementById('userModalLabel').innerText = 'Edit User';
        document.getElementById('userForm').action = "{% url 'edit_user' 0 %}".replace('0', userId);
        document.getElementById('userId').value = userId; // Set user ID for editing

        const row = document.querySelector(`tr[data-user-id="${userId}"]`);
        if (row) {
            document.getElementById('fullName').value = row.dataset.fullName;
            document.getElementById('email').value = row.dataset.email;
            document.getElementById('role').value = row.dataset.role;
            document.getElementById('department').value = row.dataset.department;
            document.getElementById('position').value = row.dataset.position;
        }

        const userModal = new bootstrap.Modal(document.getElementById('userModal'));
        userModal.show();
    }
</script>