@extends('master')

@section('titulo')
    {{ Lang::get('admin/_11310.titulo') }}
@endsection

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

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak style="margin-top: -65px;">

<!-- ng-click="vm.Agenda.consultar()" -->
    
    <ul class="nav nav-tabs" ng-init="({{ userMenu($menu)->INCLUIR }} != 1) && vm.Ramal.consultar(); ({{ userMenu($menu)->INCLUIR }} == 1); ">
        <li  ng-class="{'active' : {{ userMenu($menu)->INCLUIR }} == 1}" >
            <a  
                data-hotkey="alt+1"
                ng-if="{{ userMenu($menu)->INCLUIR }} == 1" 
                data-toggle="tab" 
                ng-click="vm.Agenda.consultar()"
                href="#tab-agenda">
                Agenda Telefônica
                <span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
            </a>
        </li>    
        <li ng-class="{'active' : {{ userMenu($menu)->INCLUIR }} != 1}" >
            <a 
                data-hotkey="alt+2" 
                ng-click="vm.Ramal.consultar()"
                data-toggle="tab" 
                href="#tab-ramal">
                Ramais
                <span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
            </a>
        </li>    
    </ul>
    
    
    <div class="tab-content">
        <div id="tab-agenda" class="tab-pane fade in"  ng-class="{'active' : {{ userMenu($menu)->INCLUIR }} == 1}">    
            <ul class="list-inline acoes" style="margin-top: 0px !important; padding: 0px;">    
                <li>
                    <button 
                        type="button" 
                        class="btn btn-primary btn-incluir" 
                        data-hotkey="f6"
                        ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                        ng-click="vm.Agenda.incluir()">
                        <span class="glyphicon glyphicon-plus"></span> Incluir
                    </button>
                </li> 
                <li>
                    <button type="button" class="btn btn-default" id="filtrar-toggle"
                        data-toggle="collapse" data-target="#filtro_main" aria-expanded="true" 
                        aria-controls="filtro_main" ng-click="vm.RequisicaoOC.tabela_height()">
                        Filtro
                        <span class="caret"></span>
                    </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);            
                }

                .table-condensed > thead > tr > th,
                .table-condensed > thead > tr > td,
                .table-condensed > tbody > tr > th,
                .table-condensed > tbody > tr > td,
                .table-condensed > tfoot > tr > th,
                .table-condensed > tfoot > tr > td {
                    padding: 5px !important;
                }

            </style>

            <form ng-submit="vm.Agenda.consultar(1)" class="form-inline">		
                <div id="filtro_main" class="table-filter collapse in" aria-expanded="true" 
                    style="margin-bottom: 4px;
                            background: rgba(221,221,221,.33);
                            padding: 2px 10px 7px;
                            border-radius: 5px;">

                <div class="form-group" style="width: calc(60% - 115px); padding-top: 16px; min-width: 200px;">
                        <input 
                            type="text"
                            style="width: 100% !important; min-width: 170px;"
                            placeholder="FILTRAGEM POR ID, NOME, FONE, OBSERVAÇÃO E CONTATO"
                            class="form-control input-maior filter_main" 
                            ng-model="vm.Agenda.FILTRO">
                    </div>

                    <div class="form-group" style="padding-top: 5px; width: fit-content; padding-right: 10px;">
                        <button type="submit" class="btn btn-xs btn-primary btn-filtrar"
                                data-hotkey="alt+f" id="btn-table-filter" style="top: 5px;">
                            <span class="glyphicon glyphicon-filter"></span> Filtrar
                        </button>
                    </div>	
                </div>
            </form>
            <div class="tabela_principal" id="tabela_principal"></div>

            <!-- <div class="form-group" style="margin-bottom: 4px;">
                <input 
                    type="text"
                    style="width: 100% !important;"
                    placeholder="Para filtrar pressione ENTER"
                    class="form-control input-maior" 
                    required
                    ng-model="vm.Agenda.FILTRO"
                    ng-keypress="vm.Agenda.Filtrar($event)">
            </div>

            <div class="table-ec table-scroll" style="height: calc(100vh - 235px);">
                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Agenda.ORDER_BY">
                            <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                            <th field="ID">ID</th>
                            <th field="FONE">Fone</th>
                            <th field="NOME">Nome</th>
                            <th field="EMAIL ">Email</th>
                            <th field="ENDERECO">Endereço</th>
                            <th field="BAIRRO">Bairro</th>
                            <th field="CIDADE">Cidade</th>
                            <th field="UF">UF</th>
                            <th field="OBSERVACAO">Observação </th>
                            <th field="CONTATO">Contato</th>
                            <th field="CELULAR">Celular</th>
                            <th field="DATA_ANIVERSARIO">Aniversario</th>
                            <th field="OPERADORA">Operadora</th>
                            <th field="MSN">Msn</th>
                            <th field="SKYPE">Skype</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Agenda.DADOS_RENDER = ( vm.Agenda.DADOS | orderBy : vm.Agenda.ORDER_BY | find: {model : vm.Agenda.FILTRO_DADOS ,fields : 'all'})"
                            ng-Click="vm.Agenda.visualizar()"
                            ng-focus="vm.Agenda.SELECTED = item"
                            ng-class="{ 'selected' : vm.Agenda.SELECTED == item }"
                            tabindex="0"
                            >
                            <td class="t-status status-@{{ item.STATUS }}">
                            </td>
                            <td><span>@{{item.ID || 0 | lpad: [4,0] }}</span></td>
                            <td><span>@{{item.FONE }}</span></td>
                            <td><span>@{{item.NOME }}</span></td>
                            <td><span>@{{item.EMAIL}} </span></td>
                            <td><span>@{{item.ENDERECO }}</span></td>
                            <td><span>@{{item.BAIRRO }}</span></td>
                            <td><span>@{{item.CIDADE }}</span></td>
                            <td><span>@{{item.UF }}</span></td>
                            <td><span>@{{item.OBSERVACAO }} </span></td>
                            <td><span>@{{item.CONTATO}} </span></td>
                            <td><span>@{{item.CELULAR}} </span></td>
                            <td><span>@{{item.ANIVERSARIO}} </span></td>
                            <td><span>@{{item.OPERADORA}} </span></td>
                            <td><span>@{{item.MSN}} </span></td>
                            <td><span>@{{item.SKYPE}} </span></td>
                        </tr>
                    </tbody>
                </table>
            </div> -->
        </div>
        
        <div id="tab-ramal" class="tab-pane fade in" ng-class="{'active' : {{ userMenu($menu)->INCLUIR }} != 1}">
            <div class="tabela_ramal" id="tabela_ramal"></div>

            <!-- <div class="form-group" style="margin-bottom: 4px;">
                <input 
                    type="text"
                    style="width: 100% !important;"
                    placeholder="Filtragem rápida..."
                    class="form-control input-maior" 
                    required
                    autofocus
                    ng-model="vm.Ramal.FILTRO">
            </div>

            <div class="table-ec table-scroll" style="height: calc(100vh - 235px);">
                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Ramal.ORDER_BY">
                            <th field="SETOR">Setor</th>
                            <th field="USUARIO">Usuário</th>
                            <th field="RAMAL">Ramal</th>
                            <th field="TELEFONE ">Telefone</th>
                        </tr>                        
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Ramal.DADOS_RENDER = ( vm.Ramal.DADOS | orderBy : vm.Ramal.ORDER_BY | find: {model : vm.Ramal.FILTRO ,fields : 'all'})"
                            ng-focus="vm.Ramal.SELECTED = item"
                            ng-class="{ 'selected' : vm.Ramal.SELECTED == item }"
                            tabindex="0"
                            >
                            <td style="text-transform: none;">@{{item.SETOR }}</td>
                            <td style="text-transform: none;">@{{item.USUARIO }}</td>
                            <td style="text-transform: none;">@{{item.RAMAL }}</td>
                            <td style="text-transform: none;">@{{item.TELEFONE }}</td>
                        </tr>
                    </tbody>
                </table>
            
        </div> -->
    </div>
    @include($menu.'.modal.Agenda')
	@include($menu.'.modal.AgendaItens')
</div>
@endsection

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