<?php 
include('techsyn_header.php');
include('log_entry.php');
// if (! isset ( $_SESSION ['RoleCode'] ) || $_SESSION ['RoleCode'] != "RCP") {
//  echo "<script>location.href='accessDenied.php'</script>";
// }
?>
<link rel="stylesheet" href="css/wizard.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<style type="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    .hidden-radio {
    position: absolute;
    top: 11px;
    left: 27px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    opacity: 0;
    cursor: pointer;
}

</style>
<style>

.myDiv{
    display:none;
    padding:10px 0;
} 

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
  border: 1px solid;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;

}

</style>

<?php  if ($_SESSION['RoleId'] == 7) {
    echo "<script>window.location.replace('emp_details.php')</script>";
} ?>

<!-- Main Content Container for side bar and body-->
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {}
    </script>
    <?php  include('techsyn_sidebar.php'); ?>

    <!--breadcrumb-->
    <?php 
    // print_r($_SESSION);
    ?>

    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a>
                    </li>
                    <li class="active">Dashboard</li>
                </ul>
            </div>
            <!-- End of breadcrumb -->


            <div class="container-fluid">
                <form name="rule_chart" id="rule_chart">
                    <div class="row"></div>
                    <div class="row">
                        <div class="col-sm-4">
                            <label>OHC TYPE</label>
                            <select id="ohc_type_id" name="ohc_type_id" style="width:100%">
                                <option value="">select ohc</option>
                                <?php  echo generateOption('ohc_type','ohc_type_name','ohc_type_id','',''); ?>
                            </select>
                        </div>
                        <div class="col-sm-4" >
                            <label>Chart name</label>
                            <select name='chart_id' id='chart_id' style="width:100%" onchange="selectresults(this.value);">
                                <option value="" disabled="" selected="">select chart type</option>
                                <?php  echo generateOption('rule_chart', 'chart_name', 'chart_id', '', '') ?>
                            </select>
                        </div>
                        <div class="col-sm-4">
                        
                        <label>Gender</label>
                            <select name="rule_gender" id="rule_gender" style="width:100%">
                                <option value="">ALL</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select>
                        
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4" style="padding: 10px;">
                        <label>result</label>
                            <!-- <input type="text" name="rule_result" id="rule_result" /> -->
                            <select name="rule_result" id="rule_result" style="width:100%">
                                <option value="" disabled="" selected="">select the result option </option>
                            </select>

                        </div>
                        <div class="col-sm-4" style="padding: 10px;">
                            <div class="col-sm-6">
                            <label>Date FROM</label>
                            
                            <input type="Date" name="rule_start_date" id="rule_start_date" style="width:100%;"/>
                            </div>
                            <div class="col-sm-6">
                            <label>DATE TO</label>
                            <input type="Date" name="rule_end_date" id="rule_end_date" style="width:100%;" />
                            </div>
                        </div>
                        <div class="col-sm-4" style="padding: 10px;">
                        <label>Filter Option</label>
                        <select id="myselection"  style="width:100%;">
                               <option>Select Filter Option</option>
                               <option value="Two">use fiter for particular entity</option>
                               <option value="Three">For multi entities(i.e multiple departments etc based on result)</option>
                            </select>
                        </div>
                        
                    
                        <div class="row"></div>
                        <div id="showThree" class="myDiv">
                            <div class="col-sm-6">
                                <label> select type</label>
                                <select id="chart_type_id" name="chart_type_id"  style="width:100%">
                                    <option value="">select type</option>
                                    <option value="department">Department wise</option>
                                    <option value="designation">Designation wise</option>
                                    <option value="client">Client wise</option>

                                </select>
                            </div>
                        </div>
                        <div id="showTwo" class="myDiv">
                            <div class="col-sm-4" style="padding: 10px;">
                            <label>Department</label>
                            <select id="dept" name="dept" style="width:100%">
                                <option value="">select department</option>
                               <?php  echo generateOption('department','dept_name','dept_id','',''); ?>
                            </select>
                            </div>
                            <div class="col-sm-4" style="padding: 10px;">
                            <label>Designation</label>
                            <select id="desig" name="desig" style="width:100%">
                                <option value="">select designation</option>
                               <?php  echo generateOption('designation','designation_name','designation_id','',''); ?>
                            </select>
                            </div>
                            <div class="col-sm-4" style="padding: 10px;">
                            <label>cient</label>
                            <select id="cli"  name="cli" style="width:100%">
                                <option value="">select client</option>
                               <?php  echo generateOption('client_master','client_name','client_id','',''); ?>
                            </select>
                            </div>
                            <div class="col-sm-4" style="padding: 10px;">
                            <label>Years</label>
                            <!-- <select id="years"  name="years" style="width:100%"> -->
                            <select id="years"  name="years[]"  class="chosen-select" multiple="multiple" style="width:100%">
                                <?php  
                                   for($i = 1950 ; $i <= date('Y'); $i++){
                                      echo "<option>$i</option>";
                                   }
                                ?>
                                </select>
                            </div>

                        </div>
                    </div>    

                    <div class="row">
                        <div class="col-sm-4"></div>
                        <div class="col-sm-4"></div>
                        <div class="col-sm-4"></div>
                        <div class="col-sm-4"></div>
                    </div>
                    <div class="row" style="text-align: center;">
                        <button type="button" class="btn btn-info btn-sm save_button" onclick="make_chart();"><i class="ace-icon fa fa-floppy-o bigger-110"></i>Submit </button>
                    </div>



                </form>
                <div class="row" style="padding-right: 30px;">
                    <!-- <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px">
                        <div class="card mt-4">
                            <div class="card-header card-title" style="padding: 10px 0 20px 10px">Pie Chart</div>
                            <div class="card-body" >
                                <div class="chart-container pie-chart chart-containing-container">
                                    <canvas id="pie_chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px">
                        <div class="card mt-4">
                            <div class="card-header card-title" style="padding: 10px 0 20px 10px">Pie Chart</div>
                            <div class="card-body">
                                <div class="chart-container pie-chart chart-containing-container">
                                    <canvas id="pie_chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px">
                        <div class="card mt-4">
                            <div class="card-header card-title" style="padding: 10px 0 20px 10px">Doughnut Chart</div>
                            <div class="card-body">
                                <div class="chart-container doughnut_chart chart-containing-container">
                                    <canvas id="doughnut_chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px">
                        <div class="card mt-4 mb-4">
                            <div class="card-header card-title" style="padding: 10px 0 20px 10px">Bar Chart</div>
                            <div class="card-body">
                                <div class="chart-container bar_chart chart-containing-container">
                                    <canvas id="bar_chart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5 charts" style="margin: 20px 17px 0px 13px; padding: 20px 0 20px 25px">
                        <div class="card mt-4 mb-4">
                            <div class="card-header card-title" style="padding: 10px 0 20px 10px">Table</div>
                            <div class="card-body">
                                <table id="myTable" class="table table-bordered order-list">
                                <caption style="text-align: center;">RESULTS AND NO</caption>
                                <tbody>
                                
                            </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>


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



<script>
function make_chart() {
    var flag=0;
    if($('#chart_id').val()==null)
    {
        flag=1;
        BootstrapDialog.alert("select the chart Name");
    }
    else if($('#myselection').val()=="Three"){
        if (($('#rule_result').val()=="")) {
            flag=1;
            BootstrapDialog.alert("select the Result Value");
        }
    }
    if(flag==0)
    {
        create_chart();
    }
}

$(document).ready(function(){
    $('#myselection').on('change', function(){
        var demovalue = $(this).val(); 
        $("div.myDiv").hide();
        $("#show"+demovalue).show();

        $('#chart_type_id').val("");
        $('#desig').val("");
        $('#dept').val("");
        $('#cli').val("");
    });
});






    function create_chart() {
    
        $("canvas#pie_chart").remove();
        $("div.chart-container.pie-chart.chart-containing-container").append('<canvas id="pie_chart"></canvas>');
        $("canvas#doughnut_chart").remove();
        $("div.chart-container.doughnut_chart.chart-containing-container").append('<canvas id="doughnut_chart"></canvas>');
        $("canvas#bar_chart").remove();
        $("div.chart-container.bar_chart.chart-containing-container").append('<canvas id="bar_chart"></canvas>');




        $.ajax({
            url: "data_eval_chart1.php",
            method: "POST",
            data: $('#rule_chart').serialize(),
            dataType: "JSON",
            success: function(data) {
                var language = [];
                var total = [];
                var color = [];

                for (var count = 0; count < data.length; count++) {
                    language.push(data[count].language);
                    total.push(data[count].total);
                    color.push(data[count].color);
                }
                var xcolor=generateRandomColor();

                var chart_data = {
                    labels: language,
                    datasets: [{
                        label: '',
                        backgroundColor: color,
                        color: xcolor,
                        data: total
                    }]
                };

                var options = {
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                min: 0
                            }
                        }]
                    }
                };

                var group_chart1 = $('#pie_chart');
                var options = {
                    tooltips: {
                        enabled: true
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value, ctx) => {

                                let sum = ctx.dataset._meta[0].total;
                                let percentage = (value * 100 / sum).toFixed(2) + "%";
                                return percentage;


                            },
                            color:xcolor,
                        }
                    }
                };
                
                var graph1 = new Chart(group_chart1, {
                    type: "pie",
                    data: chart_data,
                    options: {
                        responsive: true,
                                maintainAspectRatio: true,
                        plugins: {
                            labels: {
                                // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                                render: 'percentage' ,


                                // precision for percentage, default is 0
                                precision: 0,

                                
                                showZero: true,

                                // font size, default is defaultFontSize
                                fontSize: 12,

                                
                                fontColor: xcolor,

                                
                                fontStyle: 'normal',

                               
                                fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

                                
                                textShadow: true,

                                shadowBlur: 10,

                                // text shadow X offset, default is 3
                                shadowOffsetX: -5,

                                shadowOffsetY: 5,

                                // text shadow color, default is 'rgba(0,0,0,0.3)'
                                shadowColor: 'white',

    
                                arc: false,

                            
                                position: 'default',


                                overlap: true,

                               
                                showActualPercentages: true,

                                images: [{
                                    src: 'image.png',
                                    width: 16,
                                    height: 16
                                }],

                                outsidePadding: 4,

                                textMargin: 4
                            }
                        }
                    }

                });


                var group_chart2 = $('#doughnut_chart');

                var graph2 = new Chart(group_chart2, {
                    type: "doughnut",
                    data: chart_data,
                    options: {
                        plugins: {
                            labels: {
                                // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                                render: 'percentage',

                                // precision for percentage, default is 0
                                precision: 0,

                                
                                showZero: true,

                                // font size, default is defaultFontSize
                                fontSize: 12,

                                
                                fontColor: xcolor,

                                
                                fontStyle: 'normal',

                               
                                fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

                                
                                textShadow: true,

                                shadowBlur: 10,

                                // text shadow X offset, default is 3
                                shadowOffsetX: -5,

                                shadowOffsetY: 5,

                                // text shadow color, default is 'rgba(0,0,0,0.3)'
                                shadowColor: 'white',

    
                                arc: false,


                                position: 'center',


                                overlap: true,

                               
                                showActualPercentages: true,

                                images: [{
                                    src: 'image.png',
                                    width: 16,
                                    height: 16
                                }],

                                outsidePadding: 4,

                                textMargin: 4
                            }
                        }
                    }

                });

                var group_chart3 = $('#bar_chart');

                var graph3 = new Chart(group_chart3, {
                    type: 'bar',
                    data: chart_data,
                    options: {
                        plugins: {
                            labels: {
                                // render 'label', 'value', 'percentage', 'image' or custom function, default is 'percentage'
                                render: 'value',

                                // precision for percentage, default is 0
                                precision: 0,

                               
                                showZero: true,

                                // font size, default is defaultFontSize
                                fontSize: 12,

                               
                                fontColor: xcolor,

                                fontStyle: 'normal',

                              
                                fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

                              
                                textShadow: true,

                        
                                shadowBlur: 10,

                   
                                shadowOffsetX: -5,

        
                                shadowOffsetY: 5,

                                // text shadow color, default is 'rgba(0,0,0,0.3)'
                                shadowColor: 'rgba(255,0,0,0.75)',

        
                                arc: true,

                                position: 'default',

                                overlap: true,

                                
                                showActualPercentages: true,


                                images: [{
                                    src: 'image.png',
                                    width: 16,
                                    height: 16
                                }],


                                outsidePadding: 4,

                                textMargin: 4
                            }
                        }
                    }

                });

                $("#myTable > tbody"). empty();
                var sum=0;
                cols='';
                if($('#rule_result').val()=="")
                {
                    cols+='<tr><th>Results</th><th>Count</th></tr>'
                }
                else
                {
                    if($('#chart_type_id').val()==null)
                        cols+='<tr><th>Age Range</th><th>Count</th></tr>'
                    else
                        cols+='<tr><th>Name</th><th>Count</th></tr>'
                }
                for (var i = 0; i < data.length; i++) {  
                    cols+='<tr>';                        
                    cols+='<td>'+language[i]+'</td>';
                    cols+='<td>'+total[i]+'</td>';  
                    cols+='</tr>' 
                    sum+=total[i];                    
                }
                cols+='<tr><td>total</td><td>'+sum+'</td></tr>';
                // newRow.append(cols);
                $("#myTable").append(cols);

                if(data.length > 20 ){
                    const charts = $('.charts');
                    charts.removeClass('col-md-5').addClass('col-md-12');
                    var chartHeight = 1000;
                $(".chart-containing-container").css("height", chartHeight);
                // $("canvas").css("height", 900);
                // $("canvas").css("width", 900);
                }
                else{
                    const charts = $('.charts');
                        charts.removeClass('col-md-12').addClass('col-md-5');
                    $(".chart-containing-container").css("height", 350);
                    // $("canvas").css("height", 400);
                }
            },
            error: function(data) {
                alert(data);
            }

         

        });




    }


    function generateRandomColor(){
        let maxVal = 0xFFFFFF; // 16777215.
        let randomNumber = Math. random() * maxVal;
        randomNumber = Math. floor(randomNumber);
        randomNumber = randomNumber. toString(16);
        let randColor = randomNumber. padStart(6, 0);
        return `#${randColor. toUpperCase()}`
    }
     function selectresults(chart_id) {
        $.ajax({
            url: "selectruleresult.php",
            method: "POST",
            data: {
                'chart_id': chart_id
            },
            success: function(data) {
                $('#rule_result').html(data);
            }
        });

    }
    
</script>