
<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        width: 16% !important;
    }
    .table thead tr th[class*='sorting_'] {
        color: #fff;
    }
    .btn-group {
        background-color:#4c0870!important;
        color:#fff;
    }
    .btn-default{
        border: none;
        background-color: #eee;
    }
    .btn-default:hover{
        background-color:#4c0870!important;
        color:#fff;
        border: none;
    }
    .btn-group  .active{
        background-color:#4c0870!important;
        color:#fff;
    }
    .HideMe{
        display:none !important;
        position:absolute;
        top:-1000px;
    }
    .datepicker thead tr .dow {
        color:#4c0870  !important;
    }
    .datepicker table tr td.day:hover {
        background: #4c0870  !important;
        color:#fff;
    }
    .datepicker table tr td.active {
        background-color: #4c0870  !important;
    }
    .datepicker thead tr .datepicker-switch {
        color: #4c0870   !important;
        font-size: 13px;
    }
    .datepicker table tr td span.active {
        background-color: #4c0870  !important;
    }
    .datepicker table tr td span:hover { 
        background-color: #4c0870  !important;
        color:#fff;
    }
    datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .datepicker thead tr .next:before, .datepicker thead tr .prev:before {
        color: #4c0870  !important;
        font-family: 'FontAwesome';
        font-size: 10px;
    }
    .title{
        border: 1px solid #eee;
        background: #4c0870;
        height: 40px;
        text-align: center;
    }
    .line{
        border-left: 1px solid #4c0870;
        border-left-style: dashed;
    } 
</style>
<script src="<?php echo THEME_PATH; ?>plugins/moment/moment.min.js"></script>
<script src="<?php echo JS_PATH; ?>Chart.min.js"></script>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('chart_ev_performance'); ?></div>
        </div>
        <div class="panel-body" style="height: 500px">
            <div id="ViewMode">
                <span style="margin:0 13px"><?php print CommonLanguage::getMessage('type'); ?>: </span>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="radio" name="ViewType" value="1" checked=""><?php print CommonLanguage::getMessage('yearly'); ?>
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="ViewType" value="2"><?php print CommonLanguage::getMessage('quarterly'); ?>
                    </label>
                    <label class="btn btn-default">
                        <input type="radio" name="ViewType" value="3"><?php print CommonLanguage::getMessage('mid_year'); ?>
                    </label>
                </div>
            </div>
            <br>
            <div class="col-md-12">
                <div class="col-xs-4">
                    <div class="form-group">
                        <div class="input-group m-b"><span class="input-group-btn">
                                <button type="button" class="btn btn-success" style="width:0 " ><i class="fa fa-user"style="color:#fff;margin-left:-7px"></i> </button> </span> 
                            <select name="Employee_ID" id="Employee_ID" class="full-width" data-init-plugin="select2">
                                <?php foreach ($all_employees as $employee): ?>
                                    <option value="<?php echo $employee['Employee_ID']; ?>"><?php echo $employee['Employee_Name']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                </div>
                <div id="Date_Group" class="form-group form-group-default input-group col-md-3 pull-right " >
                    <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
                    <input id="Year_Date" name="Year_Date" class="form-control" data-date-format="yyyy" value="<?php echo($year); ?>" aria-required="true" aria-invalid="false">
                    <span class="input-group-addon bg-success" id="Single"><i class="fa fa-calendar"></i></span>
                </div>
            </div>

            <br>
            <br>
            <div class="col-md-6">
                <table  class="table table-responsive table-hover" id="EmployeePerformance" >
                    <thead>
                        <tr>
                            <th class="text-center"><?php print CommonLanguage::getMessage('Date'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('proposed_action'); ?></th>
                            <th class="text-center"><?php print CommonLanguage::getMessage('extra_training'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        for ($x = 0; $x < count($EvaluationPerEmployee); $x++) {
                            $CurItem = $EvaluationPerEmployee[$x];
                            ?>
                            <tr>
                                <td class="text-center"><?php echo $CurItem['Evaluation_Date'] ?></td>
                                <td class="text-center"><?php echo $CurItem['Action_Name'][0] ?></td>
                                <td class="text-center"><?php echo $CurItem['Extra_Training'] == 0 ? "No" : "YES" ?></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 line" id= "YearlyBarGraph">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="title">
                            <h5 style="margin-top:5px;color:#fff" class="bold"><?php print CommonLanguage::getMessage('percent_of_ev'); ?> </h5>
                        </div> 
                        <div class="ibox-tools">
                        </div>
                    </div>
                    <br>
                    <div class="ibox-content">
                        <div class="flot-chart"> 
                            <canvas id="YearlybarChart" height="226" width="485" style="width: 485px; height: 226px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var labels = [<?php
                        echo json_encode([
                            CommonLanguage::getMessage('January'),
                            CommonLanguage::getMessage('February'),
                            CommonLanguage::getMessage('March'),
                            CommonLanguage::getMessage('April'),
                            CommonLanguage::getMessage('May'),
                            CommonLanguage::getMessage('June'),
                            CommonLanguage::getMessage('July'),
                            CommonLanguage::getMessage('August'),
                            CommonLanguage::getMessage('September'),
                            CommonLanguage::getMessage('October'),
                            CommonLanguage::getMessage('November'),
                            CommonLanguage::getMessage('December')]);
                        ?>];
    var evalPerLang = <?php echo json_encode(CommonLanguage::getMessage('ev_performance')); ?>;
    $(function () {
        UpdateGraphDataPerYear(<?php echo json_encode($EvaluationEmployee) ?>)
        $('#EmployeePerformance').dataTable();

        $('#Year_Date').datepicker({autoclose: true, viewMode: "years", minViewMode: "years"}).on("changeDate", function () {
            ChangeTable();
        })
        $("#Employee_ID").on("change", function () {
            ChangeTable();
        })
        $("#ViewMode label.btn").on("change", function () {
            var CheckValue = $("#ViewMode input:checked").val();
            if (CheckValue == 1) {
                labels = [<?php
                        echo json_encode([
                            CommonLanguage::getMessage('January'),
                            CommonLanguage::getMessage('February'),
                            CommonLanguage::getMessage('March'),
                            CommonLanguage::getMessage('April'),
                            CommonLanguage::getMessage('May'),
                            CommonLanguage::getMessage('June'),
                            CommonLanguage::getMessage('July'),
                            CommonLanguage::getMessage('August'),
                            CommonLanguage::getMessage('September'),
                            CommonLanguage::getMessage('October'),
                            CommonLanguage::getMessage('November'),
                            CommonLanguage::getMessage('December')]);
                        ?>];
            }
            if (CheckValue == 2) {
                labels = [<?php
                        echo json_encode([
                            CommonLanguage::getMessage('January') . '-' . CommonLanguage::getMessage('March'),
                            CommonLanguage::getMessage('April') . '-' . CommonLanguage::getMessage('June'),
                            CommonLanguage::getMessage('July') . '-' . CommonLanguage::getMessage('September'),
                            CommonLanguage::getMessage('October') . '-' . CommonLanguage::getMessage('December')]);
                        ?>];
            }
            if (CheckValue == 3) {
                labels = [<?php
                        echo json_encode([
                            CommonLanguage::getMessage('January') . '-' . CommonLanguage::getMessage('June'),
                            CommonLanguage::getMessage('July') . '-' . CommonLanguage::getMessage('December')]);
                        ?>];
            }
            ChangeTable();
        })
    })
    function ChangeTable() {
        var CurrentDate = {
            Employee_ID: $("#Employee_ID").val(),
            Year: $("#Year_Date").val(),
            CheckedValue: $("#ViewMode input:checked").val()
        };
        $('#EmployeePerformance').DataTable().destroy();
        $("#EmployeePerformance tbody").empty();
        $.ajax({
            url: "HRMAjax/EvaluationGraphRequest",
            data: CurrentDate,
            method: "POST",
            dataType: 'json',
            complete: function (v1, v2) {
                if (v2 == "success") {
                    var Data = (v1.responseJSON[1]),
                            GraphData = (v1.responseJSON[0]);
                    for (var i = 0; i < Data.length; i++) {
                        var TR = "<tr><td class='text-center'>" + Data[i]['Evaluation_Date'] + "</td><td class='text-center'>" + Data[i]['Action_Name'] + "</td><td class='text-center'>" + (Data[i]['Extra_Training'] == 0 ? "No" : "YES") + "</td></tr>"
                        $("#EmployeePerformance").append(TR)
                    }
                    UpdateGraphDataPerYear(GraphData)
                }
                RebuildTable()
            }
        })
    }
    function RebuildTable() {
        $('#EmployeePerformance').dataTable();

    }
    function UpdateGraphDataPerYear(GraphDataPerYear) {
        var lineData = {
            labels: labels[0],
            datasets: [
                {
                    label: evalPerLang,
                    fillColor: "rgba(26,179,148,0.5)",
                    strokeColor: "rgba(26,179,148,0.7)",
                    pointColor: "rgba(26,179,148,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#4c0870",
                    data: GraphDataPerYear
                }
            ]
        };
        var lineOptions = {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true
        };
        var ctx = document.getElementById("YearlybarChart").getContext("2d");
        if (window.YearmyBarChart) {
            window.YearmyBarChart.destroy();
        }
         window.YearmyBarChart = new Chart(ctx, {
                type: 'bar',
                data: lineData,
                options: lineOptions
            });
    }
</script>