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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Bank Accounts
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">

	<div class="box">
        <div class="box-header">
        	<h3 class="box-title">Bank Accounts</h3>
            @can('bank-account.create')
            	<div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" 
                    	data-href="{{action('BankingController@create')}}" 
                    	data-container=".bank_modal">
                    	<i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
            @endcan
        </div>
        <div class="box-body">
            @can('bank-account.view')
                <div class="table-responsive">
            	<table class="table table-bordered table-striped" id="bank_table">
            		<thead>
            			<tr>
            				<th>Account Title</th>
            				<th>Account Number</th>
                            <th>Location</th>
            				<th>Bank Name</th>
                            <th>Branch Address</th>
            				<th>Opening Balance</th>
            				<th>Current Balance</th>
                            <th>Action</th>
            			</tr>
            		</thead>
            	</table>
                </div>
            @endcan
        </div>
    </div>

    <div class="modal fade bank_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>

</section>
<!-- /.content -->

@endsection
@section('javascript')
    <script type="text/javascript">

        $(document).ready(function() {
            var bank_table = $('#bank_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/banking',
                },

                columnDefs: [{
                    "targets": [4],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [{
                        "data": "title"
                    },
                    {
                        "data": "account_no"
                    },
                    {
                        "data": "business_location"
                    },
                    {
                        "data": "name"
                    },
                    {
                        "data": "branch_address"
                    },
                    {
                        "data": "opening_balance"
                    },
                    {
                        "data": "current_balance"
                    },
                    {
                        "data": "action"
                    }
                ]
            });

            $(document).on('submit', 'form#bank_add_form', function (e) {
                    e.preventDefault();
                    var data = $(this).serialize();

                    $.ajax({
                        method: "POST",
                        url: $(this).attr("action"),
                        dataType: "json",
                        data: data,
                        success: function (result) {
                            if (result.success == true) {
                                $('div.bank_modal').modal('hide');
                                toastr.success(result.msg);
                                bank_table.ajax.reload();
                            } else {
                                toastr.error(result.msg);
                            }
                        }
                    });
	        });

            $(document).on('click', 'button.edit_bank_button', function () {
                $("div.bank_modal").load($(this).data('href'), function () {
                    $(this).modal('show');

                    $('form#bank_edit_form').submit(function (e) {
                        e.preventDefault();
                        var data = $(this).serialize();

                        $.ajax({
                            method: "POST",
                            url: $(this).attr("action"),
                            dataType: "json",
                            data: data,
                            success: function (result) {
                                if (result.success == true) {
                                    $('div.bank_modal').modal('hide');
                                    toastr.success(result.msg);
                                    bank_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    });
                });
            });

            $(document).on('click', 'button.delete_bank_button', function () {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete_unit,
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willDelete) => {
                    if (willDelete) {
                        var href = $(this).data('href');
                        var data = $(this).serialize();

                        $.ajax({
                            method: "DELETE",
                            url: href,
                            dataType: "json",
                            data: data,
                            success: function (result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    bank_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
	        });

        });   
        
    
    </script>
@endsection