ESH/pre_post_wellness_program_comparison.php

<?php include('techsyn_header.php'); ?>

<style>
    /* .page-content {
        background-image: url('images/cool-background.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 600px;
    } */

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 100%;
        border-radius: 5px;
        margin-top: 10px;
        border-radius: 5px 5px 5px 5px !important;
        font-family: 'Roboto Serif', serif;
    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .cardcontainer {
        padding: 0px 0px;
    }

    #mybtn {
        width: 60px;
        height: 60px;
        background-color: cadetblue;
        border-radius: 20px !important;
        color: white;
        cursor: pointer;
        -webkit-transition: background-color 2s ease-out;
        -moz-transition: background-color 2s ease-out;
        -o-transition: background-color 2s ease-out;
        transition: background-color 1s ease-out;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

    #mybtn:hover {
        width: 62px;
        height: 62px;
        background-color: cadetblue;
        border-radius: 50px !important;
        cursor: pointer;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
</style>


<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {}
    </script>
    <script async="" src="./js/analytics.js"></script>
    <script src="./js/Chart.min.js"></script>
    <script src="./js/utils.js"></script>

    <?php include('techsyn_sidebar.php'); ?>
    <!--breadcrumb-->

    <div class="main-content">
        <div class="main-content-inner">
            <div class="main2">

                <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li class="active">Wellness Program</li>
                        <li class="active">Pre & Post report</li>
                    </ul>
                    <!-- End of breadcrumb -->
                </div>
                <div class="page-content">
                    <div id="flexigridDiv">

                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="panel panel-info card">
                                        <div class="panel-heading">
                                            <h3 class="panel-title center">Select Employee To See comparison report</h3>
                                        </div>
                                        <div class="panel-body">
                                            <div class="col-sm-6">
                                                <select style="height: 30px; font-size: 10px" class="chosen-select form-control" onchange="getProgram(this.value);" name="empName" data-placeholder="Select Employee" id="empName" autofocus="autofocus" required>
                                                    <option value="">Select</option>
                                                    <?php echo getEmployeeOptions() ?>
                                                </select>
                                            </div>
                                            <div class="col-sm-6">
                                                <select style="height: 30px; font-size: 10px" class="form-control" name="pro_id" data-placeholder="Select Program" id="pro_id" autofocus="autofocus" required>

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <center><button type="button" class="card" id="mybtn" onclick="getData();">Show Data</button></center><br />

                            <div class="row">
                                <div class="col-sm-6">
                                    <table style="width: 100%" id="table_data" class="center card table table-striped">

                                    </table>
                                </div>
                                <div class="col-sm-6" id="chart_section">
                            
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<?php include('techsyn_footer.php'); ?>
<script>
    function getProgram(emp) {
        $("#pro_id").find('option').remove().end();
        $.ajax({
            url: 'get_emp_program_data.php',
            type: 'POST',
            data: {
                emp: emp
            },
            success: function(data) {
                if (data !== null) {
                    $("#pro_id").append("<option value=''>select</option>");
                    $("#pro_id").append(data);
                }
            },
            error: function(data) {
                BootstrapDialog.alert("Somethings Wrong")
            }
        });
    }

    function getData() {
        $("#table_data").html("");
        let emp = $("#empName").val();
        let pro_id = $("#pro_id").val();
        $.ajax({
            url: 'get_emp_program_data_values.php',
            type: 'POST',
            data: {
                emp: emp,
                pro_id: pro_id
            },
            success: function(data) {
                if (data !== null) {
                    var obj = JSON.parse(data);
                    // alert(obj.names);
                    var content = "";
                    content += "<thead><tr style='color:red'>" +
                        "<td colspan='4'><strong style='font-size:20px'>Pre & Post Wellness Comparison Data</strong></td>" +
                        "</tr>" +
                        "</thead>";
                    content += "<thead><tr>" +
                        "<td><strong>Sr No</strong></td>" +
                        "<td><strong>Parameter Name</strong></td>" +
                        "<td><strong>Pre Program Values</strong> </td>" +
                        "<td><strong>Post Program Values</strong> </td>" +
                        "</tr>" +
                        "</thead>";

                    for (let i = 0; i < obj.names.length; i++) {
                        let pre = "";
                        let post = ""
                        if (obj.pre[i] == null || obj.pre[i] == '') {
                            pre = "No data";
                        } else {
                            pre = obj.pre[i];
                        }
                        if (obj.post[i] == null || obj.post[i] == '') {
                            post = "No data";
                        } else {
                            post = obj.post[i];
                        }
                        content += "<tr><td>" + (i + 1) + "</td><td>" + obj.names[i] + "</td><td>" + pre + "</td><td>" + post + "</td></tr>";
                    }
                    $("#table_data").append(content);
                }
            },
            error: function(data) {
                BootstrapDialog.alert("Somethings Wrong")
            }
        });
    }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>