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

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

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


{% block content %}



<div class="table-responsive">
    <form id="deleteForm">
        <table id="example" class="display table table-striped table-bordered">
            <thead class="sticky-header">
                <tr>
                    <th>Select</th>
                    <th>Cloud Name</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                {% for machine in machines %}
                <tr>
                    <td>
                        <input type="checkbox" name="cloudName" value="{{ machine.name }}">
                    </td>
                    <td>{{ machine.name }}</td>
                    <td>{{ machine.type }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
</div>


<button type="submit" form="deleteForm" class="btn btn-danger delete-selected-btn">Delete Selected</button>



<script>
    $(document).ready(function() {
    $('#example').DataTable();
    
    $(window).scroll(function() {
        var btnPosition = $('.delete-selected-btn').offset().top;
        var tableHeight = $('.table-responsive').height();
        var windowHeight = $(window).height();
        var scrollTop = $(this).scrollTop();
        
        if (scrollTop + windowHeight > btnPosition && scrollTop < tableHeight - windowHeight) {
            $('.delete-selected-btn').addClass('fixed-btn');
        } else {
            $('.delete-selected-btn').removeClass('fixed-btn');
        }
    });
    
    $('.delete-selected-btn').on('click', function(e) {
        e.preventDefault();
        
        var selectedCloudNames = [];
        $('input[name="cloudName"]:checked').each(function() {
            selectedCloudNames.push($(this).val());
        });
        
        if (selectedCloudNames.length > 0) {
            // Send an AJAX request to delete the selected cloud names
            $.ajax({
                type: 'POST',
                url: '/deleteSelectedCloudNames',
                data: JSON.stringify(selectedCloudNames),
                contentType: 'application/json',
                success: function(response) {
                    // Handle the success response
                    console.log(response);
                },
                error: function(error) {
                    // Handle the error response
                    console.log(error);
                }
            });
        } else {
            // Show an error message if no cloud names are selected
            alert('Please select at least one cloud name.');
        }
    });
});

</script>

<style>
    .fixed-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
    }
</style>


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


{% endblock content %}
