@extends('layouts.main_without_top_button', ['title' => $type.' | LOGISTICS'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li><a href="{!! route('requisitions.index') !!}">Requisitions</a><span class="divider">/</span></li>
        <li class="active">{{ strtolower($type) }}</li>
    </ul>
@stop
@section('title', $type)

@section('contentinner')
    <div class="mediamgr_category">
        <div class="row-fluid">
            <div class="span12">
                <div id="append_zone">
                    <h4 class="widgettitle form-inline">
                        <a href="javascript:;">Expense Name</a>
                        <select name="expense_name" class="searchable_select">
                            <option></option>
                            <optgroup label="Accounts">
                            @foreach($accounts as $account)
                                    <option value="ACCOUNT_{{$account->id}}">{{$account->name}}</option>
                            @endforeach
                            </optgroup>
                            <optgroup label="Items">
                            @foreach($items as $item)
                                <option value="ITEM_{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                            </optgroup>
                        </select>
                        <a href="javascript:;" class="btn" id="append_expenses"><span class="icon-plus"></span> ADD</a>
                    </h4>
                    <form method="post"
                          action="{{route('requisitions.trip_variable_expenses.loading_rder_items.create')}}"
                          id="next_step_btn">
                        <input type="hidden" name="type" value="{{ $type }}">
                        <table class="table table-striped table-bordered table-condensed">
                            <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th>Expenses Name</th>
                                <th>Currency</th>
                                <th>Default Amount</th>
                            </tr>
                            </thead>
                            <tbody id="accounts"></tbody>
                            <tfoot>
                            <tr>
                                <td colspan="4" style="text-align: right"><input type="submit" value="NEXT"></td>
                            </tr>
                            </tfoot>
                        </table>
                    </form>

                    <br/><br/>
                    <br class="clearall"/>
                </div>

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


    </div>
    <script type="text/javascript">
        jQuery('.searchable_select').select2();

        var choosen_accounts = [];
        jQuery("#append_expenses").click(function () {
            var account = jQuery('.searchable_select option:selected');
            var account_id = account.val();
            var account_name = account.text();

            if (account_id) {
                var table_row = '<tr>' +
                    '<td style="width: 5%">' +
                    '<input type="hidden" class="span12" name="account_id[]" value="' + account_id + '">' +
                    '<input type="hidden" class="span12" name="expense_name[]" value="' + account_name + '">' +
                    '<input type="checkbox" class="checkall"/>' +
                    '</td>' +
                    '<td style="width: 50%">' + account_name + '</td>' +
                    '<td style="width: 20%">' +
                    '<select name="currency[]">' +
                    '<option value="USD">USD</option>' +
                    '<option value="TSH">TSH</option>' +
                    '<option value="KWACHA">KWACHA</option>' +
                    '</select>' +
                    '</td>' +
                    '<td style="width: 20%"><input type="text" class="span12" name="default_amount[]"></td>' +
                    '</tr>';
                jQuery('#accounts').append(table_row);
            }
        });

        jQuery('#next_step_btn').on('submit', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: jQuery(this).attr('action'),
                type: jQuery(this).attr('method'),
                data: jQuery(this).serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    if (data.state == 'Fail') jQuery.jGrowl(data.msg);
                    else jQuery('#append_zone').html(data);
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });
    </script>
@endsection