@extends('layouts.main_without_top_button')
@section('title')
    Settings
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">Company Settings</li>
    </ul>
@stop
@section('contentinner')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <div class="tabbable">
        @include('settings.company.includes.company_modals')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">

                        <div class="mediamgr">
                            <div class="mediamgr_left">

                                <div class="mediamgr_category">
                                    <ul>
                                        <li class="current"><a href="#">Banks Accounts</a></li>
                                        {{--<li class="pull-right"><a href="#"><span class="icon-plus"></span> Add Route</a></li>--}}
                                    </ul>
                                </div><!--mediamgr_category-->
                                <div class="row-fluid">
                                    <div class="span12">

                                        <table class="table table-bordered" id="vendors-list">
                                            <thead>
                                            <tr>
                                                <th class="head0 nosort" width="4%"><input type="checkbox"
                                                                                           class="checkall"/></th>
                                                <th class="head0" width="20%">Name</th>
                                                <th class="head1">Bank Name</th>
                                                <th class="head0">Account Number</th>
                                                <th class="head1" width="18%">Swift Code</th>
                                                <th class="head0" width="10%">Location</th>
                                                <th class="head0" width="10%">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody id="bank_accounts">
                                            @foreach($bank_accounts as $account)
                                                @include('settings.company.bank_accounts.auto_generated.bank_account_row')
                                            @endforeach
                                            </tbody>
                                        </table>
                                        <div style="margin-top: 4px">
                                            <a class="btn btn-mini" id="new_bank_account">
                                                <span class="iconsweets-create"></span> NEW BANK ACCOUNT
                                            </a>
                                        </div>
                                    </div><!--span12-->
                                </div><!--row-fluid-->


                            </div><!--mediamgr_left -->

                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->
<table style="display: none">
    <tbody id="new_bank_account_htm">
    <tr id="new_tr">
        <td></td>
        <td>
            <input type="text" class="span12" id="data_name">
        </td>
        <td>
            <input type="text" class="span12" id="data_bank_name">
        </td>
        <td>
            <input type="text" class="span12" id="data_account_number" >
        </td>
        <td >
            <input type="text" class="span12" id="data_swift_code">
        </td>
        <td class="head0" width="10%"><input type="text" class="span12" id="data_location">
        </td>
        <td class="head0" width="10%">
            <div class="btn-group">
                <a onclick="newBankAccount();" class="btn" style="margin-right: 4px">Save </a>
                <button type="button" class="btn removerow"><i class="icon-remove"></i></button>
            </div>
        </td>
    </tr>
    </tbody>
</table>
    <script type="text/javascript">
        jQuery('#new_bank_account').on('click', function () {
            jQuery('#bank_accounts').append(jQuery('#new_bank_account_htm').html());
            jQuery(".removerow").on('click', function () {
                jQuery(this).parent().parent().parent().remove();
            });
        });
        function editDetails(argument) {
            jQuery('#name' + argument).show();
            jQuery('#name_value' + argument).hide();

            jQuery('#bank_name' + argument).show();
            jQuery('#bank_name_value' + argument).hide();

            jQuery('#account_number' + argument).show();
            jQuery('#account_number_value' + argument).hide();

            jQuery('#swift_code' + argument).show();
            jQuery('#swift_code_value' + argument).hide();

            jQuery('#location' + argument).show();
            jQuery('#location_value' + argument).hide();

            jQuery('#edit_save' + argument).show();
            jQuery('#edit_details' + argument).hide();
        }
        function editSave(argument) {
            var tr = jQuery('#tr_' + argument);
            jQuery.ajax({
                url: '{{ route('settings.bank-accounts.update') }}',
                type: 'post',
                data: {
                    bank_account_id: argument,
                    name: jQuery('#data_name' + argument).val(),
                    bank_name: jQuery('#data_bank_name' + argument).val(),
                    account_number: jQuery('#data_account_number' + argument).val(),
                    swift_code: jQuery('#data_swift_code' + argument).val(),
                    location: jQuery('#data_location' + argument).val(),
                },
                success: function (html) {
                    if (html != 'FAIL') {
                        tr.replaceWith(html);
                        jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} BANK ACCOUNT UPDATED SUCCESSFUL ', {
                            theme: 'contrastBorder',
                            sticky: true
                        });
                    } else if (data == 'FAIL') {
                        alert("FAIL TO UPDATE BANK ACCOUNT.");
                    }
                }
            });
        }
        function newBankAccount() {
            var tr = jQuery('#new_tr');
            jQuery.ajax({
                url: '{{ route('settings.bank-accounts.store') }}',
                type: 'post',
                data: {
                    name: jQuery('#data_name').val(),
                    bank_name: jQuery('#data_bank_name').val(),
                    account_number: jQuery('#data_account_number').val(),
                    swift_code: jQuery('#data_swift_code').val(),
                    location: jQuery('#data_location').val(),
                },
                success: function (html) {
                    if (html != 'FAIL') {
                        tr.replaceWith(html);
                        jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} BANK ACCOUNT CREATED SUCCESSFUL ', {
                            theme: 'contrastBorder',
                            sticky: true
                        });
                    } else if (data == 'FAIL') {
                        alert("FAIL TO CREATE BANK ACCOUNT.");
                    }
                }
            });
        }

        function showDeleteModal(bank_account_id, name) {
            jConfirm('Are You sure you want to delete ' + name, 'DELETE', function (r) {
                if (r == true) {
                    deleteBankAccount(bank_account_id);
                } else {

                }
            });
        }
        function deleteBankAccount(bank_account_id) {
            jQuery.ajax({
                url: '{{ route('settings.bank-accounts.destroy') }}',
                type: 'post',
                data: {
                    'bank_account_id': bank_account_id,
                },
                success: function (data) {
                    if (data == 'DONE') {
                        jQuery('#tr_' + bank_account_id).remove()
                        jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} BANK ACCOUNT DELETED SUCCESSFUL ', {
                            theme: 'contrastBorder',
                            sticky: true
                        });
                    } else if (data == 'FAIL') {
                        alert("FAIL TO DELETE BANK ACCOUNT.");
                    }
                }
            });
        }
    </script>
@stop