@extends('master')

@section('titulo')
    {{ Lang::get('financeiro/_20130.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/20130.css') }}" />
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>

	<ul class="list-inline acoes">    
		<li>
            <button 
                type="button" 
                class="btn btn-primary btn-incluir" 
                data-hotkey="f6"
                ng-disabled="!{{ userMenu($menu)->INCLUIR }} || vm.Operacao.ALTERANDO" 
                ng-click="vm.Operacao.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Incluir
            </button>
        </li>                       
		<li>
            <button 
                type="button" 
                class="btn btn-warning" 
                data-hotkey="f7"
                ng-disabled="!{{ userMenu($menu)->ALTERAR }} || vm.Operacao.SELECTED.DESCRICAO == undefined || vm.Operacao.ALTERANDO" 
                ng-click="vm.Operacao.alterar()">
                <span class="glyphicon glyphicon-edit"></span>Alterar
            </button>
        </li>                       
		<li>
            <button 
                type="button" 
                class="btn btn-danger" 
                data-hotkey="f8"
                ng-disabled="!{{ userMenu($menu)->EXCLUIR }} || vm.Operacao.SELECTED.DESCRICAO == undefined || vm.Operacao.ALTERANDO" 
                ng-click="vm.Operacao.excluir()">
                <span class="glyphicon glyphicon-trash"></span> Excluir
            </button>
        </li>                                          
<!--		<li>
            <button 
                type="button" 
                class="btn btn-primary btn-success" 
                data-hotkey="f10"
                ng-disabled="!{{ userMenu($menu)->ALTERAR }}" 
                ng-click="vm.Operacao.confirmar()">
                <span class="glyphicon glyphicon-ok"></span> Confirmar Alterações
            </button>
        </li>                       -->
	</ul>  
        
    <style>
        .t-status.status-0:before {
            background-color: rgb(217, 83, 79);    
        }
        
        .t-status.status-1:before {
            background-color: rgb(68, 157, 68);            
        }
        
    </style>
    <div class="table-ec table-scroll" style="height: calc(100vh - 205px);">
        <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
            <thead>
                <tr gc-order-by="vm.Operacao.ORDER_BY">
                    <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                    <th field="DESCRICAO">Operação</th>                    
                    <th field="DESCRICAO_REDUZIDA" ttitle="Descriçao reduzida">Desc. Reduz.</th>                    
                    <th field="NATUREZA" class="text-center" ttitle="Natureza da conta<br/>C = Crédito | D = Débito">Nat.</th>
                    <th field="CCONTABIL_CREDITO_MASKA" colspan="2">Conta Crédito</th>
                    <th field="CCONTABIL_DEBITO_MASKA" colspan="2">Conta Débito</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    ng-repeat="item in vm.Operacao.DADOS_RENDER = ( vm.Operacao.DADOS | orderBy : vm.Operacao.ORDER_BY )"
                    ng-click="vm.Operacao.SELECTED = item"
                    ng-focus="vm.Operacao.SELECTED = item"
                    ng-class="{ 'selected' : vm.Operacao.SELECTED == item }"
                    ng-dblclick="{{ userMenu($menu)->INCLUIR }} == 1 && vm.Operacao.alterar()"
                    tabindex="0"
                    >
                    <td class="t-status status-@{{ item.STATUS }}">
                    </td>
                    <td>
                        <span>
                            @{{ item.ID || 0 | lpad: [2,0] }} - @{{ item.DESCRICAO }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.DESCRICAO_REDUZIDA }}
                        </span>
                    </td>
                    <td class="text-center">
                        <span>
                            @{{ item.NATUREZA }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.CCONTABIL_CREDITO_MASK }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.CCONTABIL_CREDITO_DESCRICAO || '-' }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.CCONTABIL_DEBITO_MASK }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.CCONTABIL_DEBITO_DESCRICAO || '-' }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    @include($menu.'.modal-operacao.index')
</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/_20130.js') }}"></script>
@append