var parameters;
$(document).ready(function() {
    parameters = [
        {
            url : "../cgi/cgi_Index.py",
            requestType : "status"
        }
    ];
    callPythonCgi()
});

function callPythonCgi(){
    if(parameters.length > 0){
        parameters.forEach(function(parameter){
            $.ajax({
                type: "Get",
                url: parameter.url,
                contentType: 'application/json',
                dataType: 'json',
                headers: { 'Access-Control-Allow-Origin': '*' },
                data:{requestType : parameter.requestType},
                success: function (response) {
                    $("#graph-water-mark").addClass("d-none");
                    $(".main-section").removeClass("d-none");
                    $(".card-header h3").html(response.device)
                    if(parameter.requestType == 'status'){
                        $("#dashboard-details").html("");
                        let data = `<table class="table table-bordered">
                        <tbody>
                            <tr>
                                <td class="header" style="
                                text-align:left;
                            ">Software Version  </td>
                                <td>${response.softwareVersion}</td>
                            </tr>
                            <tr>
                                <td class="header" style="
                                text-align:left;
                            ">Build Version  </td>
                                <td>${response.buildVersion}</td>
                            </tr> 
                            <tr>
                                <td rowspan="2" class="header" style="
                                text-align:left;
                                vertical-align: middle;
                            ">System   </td>
                            <td><div class="row">  <div class="col-md-4 text-left"> Uptime </div> <div class="col-md-8 text-left"> ${response.systemTime}</div></div></td>
                            </tr>
                            <tr>
                                <td> <div class="row">  <div class="col-md-4 text-left"> Boot Time </div><div class="${response.bootTime.status == 400 ? "text-danger" : ""} col-md-8 text-left"> ${response.bootTime.message}</div></div></td>
                            </tr>
                            
                        </tbody>`;
                        $("#dashboard-details").append(data);
                        let statusData = `<table class="table table-bordered table-sm"><tbody><tr style="background-color:#273c87; color:white">
                        <td class="header">Name</td>
                            <td class="header">Health</td>
                            <td class="header">Software </td>
                        </tr>
                        <tr >
                            <td rowspan="2">Status</td>
                            <td> ${response.health_status == 1 && '<img src="../images/right.png" width="30" height="30">'}
                            </td>
                            <td> ${response.software_status == 1 ? '<img src="../images/right.png" width="30" height="30">' : '<img src="../images/Cross.png" width="30" height="30">'}</td>
                            
                        </tr></tbody></table>`
                        $("#dashboard-details").append(statusData);
                    }
                    else if(parameter.requestType == 'modal'){
                        $("#modal-details").html("");
                        let data  = `<table class="table">
                            <tbody>
                                <tr>
                                    <td class="header">Make & Model  </td>
                                    <td>${response.modal}</td>
                                </tr>
                                <tr>
                                    <td class="header">CPU  </td>
                                    <td>${response.cpu}</td>
                                </tr>
                                <tr>
                                    <td class="header">Memory Capacity  </td>
                                    <td>${response.capacity}</td>
                                </tr>
                                <tr>
                                    <td class="header">Drives & Models  </td>
                                    <td>${response.driveModels}</td>
                                </tr>
                            </tbody>
                        </table>`;
                        $("#modal-details").append(data);
                    }
                }
            })
        })
    }
}