{% extends "layouts/base.html" %}

{% block title %} Profile {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<!-- Header -->
<div class="header bg-primary pb-6">
    <div class="container-fluid">
        <div class="header-body">
            <!-- Card stats -->
            <div class="row">
                <div class="col-xl-3 col-md-6">
                    <div class="card card-stats">
                        <!-- Card body -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page content -->
<div class="container-fluid mt--6">
    <div class="row">
        <div class="col-xl-7">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">User Details</h3>
                        </div>
                    </div>
                </div>
                <form id="delete_form">
                    <div class="table-responsive">
                        <!-- Projects table -->

                        <table class="table align-items-center table-flush" id="devicesListSharepointTable">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" style="text-transform: capitalize; font-size: small;"></th>
                                    <th scope="col" style="text-transform: capitalize; font-size: small;">Username</th>
                                    <th scope="col" style="font-size: small;">E-mail Id</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for customer in users %}
                                <tr>
                                    {% if customer.username != "admin" %}
                                    <td>
                                    <input type="checkbox" class="account_checkbox" name="account_id" value="{{ customer._id }}">
                                    </td>
                                    {% else %}
                                    <td>
                                        <input class="account_checkbox" name="account_id">
                                        </td>
                                    {% endif %}
                                    <td scope="row">
                                        {{customer.username}}
                                    </td>
                                    <td scope="row">
                                        {{customer.email}}
                                    </td>   
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>


                    </div>
                    <hr>
                    <button id="delete_button" class="btn btn-danger" type="submit" disabled>Delete Selected Accounts</button>
                </form>
            </div>
        </div>

        <div class="col-xl-5">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">Add User</h3>
                        </div>
                    </div>
                </div>
                {% if registration_successful %}
                <div class="alert alert-success" role="alert">
                    Registration successful!
                </div>
                {% endif %}
                {% if user_exists %}
                <div class="alert alert-danger mt-3" role="alert">
                    User already exists. Please choose a different username or email.
                </div>
                {% endif %}

                <form action="registerUser" method="post">
                    <div class="form-group mb-3">
                        <div class="input-group input-group-alternative">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="ni ni-circle-08"></i></span>
                            </div>
                            <input class="form-control" name="username" placeholder="Username" type="text" required pattern="^[a-zA-Z0-9_-]+$" title="Username should only contain letters, numbers, hyphens (-), and underscores (_)">
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <div class="input-group input-group-alternative">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                            </div>
                            <input class="form-control" name="email" placeholder="Email" type="email" required pattern="^[a-zA-Z0-9._%+-]+@parablu\.com$" title="Email should be of the format: username@parablu.com">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group input-group-alternative">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
                            </div>
                            <input class="form-control" name="password" placeholder="Password" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group input-group-alternative">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="ni ni-lock-circle-08"></i></span>
                            </div>
                            <select class="form-control" name="access_type" required>
                                <option value="" disabled selected>Select access type</option>
                                <option value="admin">Admin</option>
                                <option value="user">User</option>
                            </select>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary my-4">Add</button>
                    </div>
                </form>                
            </div>
        </div>
    </div>
</div>

{% include "includes/footer.html" %}

</div>
</main>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}
<script>
    $(document).ready(function () {
        // Handle form submission
        $('#delete_form').submit(function (event) {
            event.preventDefault();
            var account_ids = $('input[name="account_id"]:checked').map(function () {
                return $(this).val();
            }).get();
            $.ajax({
                type: 'POST',
                url: '/delete_account',
                data: JSON.stringify({ 'account_id': account_ids }),
                contentType: 'application/json',
                success: function (response) {
                    if (response.success) {
                        location.reload();
                    }
                }
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        // Handle checkbox clicks
        $('.account_checkbox').click(function() {
            // Check if at least one checkbox is checked
            if ($('.account_checkbox:checked').length > 0) {
                // Enable delete button
                $('#delete_button').prop('disabled', false);
            } else {
                // Disable delete button
                $('#delete_button').prop('disabled', true);
            }
        });
    });
</script>


{% endblock javascripts %}