<?php include('techsyn_header.php');
//print_r($_SESSION);
?>
<link rel="stylesheet" href="css/wizard.css">
<script src="js/Chart.min.js"></script>
<style type="text/css">
.hidden-radio {
    position: absolute;
    top: 11px;
    left: 27px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: #fff;
    opacity: 0;
    cursor: pointer;
}
</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
	?>
    <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="page-content">
                <form id="medical_form">
                    <div class="row">

                        <div class="col-sm-9 col-sm-offset-2 wizard-card">

                            <!-- <div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="pre_employment">
									<div class="icon bg-yellow">
										<i class="ace-icon fa fa-stethoscope"></i>
									</div>
									<h6>
										<span class="info-box-text">Doctor Recommended TEST</span> <span class="info-box-number">
											<?php echo getPending_Medical_HealthSurvellianceCount(); ?>/<?= getTodayHealthSurvellianceCount(); ?>
											<small>Cases</small>
								</div>
							</div> -->

                            <div class="col-sm-3">
                                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title=""
                                    data-original-title="Injury">
                                    <input type="radio" name="task" value="rate">
                                    <div class="icon bg-red">
                                        <i class="ace-icon fa fa-shopping-cart"></i>
                                    </div>
                                    <h6>
                                        <span class="info-box-text">PENDING RFQ</span> <span class="info-box-number">
                                            <?php echo getTodayVendorRateApprovalCount(); ?>
                                            <small>Cases</small>
                                </div>
                            </div>

                            <div class="col-sm-3">
                                <div class="choice" data-toggle="wizard-radio" rel="tooltip" title=""
                                    data-original-title="Injury">
                                    <input type="radio" name="task" value="dispatch">
                                    <div class="icon bg-green">
                                        <i class="ace-icon fa fa-bus"></i>
                                    </div>
                                    <h6>
                                        <span class="info-box-text">DISPATCH</span> <span class="info-box-number">
                                            <?php echo getPendingDISPATCHECount(); ?>
                                            <small>Cases</small>
                                </div>
                            </div>
                            <!-- 
							<div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="ffi">
									<div class="icon bg-red">
										<i class="ace-icon fa fa-cutlery"></i>
									</div>
									<h6>
										<span class="info-box-text">FFI</span>
										<span class="info-box-number">
											<?php echo getPending_infection(); ?>/
											<?php echo getTodayapproval('ffi'); ?>
											<small>Cases</small>
									</h6>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="chs">
									<div class="icon bg-green">
										<i class="ace-icon fa fa-cutlery"></i>
									</div>
									<h6>
										<span class="info-box-text">Canteen Hygiene </span>
										<span class="info-box-number">
											<?php echo getPending_canteen(); ?>/
											<?php echo getTodayapproval('chs'); ?>
											<small>Cases</small>
									</h6>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="khs">
									<div class="icon bg-green">
										<i class="ace-icon fa fa-cutlery"></i>
									</div>
									<h6>
										<span class="info-box-text">Kitchen Hygiene </span>
										<span class="info-box-number">
											<?php echo getPending_kitchen(); ?>/
											<?php echo getTodayapproval('khs'); ?>
											<small>Cases</small>

									</h6>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="dlf">
									<div class="icon bg-red">
										<i class="ace-icon fa fa-car"></i>
									</div>
									<h6>
										<span class="info-box-text">DLME </span>
										<span class="info-box-number">
											<?php echo getPending_dlf(); ?>/
											<?php echo getTodayapproval('dlf'); ?>
											<small>Cases</small>
									</h6>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="covid">
									<div class="icon bg-red">
										<i class="ace-icon fa fa-ge"></i>
									</div>
									<h6>
										<span class="info-box-text">Covid Screening </span>
										<span class="info-box-number">
											<?php echo getTodayCovidCount(); ?>
											
											<small>Today Cases</small>
									</h6>
								</div>
							</div>




							<!-- <div class="col-sm-3">
								<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="Injury">
									<input type="radio" name="task" value="mcovid">
									<div class="icon bg-green">
										<i class="ace-icon fa fa-ge"></i>
									</div>
									<h6>
										<span class="info-box-text">Covid Monitering </span>
										<span class="info-box-number">
											<?php echo getTodayCovidMonitoringCount(); ?>
											
											<small>Today Cases</small>
									</h6>
								</div>
							</div> -->



                        </div>
                    </div>
                </form>

            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
</div>
<?php include('techsyn_footer.php'); ?>
<script type="text/javascript">
jQuery(function($) {
    $('.easy-pie-chart.percentage').each(function() {
        var $box = $(this).closest('.infobox');
        var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') :
            'rgba(255,255,255,0.95)');
        var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
        var size = parseInt($(this).data('size')) || 50;
        $(this).easyPieChart({
            barColor: barColor,
            trackColor: trackColor,
            scaleColor: false,
            lineCap: 'butt',
            lineWidth: parseInt(size / 10),
            animate: ace.vars['old_ie'] ? false : 1000,
            size: size
        });
    })
    $('.sparkline').each(function() {
        var $box = $(this).closest('.infobox');
        var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
        $(this).sparkline('html', {
            tagValuesAttribute: 'data-values',
            type: 'bar',
            barColor: barColor,
            chartRangeMin: $(this).data('min') || 0
        });
    });
    //flot chart resize plugin, somehow manipulates default browser resize event to optimize it!
    //but sometimes it brings up errors with normal resize event handlers
    $.resize.throttleWindow = false;
    var placeholder = $('#piechart-placeholder').css({
        'width': '98%',
        'min-height': '300px'
    });

    function drawPieChart(placeholder, data, position) {
        $.plot(placeholder, data, {
            series: {
                pie: {
                    show: true,
                    tilt: 0.8,
                    highlight: {
                        opacity: 0.25
                    },
                    stroke: {
                        color: '#fff',
                        width: 2
                    },
                    startAngle: 2
                }
            },
            legend: {
                show: true,
                position: position || "ne",
                labelBoxBorderColor: null,
                margin: [-30, 15]
            },
            grid: {
                hoverable: true,
                clickable: true
            }
        })
    }
    var data = Array();
    // $(document).ready(function() {
    // 	loadChartData(30);
    // });


    //pie chart tooltip example
    var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo(
        'body');
    var previousPoint = null;
    placeholder.on('plothover', function(event, pos, item) {
        if (item) {
            if (previousPoint != item.seriesIndex) {
                previousPoint = item.seriesIndex;
                var tip = item.series['label'] + " : " + item.series['percent'].toFixed(2) + '%';
                $tooltip.show().children(0).text(tip);
            }
            $tooltip.css({
                top: pos.pageY + 10,
                left: pos.pageX + 10
            });
        } else {
            $tooltip.hide();
            previousPoint = null;
        }
    });
    /*  var data = [
    	{ label: "social networks",  data: 38.7, color: "#68BC31"},
    	{ label: "search engines",  data: 24.5, color: "#2091CF"},
    	{ label: "ad campaigns",  data: 8.2, color: "#AF4E96"},
    	{ label: "direct traffic",  data: 18.6, color: "#DA5430"},
    	{ label: "other",  data: 10, color: "#FEE074"}
      ]*/
    /////////////////////////////////////
    $(document).one('ajaxloadstart.page', function(e) {
        $tooltip.remove();
    });
    var d1 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.5) {
        d1.push([i, Math.sin(i)]);
    }
    var d2 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.5) {
        d2.push([i, Math.cos(i)]);
    }
    var d3 = [];
    for (var i = 0; i < Math.PI * 2; i += 0.2) {
        d3.push([i, Math.tan(i)]);
    }
    //Android's default browser somehow is confused when tapping on label which will lead to dragging the task
    //so disable dragging when clicking on label
    var agent = navigator.userAgent.toLowerCase();
    if (ace.vars['touch'] && ace.vars['android']) {
        $('#tasks').on('touchstart', function(e) {
            var li = $(e.target).closest('#tasks li');
            if (li.length == 0) return;
            var label = li.find('label.inline').get(0);
            if (label == e.target || $.contains(label, e.target)) e.stopImmediatePropagation();
        });
    }
})
$(".choice").on("click", function() {
    var v = $(this).closest("div").find("input[name='task']").attr("checked", "checked");
    task = $(this).closest("div").find("input[name='task']").val()
    $("#medical_form").attr('method', 'POST');
    if (task == 'pre_employment') {
        $("#medical_form").attr('action', 'pending_lab_test.php');
    }
    if (task == 'direct_test_lab') {
        $("#medical_form").attr('action', 'add_select_patient.php');
    }

    if (task == 'rate') {
        $("#medical_form").attr('action', 'approval_indent_vendor.php');
    }
    if (task == 'dispatch') {
        $("#medical_form").attr('action', 'approval_indent_vendor_dispatch.php');
    }

    if (task == 'reception_forward') {
        $("#medical_form").attr('action', 'pending_lab_test_reception.php');
    }

    $("#medical_form").submit();
});
</script>
<script>
$(document).ready(function() {
    // $(".choice").on("click", function () {
    //    var v = $(this).closest("div").find("input[name='task']").attr("checked","checked");
    // if(v.val()=='visitor_opd'){
    // 		$("#reception_form").attr('action', 'visitor_add_select_patient.php');
    // }else{
    //  $("#reception_form").attr('action', 'add_select_patient.php');
    // }
    //    $("#reception_form").attr('method', 'POST');
    //    $("#reception_form").submit();
    // });
    $.ajax({
        type: 'POST',
        url: 'covid_case_weekly_trends.php',
        data: $("#reception_form").serialize(),
        dataType: 'json',
        success: function(data) {
            if (data != null) {
                var labels = [];
                var percentage_bmi_total_array = [];
                var total_emp = 0;
                var total_emp_sum = 0;
                var bmi_total_sum = 0;
                var percentage_bmi_total = 0.0;
                // @var confirm_case - get the total confirm case
                // @var quarantine_case - get the total quarantine case
                // @var discharge - get the total discharge patient 
                var confirm_case = 0;
                var quarantine_case = 0;
                var discharge = 0;
                if (Object.keys(data).length > 0) {
                    for (var i = 0; i < Object.keys(data).length; i++) {
                        total_emp = parseInt(data[i].week);
                        total_emp_sum = total_emp_sum + total_emp;
                        confirm_case += parseInt(data[i].confirm_case);
                        quarantine_case += parseInt(data[i].quarantine_case);
                        discharge += parseInt(data[i].discharge);
                        var bmi_total = parseInt(data[i].todays_case);
                        bmi_total_sum += bmi_total;
                        var j = 0;
                        labels[i] = 'Week:' + data[i].week;
                        if (total_emp != 0 && total_emp != null) {
                            percentage_bmi_total = (bmi_total / data[i].total_active) * 100;
                            //   if(data[i].confirm_case == ''){
                            // percentage_bmi_total_array.push([0, data[i].quarantine_case, data[i].discharge]);
                            //   } else if(data[i].quarantine_case == ''){
                            // percentage_bmi_total_array.push([data[i].confirm_case, 0, data[i].discharge]);
                            //   }else {
                            //   }
                            percentage_bmi_total_array.push([data[i].confirm_case, data[i]
                                .quarantine_case, data[i].discharge
                            ]);
                        } else {
                            percentage_bmi_total = "Not Available";
                        }
                    }
                }
                var total_percentage = "";
                if (total_emp_sum == 0) {
                    total_percentage = "Not Available";
                } else {
                    total_percentage = (bmi_total_sum / total_emp_sum) * 100;
                }
                var content1 =
                    "<canvas id=\"chart3\"	style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
                $("#covid_weekly_report").html(content1);
                var header = "Covid Case Weekly Trends";
                percentage_bmi_total_array[Object.keys(data).length] = ['Confirmed Case',
                    'Quarantine Case', 'Discharged'
                ]
                // console.log('array length in weekly trends: '+percentage_bmi_total_array[Object.keys(data).length]+'lenth '+Object.keys(data).length);
                prepareChart('line', percentage_bmi_total_array, labels, header);
            }
        },
        error: function(data) {}
    });
    // $.ajax({
    // 	type:'POST',
    // 	url:'covid_active_vs_new_cases.php',
    // 	data:$("#reception_form").serialize(),
    // 	dataType:'json',
    // 	success:function(data){
    // 		if(data!=null){
    // 			var labels=[];
    // 			var percentage_bmi_total_array = [];
    // 			var total_emp=0;
    // 			var total_emp_sum=0;
    // 			var bmi_total_sum=0;
    // 			var  percentage_bmi_total=0.0;
    // 			if(Object.keys(data).length>0){
    // 				for(var i=0;i<Object.keys(data).length;i++){
    // 					total_emp=parseInt(data[i].date);
    // 					total_emp_sum=total_emp_sum+total_emp;
    // 					var bmi_total= parseInt(data[i].todays_case);
    // 					bmi_total_sum+=bmi_total;
    // 						var j = 0;
    // 						labels[i]=data[i].date;
    // 						if(total_emp!=0 && total_emp!=null){
    // 							percentage_bmi_total_array.push([data[i].total_case, data[i].todays_case]);
    // 						}else{
    // 							percentage_bmi_total="Not Available";		
    // 						}
    // 				}
    // 			}	
    // 			console.log('total array; before label: '+percentage_bmi_total_array+" length is "+percentage_bmi_total_array.length);
    // 			var total_percentage="";
    // 			if(total_emp_sum==0){
    // 				total_percentage="Not Available";
    // 			}else{
    // 			total_percentage=(bmi_total_sum/total_emp_sum)*100;
    // 			}
    // 			var content1="<canvas id=\"chart3\"	style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
    // 			$("#covid_daily_report").html(content1);
    // 			var header="Covid Active Vs New Cases";
    // 			// console.log('line chart array data: '+percentage_bmi_total_array);
    // 			percentage_bmi_total_array.push(['Total Case', 'New Case']);
    // 			prepareChart('line',percentage_bmi_total_array,labels,header);
    // 		}
    // 	} ,
    // 	error:function(data){
    // 	}
    // });
});
</script>
<script>
function prepareChart(chartType, chartData, labels, header) {
    var color = Chart.helpers.color;
    Chart.defaults.global.pointHitDetectionRadius = 1;
    var customTooltips = function(tooltip) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }
        // Hide if no tooltip
        if (tooltip.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }
        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltip.yAlign) {
            tooltipEl.classList.add(tooltip.yAlign);
        } else {
            tooltipEl.classList.add('no-transform');
        }

        function getBody(bodyItem) {
            return bodyItem.lines;
        }
        // Set Text
        if (tooltip.body) {
            var titleLines = tooltip.title || [];
            var bodyLines = tooltip.body.map(getBody);
            var innerHtml = '<thead>';
            titleLines.forEach(function(title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            });
            innerHtml += '</thead><tbody>';
            bodyLines.forEach(function(body, i) {
                var colors = tooltip.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            });
            innerHtml += '</tbody>';
            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;
        }
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
        tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
        tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
        tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
        tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
    };
    if (chartType == 'bar') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: window.chartColors.green,
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'doughnut') {
        var data = chartData;
        var barChartData = {
            labels: labels,
            datasets: [{
                label: header,
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 205, 86)',
                    '#003f5c',
                    '58508d',
                    '#2f4b7c',
                    '#665191',
                    '#a05195',
                    '#d45087',
                    '#f95d6a',
                    '#ff7c43',
                    '#ffa600',
                ],
                borderColor: window.chartColors.white,
                borderWidth: 1,
                data: chartData,
                hoverOffset: 4
            }]
        };
    } else if (chartType == 'line') {
        var data = chartData;
        console.log('chart data: ' + chartData[0]);
        // get the dataset label names count 
        var dataset_labels_count = chartData[(chartData.length) - 1].length;
        var lc_data = [];
        var lc_label = [];
        var j = 0;
        for (var i = 0; i < chartData.length; i++) {
            for (var j = 0; j < dataset_labels_count; j++) {
                lc_label[j] = chartData[i][j];
            }
        }
        // for (var i = 0; i < dataset_labels_count; i++) {
        // 	for(var j = 0; j < chartData.length; j++){
        // 		console.log("chart Data: "+chartData[j][i]);
        // 		lc_data[i][j] = chartData[j][i];
        // 	}	
        // }
        for (var i = 0; i < data.length - 1; i++) {
            for (var j = 0; j < i; j++) {
                const tmp = data[i][j];
                data[i][j] = data[j][i];
                data[j][i] = tmp;
            }
        }
        console.log('labels: ' + lc_label);
        console.log('data: ' + data[1]);
        const background_color = [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#003f5c',
            '58508d',
            '#2f4b7c',
            '#665191',
            '#a05195',
            '#d45087',
            '#f95d6a',
            '#ff7c43',
            '#ffa600',
        ];
        var datasets_array = []
        for (var j = 0; j < dataset_labels_count; j++) {
            datasets_array.push({
                label: lc_label[j],
                data: data[j],
                borderColor: background_color[j]
            });
        }
        var barChartData = {
            labels: labels,
            datasets: datasets_array
        };
    }
    // if (chartType == 'line') {
    // 	var ctx1 = document.getElementById("chart3").getContext("2d");
    // 	chart = new Chart(ctx1, {
    // 		type: chartType,
    // 		data: barChartData,
    // 		options: {
    // 			title: {
    // 				display: true,
    // 				text: header,
    // 			},
    // 			tooltip: {
    // 				callbacks: {
    // 					label: function(context) {
    // 						var label = context.dataset.label || '';
    // 						if (label) {
    // 							label += ': ';
    // 						}
    // 						if (context.parsed.y !== null) {
    // 							label += new Intl.NumberFormat('en-US', {
    // 								style: 'percent',
    // 								currency: 'USD'
    // 							}).format(context.parsed.y);
    // 						}
    // 						return label;
    // 					}
    // 				},
    // 				enabled: true,
    // 				mode: 'index',
    // 				position: 'nearest',
    // 				custom: customTooltips
    // 			},
    // 			legend: {
    // 				display: true,
    // 				position: 'bottom',
    // 			},
    // 			scales: {
    // 				yAxes: [{
    // 					ticks: {
    // 						precision: 0,
    // 						// Include a dollar sign in the ticks
    // 						callback: function(value, index, values) {
    // 							return value + '';
    // 						}
    // 					}
    // 				}]
    // 			}
    // 		}
    // 	});
    // } else {
    // 	var ctx1 = document.getElementById("chart3").getContext("2d");
    // 	chart = new Chart(ctx1, {
    // 		type: chartType,
    // 		data: barChartData,
    // 		options: {
    // 			title: {
    // 				display: true,
    // 				text: header,
    // 			},
    // 			tooltip: {
    // 				callbacks: {
    // 					label: function(context) {
    // 						var label = context.dataset.label || '';
    // 						if (label) {
    // 							label += ': ';
    // 						}
    // 						if (context.parsed.y !== null) {
    // 							label += new Intl.NumberFormat('en-US', {
    // 								style: 'percent',
    // 								currency: 'USD'
    // 							}).format(context.parsed.y);
    // 						}
    // 						return label;
    // 					}
    // 				},
    // 				enabled: true,
    // 				mode: 'index',
    // 				position: 'nearest',
    // 				custom: customTooltips
    // 			},
    // 			legend: {
    // 				display: true,
    // 				position: 'bottom',
    // 			},
    // 			scales: {
    // 				yAxes: [{
    // 					ticks: {
    // 						precision: 0,
    // 						// Include a dollar sign in the ticks
    // 						callback: function(value, index, values) {
    // 							return value + '%';
    // 						}
    // 					}
    // 				}]
    // 			}
    // 		}
    // 	});
    // }
    // chart.destroy();
}
</script>