{% extends "/base.html" %}

{% block title %} UI Tables {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}
<style>
 *,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, ".SFNSText-Regular", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
}

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
  background: #56c080;
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: 30px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}
</style>
{% endblock stylesheets %}

{% block content %}
{% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="flash">
                {{ messages }}
            </div>
        {% endif %}
{% endwith %}
    <!-- [ Main Content ] start -->
    <section class="pcoded-main-container">
        <div class="pcoded-wrapper">

            <div class="pcoded-content">
                <div class="pcoded-inner-content">
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row align-items-center">
                                <div class="col-md-12">
                                    <div class="page-header-title">
                                        <h5 class="m-b-10"></h5>
                                    </div>
                                    <ul class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/dashboard"><i class="feather icon-home"></i></a></li>
                                        <li class="breadcrumb-item"><a href="">Data Source List</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <div class="row">
                                <!-- [ basic-table ] start -->
                                <div class="col-xl-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Data Source List</h5>
                                        </div>
                                        <div style="text-align: end"><button type="submit" class="btn btn-secondary" title="Create User" onclick="window.location.href='/add_db'">Add Data Source</button></div>
                                        <div class="card-block table-border-style">
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Connection Name</th>
                                                            <th>Host</th>
                                                            <th>Port</th>
                                                            <th>User Name</th>     
                                                            <th>Table Name</th>  
                                                            <th>Schema</th>
                                                            <th>Status<th>                                             
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <!-- Your rows inside the table HERE: -->
                                                        {% for item in data.items %}
                                                        <tr>
                                                            <th scope="row">{{ item.id }}</th>
                                                            <td contenteditable="false" class="editable" data-field="connection_name">{{ item.connection_name }}</td>
                                                            <td contenteditable="false" class="editable" data-field="hostname">{{ item.hostname }}</td>
                                                            <td contenteditable="false" class="editable" data-field="port">{{ item.port }}</td>
                                                            <td contenteditable="false" class="editable" data-field="username">{{ item.username }}</td>
                                                            <td contenteditable="false" class="editable" data-field="tablename">{{ item.tablename }}</td>
                                                            <td contenteditable="false" class="editable" data-field="schemaname">{{ item.schemaname }}</td>
                                                            <td contenteditable="false" class="editable" data-field="status">
                                                                <div class="status-toggle">
                                                                    <label class="toggle">
                                                                        <input class="toggle-checkbox" type="checkbox" data-id="{{ item.id }}" {% if item.status == 1 %}checked{% endif %}>
                                                                        <div class="toggle-switch"></div>
                                                                    </label>
                                                                </div> 
                                                            </td>
                                                            <td>
                                                                <a href="/edit_db/{{ item.id }}" class="fas fa-pencil-alt"></a>
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td colspan="9" class="text-right">
                                                                <div class="pagination-container">
                                                                    {% if data.has_prev %}
                                                                        <a href="{{ url_for('auth_blueprint.data_display', page=data.prev_num) }}" class="btn btn-primary">Previous</a>
                                                                    {% endif %}
                                                                    
                                                                    {% if data.has_next %}
                                                                        <a href="{{ url_for('auth_blueprint.data_display', page=data.next_num) }}" class="btn btn-primary">Next</a>
                                                                    {% endif %}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                                
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
            
                    </div>
    </section>
    <!-- [ Main Content ] end -->

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
function toggleStatus(event, checkbox) {
    var id = checkbox.getAttribute('data-id');
    var statusElement = checkbox.parentNode.parentNode;
    var status = checkbox.checked ? '1' : '0';  // Update the status values to '1' and '0'

    // Send an AJAX request to update the status on the server
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/toggle_status', true);
    xhr.setRequestHeader('Content-type', 'application/json');
    // xhr.onload = function() {
    //     if (xhr.status === 200) {
    //         // Update the status element and button text
    //         if (status === '1') {
    //             statusElement.innerHTML = '<span class="status connected">Connected</span>';
    //         } else {
    //             statusElement.innerHTML = '<span class="status disconnected">Disconnected</span>';
    //         }
    //     } else {
    //         alert('Error: ' + xhr.status);
    //     }
    // };

    var data = JSON.stringify({
        id: id,
        status: status
    });

    xhr.send(data);
}

document.addEventListener('DOMContentLoaded', function() {
    var checkboxes = document.querySelectorAll('.toggle-checkbox');

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function(event) {
            toggleStatus(event, checkbox);
        });
    });
});


document.addEventListener('DOMContentLoaded', function() {
        const flashMessage = document.querySelector(".flash");
        if (flashMessage) {
            toastMixin.fire({
                animation: true,
                title: flashMessage
            });
        }
    });

</script>
{% endblock javascripts %}