{% extends "base.html" %}

{% load static %}

{% block title %}Users{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Manage Users</h5>
        <div>
            <input type="text" id="company-search" class="form-control d-inline-block" style="width: 250px;" placeholder="Search">
            {% comment %} <button id="new-btn" class="btn btn-primary ms-2">+ New</button> {% endcomment %}
            <div class="col-auto">
                <a class="btn btn-sm btn-primary" href="{% url 'create_user' %}">
                    <i class="fas fa-plus me-1"></i> New
                </a>
            </div>
        </div>
    </div>
    <div class="table-responsive scrollbar p-2">
        <table id="user_list" class="table table-bordered" style="width:100%">
            <thead>
                <tr class="bg-200 text-900">
                    <th class="text-center no-sort">#</th>
                    <th>Username</th>
                    <th>Designation</th>
                    <th>Contact No</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th class="all" style="width: 4%;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for user in user_data_list %}
                <tr>
                    <td class="text-center">{{ forloop.counter }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.designation }}</td>
                    <td>{{ user.contact_no }}</td>
                    <td>{{ user.email }}</td>
                    <td class="text-center">
                        {% if user.is_active %}
                            <span class="badge bg-success">Active</span>
                        {% else %}
                            <span class="badge bg-danger">Inactive</span>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        <a href="{% url 'update_user' user.id %}" class="btn btn-sm btn-info"><i class="fas fa-edit"></i></a>
                        <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="7" class="text-center">No users found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const _can_add = {{ menu_permissions.can_add|default:0 }};
    let _user_list = null;

    $(document).ready(function () {
        _user_list = $('#user_list').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            ajax: {
                url: "{% url 'user_list' %}",
                type: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                },
                data: function (d) {
                    // Add search value from the input manually (for custom search box)
                    d.search = { value: $('#search-text').val(), regex: false };
                }
            },
            dom: '<"row align-items-center"' +
                    '<"col-sm-12 col-md-3 mb-3 mb-lg-0 table-heading">' +
                    '<"col-sm-12 col-md-6 mb-3 mb-lg-0 table-search">' +
                    '<"col-sm-12 col-md-3" p>' +
                 '>' +
                 '<"row">' +
                    '<"col-sm-12 p-0" rt>' +
                 '</"row">' +
                 '<"row"' +
                    '<"col-sm-12 col-md-5" i>' +
                    '<"col-sm-12 col-md-1" B>' +
                    '<"col-sm-12 col-md-6" p>' +
                 '>',
            lengthChange: false,
            fixedHeader: true,
            pageLength: 25,
            language: {
                paginate: {
                    next: "»",
                    previous: "«"
                }
            },
            responsive: true,
            buttons: [],
            columnDefs: [
                { targets: [0, 6], orderable: false },
                { targets: [0, 5, 6], className: 'text-center' },
                { targets: '_all', className: 'text-wrap' }
            ],
            initComplete: function () {
                $('.table-heading').html('<h5 class="mb-0" id="captions">Manage Users</h5>');

                let searchHtml = '';
                searchHtml += '<div class="row flex-between-center">';
                searchHtml += '<div class="col-md">';
                searchHtml += '<div class="mb-2 mb-md-0">';
                searchHtml += '<input type="text" class="form-control form-control-sm w-sm-100 w-100" id="search-text" placeholder="Search">';
                searchHtml += '</div>';
                searchHtml += '</div>';
                searchHtml += '<div class="col-auto">';
                if (_can_add === 1) {
                    searchHtml += '<a class="btn btn-sm btn-primary" href="{% url 'create_user' %}"><i class="fas fa-plus me-1"></i> New</a>';
                }
                searchHtml += '</div>';
                searchHtml += '</div>';
                $('.table-search').html(searchHtml);
            }
        });
    });

    // New button click
    document.getElementById('new-btn').addEventListener('click', function () {
        window.location.href = "{% url 'create_user' %}";
    });

    // Reload table when user types in search
    $(document).on('input', '#search-text', function () {
        _user_list.ajax.reload();
    });

    function delete_user(user_id) {
        Swal.fire({
            title: "Are you sure?",
            text: "This user will be permanently deleted!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `users/delete/${user_id}/`,  // your delete API endpoint
                    type: 'DELETE',
                    headers: {
                        "X-CSRFToken": "{{ csrf_token }}"
                    },
                    success: function (response) {
                        Swal.fire("Deleted!", "User has been deleted.", "success")
                            .then(() => location.reload());
                    },
                    error: function () {
                        Swal.fire("Error", "Could not delete user", "error");
                    }
                });
            }
        });
    }

    $(document).on('click', '.btn-delete-user', function () {
        let user_id = $(this).data('id');
        delete_user(user_id);
    });
</script>
{% endblock %}