
<style type="text/css">
    .ValSpan, .Symbol {
        font-weight: 700;
        font-size: 250%;
        text-align: center;
        color: #fff;
    }
    .panel .panel-heading .panel-title{
        color: #fff;
    }
</style>
<script>
    $(function () {
        $(".ValSpan").each(function () {
            $(this).html(AddCommas(parseFloat($.trim($(this).text())).toFixed(2))).animate({opacity: 1})
        })
    })
</script>
<div class="col-md-12">
    <div class="col-md-3" style="padding:5px">
        <select required  name="Report_Hrm" id="Report_Hrm" style="color:#000;" class="full-width " data-init-plugin="select2" >                     
            <option value="1"><?php print CommonLanguage::getMessage('payslip'); ?></option>
            <option value="2"><?php print CommonLanguage::getMessage('overtime'); ?></option>
            <option value="3"><?php print CommonLanguage::getMessage('advance'); ?></option>
            <option value="4"><?php print CommonLanguage::getMessage('loan'); ?></option>
            <option value="5"><?php print CommonLanguage::getMessage('bonus'); ?></option>
            <option value="6"><?php print CommonLanguage::getMessage('deduction'); ?></option>
            <option value="7"><?php print CommonLanguage::getMessage('absence'); ?></option>
        </select>
    </div>
    <div class="form-group form-group-default input-group col-md-3 pull-right" style="background:#ddd">
        <label class="fade"><?php print CommonLanguage::getMessage('Date'); ?></label>
        <input id="Paid_Date" name="Paid_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"><i class="fa fa-calendar"></i></span>
    </div> 
</div>
<?php
$color = ['#4c0870', '#4c0870', '#4c0870', '#4c0870', '#4c0870', '#4c0870', '#ed9421', '#ed9421', '#ed9421', '#CD4945', '#CD4945', '#CD4945'];
$Months = [
    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')];

for ($x = 1; $x < 13; $x++) {
    $CurItem = $Months[$x - 1];
    $style = $color[$x - 1];
    $Total = $employee->TotalPaidPayslip($year);
    $Paid = $Total[$x];
    echo ("<div class='col-md-4'>
    <div class='panel panel-default' style='background:$style'>
        <div class='panel-heading separator'>
            <div class='panel-title'>" . CommonLanguage::getMessage('total_paid_in') . " " . $CurItem . "
            </div>
        </div>
        <div class='panel-body'>
            <p class='text-black'><span class='ValSpan Total-{$x}'  style='opacity: 1;'> $Paid </span>&nbsp;&nbsp;<span class='Symbol'> $DefaultCurrSymbol </span></p>
        </div>
         <div class='ShowMoreDiv'>
             <p class='small no-margin text-white'>
            <a href='HRM/TotalPayslipDetails/{$year}-{$x}' data-placement='top' class='location-{$x}' title='' data-toggle='tooltip'  data-original-title=$CurItem-$year>
<i class='fa fs-16 fa-arrow-circle-o-down text-white' style='margin-left:20px'></i>
<span class='hint-text text-white' >" . CommonLanguage::getMessage('show_more') . "</span>
</a>
</p>
</div>
 </div>
</div>
");
}
?>
<script>
    var newDate, Report_Hrm;
    var loader = '<div id="IsBusy" style="position:absolute;left:0;right:0;top:0px;height:100%;background:rgba(255,255,255,0.9);z-index:9999;opacity:1"><img class="image-responsive-height demo-mw-50" src="img/demo/progress.svg" alt="Progress" style="position: absolute;left: 50%;top: 50%;margin: -25px 0 0 -25px;" /></div>';
    var Months = <?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')]);
?>;
    $(function () {
        $("#Paid_Date").datepicker({autoclose: true, viewMode: "years",
            minViewMode: "years"}).on("changeDate", function () {
            load()
            ChangeData()
        })
        $("#Report_Hrm").on("change", function () {
            load()
            ChangeData()
        })
    })
    function ChangeData() {
        newDate = $("#Paid_Date").val();
        Report_Hrm = $("#Report_Hrm").val();
        $.ajax({
            url: 'HRMAjax/TotalPayslipRequest',
            data: {Current_Date: newDate, Report_Hrm: Report_Hrm},
            method: "POST",
            dataType: "json",
            complete: function (v1, v2) {
                var data = v1.responseJSON;
                var l = (Object.keys(data).length);
                if (v2 = "success") {
                    for (var x = 1; x < l + 1; x++) {
                        $(".Total-" + x).empty().html(AddCommas(parseFloat(data[x] + "").toFixed(2)))
                        $(".location-" + x).removeAttr("href")
                        if (Report_Hrm == 1) {
                            $(".location-" + x).attr("href", "HRM/TotalPayslipDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 2) {
                            $(".location-" + x).attr("href", "HRM/TotalOvertimeDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 3) {
                            $(".location-" + x).attr("href", "HRM/TotalAdvanceDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 4) {
                            $(".location-" + x).attr("href", "HRM/TotalLoanDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 5) {
                            $(".location-" + x).attr("href", "HRM/TotalBonusDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 6) {
                            $(".location-" + x).attr("href", "HRM/TotalDeductionDetails/" + newDate + "-" + x)
                        } else if (Report_Hrm == 7) {
                            $(".location-" + x).attr("href", "HRM/TotalAbsenceDetails/" + newDate + "-" + x)
                        }
                        $(".location-" + x).attr("data-original-title", "" + Months[x - 1] + "-" + newDate)
                    }
                } else {
                    alert("error")
                }
            }
        })
    }
    function load() {
        $("body").append(loader);
        setTimeout(function () {
            $("#IsBusy").remove();
        }, 500)
    }
</script>
