@extends('cash_books.accounts.includes.accounts_tabs')
@section('accounts')
    <style>
        .account_open_balance_modal {
            width: 40%;
            margin-left: 1%;
        }
    </style>

    <div class="msghead" style="margin-top: -20px;margin-bottom: 5px">
        <ul class="msghead_menu">
            <li class="right btn-group">
                <a class="btn" onclick="modelShow('add_new_account')"><span class="icon icon-plus"></span>NEW
                    ACCOUNT</a>
            </li>
        </ul>
        <span class="clearall"></span>
    </div><!--msghead-->

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog"
         data-backdrop="static" class="modal  hide fade in" id="add_new_account">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">CREATE NEW ACCOUNT</h3>
        </div>
        <form action="{{route('accounts.store')}}" method="POST" id="add_accounts">
            <div class="modal-body">
                <div class="row-fluid" style="margin-bottom: 20px">
                    <div class="span2">
                        <label class="span12">Account Name:</label>
                    </div>
                    <div class="span10">
                        <input name="name" class="span12" value="" placeholder="Ledger Name"
                               style="width: 80%" required>
                    </div>
                </div>
                <div class="row-fluid" style="margin-bottom: 20px">
                    <div class="span2">
                        <label for="sub_account_id" class="span12">Sub Account</label>
                    </div>
                    <div class="span10">
                        <select name="sub_account_id" class=" searchable" id="sub_account_id" required
                                style="width: 80%">
                            <option value="">Select Sub Account</option>
                            @foreach($account_groups as $account_group)
                                <optgroup label="{{$account_group->name}}">
                                    @foreach($account_group->subGroups as $subGroup)
                                        <option value="{{$subGroup->id}}">{{$subGroup->name}}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row-fluid" style="display: none;margin-bottom: 20px" id="account_exchange_currency">
                    <div class="span2">
                        <label class="span12">Currency</label>
                    </div>
                    <div class="span10">
                        <select class="searchable span8 currency" style="width: 80%" name="currency">
                            <option value="">Select Currency</option>
                            <option value="TSH">TSH</option>
                            <option value="USD">USD</option>
                        </select>
                    </div>
                </div>
                <div class="row-fluid" style="margin-bottom: 20px;display: none" id="account_payment_type">
                    <div class="span2">
                        <label for="payment_type" class="span12">Payment Type</label>
                    </div>
                    <div class="span10">
                        <select id="payment_type" class="searchable span8" style="width: 80%" name="payment_type">
                            <option value="">Select Payment Type</option>
                            <option value="ONE TIME">ONE TIME</option>
                            <option value="PERIODIC">PERIODIC</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn " data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>

    <br>
    <table class="table table-striped table-condensed table-bordered" id="dyntable">
        <thead>
        <tr>
            <td style="width: 20px;">S/N</td>
            <th class="head0">Name</th>
            <th class="head1">Group</th>
            <th class="head1">Sub Group</th>
            <th class="head1">Currency</th>
            <th class="head1">Closed Balance</th>
            <th class="head1">Action</th>
        </tr>
        </thead>
        <tbody id="accounts_body">
        @foreach($accounts as $index=> $account)
            <tr>
                <td>{{$index+1}}</td>
                <td>{{$account->name}}</td>
                <td>{{$account->group}}</td>
                <td>{{$account->sub_group}}</td>
                <td>
                    @if($account->currency != 'NOT_AVAILABLE')
                        {{$account->currency}}
                    @endif
                </td>
                <td style="text-align: right">
                    {{--@if(($account->account_group_id == 2) OR ($account->account_group_id == 1) OR ($account->account_group_id == 3) OR ($account->account_group_id == 4))--}}
                    {{--@if(!empty($account->openBalance))--}}
                    {{--{{number_format($account->openBalance->amount,2)}} ({{$account->openBalance->currency}})--}}
                    {{--@endif--}}
                    {{--@else--}}
                    {{-----}}
                    {{--@endif--}}
                    @if($account->currency == 'NOT_AVAILABLE')
                        {{--*/ $amount = \App\Accounts\Facades\Transactions::getBalanceAsOf($account->id, '', 'USD') /*--}}
                    @else
                        {{--*/ $amount = \App\Accounts\Facades\Transactions::getBalanceAsOf($account->id, '', $account->currency) /*--}}
                    @endif
                    @if($amount >= 0)
                        {{number_format($amount,2)}}
                    @else
                        ( {{number_format(-1*$amount,2)}} )
                    @endif
                </td>
                {{--<td>{{$account->type}}</td>--}}
                {{--<td style="text-align: right">--}}
                {{--@if(($account->account_group_id == 2) OR ($account->account_group_id == 1) OR ($account->account_group_id == 3) OR ($account->account_group_id == 4))--}}
                {{--@if(!empty($account->openBalance))--}}
                {{--{{number_format($account->openBalance->amount,2)}} ({{$account->openBalance->currency}})--}}
                {{--@endif--}}
                {{--@else--}}
                {{-----}}
                {{--@endif--}}
                {{--</td>--}}
                <td style="text-align: right;width: 40px">
                    <div class="btn-group">
                        <a class="btn btn btn-mini"
                           href="{{route('accounts.statements_of_accounts',['account_id'=>$account->id])}}">
                            <i class="iconfa-money icon"></i>DETAILS
                        </a>
                        @if(($account->account_group_id == 2) OR ($account->account_group_id == 1) OR ($account->account_group_id == 3) OR ($account->account_group_id == 4))
                            <a class="btn btn btn-mini" onclick="modelShow('account_open_balance{{$account->id}}')">
                                <i class="iconfa-money icon"></i> Open balance
                            </a>
                            <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
                                 class="modal hide fade in modal-1 account_open_balance_modal"
                                 id="account_open_balance{{$account->id}}">
                                <!-- Modal content-->
                                {!! Form::open(array('route' => 'accounts.open-balances.store', 'class' => 'stdform open_balance_form','method'=>'post')) !!}
                                <div class="modal-header" style="background: #50A6C6">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4> CREATE OPEN BALANCE</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Account
                                                    Name</label>

                                                <div class="controls span8">
                                                    <input type="text" name="name" class="input-large "
                                                           value="{{$account->name}}"
                                                           readonly/>
                                                    <input type="hidden" name="account_id"
                                                           value="{{$account->id}}"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Date
                                                    Before</label>

                                                <div class="controls span8">
                                                    <input type="text" name="date_before"
                                                           class="input-large account_open_balance_date_picker"
                                                           autocomplete="off"
                                                           @if(!empty($account->openBalance)) value="{{$account->openBalance->date}}" @endif/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Amount</label>

                                                <div class="controls span8">
                                                    <input type="text" name="amount"
                                                           class="input-large number"
                                                           @if(!empty($account->openBalance)) value="{{number_format($account->openBalance->amount,2)}}"
                                                           @endif
                                                           autocomplete="off"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Currency</label>

                                                <div class="controls span8">
                                                    <select tabindex="2" class="chzn-1 span7" name="currency"
                                                            required>
                                                        <option value="USD"
                                                                @if(!empty($account->openBalance))
                                                                @if($account->openBalance->currency == 'USD') selected @endif
                                                                @endif
                                                        >USD
                                                        </option>
                                                        <option value="TSH"
                                                                @if(!empty($account->openBalance))
                                                                @if($account->openBalance->currency == 'TSH') selected @endif
                                                                @endif
                                                        >TSH
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Exchange
                                                    Rate</label>

                                                <div class="controls span8">
                                                    <input type="text" name="exchange_rate"
                                                           class="input-large number"
                                                           @if(!empty($account->openBalance)) value="{{$account->openBalance->exchange_rate}}"
                                                           @endif
                                                           autocomplete="off"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row-fluid">
                                        <div class="span12">
                                            <div class="par control-group">
                                                <label class="span4" style="text-align: right">Remark</label>

                                                <div class="controls span8">
                                    <span class="field">
                                        <textarea cols="80" name="remark" rows="5" class="span9">
                                            @if(!empty($account->openBalance)) {{$account->openBalance->remark}} @endif
                                        </textarea>
                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div><!--#tabs-->
                                <div class="modal-footer">
                                    <div class="row">
                                        <div class="form-group">
                                            <button class="btn btn-primary" type="submit">SUBMIT</button>
                                            <button type="reset" class="btn" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                        @endif
                        <a class="btn btn btn-mini edit_vendor" style="margin-left: 4px;"
                           onclick="modelShow('account_edit{{$account->id}}')">
                            <i class="icon-pencil icon"></i>
                        </a>

                        <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
                             class="modal hide fade in modal-1 "
                             id="account_edit{{$account->id}}">
                            <!-- Modal content-->
                            {!! Form::open(array('route' => array('account.update'), 'class' => 'stdform','method'=>'post')) !!}
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4> EDIT ACCOUNT</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row-fluid" style="margin-bottom: 20px">
                                    <div class="span2">
                                        <label class="span12">Account Name:</label>
                                    </div>
                                    <div class="span10">
                                        <input name="name" class="span12" value="{{$account->name}}"
                                               placeholder="Ledger Name"
                                               style="width: 80%" required>
                                        <input type="hidden" value="{{$account->id}}" name="account_id">
                                    </div>
                                </div>
                                <div class="row-fluid" style="margin-bottom: 10px">
                                    <div class="span2">
                                        <label for="sub_account_id" class="span12">Sub Account</label>
                                    </div>
                                    <div class="span10">
                                        <select name="sub_account_id" class=" searchable" id="sub_account_id" required
                                                style="width: 80%">
                                            <option value="">Select Sub Account</option>
                                            @foreach($account_groups as $account_group)
                                                <optgroup label="{{$account_group->name}}">
                                                    @foreach($account_group->subGroups as $subGroup)
                                                        <option value="{{$subGroup->id}}"
                                                                {{$subGroup->id==$account->sub_account_id?'selected':''}}
                                                        >{{$subGroup->name}}</option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{--@if($account->currency!='NOT_AVAILABLE'||$account->sub_account_id==1||$account->sub_account_id==2)--}}
                                @if(!$account->payment_type && $account->currency!='NOT_AVAILABLE'||$account->account_group_id==1||$account->account_group_id==2)
                                    <div class="row-fluid" id="edit_account_exchange_currency"
                                         style="margin-bottom: 20px;">
                                        <div class="span2">
                                            <label class="span12">Currency</label>
                                        </div>
                                        <div class="span10">
                                            <select class="searchable span8" style="width: 80%" name="currency">
                                                <option value="">Select Currency</option>
                                                <option value="TSH" {{$account->currency=='TSH'?'selected':''}}>TSH
                                                </option>
                                                <option value="USD" {{$account->currency=='USD'?'selected':''}}>USD
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                @endif

                                @if($account->payment_type||$account->account_group_id==12)
                                    <div class="row-fluid" style="margin-bottom: 20px;" id="edit_account_payment_type">
                                        <div class="span2">
                                            <label for="payment_type" class="span12">Payment Type</label>
                                        </div>
                                        <div class="span10">
                                            <select id="payment_type" class="searchable span8" style="width: 80%"
                                                    name="payment_type">
                                                <option value="">Select Payment Type</option>
                                                <option value="ONE TIME" {{$account->payment_type=='ONE TIME'?'selected':''}}>
                                                    ONE TIME
                                                </option>
                                                <option value="PERIODIC" {{$account->payment_type=='PERIODIC'?'selected':''}}>
                                                    PERIODIC
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                @endif


                            </div>
                            <div class="modal-footer">
                                <div class="row">
                                    <div class="form-group">
                                        <button class="btn btn-primary" type="submit">Save Changes</button>
                                        <button type="reset" class="btn" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>

                        @if((($account->is_default == 0) AND ($account->account_group_id != 3) AND ($account->account_group_id != 4)) AND ($account->getIsDeleted()))
                            <button class="btn btn btn-mini btn-danger delete_account" style="margin-left: 4px;">
                                <i class="icon-trash icon"></i>
                            </button>
                        @endif
                        <input type="hidden" value="{{$account->id}}" class="account_id">
                    </div>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <table class="hide">
        <tbody id="added_account">
        <tr>
            <td></td>
            <td><input name="account" value=""></td>
            <td>
                <select name="account_group">
                    <option></option>
                    @foreach($account_groups as $group)
                        <option value="{{$group->id}}">{{$group->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>

            </td>
        </tr>
        </tbody>
    </table>

    <script>

        jQuery('.account_open_balance_date_picker').datepicker();
        jQuery('.searchable').select2();

        jQuery('#sub_account_id').on('change', function () {
            var account_exchange_currency = jQuery('#account_exchange_currency');
            var account_payment_type = jQuery('#account_payment_type');
            if (jQuery(this).val() === '1' || jQuery(this).val() === '2') {
                account_exchange_currency.show();
                jQuery('select[name="currency"]').prop('required', true);
                account_payment_type.hide();
                jQuery('select[name="payment_type"]').prop('required', false);
            } else if (jQuery(this).val() === '7' || jQuery(this).val() === '20' || jQuery(this).val() === '8' || jQuery(this).val() === '12' || jQuery(this).val() === '13' || jQuery(this).val() === '14') {
                account_exchange_currency.hide();
                account_payment_type.show();
                jQuery('select[name="payment_type"]').prop('required', true);
            }
            else {
                account_exchange_currency.hide();
                jQuery('select[name="currency"]').removeAttr('required');
                jQuery('.currency').prop('selectedIndex', 0);
                account_payment_type.hide();
                jQuery('select[name="payment_type"]').prop('required', false);
            }
        });


        function initialize() {
            if (jQuery('#sub_account_id').val() === '1' || jQuery(this).val() === '2') {
                account_exchange_currency.show();
                jQuery('select[name="currency"]').prop('required', true);
                account_payment_type.hide();
                jQuery('select[name="payment_type"]').prop('required', false);
            } else if (jQuery('##sub_account_id').val() === '7' || jQuery(this).val() === '20' || jQuery(this).val() === '8' || jQuery(this).val() === '12' || jQuery(this).val() === '13' || jQuery(this).val() === '14') {
                account_exchange_currency.hide();
                account_payment_type.show();
                jQuery('select[name="payment_type"]').prop('required', true);
            }
            else {
                account_exchange_currency.hide();
                jQuery('select[name="currency"]').removeAttr('required');
                jQuery('.currency').prop('selectedIndex', 0);
                account_payment_type.hide();
                jQuery('select[name="payment_type"]').prop('required', false);
            }
        }

        jQuery("#add_accounts").on('submit', function (e) {
            e.preventDefault();

            jQuery.ajax({
                url: '{{ route('accounts.store') }}',
                type: 'post',
                data: jQuery("#add_accounts").serialize(),
                cache: false,
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    location.reload();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });

        jQuery(".delete_account").on('click', function (e) {
            e.preventDefault();
            var conf = confirm('Are you sure?');
            if (conf)
                var tr_p = jQuery(this).parents('tr');

            var account_id = tr_p.find('.account_id').val();

            jQuery.ajax({
                url: '{{ route('accounts.delete') }}',
                type: 'post',
                data: {
                    account_id: account_id
                },
                cache: false,
                success: function (html) {
                    location.reload();
                }
            });
        });

        jQuery('.open_balance_form').on('submit', function (e) {
            jQuery.ajaxSetup({
                header: jQuery('meta[name="_token"]').attr('content')
            })
            e.preventDefault(e);
            jQuery.ajax({
                type: "post",
                url: "{{route('accounts.open-balances.store')}}",
                data: jQuery(this).serialize(),
                success: function (data) {
                    if (data == 'DONE') {
                        jQuery(this).closest('.account_open_balance_modal').modal('toggle');
                        jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} OPEN BALANCE UPDATED SUCCESSFUL ', {
                            theme: 'contrastBorder',
                            sticky: true
                        });
                    } else {
                        alert("FAIL TO UPDATE OPEN BALANCE");
                    }

                },
                error: function (data) {

                }
            })
        });
    </script>
@stop