@if($bills->count() > 0)
<table class="table table-hover table-condensed table-bills">
    <thead class="table-header-bg">
        <tr>
            <td><input type="checkbox" id="chk-mark-all"></td>
            <td>NUMBER</td>
            <td>PERIOD</td>
            <td class="text-right">CUM</td>
            <td class="text-right">BASIC</td>
            <td class="text-right">PCA</td>
            <td class="text-right">ATB</td>
            <td class="text-right">MC</td>
            <td class="text-right">FT</td>
            <td class="text-right">EF</td>
            <td class="text-right">TOTAL</td>
            <td class="text-right">DUE DATE</td>
            <td class="text-right">PEN</td>
            <td class="text-right">GD</td>
            <td class="text-right">ADV</td>
            <td class="text-right">SCD</td>
            <td class="text-right">PAID</td>
            <td class="text-right">BALANCE</td>
            <td class="text-right">DISCOUNT</td>
            <td class="text-right">INTEREST</td>
            <td class="text-right">SUBTOTAL</td>
        </tr>
    </thead>
    <tbody>
        @foreach($bills as $b)
        <tr>
            <td style="vertical-align:middle">
                <input type="checkbox" class="chk-bill" 
                    data-id = "{{ $b->bill_id }}"
                    data-basic = "{{ $b->basic }}"
                    data-pca = "{{ $b->pca }}"
                    data-bill-amount = "{{ $b->bill_amount }}"
                    data-total-due = "{{ $b->total_due }}"
                    data-gdeposit = "{{ number_format($b->gdeposit,2,".",",") }}"
                    data-advance = "{{ $b->advance }}"
                    data-senior = "{{ $b->senior }}"
                    data-penalty = "{{ $b->penalty }}"
                    data-amount-paid="{{ $b->amount_paid }}"
                    data-balance = "{{ $b->balance }}"
                />
            </td>
            <td style="vertical-align:middle">{{ $b->bill_number }} - {{ $b->bill_type }}</td>
            <td style="vertical-align:middle">{{ sprintf("%02d", $b->bill_month) }}/{{ $b->bill_year }}</td>
            <td style="vertical-align:middle" class="text-right">{{ $b->actual_cum + $b->additional_cum }}</td>
            <td style="vertical-align:middle" class="text-right text-bold">{{ number_format($b->basic,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ number_format($b->pca,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ number_format($b->others,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ number_format($b->meter_charges,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ number_format($b->franchise_tax,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ number_format($b->septage_fee,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right text-bold">{{ number_format($b->total_due,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right">{{ $b->due_date }}</td>
            <td style="vertical-align:middle" class="text-right text-danger">{{ number_format($b->penalty,2,".",",") }}</td>
            <td style="vertical-align:middle" class="text-right text-success">({{ number_format($b->gdeposit,2,".",",") }})</td>
            <td style="vertical-align:middle" class="text-right text-success">({{ number_format($b->advance,2,".",",") }})</td>
            <td style="vertical-align:middle" class="text-right text-success">({{ number_format($b->senior,2,".",",") }})</td>
            <td style="vertical-align:middle" class="text-right text-success">({{ number_format($b->amount_paid,2,".",",") }})</td>
            <td style="vertical-align:middle" class="text-right text-bold">{{ number_format($b->balance,2,".",",") }}</td>
            <td style="vertical-align:middle" class="column__discount text-right">
                <a href="#" class="input__discount">0.00</a>
            </td>
            <td style="vertical-align:middle" class="column__interest text-right">
                <a href="#" class="input__interest">0.00</a>
            </td>
            <td style="vertical-align:middle" class="column__subtotal text-right text-bold text-danger">{{ number_format($b->balance,2,".",",") }}</td>
        </tr>
        @endforeach
    </tbody>
    <tfoot>
        <tr>
            <th colspan="10">TOTAL</th>
            <th class="text-right totals__bill">0.00</th>
            <th class="text-right totals__pen" colspan="2">0.00</th>
            <th class="text-right totals__gd">0.00</th>
            <th class="text-right totals__adv">0.00</th>
            <th class="text-right totals__scd">0.00</th>
            <th class="text-right totals__paid">0.00</th>
            <th class="text-right totals__bal">0.00</th>
            <th class="text-right totals__discount">0.00</th>
            <th class="text-right totals__interest">0.00</th>
            <th class="text-right totals__net">0.00</th>
        </tr>
    </tfoot>
</table>

<div style="margin-top:24px">
    <div class="row">
        <div class="col-xs-3">
            <div class="row">
                <div class="col-xs-6">
                    <p class="lead text-muted" style="margin-bottom:4px"><small>Initial Payment</small></p>
                    <input class="form-control num input__initial" type="number" value="0" style="font-size:18px" data-num-min="0" data-num-max="999999" min="0" onkeydown="return event.keyCode !== 69">
                </div>
                <div class="col-xs-6">
                    <p class="lead text-muted" style="margin-bottom:4px"><small>Terms</small></p>
                    <input class="form-control pnum-only wnum-only input__terms" type="number" value="1" style="font-size:18px" min="1" onkeydown="return event.keyCode !== 69">
                </div>
            </div>
        </div>
        <div class="col-xs-3 col-xs-offset-6">
            <p class="lead text-muted text-right" style="margin-bottom:0px"><small>Monthly Payment for <span class="totals__terms">0</span> Mo(s)</small></p>
            <h1 class="text-success text-right" style="margin-top:0px; line-height:.8; font-size:50px"><b>P<span class="totals__monthly">0.00</span></b></h1>
        </div>
    </div>
</div>
@else
<p class="text-center text-danger">No unpaid bills found!</p>
@endif

<script type="text/javascript">
    $(document).on('click', '#chk-mark-all', function() {
        if($(this).is(':checked') == true) {
            $('.chk-bill').each(function() {
                $(this).prop('checked', true).trigger('change');
            });
        } else {
            $('.chk-bill').each(function() {
                $(this).prop('checked', false).trigger('change');
            });
        }
    }).on('change', '.chk-bill', function(e) {
        ComputeSubTotal();
    }).on('change keyup', '.input__initial', function(e) {
        ComputeSubTotal();
    }).on('change blur', '.input__initial', function(e) {
        if($(this).val() == '' || $(this) < 0) {
            $(this).val(0);
        }
        ComputeSubTotal();
    })
    .on('change keyup', '.input__terms', function(e) {
        ComputeSubTotal();
    }).on('keyup', '.input-discount', function() {
        computeTotal();
    }).on('keyup', '.input-interest', function() {
        computeTotal();
    }).ready(function() {
        /////////////////////////////////////////////
        /// DISCOUNT POPOVER ////////////////////////
        /////////////////////////////////////////////
        $('.column__discount > a').popover({
            title: 'Add Discount',
            content: function() {
                return  "<div class='input-group input-group-sm'>"
                            + "<input type='number' class='form-control promissory-inputs promissory-inputs-discount' placeholder='Enter amount'>"
                            + "<span class='input-group-btn'>"
                                + "<button type='button' class='btn btn-success btn-flat promissory-save-discount' title='Save'>"
                                    + "<i class='fa fa-fw fa-save'></i>"
                                + "</button>"
                            + "</span>"
                        + "</div>";
            },
            html: true,
            trigger: 'manual',
            placement : 'left'
        });

        $('.column__discount > a').click(function() {            
            $(this).popover('toggle');         
        });

        $('.column__discount > a').on('shown.bs.popover', function() {
            var val = cast($(this).text());
            var input = $('.popover').find('input.promissory-inputs-discount');
            
            input.val(val).select().focus();
        });     

        $(document).on('click', '.promissory-save-discount', function() {
            var row = $(this).closest('tr');
            var input = $(this).closest('div').find('input');
            var balance = parseFloat(row.find('.chk-bill').data('balance'));
            var interest = parseFloat(row.find('td.column__interest').find('a').text());
            var discount = parseFloat(input.val());
            var subtotal = balance + interest - discount;

            if(discount >= balance) {
                // alert('Invalid discount amount. Discount must be lower than the current bill balance.');
                input.val(balance-1);
            } else {
                row.find('td.column__discount').find('a').text(number_format(discount));
                row.find('td.column__subtotal').text(number_format(subtotal));
                row.find('.chk-bill').data('discount', discount);
                $('.popover').popover('hide');

                ComputeSubTotal();
            }
        });

        $(document).on('keyup', '.promissory-inputs-discount', function(e) {
            if(e.which == 13) {
                var button = $(this).closest('div').find('button');
                button.trigger('click');
            }
        });


        /////////////////////////////////////////////
        /// INTEREST POPOVER ////////////////////////
        /////////////////////////////////////////////
        $('.column__interest > a').popover({
            title: 'Add Interest',
            content: function() {
                return  "<div class='input-group input-group-sm'>"
                            + "<input type='number' class='form-control promissory-inputs promissory-inputs-interest' placeholder='Enter amount'>"
                            + "<span class='input-group-btn'>"
                                + "<button type='button' class='btn btn-success btn-flat promissory-save-interest' title='Save'>"
                                    + "<i class='fa fa-fw fa-save'></i>"
                                + "</button>"
                            + "</span>"
                        + "</div>";
            },
            html: true,
            trigger: 'manual',
            placement : 'left'
        });

        $('.column__interest > a').click(function() {            
            $(this).popover('toggle');         
        });

        $('.column__interest > a').on('shown.bs.popover', function() {
            var val = cast($(this).text());
            var input = $('.popover').find('input.promissory-inputs-interest');
            
            input.val(val).select().focus();
        });     

        $(document).on('click', '.promissory-save-interest', function(){
            var row = $(this).closest('tr');
            var input = $(this).closest('div').find('input');
            var balance = parseFloat(row.find('.chk-bill').data('balance'));
            var discount = parseFloat(row.find('td.column__discount').find('a').text());
            var interest = parseFloat(input.val());
            var subtotal = balance + interest - discount;

            row.find('td.column__interest').find('a').text(number_format(interest));
            row.find('td.column__subtotal').text(number_format(subtotal));
            row.find('.chk-bill').data('interest', interest);
            $('.popover').popover('hide');

            ComputeSubTotal();
        });

        $(document).on('keyup', '.promissory-inputs-interest', function(e) {
            if(e.which == 13) {
                var button = $(this).closest('div').find('button');
                button.trigger('click');
            }
        });
    });
</script>

<style>
    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>