@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('header')
    Dashboard
@endsection

@section('body')
<div class="box box-default">
	<div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Add to Bills</label>

                <div class="pull-right box-tools">
                    <a href="#" class="btn btn-default atb-new"><i class="fa fa-fw fa-plus-circle text-success"></i>New Add to Bill</a>
                </div>

                <div class="pull-right box-tools" style="width:160px; margin-right:3px">
                    <select id="filter-by-acstatus" class="form-control select2 select2-hidden-accessible" data-placeholder="STATUS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="ac" selected="true">ACTIVE</option>
                        <option value="dc">DISCONNECTED</option>
                        <option value="ia">INACTIVE</option>
                    </select>
                </div>

                <div class="pull-right box-tools" style="width:160px; margin-right:3px">
                    <select id="filter-by-status" class="form-control select2 select2-hidden-accessible" data-placeholder="STATUS" style="width: 100%;" aria-hidden="true">
                        <option value="p">PAID</option>
                        <option value="up" selected="true">UNPAID</option>
                        <option value="c">CANCELLED</option>
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-hover table-condensed" id="table-atb" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <td width="17%">REFERENCE</td>
                            <td width="10%">ACCT NUMBER</td>
                            <td width="15%">CUSTOMER NAME</td>
                            <td width="6%" class="text-right">BASIC</td>
                            <td width="6%" class="text-right">DISCOUNT</td>
                            <td width="6%" class="text-right">INTEREST</td>
                            <td width="6%" class="text-right">NET AMT</td>
                            <td width="6%" class="text-right">INITIAL</td>
                            <td width="6%" class="text-right">MONTHLY</td>
                            <td width="6%" class="text-right">TERMS</td>
                            <td width="6%" class="text-right">AMT PAID</td>
                            <td width="7%" class="text-right">BALANCE</td>
                            <td width="3%">&nbsp;</td>
                        </tr>
                    </thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).on('ready', function() {
        $dt = $('#table-atb').DataTable({
            deferred: true,
            processing: true,
            serverSide: true,
            bSort: false,
            ajax: {
                url: $app_url + '/csr/add-to-bill/dt',
                data: function(d) {
                    d.acstatus = $('#filter-by-acstatus').val();
                    d.status = $('#filter-by-status').val() ? $('#filter-by-status').val() : 'all';
                }
            },
            columns: [
                { data:'reference',         name:'cap.reference',           orderable:false,   className:"text-uppercase" },
                { data:'acct_number',       name:'ca.acct_number',          orderable:false,   className:"text-uppercase" },
                { data:'cust_name',         name:'cust_name',               orderable:false,   className:"text-uppercase" },
                { data:'amt_basic',         name:'cap.amt_basic',           orderable:false,   className:"text-uppercase text-right" },
                { data:'amt_discount',      name:'cap.amt_discount',        orderable:false,   className:"text-uppercase text-right" },
                { data:'interest_amt',      name:'cap.interest_amt',        orderable:false,   className:"text-uppercase text-right" },
                { data:'amt_net',           name:'cap.amt_net',             orderable:false,   className:"text-uppercase text-right" },
                { data:'amt_initial',       name:'cap.amt_initial',         orderable:false,   className:"text-uppercase text-right" },
                { data:'amortization',      name:'cap.amortization',        orderable:false,   className:"text-uppercase text-right" },
                { data:'terms',             name:'cap.terms',               orderable:false,   className:"text-right" },
                { data:'amt_paid',          name:'cap.amt_paid',            orderable:false,   className:"text-uppercase text-right" },
                { data:'amt_remaining',     name:'cap.amt_remaining',       orderable:false,   className:"text-uppercase text-right" },
                { data:'action',            name:'action',                  orderable:false,   className:"text-right" },
            ],
            columnDefs: [
                {   
                    targets: 9, 
                    render: function(data, type, row) {
                        $tp = row.terms - row.terms_remaining;
                        return $tp + ' / ' + row.terms + ' Mo(s)';
                    }
                },
                {   
                    targets: 10, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
                {   
                    targets: 7, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
                {   
                    targets: 4, 
                    render: function(data, type, row) {
                        return '(' +  data + ')';
                    }
                },
                {   
                    targets: 0, 
                    render: function(data, type, row) {
                        if(data == 'Others') {
                            return data + ' - ' + row.reference_others;
                        } else {
                            return data;
                        }
                    }
                }
            ]
        });

        $('#table-atb_filter input').unbind();
        $('#table-atb_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });

        $('#filter-by-acstatus').change(function() {
            $dt.search($('#table-atb_filter input').val()).draw();
        });

        $('#filter-by-status').change(function() {
            $dt.search($('#table-atb_filter input').val()).draw();
        });

        $('input[type="search"]').focus();
    })
    .on('click', '.atb-new', function() {
        var $trow = $(this).closest('tr');
        
        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'large',
            type: 'blue',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/add-to-bill/atb-new',
                    dataType: 'html',
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function(data) {
                    alert(data.responseJSON);
                });
            },
            onContentReady: function() {
                function FormatAcctSearchResults(results) {
                    if(results.loading) return results.text;

                    var markup = "<div class='select2-result-repository clearfix'>" +
                                 "<div class='select2-result-repository__title'>" + results.text + "</div>";

                    if (results.address) {
                        markup += "<div class='select2-result-repository__description'><i class='fa fa-map-marker fa-fw'></i>" + results.address + "</div>";
                    }

                    markup +=   "<div class='select2-result-repository__statistics'>" +
                                    "<div class='select2-result-repository__forks'><i class='fa fa-lock fa-fw'></i>" + results.acct_number + "</div>" +
                                    "<div class='select2-result-repository__forks'><i class='fa fa-book fa-fw'></i>" + results.book_code + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-street-view fa-fw'></i>" + results.acct_class + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-power-off fa-fw'></i>" + results.acct_status + "</div>" +
                                "</div>";

                    return markup;
                }

                $('#acct_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/select2-acct-search',
                        delay: 250,
                        data: function (params) {
                            return query = {
                                search: params.term,
                                page: params.page,
                                filter: ['ac', 'dc']
                            }
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function (data) {
                                    return {
                                        id: data.cust_id,
                                        text: data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                        book_code: data.book_code,
                                        acct_number: data.acct_number,
                                        acct_class: data.acct_class + " - " + data.acct_subclass,
                                        acct_status: data.acct_status,
                                        address: data.cust_address
                                    }
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.count
                                }
                            };
                        },

                    },
                    escapeMarkup: function (markup) { return markup; },
                    templateResult: FormatAcctSearchResults
                });

                $('#reference').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                }).on('select2:select', function() {
                    if($(this).val().toUpperCase() == 'OTHERS') {
                        $('#reference_others').val('').attr('disabled', false);
                    } else {
                        $('#reference_others').val('').attr('disabled', true);
                    }
                }).on('select2:unselect', function(){
                    if($(this).val().toUpperCase() == 'OTHERS') {
                        $('#reference_others').val('').attr('disabled', false);
                    } else {
                        $('#reference_others').val('').attr('disabled', true);
                    }
                });

                $('.atb-input').on('keyup change', function() {
                    $amt_net = numeral(0);
                    $amt_basic = numeral(Number($('#amt-basic').val().replace(',', '')));
                    $amt_discount = numeral(Number($('#amt-discount').val().replace(',', '')));
                    $amt_interest = numeral(Number($('#amt-interest').val().replace(',', '')));
                    $terms = numeral($('#terms').val());

                    $amt_net = $amt_basic.subtract($amt_discount.value());
                    $amt_net = $amt_basic.add($amt_interest.value());
                    $amortization = numeral($amt_net.value() / $terms.value());

                    $('#amt-net').data('amt', $amt_net.value()).text($amt_net.format('0,0.00'));
                    $('#amortization').data('amt', $amortization.value()).text($amortization.format('0,0.00'));
                });

                $('#amt-basic').trigger('keyup');
            },
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                DONE: {
                    btnClass: 'btn btn-primary',
                    text: '<i class="fa fa-save"></i> SAVE ADD TO BILL',
                    keys: ['enter'],
                    action: function() {
                        $.ajax({
                            url: $app_url + '/csr/add-to-bill/atb-save',
                            method: 'post',
                            data: {
                                'acct_id': $('#acct_id').val(),
                                'reference': $('#reference').val(),
                                'reference_others': $('#reference_others').val(),
                                'amt_basic': Number($('#amt-basic').val().replace(',', '')),
                                'amt_discount': Number($('#amt-discount').val().replace(',', '')),
                                'amt_interest': Number($('#amt-interest').val().replace(',', '')),
                                'amt_net': Number($('#amt-net').data('amt')),
                                'terms': Number($('#terms').val()),
                                'amortization': Number($('#amortization').data('amt'))
                            },
                            beforeSend: function() {
                                $('.form-group').removeClass('has-error').prop('title', '');
                                $jc.showLoading(true);
                            },
                            error: function(res) {
                                $.each(res.responseJSON, function(field, message) {
                                    $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                });
                            },
                            success: function(res) {
                                $jc.close();

                                $cn = $.confirm({
                                    draggable: true,
                                    title: false,
                                    type: 'blue',
                                    content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-primary" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Add to bill record was successfully saved.</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-primary',
                                            keys: ['enter'],
                                            action: function() {
                                                $cn.close();
                                                $dt.search($('#table-atb_filter input').val()).draw();
                                            }
                                        }
                                    }
                                });
                            },
                            complete: function() {
                                $jc.hideLoading(true);
                            }
                        });

                        return false;
                    }
                }
            }
        });
    })
    .on('click', '.atb-edit', function() {
        $atb_id = $(this).data('atb-id');
        $reference_id = $(this).data('reference-id');
        
        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'large',
            type: 'blue',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/add-to-bill/atb-edit',
                    data: { 'atb_id' : $atb_id },
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function(data) {
                    $jc.close();

                    $cn = $.confirm({
                        draggable: true,
                        title: false,
                        type: 'red',
                        content: '<p class="text-center"><i class="fa fa-fw fa-info-circle text-bold text-danger" style="font-size:54px"></i></p>' +
                                '<p class="text-center">Add to bill record cannot be edited. There is already a payment on this add to bill record.</p>',
                        buttons: {
                            yes: {
                                text: '<small>[ENTER]</small> got it!',
                                btnClass: 'btn-danger',
                                keys: ['enter'],
                                action: function() {
                                    $cn.close();
                                    $dt.search($('#table-atb_filter input').val()).draw();
                                }
                            }
                        }
                    });
                });
            },
            onContentReady: function() {
                function FormatAcctSearchResults(results) {
                    if(results.loading) return results.text;

                    var markup = "<div class='select2-result-repository clearfix'>" +
                                 "<div class='select2-result-repository__title'>" + results.text + "</div>";

                    if (results.address) {
                        markup += "<div class='select2-result-repository__description'><i class='fa fa-map-marker fa-fw'></i>" + results.address + "</div>";
                    }

                    markup +=   "<div class='select2-result-repository__statistics'>" +
                                    "<div class='select2-result-repository__forks'><i class='fa fa-lock fa-fw'></i>" + results.acct_number + "</div>" +
                                    "<div class='select2-result-repository__forks'><i class='fa fa-book fa-fw'></i>" + results.book_code + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-street-view fa-fw'></i>" + results.acct_class + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-power-off fa-fw'></i>" + results.acct_status + "</div>" +
                                "</div>";

                    return markup;
                }

                $('#acct_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/select2-acct-search',
                        delay: 250,
                        data: function (params) {
                            return query = {
                                search: params.term,
                                page: params.page,
                                filter: ['ac', 'dc']
                            }
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function (data) {
                                    return {
                                        id: data.cust_id,
                                        text: data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                        book_code: data.book_code,
                                        acct_number: data.acct_number,
                                        acct_class: data.acct_class + " - " + data.acct_subclass,
                                        acct_status: data.acct_status,
                                        address: data.cust_address
                                    }
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.count
                                }
                            };
                        },

                    },
                    escapeMarkup: function (markup) { return markup; },
                    templateResult: FormatAcctSearchResults
                });

                $('#reference').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                }).on('select2:select', function() {
                    if($(this).val().toUpperCase() == 'OTHERS') {
                        $('#reference_others').val('').attr('disabled', false);
                    } else {
                        $('#reference_others').val('').attr('disabled', true);
                    }
                }).on('select2:unselect', function(){
                    if($(this).val().toUpperCase() == 'OTHERS') {
                        $('#reference_others').val('').attr('disabled', false);
                    } else {
                        $('#reference_others').val('').attr('disabled', true);
                    }
                });

                $('.atb-input').on('keyup', function() {
                    $amt_net = numeral(0);
                    $amt_basic = numeral(Number($('#amt-basic').val().replace(',', '')));
                    $amt_discount = numeral(Number($('#amt-discount').val().replace(',', '')));
                    $amt_interest = numeral(Number($('#amt-interest').val().replace(',', '')));
                    $terms = numeral($('#terms').val());

                    $amt_net = $amt_basic.subtract($amt_discount.value());
                    $amt_net = $amt_basic.add($amt_interest.value());
                    $amortization = numeral($amt_net.value() / $terms.value());

                    $('#amt-net').data('amt', $amt_net.value()).text($amt_net.format('0,0.00'));
                    $('#amortization').data('amt', $amortization.value()).text($amortization.format('0,0.00'));
                });

                // Available references for edit. (Initialize edit)
                $references = [];
                $reference  = $('#reference').data('reference');
                $acct_id    = $('#acct_id').data('id');
                $.each($('#reference option'), function() {
                    $references.push($(this).val());
                });

                // Check if reference is editable.
                if($.inArray($reference, $references) < 0) {
                    $('#acct_id').prop('disabled', true);
                    $('.atb-reference').html('<input class="form-control" value="'+ $('#reference').data('reference').toUpperCase() +'" disabled="true">');
                    $('#reference_others').prop('disabled', true);
                } else {
                    $('#reference').val($reference).trigger('change');
                }

                $('#amt-basic').trigger('keyup');
            },
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                DONE: {
                    btnClass: 'btn btn-primary',
                    text: '<i class="fa fa-save"></i> UPDATE ADD TO BILL',
                    keys: ['enter'],
                    action: function() {
                        $.ajax({
                            url: $app_url + '/csr/add-to-bill/atb-patch',
                            method: 'post',
                            data: {
                                'atb_id': $atb_id,
                                'acct_id': $('#acct_id').val(),
                                'reference': $('#reference').val(),
                                'reference_id' : $reference_id,
                                'reference_others': $('#reference_others').val(),
                                'amt_basic': Number($('#amt-basic').val().replace(',', '')),
                                'amt_discount': Number($('#amt-discount').val().replace(',', '')),
                                'amt_interest': Number($('#amt-interest').val().replace(',', '')),
                                'amt_net': Number($('#amt-net').data('amt')),
                                'terms': Number($('#terms').val()),
                                'amortization': Number($('#amortization').data('amt'))
                            },
                            beforeSend: function() {
                                $('.form-group').removeClass('has-error').prop('title', '');
                                $jc.showLoading(true);
                            },
                            error: function(res) {
                                $.each(res.responseJSON, function(field, message) {
                                    $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                });
                            },
                            success: function(res) {
                                $jc.close();

                                $cn = $.confirm({
                                    draggable: true,
                                    title: false,
                                    type: 'blue',
                                    content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-primary" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Add to bill record was successfully saved.</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-primary',
                                            keys: ['enter'],
                                            action: function() {
                                                $cn.close();
                                                $dt.search($('#table-atb_filter input').val()).draw();
                                            }
                                        }
                                    }
                                });
                            },
                            complete: function() {
                                $jc.hideLoading(true);
                            }
                        });

                        return false;
                    }
                }
            }
        });
    })
    .on('click', '.atb-patch', function() {
        var $trow = $(this).closest('tr');

        $jc = $.confirm({
            title: false,
            columnClass: 'medium',
            draggable: true,
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/application/cancel',
                    data: { 'appl_id' : $trow.data('appl-id') },
                    dataType: 'html',
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function() {
                    self.setContent('Something went wrong. Please try again or refresh the page.');
                });
            },
            onContentReady: function() {
                $('#approved_by').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane')
                });

                $('#processing_fee').on('keyup change', function() {
                    $amt_paid = numeral($('#appl-details').data('amt-paid'));
                    $processing_fee = numeral($(this).val().replace(',', ''));
                    $amt_refund = $amt_paid.subtract($processing_fee.value());

                    $('#amt_refund').val($amt_refund.format('0,0.00'));
                });
            },
            buttons: {
                CANCEL: {
                    text: '<small>[esc]</small> CANCEL',
                    keys: ['esc']
                },
                CONFIRM: {
                    text: 'CONFIRM',
                    btnClass: 'btn-danger',
                    action: function() {
                        $.ajax({
                            url: $app_url + '/csr/application/cancel',
                            type: 'post',
                            data: {
                                'appl_number'    : $('#appl-details').data('appl-number'),
                                'amt_paid'       : $('#appl-details').data('amt-paid'),
                                'processing_fee' : $('#processing_fee').val() ? Number($('#processing_fee').val().replace(',', '')) : null,
                                'voucher_number' : $('#voucher_number').val() ? $('#voucher_number').val() : null,
                                'amt_refund'     : $('#amt_refund').val() ? Number($('#amt_refund').val().replace(',', '')) : null
                            },
                            beforeSend: function() {
                                $jc.showLoading(true);
                            },
                            success: function(res) {
                                $dt.draw();
                                $jc.close();
                            },
                            error: function(err) {
                                $jc.hideLoading(true);
                                console.log(err);
                                alert(err);
                            }
                        });
                        
                        return false;
                    }
                }
            }
        });
    })
    .on('click', '.atb-cancel', function() {
        $atb_id = $(this).data('atb-id');

        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'small',
            type: 'red',
            content:'<p class="text-center"><i class="fa fa-question-circle text-bold text-danger" style="font-size:54px"></i></p>' +
                    '<p class="text-center">Please request for approval from your branch manager or admin supervisor to cancel add to bill.</p>' +
                    '<div class="form-group">' +
                        '<select id="approved_by" class="form-control select2 select2-hidden-accessible" style="width: 100%;" aria-hidden="true" data-placeholder="APPROVED BY">' +
                            '<option></option>' +
                        '</select>' +
                    '</div>' +
                    '<div class="form-group">' +
                        '<input id="password" type="password" class="form-control" placeholder="PASSWORD">' +
                    '</div>',
            onContentReady: function() {
                $('#approved_by').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/select2-system-user-search',
                        delay: 200,
                        data: function (params) {
                            return query = {
                                search: params.term,
                                transaction: 'cancel-atb',
                                is_active: 1
                            }
                        },
                        processResults: function (data) {
                            return {
                                results: $.map(data.items, function (v) {
                                    return {
                                        id: v.id,
                                        text: v.name.toUpperCase()
                                    }
                                })
                            };
                        }
                    }
                });
            },
            buttons: {
                CANCEL: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CREATE: {
                    btnClass:'btn btn-danger',
                    text: '<i class="fa fa-check-circle"></i> APPROVE',
                    action: function() {
                        $.ajax({
                            url: $app_url + '/csr/add-to-bill/atb-cancel',
                            data: { 
                                'atb_id' : $atb_id,
                                'approved_by' : $('#approved_by').val(),
                                'password' : $('#password').val()
                            },
                            method: 'post',
                            beforeSend: function() {
                                $jc.showLoading(true);
                                $('.form-group').removeClass('has-error').prop('title', '');
                            },
                            success: function(res) {
                                $jc.close();

                                $cn = $.confirm({
                                    draggable: true,
                                    title: false,
                                    type: 'blue',
                                    content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-primary" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Add to bill record was successfully cancelled.</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-primary',
                                            keys: ['enter'],
                                            action: function() {
                                                $cn.close();
                                                $dt.search($('#table-atb_filter input').val()).draw();
                                            }
                                        }
                                    }
                                });
                            },
                            error: function(res) {
                                $.each(res.responseJSON, function(field, message) {
                                    $('#'+field).parent().addClass('has-error').prop('title', message);
                                });
                            },
                            complete: function() {
                                $jc.hideLoading(true);
                            }
                        });

                        return false;
                    }
                }
            }
        });
    })
    .on('click', '.atb-view-ledger', function() {
        $id = $(this).data('atb-id');
        $acct_id = $(this).data('acct-id');

        $.confirm({
            title: '',
            draggable: true,
            columnClass: 'x-large',
            type: 'blue',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/add-to-bill/atb-view-ledger',
                    data: { 
                        'id': $id,
                        'acct_id' : $acct_id
                    },
                    dataType: 'html',
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function() {
                    self.setContent('Something went wrong. Please try again or refresh the page.');
                });
            },
            buttons: {
                CLOSE: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CLOSE',
                    keys: ['esc', 'enter']
                }
            }
        });
    });
</script>
@endsection