@extends('master')

@section('titulo')
    {{ Lang::get('logistica/_14030.titulo') }}
@endsection

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

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>
    <form ng-submit="vm.Pedido.consultar()">    
        <div class="panel-filter">

            <div 
                class="inline consulta-familia"
                x-model="vm.ConsultaFamilia"
                x-label="Família"
                x-ttitle="Somente família de produto ativa habilitada para venda"
                x-api="/_27010/api/familia"
                x-data-request="{STATUS: 1,HABILITA_VENDA: 1}"
                x-returns="['ID','DESCRICAO']"
                x-table-returns="[['ID', 'Id'],['DESCRICAO','Descrição']]"
                x-input-width="200px"
                ></div>            
            
            <div class="form-group">
                <label>Nº Pedido:</label>
                <input type="text" ng-model="vm.Pedido.FILTRO.PEDIDO" form-validate="true" class="form-control input-menor" />
            </div>        
            <div class="form-group">
                <label>Doc. Fical de Saída:</label>
                <input type="text" ng-model="vm.Pedido.FILTRO.NFS" form-validate="true" class="form-control input-menor" />
            </div>        

            <div class="form-group">
                <label>Período da Emissão do Doc. Fiscal de Saída:</label>
                <input 
                    type="date"
                    ng-init="vm.Pedido.FILTRO.DATE_1 = vm.moment().subtract(6, 'month').toDate(); vm.Pedido.FILTRO.DATA_1 = vm.moment(vm.Pedido.FILTRO.DATE_1).format('YYYY.MM.DD');"
                    ng-model="vm.Pedido.FILTRO.DATE_1" 
                    ng-change="vm.Pedido.FILTRO.DATA_1 = vm.moment(vm.Pedido.FILTRO.DATE_1).format('YYYY.MM.DD')"
                    class="form-control" 
                    style="width: 130px"
                    form-validate="true" />
                <span>à</span>
                <input 
                    type="date" 
                    ng-init="vm.Pedido.FILTRO.DATE_2 = vm.moment().toDate(); vm.Pedido.FILTRO.DATA_2 = vm.moment(vm.Pedido.FILTRO.DATE_2).format('YYYY.MM.DD');" 
                    ng-model="vm.Pedido.FILTRO.DATE_2"  
                    ng-change="vm.Pedido.FILTRO.DATA_2 = vm.moment(vm.Pedido.FILTRO.DATE_2).format('YYYY.MM.DD')"
                    class="form-control" 
                    style="width: 130px"
                    form-validate="true" />
            </div>      

            
<!--            <div class="form-group">
                <input 
                    type="checkbox" 
                    class="form-control" 
                    ng-disabled="!(vm.ConsultaFamilia.ID > 0)"
                    ng-click="vm.$storage._14030_familia = vm.$storage._14030_familia.ID > 0 ? {} : vm.ConsultaFamilia.item.dados" 
                    ng-checked="vm.$storage._14030_familia.ID > 0"
                    />
                <label> 
                    Definir Família como padrão
                </label>
            </div>-->
            
            <button type="submit" class="btn btn-xs btn-primary" data-hotkey="alt+f">
                <span class="glyphicon glyphicon-filter"></span>Filtrar
            </button>
        </div>
    </form>
    
    <style>
        .container-group fieldset legend {
            font-size: 15px;
        }
        
        .container-group tr th {
            font-size: 10px;
        }
        .container-group tr td {
            font-size: 12px;
        }
        
        .color-red { 
            color:red;
        }
        
        .color-orange { 
            color:orange;
        }
        
        .color-blue { 
            color:blue;
        }
        
        .color-green { 
            color:green;
        }
    </style>
    
    <div class="container-group" style="width: 100%;height: calc(100vh - 200px);">
        <fieldset class="container-left" style="width: calc(44% - 6px);margin-right: 2px;display: inline-block; height: 100%;">
            <legend>Documentos Fiscais de Saída</legend>
            <input type="text" ng-model="vm.Pedido.MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: 100%;height: 23px;margin-bottom: 5px;"/>
            <div class="table-ec" style="height: calc(100% - 96px);">
                <table class="table table-hover table-striped table-bordered table-condensed">
                    <thead>
                        <tr ng-init="vm.Pedido.MODEL_ORDER_BY = '-DATA_EMISSAO'" gc-order-by="vm.Pedido.MODEL_ORDER_BY">
                            <th field="STATUS" style="width:1%"></th>
                            <!--<th field="ESTABELECIMENTO_ID" class="text-center">Est.</th>-->
                            <th field="PEDIDOS" style="width: 5%;">Pedido</th>
                            <th field="NFS,SERIE">NFS</th>
                            <th field="DATA_EMISSAO" ttitle="Data de emissão do documento fiscal de saída" class="text-center">Emissão</th>
                            <th field="EMPRESA_RAZAOSOCIAL">Cliente</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            tabindex="0"
                            ng-repeat="nfs in vm.Pedido.DADOS | find: { model: vm.Pedido.MODEL_FILTRO, fields : 'all' } | orderBy : vm.Pedido.MODEL_ORDER_BY"
                            ng-focus="
                                vm.Pedido.SELECTED = nfs;
                                vm.Pedido.SELECTED.CHK = false;
                                vm.forApply(vm.Pedido.SELECTED.PEDIDOS,'CHK',false);  
                                vm.forApply(vm.Pedido.SELECTED.ITENS,'CHK',false);
                            "
                            ng-class="{'selected' : vm.Pedido.SELECTED == nfs}"
                            >
<!--                            <td class="text-center">@{{ nfs.ESTABELECIMENTO_ID }}</td>-->
                            <td>
                                <i class="fa fa-circle" ng-class="{
                                    'color-red'   : nfs.STATUS == null,
                                    'color-blue'  : nfs.STATUS == 0,
                                    'color-green' : nfs.STATUS == 1
                                }"></i>
                            </td>
                            <td>
                                <span ng-repeat="ped in nfs.PEDIDOS">@{{ ped == nfs.PEDIDOS[0] ? '' : ', '}}@{{ ped.PEDIDO }}</span>
                            </td>
                            <td>@{{ nfs.NFS }}</td>
                            <td class="text-center">@{{ vm.moment(nfs.DATA_EMISSAO).format('DD/MM/YY') }}</td>
                            <td class="ellipsis" autotitle style="max-width: 230px;">@{{ nfs.EMPRESA_ID | lpad : [4,0] }} - @{{ nfs.EMPRESA_RAZAOSOCIAL }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <ul class="legenda-ec">
                <li>
                    <span>Composição: </span>    
                </li>
                <li>
                    <i class="fa fa-circle" style="color: red"></i>
                    <span>Pendente</span>
                </li>
                <li>
                    <i class="fa fa-circle" style="color: blue"></i>
                    <span>Iniciada</span>
                </li>
                <li>
                    <i class="fa fa-circle" style="color: green"></i>
                    <span>Concluída</span>
                </li>
            </ul>
        </fieldset>
            
        <fieldset class="container-right" style="width: 56%;display: inline-block; height: 100%;">
            <legend>Itens do Documento</legend>
            <input type="text" ng-model="vm.PedidoItem.MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100% - 500px);height: 23px;margin-bottom: 5px;"/>
            
            <button type="button" class="btn btn-primary btn-xs" ng-disabled="!(vm.Pedido.SELECTED.ID > 0)" style="top: -2px;" ng-click="vm.Composicao.visualizar(vm.Pedido.SELECTED.ID)">Visualizar Composição</button>
            <button type="button" class="btn btn-success btn-xs" ng-disabled="(vm.Pedido.SELECTED.ID > 0)" style="top: -2px;" ng-click="vm.Composicao.processar()">Processar Composição</button>
            
            <select style="width: 217px; height: 25px; padding: 0px;" class="" name="repeatSelect" id="repeatSelect" ng-model="vm.Composicao.TIPO">
				<option ng-value="0">Processar por Sku</option>
				<option ng-value="3">Processar Grade Padrão</option>
				<option ng-value="2">Processar Grade Mista</option>
				<option ng-value="4">Processar Grade Flex</option>
				<option ng-value="5">Processar Grade do Pedido</option>
			</select>

            <div class="table-ec" style="height: calc(100% - 69px);">
                <table class="table table-hover table-striped table-bordered table-condensed">
                    <thead>
                        <tr gc-order-by="vm.PedidoItem.MODEL_ORDER_BY">
<!--                            <th 
                                style="width: 27px;" 
                                ng-click="
                                    vm.Pedido.SELECTED.CHK = (vm.Pedido.SELECTED.CHK == true) ? false : true; 
                                    vm.forApply(vm.Pedido.SELECTED.PEDIDOS,'CHK',vm.Pedido.SELECTED.CHK);  
                                    vm.forApply(vm.Pedido.SELECTED.ITENS,'CHK',vm.Pedido.SELECTED.CHK)"
                                >
                                <i style="font-size: 17px;" class="check fa" ng-class="vm.Pedido.SELECTED.CHK == true ? 'fa-check-square-o' : 'fa-square-o'"></i>
                            </th>                                 -->
                            <th field="SEQUENCIA" class="text-center">Seq.</th>
                            <th field="LINHA_DESCRICAO,TAMANHO_DESCRICAO">Linha</th>
                            <th field="COR_DESCRICAO">Cor</th>
                            <th field="TAMANHO_DESCRICAO">Tam.</th>
                            <th class="text-right">Qtd.</th>
                            <th class="text-right">Saldo</th>
<!--                            <th field="NFS_DATA_EMISSAO" class="text-center">NFS Emissão</th>
                            <th field="EMPRESA_RAZAOSOCIAL">Cliente</th>
                            <th field="QUANTIDADE,QUANTIDADE_SALDO" colspan="2" class="text-right">Qtd Ped. / Saldo</th>-->
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat-start="ped in vm.Pedido.SELECTED.PEDIDOS" ng-if="ped.ITENS.length > 0" style="background: rgb(212, 212, 212);">
<!--                            <td ng-click="ped.CHK = (ped.CHK == true) ? false : true; vm.forApply(ped.FILTERED,'CHK',ped.CHK)">
                                <i style="font-size: 17px;" class="check fa" ng-class="ped.CHK == true ? 'fa-check-square-o' : 'fa-square-o'"></i>
                            </td>                            -->
                            <td colspan="6">Pedido: @{{ ped.PEDIDO }}</td>
                        </tr>
                        <tr 
                            tabindex="0"
                            ng-repeat="item in ped.FILTERED = (ped.ITENS | find: { model: vm.PedidoItem.MODEL_FILTRO, fields : 'all' } | orderBy : vm.PedidoItem.MODEL_ORDER_BY)"
                            ng-focus="vm.PedidoItem.SELECTED = item"
                            ng-class="{'selected' : vm.PedidoItem.SELECTED == item}"
                            ng-keydown="$event.key == ' ' && (item.CHK = item.CHK == true ? false : true); $event.key == ' ' && $event.preventDefault();"
                            >
<!--                            <td ng-click="item.CHK = item.CHK == true ? false : true">
                                <i style="font-size: 17px;" class="check fa" ng-class="item.CHK == true ? 'fa-check-square-o' : 'fa-square-o'"></i>
                            </td>-->
                            <td class="text-center">@{{ item.SEQUENCIA }}</td>
                            <td>@{{ item.LINHA_ID | lpad : [3,0] }} - @{{ item.LINHA_DESCRICAO }}</td>
                            <td>@{{ item.COR_ID | lpad : [4,0] }} - @{{ item.COR_DESCRICAO }}</td>
                            
                            <td>@{{ item.TAMANHO_DESCRICAO }}</td>
<!--                            <td class="text-center">@{{ vm.moment(ped.NFS_DATA_EMISSAO).format('DD/MM/YY') }}</td>-->
<!--                            <td>@{{ item.EMPRESA_ID | lpad : [4,0] }} - @{{ item.EMPRESA_RAZAOSOCIAL }}</td> -->
                            <td class="text-right">@{{ item.QUANTIDADE | number: 0 }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE_SALDO | number: 0 }}</td>
                        </tr>
                        <tr ng-repeat-end ng-if="false"></tr>
                    </tbody>
                </table>
            </div>            
        </fieldset>
    </div>
    
    @include('logistica._14030.modal-composicao')
    @include('logistica._14030.modal-etiqueta')
    
</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/direct-print.js') }}"></script>
    <script src="{{ elixir('assets/js/_14030.js') }}"></script>
@append