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

@section('header')
Dashboard
@endsection

@section('body')
<style type="text/css">
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th {
        padding-top:0px;
        padding-bottom:0px;
    }
</style>

<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">Account Deactivation</label>

                <div class="pull-right box-tools">
                    <a id="btn-deactivate" href="#" class="btn btn-default pull-right"><i class="fa fa-fw fa-power-off text-danger"></i> Deactivate Account</a>
                </div>

                <div class="pull-right box-tools" style="margin-right:3px">
                    <a id="btn-create-fb" href="#" class="btn btn-default pull-right"><i class="fa fa-fw fa-plus-circle text-success"></i> Create Final Bill</a>
                </div>

                <div class="pull-right box-tools" style="margin-right:3px">
                    <a href="{{ url('/billing/acct-deactivation') }}" class="btn btn-default pull-right"><i class="fa fa-chevron-left"></i> Go Back</a>
                </div>

                <div class="pull-right box-tools" style="margin-right:3px">
                    <a id="btn-cancel-fb" href="#" class="btn btn-default pull-right" style="display:none"><i class="fa fa-fw fa-minus-circle text-danger"></i> Cancel Final Bill</a>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:12px">
  		<div class="row">
    		<div class="col-xs-4">
                <div class="row invoice-info">
                    <div class="col-sm-12">
                        <div class="input-group">
                            <select id="acct-id" class="form-control select2 select2-hidden-accessible" data-placeholder="Search Customer" style="width:100%" aria-hidden="true">
                                <option value="{{ Request::get('acct-id') }}">{{ Request::get('acct-name') }}</option>
                            </select>
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default btn-flat" id="btn-clear-search"><i class="fa fa-fw fa-eraser"></i>Clear</button>
                            </span>
                        </div>   
                    </div>

                    <div class="col-sm-12" style="margin-top:8px">
                        <input type="hidden" id="hidden_fb">
                        <input type="hidden" id="hidden_datediff">
                        <small>Customer Details</small><br>
                        <strong id="cust_name" class="acct-details text-primary">-</strong><br>
                        <label id="cust_promo" class="label label-info"></label><br>
                        <small>Disconnection Details</small><br>
                        <strong id="dcd_details" class="acct-details text-danger">-</strong><br>

                        <small>Service Address</small><br>
                        <strong id="cust_address" class="acct-details text-primary">-</strong>
                    </div>

                    <div class="col-sm-6">
                        <small>Book Code - Description</small><br>
                        <strong id="cust_book" class="acct-details text-primary">-</strong>
                    </div>

                    <div class="col-sm-6">
                        <small>Meter Brand - Number</small><br>
                        <strong id="cust_meter" class="acct-details text-primary">-</strong>
                    </div>

                    <div class="col-sm-6">
                        <small>Guarantee Deposit</small><br>
                        <strong id="cust_gdeposit" class="acct-details text-primary">-</strong>
                    </div>

                    <div class="col-sm-6">
                        <small>Advance Payment</small><br>
                        <strong id="cust_adv_payment" class="acct-details text-primary">-</strong>
                    </div>
                </div>
    		</div>    

            <div class="col-xs-8 "id="datatable-container">
            </div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        GlobalSelect2SearchAccount('acct-id', ['dc']);

        $('#acct-id').on('select2:select', function() {
            GetAccountDetails($(this).val());
            GetAccountPayables($(this).val());
            CheckFinalBill($(this).val());
        });

        // To remove url parameter - reload page 
        $('#acct-id').on('select2:unselect', function(){
            window.location=$app_url + '/billing/acct-deactivation/new';
        });

        $('#acct-id').on('change.select2', function(){
            history.replaceState(null, "", location.href.split("?")[0]);
        });

        $('#btn-clear-search').click(function() {
            window.location=$app_url + '/billing/acct-deactivation/new';
        });

        $('#btn-create-fb').click(function() {
            $account_id = $('#acct-id').val();

            if($account_id) {
                $jc = $.confirm({
                    draggable: true,
                    title: 'Create Final Bill',
                    type: false,
                    columnClass: 'large',
                    content: function() {
                        var self = this;

                        return $.ajax({
                            url: $app_url + '/billing/acct-deactivation/create-fb',
                            dataType: 'html',
                            method: 'get',
                            data: { 'acct-id': $account_id },
                        }).done(function(res) {
                            self.setContent(res);
                        }).fail(function() {
                            self.setContent('Something went wrong. Please try again or refresh the page.');
                        });
                    },
                    onContentReady: function() {
                        $(".date-masked").inputmask("date", {
                            mask: "y-1-1", 
                            placeholder: "yyyy-mm-dd", 
                            leapday: "-02-29", 
                            separator: "-", 
                            alias: "yyyy/mm/dd",
                            onincomplete: function() {
                                $(this).val(null);
                            }
                        });

                        $('#present_reading').on('keyup change', function() {
                            computeConsumption();
                        });

                        $('#additional_cum').on('keyup change', function() {
                            computeConsumption();
                        });

                        $('.form-control').on('keyup', function(e) {
                            if(e.keyCode == 13) {
                                CreateFinalBill($jc, {
                                    'account_id': $account_id,
                                    'present_reading_date': $('#present_reading_date').val(),
                                    'previous_reading': $('#previous_reading').data('prev-rdg'),
                                    'present_reading': $('#present_reading').val(),
                                    'due_date': $('#due_date').val()
                                });
                            }
                        });

                        $('#due_date').focus();
                        $('#present_reading').keyup();
                    },
                    buttons: {
                        CANCEL: {
                            text: '<small>[ESC]</small> CANCEL',
                            btnClass: 'btn-default',
                            keys: ['esc']
                        },
                        CREATE: {
                            text: '<small>[ENTER]</small> CREATE',
                            btnClass: 'btn-success',
                            keys: ['enter'],
                            action: function() {
                                CreateFinalBill($jc, {
                                    'account_id': $account_id,
                                    'present_reading_date': $('#present_reading_date').val(),
                                    'present_reading': $('#present_reading').val(),
                                    'previous_reading_date': $('#previous_reading_date').data('prev-rdg-date'),
                                    'previous_reading': $('#previous_reading').data('prev-rdg'),
                                    'due_date': $('#due_date').val()
                                });

                                return false;
                            }
                        }
                    }
                });
            } else {
                $.confirm({
                    draggable: true,
                    title: 'Unable to Create Final Bill',
                    icon: 'fa fa-exclamation-circle',
                    type: 'red',
                    content: '<p>Please select an account first before creating a final bill.</p>',
                    buttons: {
                        CANCEL: {
                            text: '<small>[ENTER]</small> GOT IT',
                            btnClass: 'btn-default',
                            keys: ['enter']
                        },
                    }
                });
            }
        });

        $('#btn-cancel-fb').click(function() {
            $account_id = $('#acct-id').val();

            if($account_id) {
                $jc = $.confirm({
                    draggable: true,
                    title: 'Cancel Final Bill',
                    type: false,
                    columnClass: 'small',
                    content: '<p>Are you sure you want to cancel/delete final bill of this customer?</p>',
                    buttons: {
                        CANCEL: {
                            text: '<small>[ESC]</small> CANCEL',
                            btnClass: 'btn-default',
                            keys: ['esc']
                        },
                        CONFIRM: {
                            text: '<small>[ENTER]</small> CONFIRM',
                            btnClass: 'btn-danger',
                            keys: ['enter'],
                            action: function() {
                                CancelFinalBill($jc, {'account_id':$account_id});

                                return false;
                            }
                        }
                    }
                });
            }
        });

        $('#btn-deactivate').click(function() {
            $account_id = $('#acct-id').val();

            if($account_id) {
                $jc = $.confirm({
                    draggable: true,
                    title: false,
                    type: 'red',
                    content:'<p class="text-center"><i class="fa fa-fw fa-question-circle text-bold text-danger" style="font-size:54px"></i></p>' +
                                '<h4 class="text-center text-bold text-danger">DEACTIVATE ACCOUNT</h4>' +
                                '<hr style="margin-bottom:8px">' + 
                                '<p class="text-center">If customer has an unpaid promissory note, promissory note will be marked as cancelled.<br>Are you sure you want to deactivate this account?</p>',
                    buttons: {
                        CANCEL: {
                            text: '<small>[ESC]</small> CANCEL',
                            btnClass: 'btn-default',
                            keys: ['esc']
                        },
                        DEACTIVATE: {
                            text: 'DEACTIVATE',
                            btnClass: 'btn-danger',
                            keys: ['enter'],
                            action: function() {
                                var final_bill = $('#hidden_fb').val();
                                var date_diff = $('#hidden_datediff').val();
		                        // DOUBLE CHECK IF CUSTOMER HAS BEEN DISCONNECTED AFTER READING AND HAS FINAL BILL
                                if (final_bill == 0 && date_diff > 0) {
                                    $cn = $.confirm({
                                        draggable: true,
                                        title: false,
                                        type: 'orange',
                                        content:'<p class="text-center"><i class="fa fa-fw fa-exclamation-triangle text-bold text-warning" style="font-size:54px"></i></p>' +
                                                '<h4 class="text-center text-bold text-warning">ACCOUNT DEACTIVATION WARNING</h4>' +
                                                '<hr style="margin-bottom:8px">' + 
                                                '<p class="text-center">This customer has been disconnected after reading and requires final bill.<br>Do you want to skip creating final bill for this customer?</p>',
                                        buttons: {
                                            CANCEL: {
                                                btnClass:'btn btn-default',
                                                text: 'CANCEL',
                                                action: function() {
                                                    $cn.close();
                                                }
                                            },
                                            YES: {
                                                text: 'PROCEED',
                                                btnClass: 'btn-warning',
                                                action: function() {
                                                    $cn.close();
                                                    DeactivateAccount($jc, {
                                                        'account_id' : $account_id,
                                                        'remarks'    : $('#remarks').val()
                                                    });
                                                    return false;
                                                }
                                            }       
                                        }
                                    });
                                }
                                else {
                                    DeactivateAccount($jc, {
                                        'account_id' : $account_id,
                                        'remarks'    : $('#remarks').val()
                                    });
                                    return false;
                                }
                            }
                        }
                    }
                });
            }
        });

        // linked to deactivation notification
        if(getParameterByName('acct-id'))
        {   
            $('#acct-id').trigger({
                type: 'select2:select'
            });
        }

        function getParameterByName(name) 
        {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function computeConsumption(){
            $previous_rdg = $('#previous_reading').data('prev-rdg');
            $present_rdg  = Number($('#present_reading').val());
            $actual_cum   = $present_rdg - $previous_rdg;
            $addtl_cum    = Number($('#additional_cum').val());
            $total_cum    = $actual_cum + $addtl_cum;

            $('#actual_cum').val($actual_cum);
            $('#total_cum').val($total_cum);
        }
    });

    const GetAccountDetails = function($account_id) {
        $.ajax({
            type: 'get',
            url: $app_url + '/select2-acct-details',
            dataType: 'json',
            data: { 'acct_id' : $account_id },
            beforeSend: function() {
                $('.acct-details').text('-');
            },  
            success: function(data) {
                $('#cust_name').text(data.acct_number +' • '+data.cust_name.toUpperCase() +' • '+ data.acct_class +'-'+ data.acct_subclass);
                if (data.promo_title) {
                    $('#cust_promo').text(data.promo_title.toUpperCase());
                }
                else {
                    $('#cust_promo').text('');
                }
                $('#dcd_details').text(data.dc_category + ' • ' + data.dc_action_taken.toUpperCase() + ' • ' + data.date_dc);
                $('#cust_address').text(data.complete_address.toUpperCase());
                $('#cust_book').text(data.book +' - '+ data.book_desc);
                $('#cust_meter').text(data.meter_brand +' - '+data.meter_no);
                $('#cust_gdeposit').text(numeral(data.gdeposit).format('0,0.00'));
                $('#cust_adv_payment').text(numeral(data.adv_payment).format('0,0.00'));
            },
            error: function() {
                $('.acct-details').text('-');
            }
        });
    }

    const GetAccountPayables = function($account_id) {
        $.ajax({
            type: 'post',
            url: $app_url + '/billing/acct-deactivation/acct-payables',
            dataType: 'html',
            data: { 'account_id' : $account_id },
            success: function(res) {
                $('#datatable-container').html(res);
            }
        });
    }

    const CheckFinalBill = function($account_id) {
        $.ajax({
            type: 'get',
            url: $app_url + '/billing/acct-deactivation/check-fb',
            data: { 'account_id' : $account_id },
            success: function(res) {
                $('#hidden_fb').val(res.final_bill);
                $('#hidden_datediff').val(res.date_rdg_diff);
                if(res.final_bill > 0) {
                    $('#btn-cancel-fb').css('display', 'block');
                    $('#btn-create-fb').html('<i class="fa fa-fw fa-pencil text-success"></i> Edit Final Bill');
                } else {
                    $('#btn-cancel-fb').css('display', 'none');
                    $('#btn-create-fb').html('<i class="fa fa-fw fa-plus-circle text-success"></i> Create Final Bill');
                }
            }
        });
    }

    const CancelFinalBill = function($jc, $account_id) {
        $.ajax({
            type: 'post',
            url: $app_url + '/billing/acct-deactivation/cancel-fb',
            data: { 'account_id' : $account_id },
            beforeSend: function() {
                $jc.showLoading(true);
            },
            success: function(res) {
                $jc.close();

                $.confirm({
                    draggable: true,
                    title: false,
                    content:"<p class='text-center'><i class='fa fa-fw fa-check text-bold text-success' style='font-size:58px'></i></p>" +
                            "<p class='text-center'>Customer's final bill was successfully cancelled/deleted.</p>",
                    buttons: {
                        CONFIRM: {
                            text: '<small>[ENTER]</small> got it!',
                            btnClass: 'btn-success',
                            keys: ['enter'],
                            action: function() {
                                CheckFinalBill($account_id);
                                GetAccountPayables($account_id);
                            }
                        }
                    }
                });
            },
            complete: function(res) {
                $jc.hideLoading(true);
            }
        });
    }
    
    const CreateFinalBill = function($jc, $data) {
        $.ajax({
            type: 'post',
            url: $app_url + '/billing/acct-deactivation/create-fb',
            data: $data,
            beforeSend: function() {
                $('.form-group').removeClass('has-error');
                $jc.showLoading(true);
            },
            error: function(res) {
                $.each(res.responseJSON, function(field, message) {
                    $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                    $('#'+field).focus();
                });
            },
            success: function(res) {
                $jc.close();

                $.confirm({
                    draggable: true,
                    title: false,
                    content: '<p class="text-center"><i class="fa fa-fw fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Customer's final bill was successfully created. This final bill will still be temporary unless the account deactivation process is completed.</p>",
                    buttons: {
                        CONFIRM: {
                            text: '<small>[ENTER]</small> got it!',
                            btnClass: 'btn-success',
                            keys: ['enter'],
                            action: function() {
                                GetAccountPayables($data.account_id);
                                CheckFinalBill($data.account_id);
                            }
                        }
                    }
                });
            },
            complete: function(res) {
                $jc.hideLoading(true);
            }
        });
    }

    const DeactivateAccount = function($jc, $data) {
        $.ajax({
            type: 'post',
            url: $app_url + '/billing/acct-deactivation/deactivate',
            data: $data,
            beforeSend: function() {
                $jc.showLoading(true);
            },
            error: function(res) {
                
            },
            success: function(res) {
                $jc.close();

                $.confirm({
                    draggable: true,
                    title: false,
                    content:'<p class="text-center"><i class="fa fa-fw fa-check text-bold text-success" style="font-size:58px"></i></p>' +
                            '<p class="text-center text-justify">&emsp;&emsp;Customer account was successfully deactivated. Please go to <strong><a href="#">Reports > Account Deactivation</strong></a> to print the account deactivation report.</p>' +
                            '<p class="text-bold" style="font-size:16px">Reference No: '+ res +'</p>',
                    buttons: {
                        CONFIRM: {
                            text: '<small>[ENTER]</small> got it!',
                            btnClass: 'btn-success',
                            keys: ['enter'],
                            action: function() {
                                window.location=$app_url + '/billing/acct-deactivation/new';
                            }
                        }
                    }
                });
            },
            complete: function(res) {
                $jc.hideLoading(true);
            }
        });
    }
</script>
@endsection