@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">Barya Posting</label>

                <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 Barya Record</a>
                </div>

                <div class="pull-right box-tools" style="margin-right:3px">
                    <a href="{{ url('csr/barya-posting') }}" class="btn btn-default pull-right"><i class="fa fa-chevron-left"></i> Back</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"></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">
                        <small style="font-weight: 900">Customer's Name</small><br>
                        <p id="cust_name" class="acct-details text-dark">-</p>
                    </div>

                    <div class="col-sm-6">
                        <small style="font-weight: 900">Account Number</small><br>
                        <p id="cust_acct_num" class="acct-details text-dark">-</p>
                    </div>

                    <div class="col-sm-6">
                        <small style="font-weight: 900">Account Class</small><br>
                        <p id="cust_acct_class" class="acct-details text-dark">-</p>
                    </div>

                    <div class="col-sm-6">
                        <small style="font-weight: 900">Book Code - Description</small><br>
                        <p id="cust_book" class="acct-details text-dark">-</p>
                    </div>

                    <div class="col-sm-6">
                        <small style="font-weight: 900">Meter Brand - Number</small><br>
                        <p id="cust_meter" class="acct-details text-dark">-</p>
                    </div>

                    {{-- <div class="col-sm-12">
                        <small style="font-weight: 900">Service Address</small><br>
                        <p id="cust_address" class="acct-details text-dark">-</p>
                    </div> --}}
                </div>
    		</div>    

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

@section('scripts')
<script>
    $(document).ready(function() {
        GlobalSelect2SearchAccount('acct-id', ['ia']);

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

        $('#btn-clear-search').click(function() {
            location.reload();
        });


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

            if($account_id) {
                $jc = $.confirm({
                    draggable: true,
                    title: 'Deactivate Account',
                    type: false,
                    columnClass: 'small',
                    content: '<p>Are you sure you want to deactivate this account?</p>',
                    buttons: {
                        CANCEL: {
                            text: '<small>[ESC]</small> CANCEL',
                            btnClass: 'btn-default',
                            keys: ['esc']
                        },
                        DEACTIVATE: {
                            text: '<small>[ENTER]</small> DEACTIVATE',
                            btnClass: 'btn-danger',
                            keys: ['enter'],
                            action: function() {
                                DeactivateAccount($jc, {
                                    'account_id' : $account_id,
                                    'remarks'    : $('#remarks').val()
                                });

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

    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.cust_name.toUpperCase());
                // $('#cust_address').text(data.complete_address);
                $('#cust_book').text(data.book +' - '+ data.book_desc);
                $('#cust_meter').text(data.meter_brand +' - '+data.meter_no);
                $('#cust_acct_num').text(data.acct_number);
                $('#cust_acct_class').text(data.acct_class +'-'+ data.acct_subclass);
            },
            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);
            }
        });
    }
</script>
@endsection