@extends('layouts.app')
@section('title', 'Bank Account')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Bank Account
            <small>Manage Bank Account</small>
        </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">Manage Bank Account</h3>
                @can('bank_details.create')
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal" data-toggle="modal"
                        data-target="#addBankAccount">
                        <i class="fa fa-plus"></i> @lang( 'messages.add' )</button>
                </div>
                @endcan
            </div>
            <div class="box-body">
                @can('bank_details.view')
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="bank_account_table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Bank Branch Name</th>
                                    <th>Account Number</th>
                                    <th>Account Description</th>
                                    <th>Account Search Code</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                @endcan
            </div>
        </div>

        {{-- Add Bank Account Model --}}
        <div class="modal fade" id="addBankAccount" tabindex="-1" role="dialog"
            aria-labelledby="addBankAccountCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addBankAccountLongTitle">Add Bank Branch</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {!! Form::open(['url' => action('BankAccountController@store'), 'method' => 'post', 'id' => 'add_bank_account', 'enctype' => 'multipart/form-data']) !!}

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Branch Name</label>

                                <select class="form-control" name="bank_branch_id" title="Branch Name" id="bank_branch_id">
                                    <option value="" disabled selected> Select Branch Name</option>
                                    @foreach($bank_branches as $bank_branch)
                                        <option value="{{$bank_branch->id}}">{{$bank_branch->bank_name}}</option>
                                    @endforeach
                                    
                                </select>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('account_number', 'Account Number' . ':*') !!}
                                {!! Form::text('account_number', null, ['class' => 'form-control', 'required', 'placeholder' => 'Account Number']) !!}
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('account_search_code', 'Account Search Code' . ':*') !!}
                                {!! Form::text('account_search_code', null, ['class' => 'form-control', 'required', 'placeholder' => 'Account Search Code']) !!}
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('account_description', 'Account Description' . ':*') !!}
                                {!! Form::text('account_description', null, ['class' => 'form-control', 'required', 'placeholder' => 'Account Description']) !!}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary pull-right" id="submit_bank_account_button">Add
                                    Bank Account</button>
                            </div>
                        </div>

                        {!! Form::close() !!}
                    </div>
                </div>
               
            </div>
        </div>
        {{-- End Add Bank Account Model --}}

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

@endsection

@section('javascript')
    <script src="{{ asset('js/labels.js?v=' . $asset_v) }}"></script>

    <script type="text/javascript">
        //Roles table
        $(document).ready(function() {
            var users_table = $('#bank_account_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/bank_account',
                },
                columnDefs: [{
                    "targets": [6],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [
                    { data: 'id', name: 'bank_accounts.id'},
                    { data: 'bank_name', name: 'BB.bank_name'},
                    { data: 'account_number', name: 'account_number'},
                    { data: 'account_description', name: 'account_description'},
                    { data: 'account_search_code', name: 'account_search_code'},
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data, type, row) {

                            if (row.status == 1) {
                                return '<div class="text-center" style="background-color:#3db230; color:white; border-radius: 8px;">Active</div>';
                            } else if (row.status == 0) {
                                return '<div class="text-center" style="background-color:#e83535; color:white; border-radius: 8px;">Inactive</div>';
                            } 

                        }
                    },
                    { data: 'action', name: 'action'}
                ]
            });
            $(document).on('click', 'button.delete_bank_account_button', function() {
                swal({
                    title: LANG.sure,
                    text: LANG.confirm_delete_user,
                    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);
                                    users_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    }
                });
            });

        });
    </script>


@endsection