<style>
    .table thead tr >th{
        background-color:#4c0870;
        color:#fff;
        /*width: 16% !important;*/
    }
    .success {background:#4c0870 !important}
</style>
<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('piece_price_list'); ?></div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3 form-group">
                    <label><?php echo CommonLanguage::getMessage('Date');?></label>
                    <span class="red-star">*</span>
                    <div class="input-group  ">
                        <span class="input-group-addon success ">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <input id="range_date" type="text" class="form-control" readonly="" name="range_date">
                    </div>
                </div>
                <div class="col-md-3 form-group">
                    <label><?php echo CommonLanguage::getMessage('account');?></label>
                    <span class="red-star">*</span>
                    <select id="payment_type" class="full-width AccountCode" name="payment_type" data-init-plugin="select2">
                        <?php foreach ($payment_type as $type): ?>
                        <option value="<?php echo $type['Account_ID']; ?>" ><?php echo $type['Account_Code'] . ' - ' . $type['Account_Name']; ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover demo-table-search" id="tableWithSearch">
                            <thead>
                                <tr>
                                    <th class="text-center"><?php print CommonLanguage::getMessage('employee'); ?></th>
                                    <th class="text-center"><?php print CommonLanguage::getMessage('total_price'); ?></th>
                                    <th class="text-center"><?php print CommonLanguage::getMessage('old_balance'); ?></th>
                                    <th class="text-center"><?php print CommonLanguage::getMessage('paid_amount'); ?></th>
                                    
                                    <th class="text-center"><?php print CommonLanguage::getMessage('balance'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="5"><button class="btn btn-success pull-right" id="submitPaymentPiece"  > <?php print CommonLanguage::getMessage('Save'); ?>   </button></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var startDate = '<?php echo date('Y-m-d');?>', 
        endDate = '<?php echo date('Y-m-d');?>',
        Required_Fields = <?php echo json_encode(CommonLanguage::getMessage('Required_Fields')); ?>,
        exceed_paid_amount = <?php echo json_encode($permissions->hasPermission('exceed_paid_amount')); ?>,
            is_actual=<?php echo json_encode($is_actual);?>;
            $(function(){
                AjaxCall();
                $("input[name=range_date]").daterangepicker({
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    }
                }, function (start, end, label) {
                    window.startDate = start.format("YYYY-MM-DD");
                    window.endDate = end.format("YYYY-MM-DD");
                    AjaxCall()
                });
                $('#submitPaymentPiece').on('click',function(){
                    var payment_array = [];
                    $('#tableWithSearch tbody tr').each(function(){
                        var parent = $(this);
                        if($('input[name=paid_amount]',parent).attr('data-id')){
                            payment_array.push({
                                employee_id:$('input[name=paid_amount]',parent).attr('data-id'),
                                paid_amount:$('input[name=paid_amount]',parent).val(),
                                total_amount:$('td:eq(1)',parent).html(),
                            });  
                        }
                    });
                    if(!$('input[name="range_date"]').val() || !$('#payment_type').val()){
                        toastr.error(Required_Fields)
                        return;
                    }
                    if(payment_array.length == 0){
                        toastr.error('<?php echo CommonLanguage::getMessage('no_data');?>')
                        return;
                    }
                    var data = {
                        start_date: startDate,
                        end_date:endDate,
                        is_actual: is_actual,
                        payment_type: $('#payment_type').val(),
                        payment:payment_array
                    }
                    $.ajax({
                        url: 'HRMAjax/submitPaymentEmployeePiece',
                        method: 'POST',
                        data: data,
                        dataType:"json",
                        complete: function (data, vv) {
                            if(vv == 'success'){
                                var response = data.responseJSON;
                                if(response[1] == 'success'){
                                    toastr.success(response[0]);
                                    AjaxCall();
                                }else{
                                    toastr.error(response[0]); 
                                }
                            }
                        }
                    });
                });
            });
    function AjaxCall(){
        var data = {
            start_date: startDate,
            end_date:endDate,
            is_actual: is_actual
        }
        $('#tableWithSearch').DataTable().destroy();
        $("#tableWithSearch tbody").empty();
        $.ajax({
            url: 'HRMAjax/getEmployeePieceQuantity',
            method: 'GET',
            data: data,
            complete: function (data, vv) {
                if(vv == 'success'){
                    $('#tableWithSearch tbody').html(data.responseText);
                    RebuildDataTable();
                }
            }
        });
    }
    function changePaidAmount(input){
        var parent = $(input).parents("tr"),
            paid_amount = parseFloat($(input).val()),
            total_amount = parseFloat($('td:eq(1)',parent).html());
        if(exceed_paid_amount){
            paid_amount < 0  ? $(input).val(total_amount) : '';
        }else{
            (paid_amount > total_amount || paid_amount < 0 )  ? $(input).val(total_amount) : '';
        }
    }
</script>