<script>
    $(document).ready(function (){
        $('#incentivesTable').DataTable({
            dom: 'lBfrtip',
            buttons: [
                { extend: 'excel', className: 'download-buttons' },
            ]
        } );
        /**If Allocated Amount is Entered, start to Sum Up values so that we can display the total Amount to be Allocated **/
        $(document).on('input paste change',".incentivePremium",function (){
            var sum = 0;
            $('.incentivePremium').each(function() {
                sum += Number($(this).val());
            });
            $('#total-alloc-amount-entered').val(sum).addClass('error').css('font-weight','bold').attr('readonly', false);
            if(sum > 0){
                $('#total-alloc-amount-entered').attr('readonly', true);
            }
        });

        /**Anytime We Click on the Item on the left, activate the field to the right to allow enter amount to Remit**/
        $('.activatorAlloc').click(function (){
            var selectedCert = $(this).val();
            let declaredAmount = 0;
            if($(this).is(':checked')){
                $('#'+selectedCert).attr('disabled', false);
            }else{
                $('#'+selectedCert).attr('disabled', true).val('').trigger('change');
            }
        });
    });
    var c = document.getElementsByClassName("cr");
    for (var i = 0; i < c.length; i++) {
        c[i].innerHTML = (i+1)+".";
    }
</script>
@if($list != null)
    <table id="incentivesTable"  class="table-overflow" style="width: 100%; border-collapse: collapse;">
        <thead>
        <tr style="background-color: #a1b5d3">
            <th>No</th>
            <th>Agent Name</th>
            <th>Type</th>
            <th>Period</th>
            <th>Total Debited</th>
            <th>Total Paid</th>
            <th>Incentive(2%)</th>
            <th>Activator</th>
            <th>Amount Payable</th>
        </tr>
        </thead>
        <tbody>
        <tr class="debit-row">
            <td class="cr"></td>
            <td>
                {{\App\Models\SubAgent::where('stamp', $agent)->first()->contact_person}}
            </td>
            <td><b class="error">{!! strtoupper($agentType) !!}</b></td>
            <td><b>{!! $month."/".$year !!}</b></td>
            <td><b class="error">{{number_format($list->sum('amount'))}}</b></td>
            <td><b class="error">{{number_format($list->sum('alloc_amount'))}}</b></td>
            <td>
                {!! Form::hidden('expected-agent-incentive', (2/100 * $list->sum('alloc_amount') ?? 0)) !!}
                {!! Form::hidden('incentive-month', $month) !!}
                {!! Form::hidden('incentive-year', $year) !!}
                {!! Form::text('incentive-amount', number_format((2/100 * $list->sum('alloc_amount') ?? 0),2), ['class'=>'input-text-height', 'id'=>'expected-incentive-amount','style'=>'border:1px solid green; width:80px','readonly'=>true]) !!}</td>
            @if($alreadyRequsitioned != 'no')
                <td><i class="error">Already Requisitioned</i></td>
            @else
                <td>{!! Form::checkbox('activatorAgentIncentive', $agent, false,['class'=>'activatorAlloc']) !!}</td>
            @endif
            <td >
                {!! Form::hidden('agent-id', $agent) !!}
                {!! Form::number('incentive-amount', '', ['class'=>'input-text-height incentivePremium', 'id'=>$agent,'style'=>'border:1px solid green; width:80px','disabled'=>true]) !!}
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr style="background-color: #a1b5d3">
            <th>No</th>
            <th>Agent Name</th>
            <th>Type</th>
            <th>Period</th>
            <th>Total Debited</th>
            <th>Total Paid</th>
            <th>Incentive(2%)</th>
            <th>Activator</th>
            <th>Amount Payable</th>
        </tr>
        </tfoot>
    </table>
@else
    <p class="error" style="text-align: center">No Data Available. Please Check your Inputs!</p>
@endif
