<!-- add siti 16/04/2020 - add report utilization -->
<style>
.datepicker {
    z-index: 1110; /* must set here to let date picker display on top */
}
input[type=number] { 
    text-align: right; 
}

.parent ~ .cchild {
  display: none;
}
.open .parent ~ .cchild {
  display: table-row;
}
.parent {
  cursor: pointer;
  font-weight: bold;
}

.cchild {
  background-color: #f2f2f2;
}

.parent > *:last-child {
  width: 30px;
}
.parent i {
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  margin: -.5rem;
  padding: .5rem;
 
}
.open .parent i {
  transform: rotate(180deg)

}
.open .parent i {
  transform: rotate(180deg)

}
</style>
<div class="form-horizontal" style='background-color:white;'>
    <div class="form-group">
        <div class="col-sm-12" style="float: left;">
            <div class="row" style="padding-left: 10px;padding-top: 10px;">
                <h3>
                    <?php echo $rowCustomer[CustomerTable::C_NAME]; ?>
                </h3>
            </div>
            <div class="row" style="padding-left: 10px;padding-top: 10px;">
                <h4>
                    <?php echo $rowJobCentre[JobCentreTable::C_JOB_NAME] . " (" . $rowJobCentre[JobCentreTable::C_JOB_NUMBER] . ")"; ?>
                </h4>
            </div>
        </div>
        <div class="col-sm-3" style="float: right;padding-right: 10px;">
            <?php echo $tblJobCentreMandays; ?>
        </div>
    </div>
    <div class="form-group" style="clear:both;text-align: center">
        <h3>UTILIZATION</h3>
    </div>
    <div class="form-group">
        <?php echo $tblUtilizationActivity; ?>
    </div>
    <hr>
</div>

<div class="col-lg-12 text-right" id="btnActVsBillDetail">
</div>

<script>
/**collapse sebagian */
$('table').on('click', 'tr.parent', function(){
    /**check whether the first td icon is up or down  */
    if($(this).find('td').eq(0).html() == '<i class="fas fa-chevron-down"></i>' ){

        $(this).find('td').eq(0).html('<i class="fas fa-chevron-up"></i>');

        $('.tdCollapseActVsBill',this).html('1');

    }else{

        $(this).find('td').eq(0).html('<i class="fas fa-chevron-down"></i>');

        $('.tdCollapseActVsBill',this).html('0');
    }
   
    $(this).nextUntil('tr.parent').slideToggle(10);
});

/**collapse all */
var parent ="";
$('table').on('click', 'th.collapseActVsBillAll', function(){
    /**check whether th icon is up or down  */
    if($(this).html() == '<i class="fas fa-chevron-down"></i>' ){

        $(this).html('<i class="fas fa-chevron-up"></i>');
        var parent = '<i class="fas fa-chevron-up"></i>';
        $(".child").show();
        var collapse = "1";
    }else{

        $(this).html('<i class="fas fa-chevron-down"></i>');
        var parent = '<i class="fas fa-chevron-down"></i>';
        $(".child").hide();
        var collapse = "0";

    }
    /** change all parent icon match with th icon*/
    $('#ActVsBillBody tr.parent').each(function() {
        /**check whether th icon is up or down  */
       
        $(this).find('td').eq(0).html(parent);

        $('.tdCollapseActVsBill',this).html(collapse);

    });     
   
   
});
</script>