<a class="btn-link btn-primary pull-right addnewbtn"> <i class="fa fa-plus"></i> Add Changes Required</a>
<div class="clear"></div>

<table class="table tablestyle no-margin" style="font-size: 13px;">                                
    <tbody>
        <tr>
            <th class="alert alert-graylight">Sr. No.</th>
            <th class="alert alert-graylight">Subject</th>
            <th class="alert alert-graylight">Details</th>
            <th class="alert alert-graylight">Status</th>
            <th class="alert alert-graylight">Due Date</th>
            <th class="alert alert-graylight">Mark As Done</th>
        </tr> 
        <?php
            if(!empty($this->arrCustomerTODOHistory) ){
                $i = 1;
                foreach($this->arrCustomerTODOHistory as $history){

        ?>
        <tr>
            <td class="alert-warning" align="center"><?php echo $i; ?></td>               
            <td class="alert-warning" align="left"><?php echo (isset($history['Subject']) && !empty($history['Subject']))?stripslashes($history['Subject']):"NA"; ?></td>
            <td class="alert-warning" align="left">
                <p class="more"><?php echo $history['Description']? stripslashes($history['Description']):'NA'; ?></p>
                <!--<a title="<?php //echo $history['Description']? stripslashes($history['Description']):'NA'; ?>"><?php echo $history['Description']?  substr($history['Description'],0,10)."...":'NA'; ?></a>-->
            </td>
            <td id="ToDoSysId_<?php echo $history['ToDoSysId'];  ?>" class="alert-warning" align="left"><?php if($history['IsCompleted']==1){ echo "Completed"; }else{ echo "Pending";} ?></td>
            <td><?php echo $history['StartDateTime']->format('d/m/Y H:i:s');//." /<br/> ".$history['EndDateTime']->format('d/m/Y H:i:s'); ?></td>
            <td align="center">
                <?php  ?>
                <input type="checkbox" name="mark_as_done" id="mark_as_done_<?php echo $history['ToDoSysId'];  ?>"  <?php if($history['IsCompleted']==1){ echo "disabled"; echo " checked"; }else{ echo "";} ?> onclick="markAsDone('<?php echo $history['ToDoSysId'];  ?>');" />
            </td>
        </tr>
                <?php $i++; } ?>
            <?php }else{ ?>
        <tr>
            <td class="alert-warning" colspan="6">No record(s) found! </td>               
        </tr>
            <?php } ?>
    </tbody>
</table>


<script type="text/javascript">
    function markAsDone(ToDoSysId){
        
        var conf = confirm("Are to sure to mark this record as done?");
        if(conf){
            $.ajax({
             url: '/customer/update-all-todo',
             data: {ids:ToDoSysId},
             dataType: 'html',
             type: 'POST',
             beforeSend: function(){
                 //$("#ToDoSysId_"+ToDoSysId).html('Completed');
             },
             success: function (response) {   
                $("#ToDoSysId_"+ToDoSysId).html('Completed');
                $("#mark_as_done_"+ToDoSysId).attr("disabled", true).attr('checked', true);
                //$("#mark_as_done_"+ToDoSysId).attr('checked', true);
             }
          });
        }
        
    }
    
// function trimcontent() || Params : number of chars to show , class name to apply on
function trimcontent( showChar , moreclassname )
{
    var moretext = "+More";
    var lesstext = "-Less";

    $('.'+ moreclassname ).each(function() {
        var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = '<span class="more-defaultcontent" >' + c + '</span><span class="more-content">' + h + '</span>\n\
                        <a href="javascript:void();" class="more-link btn-link btnmore">' + moretext + '</a>';
            $(this).html(html);
        }
    });
 
    $(".more-link").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less").html(moretext);
        } else {
            $(this).addClass("less").html(lesstext);
        }
        $(this).prev().toggle();
        return false;
    });
    $('span.more-content').hide();
    $('.defaultcontent , .more-content').css({'font-size':'12px' ,'text-transform':'none' ,'font-weight':'normal' });
}

trimcontent( 20 , 'more' );
</script>