@extends('layouts.app')
@section('title', 'BWSI')

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
    <div class="box-header with-border">
        <h3 class="box-title">Customer Account</h3>
        <div class="box-tools pull-right">
            <a href="{{ url('csr/customers') }}" class="btn btn-sm btn-flat btn-default"><i class="fa fa-reply"></i> Go Back</a>
            <button href="#" class="btn btn-sm btn-flat btn-warning btn-add-gd" data-id="{{ $ac->id }}"><i class="fa fa-plus"></i> Additional GD</button>
            <button href="#" class="btn btn-sm btn-flat btn-warning btn-jo-history" data-id="{{ $ac->id }}"><i class="fa fa-history"></i> JO History</button>
            <button href="#" class="btn btn-sm btn-flat btn-warning btn-edit-tags" data-acct-id="{{ $ac->id }}"><i class="fa fa-tags"></i> Tags</button>
            <a href="{{ url('csr/customers/customer?cid=') }} {{ $ac->cust_id }}" class="btn btn-sm btn-flat btn-warning"><i class="fa fa-user"></i> Go to Mother Account</a>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-7">
        <div class="box box-default" style="margin-bottom:8px">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-6">
                        <span title="Account Number"><i class="fa fa-fw fa-lock text-success"></i> {{ strtoupper($ac->acct_number) }}</span>
                        <span class="label label-warning" style="padding:2px"></span> &nbsp;
                        <br>
                        <span title="Customer's Name">
                            <i class="fa fa-fw fa-user text-success"></i> 
                            @if($ac->cust_fname)
                                {{ strtoupper($ac->cust_fname) }}
                            @else
                                {{ strtoupper($ac->cust_bname) }} 
                                {!! $ac->contact_person ? "CP: " . strtoupper($ac->contact_person) : "" !!}
                            @endif
                        </span>
                        <br>
                    </div>
                    <div class="col-xs-3">
                        <span title="Account Class and Sub-Class"><i class="fa fa-fw fa-tags text-success"></i> {{ $ac->acct_class }} - {{ $ac->acct_subclass }}</span><br>
                        <span title="Birthday"><i class="fa fa-fw fa-calendar text-success"></i> {{ $ac->cust_fname ? date("m/d/Y", strtotime($ac->birthday)) : 'N/A' }}</span><br>
                    </div>
                    <div class="col-xs-3">
                        <span title="Account Status">
                            <i class="fa fa-fw fa-power-off text-success"></i> 
                            @if($ac->account_status == 'ac')
                            <label class="label label-success">ACTIVE</label>
                            @endif

                            @if($ac->account_status == 'dc')
                            <label class="label label-warning">DISCONNECTED</label>
                            @endif

                            @if($ac->account_status == 'ia')
                            <label class="label label-danger">INACTIVE</label>
                            @endif
                        </span><br>
                        <span title="Contract Number"><i class="fa fa-fw fa-file-text text-success"></i> {{ $ac->contract_no }}</span><br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <span title="Address"> {{ strtoupper($ac->complete_address) }}</span><br>
                    </div>
                    <div class="col-xs-6" title="Capex Project">
                        <i class="fa fa-fw fa-building text-success"></i> 
                        @foreach ($ac->capex as $c)
                        <a class="label label-primary btn-capex" data-id="{{ $ac->id }}">{{ strtoupper($c->capex) }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-5" style="padding-left: 0px">
        <div class="box box-default" style="margin-bottom:8px">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-5">
                        <span title="Email Address"><i class="fa fa-fw fa-envelope text-success"></i> {{ $ac->email_address ? $ac->email_address : '-' }}</span><br>
                        <span title="Meter Brand and Number"><i class="fa fa-fw fa-tachometer text-success"></i> {{ strtoupper($ac->meter_brand) }} - {{ $ac->meter_no }}</span><br>
                        <span title="Guarantee Deposit Amount"><i class="fa fa-fw fa-briefcase text-success"></i> {{ number_format($ac->gdeposit,2,'.',',') }}</span><br>
                    </div>
                    <div class="col-xs-3">
                        <span title="Mobile Number"><i class="fa fa-fw fa-mobile text-success text-bold"></i> {{ $ac->mobile_number ? $ac->mobile_number : '-' }}</span><br>
                        <a title="Book Code and Sequence" href="#" class="btn-edit-bs" data-acct-id="{{ $ac->id }}">
                            <span><i class="fa fa-fw fa-book text-success"></i> {{ $ac->book_code }} - {{ $ac->sequence }}</span>
                        </a>
                    </div>
                    <div class="col-xs-3">
                        <span title="Landline Number"><i class="fa fa-fw fa-phone text-success"></i> {{ $ac->landline_number ? $ac->landline_number : '-' }}</span><br>
                        <span title="Average Consumption"><i class="fa fa-fw fa-tint text-success"></i> {{ strtoupper($ac->cum_average) }} CuM</span><br>
                    </div>
                    <div class="col-xs-6">
                        <span title="Connection Type"><i class="fa fa-fw fa-code-fork text-success"></i> {{ strtoupper($ac->connection_type) }}</span><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="box box-default">
    <div class="box-body">
        @include('csr.customer._acct-bills')
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $('.table-bills').dataTable({
        "bSort"     : false,
        "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]]
    });

    $(document).ready(function() {
        $('.btn-edit-bs').click(function() {
            $cn = $.confirm({
                title: '',
                draggable: true,
                columnClass: 'medium',
                content: function() {
                    var self = this;

                    return $.ajax({
                        url: $app_url + '/csr/customers/account-edit-bs',
                        data: {
                            'acct_id' : $('.btn-edit-bs').data('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.');
                    });
                },
                onContentReady: function() {
                    $('#book_id').select2({
                        allowClear: true,
                        dropdownParent: $('.jconfirm-scrollpane'),
                    });
                },
                buttons: {
                    CANCEL: {
                        keys: ['esc']
                    },
                    UPDATE: {
                        text: "UPDATE BOOK AND SEQUENCE",
                        btnClass: 'btn btn-warning',
                        keys: ['enter'],
                        action: function() {
                            $('.form-group').removeClass('has-error');

                            $.ajax({
                                url: $app_url + '/csr/customers/account-patch-bs',
                                data: {
                                    'acct_id'  : $('#acct_id').data('id'),
                                    'book_id'  : $('#book_id').val(),
                                    'sequence' : $('#sequence').val()
                                },
                                method: 'post'
                            }).done(function(res) {
                                $cn.close();
                                $.confirm({
                                    draggable: true,
                                    type: 'green',
                                    title: false,
                                    content: '<p class="text-center"><i class="fa fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Successfully updated book and sequence!</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-success',
                                            keys: ['enter', 'esc'],
                                            action: function() {
                                                location.reload();
                                            }
                                        }
                                    }
                                });
                            }).fail(function(res) {
                                $.confirm({
                                    draggable: true,
                                    type: 'red',
                                    title: false,
                                    content: '<p class="text-center"><i class="fa fa-exclamation-triangle text-bold text-danger" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Sequence on that book is not available!</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-danger',
                                            keys: ['enter', 'esc'],
                                            action: function() {
                                                $('#sequence').closest('.form-group').addClass('has-error').prop('title', 'Sequence on this book already exists.');
                                                $('#sequence').focus();
                                            }
                                        }
                                    }
                                });
                            });

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

        $('.btn-edit-tags').click(function() {
            $acct_id = $(this).data('acct-id');

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

                    return $.ajax({
                        url: $app_url + '/csr/customers/account-edit-tags',
                        data: { '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: {
                    CANCEL: {
                        keys: ['esc']
                    },
                    UPDATE: {
                        text: "UPDATE ACCOUNT TAGS",
                        btnClass: 'btn btn-warning',
                        keys: ['enter'],
                        action: function() {
                            $('.form-group').removeClass('has-error');

                            $.ajax({
                                url: $app_url + '/csr/customers/account-patch-tags',
                                data: {
                                    'acct_id'   : $acct_id,
                                    'tags'      : $('#tags').val() 
                                },
                                method: 'post'
                            }).done(function(res) {
                                $cn.close();
                                $.confirm({
                                    draggable: true,
                                    type: 'green',
                                    title: false,
                                    content: '<p class="text-center"><i class="fa fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Successfully updated tag!</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-success',
                                            keys: ['enter', 'esc'],
                                            action: function() {
                                                location.reload();
                                            }
                                        }
                                    }
                                });
                            }).fail(function(res) {
                                code
                            });

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

        $('.btn-add-gd').click(function() {
            $acct_id = $(this).data('id');

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

                    return $.ajax({
                        url: $app_url + '/csr/customers/account-add-gd',
                        data: { '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.');
                    });
                },
                onContentReady: function() {
                    $('#payment_method').select2({
                        allowClear: true,
                        dropdownParent: $('.jconfirm-scrollpane'),
                    });

                    $('#gdeposit').focus();

                    $('.form-control').on('change keyup', function() {
                        $gd = Number($('#gdeposit').val().replace(',',''));
                        $pm = $('#payment_method').val();

                        if($pm == "atb") {
                            if(Number($('#terms').val())) {
                                $terms = Number($('#terms').val());
                                $amort = $gd / $terms;

                                $('#terms').attr('disabled', false).val($terms);
                                $('#amortization').attr('disabled', false).val(numeral($amort).format('0,0.00'));
                            } else {
                                $('#terms').attr('disabled', false).val(1);
                                $('#amortization').attr('disabled', false).val(numeral($gd).format('0,0.00'));
                            }
                        } else {
                            $('#terms').attr('disabled', true).val('');
                            $('#amortization').attr('disabled', true).val('');
                        }
                    });
                },
                buttons: {
                    CANCEL: {
                        text: "<small>[Esc]</small> CANCEL",
                        keys: ['esc']
                    },
                    ADD: {
                        text: "POST TRANSACTION",
                        btnClass: 'btn btn-primary',
                        action: function() {
                            this.buttons.ADD.disable();
                            $('.form-group').removeClass('has-error');

                            $.ajax({
                                url: $app_url + '/csr/customers/account-add-gd',
                                data: {
                                    'acct_id' : $('#acct_id').data('id'),
                                    'gdeposit' : Number($('#gdeposit').val().replace(',','')),
                                    'payment_method' : $('#payment_method').val(),
                                    'terms' : $('#payment_method').val() == 'atb' ? Number($('#terms').val()) : null,
                                    'amortization' : $('#payment_method').val() == 'atb' ? Number($('#gdeposit').val().replace(',','')) / Number($('#terms').val()) : null
                                },
                                method: 'post'
                            }).done(function(res) {
                                $.confirm({
                                    draggable: true,
                                    type: 'green',
                                    title: false,
                                    content: '<p class="text-center"><i class="fa fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                            '<p class="text-center">Additional GD was successfully posted!</p>',
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-success',
                                            keys: ['enter', 'esc'],
                                            action: function() {
                                                location.reload();
                                            }
                                        }
                                    }
                                });
                            }).error(function(res) {
                                $.each(res.responseJSON, function(field, message) {
                                    $('#'+field).parent().addClass('has-error').prop('title', message);
                                });

                                $jc.buttons.ADD.enable();
                            }).fail(function(res) {
                                $jc.buttons.ADD.enable();
                            });

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

        $('.btn-jo-history').click(function() {
            $id = $(this).data('id');

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

                    return $.ajax({
                        url: $app_url + '/csr/customers/account-jo-history',
                        dataType: 'html',
                        method: 'get',
                        data: { 'id':$id },
                    }).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']
                    }
                }
            });
        });

        $('.btn-capex').click(function() {
            $id = $(this).data('id');
            
            $jc = $.confirm({
                title: false,
                draggable: true,
                columnClass: 'large',
                content: function() {
                    var self = this;

                    return $.ajax({
                        url: $app_url + '/csr/customers/capex-books',
                        dataType: 'html',
                        method: 'get',
                        data: { 'id':$id },
                    }).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']
                    },
                    ADD: {
                        btnClass:'btn btn-success',
                        text: 'ADD CAPEX',
                        action: function(){
                            var acct_id = $('#hidden_acct-id').val();
                            var capex_id = $('#select-capex option:selected').val();

                            console.log(acct_id);
                            console.log(capex_id);

                            if (acct_id && capex_id) {
                                $.ajax({
                                    url: $app_url + '/csr/customers/add-capex',
                                    data: {
                                        'acct_id' : acct_id,
                                        'capex_id' : capex_id,
                                    },
                                    method: 'post'
                                }).done(function(res) {
                                    $jc.close();
                                    $.confirm({
                                        draggable: true,
                                        type: 'green',
                                        title: false,
                                        content: '<p class="text-center"><i class="fa fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                                '<p class="text-center">Successfully added capex!</p>',
                                        buttons: {
                                            yes: {
                                                text: '<small>[ENTER]</small> got it!',
                                                btnClass: 'btn-success',
                                                keys: ['enter', 'esc'],
                                                action: function() {
                                                    location.reload();
                                                }
                                            }
                                        }
                                    });
                                }).fail(function(res) {
                                    console.log(res);
                                    // $.confirm({
                                    //     draggable: true,
                                    //     type: 'red',
                                    //     title: false,
                                    //     content: '<p class="text-center"><i class="fa fa-exclamation-triangle text-bold text-danger" style="font-size:54px"></i></p>' +
                                    //             '<p class="text-center">Sequence on that book is not available!</p>',
                                    //     buttons: {
                                    //         yes: {
                                    //             text: '<small>[ENTER]</small> got it!',
                                    //             btnClass: 'btn-danger',
                                    //             keys: ['enter', 'esc'],
                                    //             action: function() {
                                    //                 $('#sequence').closest('.form-group').addClass('has-error').prop('title', 'Sequence on this book already exists.');
                                    //                 $('#sequence').focus();
                                    //             }
                                    //         }
                                    //     }
                                    // });
                                });
                            }
                            return false;
                        }
                    }
                }
            });
        })
    });
</script>
@endsection