{% extends "base.html" %}

{% block title %} UI Forms {% endblock %} 

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

{% block content %}

    <!-- [ Main Content ] start -->
    <div 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-0"></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_display">Data Source List</a></li>
                                        <li class="breadcrumb-item"><a href="">Edit Data Source</a></li> 
                                    </ul>                          
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                    <div class="main-body">
                        <div class="page-wrapper">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5>Edit Data Source </h5>
                                        </div>
                                        <form role="form" method="post" action="/edit_db/{{ db_data.id }}">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Connection Name</label>
                                                        <input type="text" name="connection_name" value="{{ db_data.connection_name }}" class="form-control" placeholder="Connection Name" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Host</label>
                                                        <input type="text" name="hostname" value="{{ db_data.hostname }}" class="form-control" placeholder="Host" required>
                                                    </div> 
                                                    
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Port</label>
                                                        <input type="number" name="port" value="{{ db_data.port }}" class="form-control"  placeholder="Port" required>
                                                    </div>
                                                    
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>User Name</label>
                                                        <input type="text" name="username" value="{{ db_data.username }}" class="form-control" placeholder="User Name" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Password</label>
                                                        <input type="text" name="password" value="{{ db_data.password }}" class="form-control" placeholder="Password" >
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Schema Name</label>
                                                        <input type="text" name="schemaname" value="{{ db_data.schemaname }}" class="form-control" placeholder="Schema Name" >
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <label>Table Name</label>
                                                        <input type="text" name="tablename" value="{{ db_data.tablename }}" class="form-control" placeholder="User Name">
                                                    </div>
                                                </div>
                                                <div class="col-md-8">
                                                    <div style="text-align: end;">
                                                        <button style="margin-top: 30px;" type="button" class="btn btn-primary" onclick="testConnection()">Test Connection</button>
                                                        <button style="margin-top: 30px;" type="submit" class="btn btn-primary">Submit</button>
                                                    </div>                                                    
                                            
                                            
                                            </div>  
                                            
                                        </form> 
                                    </div>
                                    <div class="col-md-4">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
<script>
    function testConnection() {

     var hostname = document.getElementsByName('hostname')[0].value;
     var username = document.getElementsByName('username')[0].value;
     var password = document.getElementsByName('password')[0].value;
     var port = document.getElementsByName('port')[0].value;
     var connection_name = document.getElementsByName('connection_name')[0].value;
     
     var xhr = new XMLHttpRequest();
     xhr.open('POST', '/test_connection', true);
     xhr.setRequestHeader('Content-type', 'application/json');
     xhr.onload = function() {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.message === 'Connection successful!') {
                alert(response.message);
            } else {
                var alertMessage = response.message + "\nReason: " + response.reason;
                alert(alertMessage);
            }
        }
     };
     
     var data = JSON.stringify({
         hostname: hostname,
         username: username,
         password: password,
         port: port,
         connection_name: connection_name
     });
     
     xhr.send(data);
 }
 
//  function updateStatus(id,status, reason) {
//      alert(789)
//      var xhr = new XMLHttpRequest();
//      xhr.open('POST', '/update_status', true);
//      xhr.setRequestHeader('Content-type', 'application/json');
//      // xhr.onload = function() {
//      // //     if (xhr.status === 200) {
//      // //         var response = JSON.parse(xhr.responseText);
//      // //         // Handle the response if needed
//      // //     } else {
//      // //         alert('Error: ' );
//      // //     }
//      // };
     
//      var data = JSON.stringify({
//          status: status,
//          reason: reason,
//          id:id
//      });
     
//      xhr.send(data);
//  }
</script>
{% endblock javascripts %}