@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">Customer Accounts</label>

                <div class="pull-right box-tools" style="width:160px">
                    <select id="filter-by-status" 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-class" class="form-control select2 select2-hidden-accessible" data-placeholder="ACCOUNT CLASS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($class AS $c)
                        <option data-class="{{ $c->class }}" data-subclass="{{ $c->sub_class }}">{{ $c->class }} - {{ $c->sub_class }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="pull-right box-tools" style="width:160px; margin-right:3px">
                    <select id="filter-by-book" class="form-control select2 select2-hidden-accessible" data-placeholder="BOOK NO." style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($books AS $b)
                        <option value="{{ $b->id }}">{{ $b->code }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-condensed table-hover" id="table-customers" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="10%">ACCOUNT NO.</th>
                            <th width="7%">CLASS</th>
                            <th width="25%">CUSTOMER NAME</th>
                            <th width="30%">SERVICE ADDRESS</th>
                            <th width="8%">METER NO.</th>
                            <th width="5%">BOOK</th>
                            <th width="5%">SEQ.</th>
                            <th>CONTACT PERSON</th>
                            <th>LANDLINE</th>
                            <th>MOBILE</th>
                            <th>EMAIL</th>
                            <th width="6%">STATUS</th>
                            <th width="4%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $dt = $('#table-customers').DataTable({
            deferred: true,
            processing: true,
            serverSide: true,
            bSort: false,
            ajax: {
                url: $app_url + '/csr/customers/dt',
                data: function(d) {
                    d.acct_status   = $('#filter-by-status option:selected').val(),
                    d.book_id       = $('#filter-by-book option:selected').val(),
                    d.acct_class    = $('#filter-by-class option:selected').data('class'),
                    d.acct_subclass = $('#filter-by-class option:selected').data('subclass')
                }
            },
            columns: [
                { data:'acct_number',      name:'ca.acct_number',    orderable:false,   className:"text-uppercase" },
                { data:'acct_class',       name:'ca.acct_class',     orderable:false,   className:"text-uppercase" },
                { data:'cust_name',        name:'cust_name',         orderable:false,   className:"text-uppercase" },
                { data:'complete_address', name:'complete_address',  orderable:false,   className:"text-uppercase" },
                { data:'meter_no',         name:'wm.meter_no',       orderable:false,   className:"text-uppercase" },
                { data:'code',             name:'bo.code',           orderable:false,   className:"text-uppercase" },
                { data:'sequence',         name:'ca.sequence',       orderable:false,   className:"text-uppercase" },
                { data:'contact_person',   name:'c.contact_person',  orderable:false,   className:"text-uppercase" },
                { data:'landline_number',  name:'c.landline_number', orderable:false,   className:"text-uppercase" },
                { data:'mobile_number',    name:'c.mobile_number',   orderable:false,   className:"text-uppercase" },
                { data:'email_address',    name:'c.email_address',   orderable:false,   className:"text-uppercase" },
                { data:'account_status',   name:'ca.account_status', orderable:false,   className:"text-uppercase",     searchable:false },
                { data:'action',           name:'action',            orderable:false,   className:"text-right",         searchable:false }
            ],
            columnDefs: [{
                targets: 3,
                render: function(data, type, row) {
                    if(data.length > 48) {
                        return data.substr(0,48) + '...';
                    } else {
                        return data;
                    }
                }
            }]
        });

        $dt.column(7).visible(false); // CONTACT PERSON COLUMN
        $dt.column(8).visible(false); // LANDLINE NUMBER COLUMN
        $dt.column(9).visible(false); // MOBILE NUMBER COLUMN
        $dt.column(10).visible(false); // EMAIL ADDRESS COLUMN

        $('#table-customers_filter input').unbind();
        $('#table-customers_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });
        
        $('#filter-by-book').on('change', function() {
            $dt.search($('#table-customers_filter input').val()).draw();
        });

        $('#filter-by-class').on('change', function() {
            $dt.search($('#table-customers_filter input').val()).draw();
        });

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

        $('input[type="search"]').focus();
    }).on('click', '.toggle-transfer-acct', function() {
        $acct_id = $(this).data('acct-id');

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

                return $.ajax({
                    url: $app_url + '/csr/customers/account-transfer-view',
                    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() {
                $('#cust_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/select2-cust-search',
                        delay: 200,
                        data: function (params) {
                            return query = {
                                search: params.term,
                                page: params.page
                            }
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function (data) {
                                    return {
                                        text: data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                        cust_number: data.cust_number,
                                        birthday: data.birthday,
                                        acct_status: data.acct_status,
                                        address: data.cust_address,
                                        id: data.cust_id
                                    }
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.count
                                }
                            };
                        },

                    },
                    escapeMarkup: function (mu) { return mu; },
                    templateResult: formatASR
                }).on('select2:select', function (e) {

                }).on('select2:unselect', function(e) {
                    $('input[type="text"]').val('');
                });

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

                            return {
                                results: $.map(data.items, function (data) {
                                    return {
                                        text: data.cust_fullname ? data.cust_fullname : data.cust_bname,
                                        cust_number: data.cust_number,
                                        birthday: data.birthday,
                                        acct_status: data.acct_status,
                                        address: data.cust_address,
                                        id: data.cust_id
                                    }
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.count
                                }
                            };
                        },

                    },
                    escapeMarkup: function (mu) { return mu; },
                    templateResult: formatASR
                }).on('select2:select', function (e) {
                    
                }).on('select2:unselect', function(e) {
                    $('input[type="text"]').val('');
                });
            },
            buttons: {
                CANCEL: {
                    keys: ['esc']
                },
                UPDATE: {
                    text: "TRANSFER ACCOUNT",
                    btnClass: 'btn btn-primary',
                    keys: ['enter'],
                    action: function() {
                        
                    }
                }
            }
        });
    }).on('click', '.joborder-history', 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']
                }
            }
        });
    });
</script>
@endsection