@extends('helper.include.view.modal', ['id' => 'modal-consulta-producao','fade'=>false, 'class_size'=>'modal-lg'])

@section('modal-start')
    <form class="form-inline" ng-submit="vm.Registro.confirmar()">
@overwrite

@section('modal-header-left')

	<h4 class="modal-title">
		Consulta Produção Personalizada
	</h4>

@overwrite

@section('modal-header-right')
	<button type="button" class="btn btn-default btn-voltar" data-dismiss="modal" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> 
		Voltar
	</button>
@overwrite

@section('modal-body')

<div class="form-group" ng-if="vm.ConsultaProducao.ARGS.GP_ID > 0">
    <label>UP:</label>      
    <input 
        type="text" 
        class="form-control" 
        form-validate="true" 
        readonly
        style="font-size: 20px;font-weight: bold;width: 250px !important;" 
        value="@{{ vm.ConsultaProducao.ARGS.GP_DESCRICAO }}"
    />  
</div>

<div class="form-group">
    <label>Período:</label>
    <input 
        type="text" 
        class="form-control text-center normal-case" 
        value="@{{ vm.ConsultaProducao.ARGS.DATA_DESCRICAO }}" 
        readonly 
        style="
            font-size: 20px;
            font-weight: bold;
            width: 430px !important;
        "           
        />
</div>

<div ng-init="vm.ConsultaProducao.LABELS = [];vm.ConsultaProducao.LABELS_TYPE = {}" style="background: rgb(232, 232, 232);border-radius: 7px;    padding: 5px 5px 3px 5px;margin-bottom: 5px;">
    <div ng-repeat="item in vm.ConsultaProducao.LABELS" style="display: inline-block;padding-right: 5px;padding: 2px 8px;background: rgb(84, 84, 84);border-radius: 15px;color: white;margin: 0 2px 2px 0;"> 
        <span>@{{ item.LABEL }}: </span>
        <span>@{{ item.DESCRICAO }}</span>
        <div ng-click="vm.ConsultaProducao.labelSplice(item)" style="cursor: pointer; display: inline-block;background: rgb(222, 9, 9);border-radius: 15px;padding: 0px 5px;margin-right: -6px; font-weight: bold">x</div>            
    </div>
    <button type="button" ng-click="vm.ConsultaProducao.labelFilter()" class="btn btn-warning btn-xs" ng-if="vm.ConsultaProducao.LABELS.length > 0" ng-class="{'btn-warning': vm.ConsultaProducao.LABELS_CHANGED,'btn-success': !vm.ConsultaProducao.LABELS_CHANGED}" style="height: 25px;">Filtrar</button>
    <div ng-if="vm.ConsultaProducao.LABELS.length == 0" style="font-weight: bold;font-size: 12px;text-align: center;color: red;">Duplo click no item para adicionar-lo ao filtro personalizado</div>
</div>

<div>
    <ul class="nav nav-tabs">
        <li ng-if="!(vm.ConsultaProducao.ARGS.GP_ID > 0)">
            <a data-toggle="tab" href="#tab-consulta-producao-gp">UP's</a>
        </li>
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-remessa">Remessas</a>
        </li>
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-linha">Linhas</a>
        </li>
        <li class="active">
            <a data-toggle="tab" href="#tab-consulta-producao-modelo">Modelos</a>
        </li>                    
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-cor">Cores</a>
        </li>                    
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-tamanho">Tamanhos</a>
        </li>                    
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-defeito">Defeitos</a>
        </li>                   
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-geral">Geral</a>
        </li>                    
        <li>
            <a data-toggle="tab" href="#tab-consulta-producao-geral-talao">Talões</a>
        </li>                    
    </ul>    
    <div class="tab-content" style="height: calc(100vh - 290px);">
        <div id="tab-consulta-producao-gp" class="tab-pane  in" ng-if="!(vm.ConsultaProducao.ARGS.GP_ID > 0)">
            
            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.GP_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.GP_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.GP_MODEL_ORDER_BY">
                            <th field="GP_DESCRICAO">UP</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.ConsultaProducao.AGP_GP | find: { model : vm.ConsultaProducao.GP_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.GP_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'UP',CAMPO:'GP_ID',DESCRICAO:item.GP_DESCRICAO,VALOR:item.GP_ID})">
                            <td title="Id: @{{ item.GP_ID }}">@{{ item.GP_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_GP) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
        </div>
        <div id="tab-consulta-producao-geral" class="tab-pane in">
            
            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.GERAL_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.GERAL_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.GERAL_MODEL_ORDER_BY">
                            <th field="REMESSA">Remessa</th>
                            <th field="REMESSA_DATA">Data da Remessa</th>
                            <th field="MODELO_DESCRICAO">Modelo</th>
                            <th field="COR_DESCRICAO">Cor</th>
                            <th field="TAMANHO_DESCRICAO">Tamanho</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Remessa',CAMPO:'REMESSA_ID',DESCRICAO:item.REMESSA_ID,VALOR:item.REMESSA_ID})" -->

                        <tr 
                            ng-repeat="item in vm.ConsultaProducao.AGP_GERAL | find: { model : vm.ConsultaProducao.GERAL_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.GERAL_MODEL_ORDER_BY">
                            <td>@{{ item.REMESSA }}</td>
                            <td>@{{ item.FREMESSA_DATA }}</td>
                            <td>@{{ (item.MODELO_ID+'').padStart(7,'0') }} - @{{ item.MODELO_DESCRICAO }}</td>
                            <td>@{{ (item.COR_ID   +'').padStart(4,'0') }} - @{{ item.COR_DESCRICAO }}</td>
                            <td>@{{ item.TAMANHO_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5">Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_GERAL) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>            
            
            
        </div>
        <div id="tab-consulta-producao-geral-talao" class="tab-pane">
            
            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.GERAL_MODEL_FILTRO_TALAO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.GERAL_MODEL_TALAO_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.GERAL_MODEL_TALAO_ORDER_BY">
                            <th field="REMESSA">Remessa</th>
                            <th field="TALAO_ID">Talão</th>
                            <th field="MODELO_DESCRICAO">Modelo</th>
                            <th field="COR_DESCRICAO">Cor</th>
                            <th field="TAMANHO_DESCRICAO">Tamanho</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Remessa',CAMPO:'REMESSA_ID',DESCRICAO:item.REMESSA_ID,VALOR:item.REMESSA_ID})" -->

                        <tr 
                            ng-repeat="item in vm.ConsultaProducao.AGP_GERAL_TALAO | find: { model : vm.ConsultaProducao.GERAL_MODEL_FILTRO_TALAO, fields : 'all' } | orderBy : vm.ConsultaProducao.GERAL_MODEL_TALAO_ORDER_BY">
                            <td>@{{ item.REMESSA }}</td>
                            <td>@{{ item.TALAO_ID }}</td>
                            <td>@{{ (item.MODELO_ID+'').padStart(7,'0') }} - @{{ item.MODELO_DESCRICAO }}</td>
                            <td>@{{ (item.COR_ID   +'').padStart(4,'0') }} - @{{ item.COR_DESCRICAO }}</td>
                            <td>@{{ item.TAMANHO_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5">Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_GERAL_TALAO) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>            
            
            
        </div>

        <div id="tab-consulta-producao-remessa" class="tab-pane  in">
            
            
            
            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.REMESSA_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.REMESSA_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.REMESSA_MODEL_ORDER_BY">
                            <th field="REMESSA">Remessa</th>
                            <th field="REMESSA_DESCRICAO">Data</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            
                            ng-repeat="item in vm.ConsultaProducao.AGP_REMESSA | find: { model : vm.ConsultaProducao.REMESSA_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.REMESSA_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Remessa',CAMPO:'REMESSA_ID',DESCRICAO:item.REMESSA,VALOR:item.REMESSA_ID})">
                            <td>@{{ item.REMESSA }}</td>
                            <td>@{{ vm.moment(item.REMESSA_DATA).format('DD/MM/YY') }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2">Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_REMESSA) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>            
            
            
        </div>
        <div id="tab-consulta-producao-linha" class="tab-pane  in">
            
            
            

            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.LINHA_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.LINHA_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.LINHA_MODEL_ORDER_BY">
                            <th field="LINHA_DESCRICAO">Linha</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            
                            ng-repeat="item in vm.ConsultaProducao.AGP_LINHA | find: { model : vm.ConsultaProducao.LINHA_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.LINHA_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Linha',CAMPO:'LINHA_ID',DESCRICAO:item.LINHA_DESCRICAO,VALOR:item.LINHA_ID})">
                            <td title="Id: @{{ item.LINHA_ID }}">@{{ item.LINHA_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_LINHA) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>               
            
            
        </div>
        <div id="tab-consulta-producao-modelo" class="tab-pane  in active">
            
            


            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.MODELO_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.MODELO_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.MODELO_MODEL_ORDER_BY">
                            <th field="MODELO_DESCRICAO">Modelo</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            
                            ng-repeat="item in vm.ConsultaProducao.AGP_MODELO | find: { model : vm.ConsultaProducao.MODELO_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.MODELO_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Modelo',CAMPO:'MODELO_ID',DESCRICAO:item.MODELO_DESCRICAO,VALOR:item.MODELO_ID})">
                            <!-- <td title="Id: @{{ item.MODELO_ID }}">@{{ item.MODELO_DESCRICAO }}</td> -->
                            <td>@{{ (item.MODELO_ID+'').padStart(6,'0') }} - @{{ item.MODELO_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_MODELO) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>                 
            
            
            
        </div>
        <div id="tab-consulta-producao-cor" class="tab-pane  in">
            
            
            


            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.COR_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.COR_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.COR_MODEL_ORDER_BY">
                            <th field="COR_DESCRICAO">Cor</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            
                            ng-repeat="item in vm.ConsultaProducao.AGP_COR | find: { model : vm.ConsultaProducao.COR_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.COR_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Cor',CAMPO:'COR_ID',DESCRICAO:item.COR_DESCRICAO,VALOR:item.COR_ID})">
                            <td title="Id: @{{ item.COR_ID }}">@{{ item.COR_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_COR) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>                 
                  
            
            
            
        </div>
        <div id="tab-consulta-producao-tamanho" class="tab-pane  in">
            

            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.TAMANHO_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.TAMANHO_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.TAMANHO_MODEL_ORDER_BY">
                            <th field="TAMANHO_DESCRICAO">TAMANHO</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            
                            ng-repeat="item in vm.ConsultaProducao.AGP_TAMANHO | find: { model : vm.ConsultaProducao.TAMANHO_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.TAMANHO_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'TAMANHO',CAMPO:'TAMANHO',DESCRICAO:item.TAMANHO_DESCRICAO,VALOR:item.TAMANHO})">
                            <td title="Id: @{{ item.TAMANHO }}">@{{ item.TAMANHO_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_TAMANHO) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>                 
            
        </div>
        <div id="tab-consulta-producao-defeito" class="tab-pane  in">

            <div style="position: relative">
                <input type="text" class="form-control input-filter-table" ng-model="vm.ConsultaProducao.DEFEITO_MODEL_FILTRO" placeholder="Filtragem rápida..." style="width: calc(100%);margin-bottom: 5px;height: 26px;" />  
            </div>
            <div class="table-ec" style="height: calc(100% - 30px);" id="consulta-talao">
                <table class="table table-striped table-hover table-bordered table-condensed" id="consulta-talao-tbl">
                    <thead>
                        <tr 
                            ng-init="vm.ConsultaProducao.DEFEITO_MODEL_ORDER_BY = ['-QUANTIDADE']" 
                            gc-order-by="vm.ConsultaProducao.DEFEITO_MODEL_ORDER_BY">
                            <th field="DEFEITO_DESCRICAO">Defeito</th>
                            <th field="QUANTIDADE" class="text-right">Qtd.</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.ConsultaProducao.AGP_DEFEITO | find: { model : vm.ConsultaProducao.DEFEITO_MODEL_FILTRO, fields : 'all' } | orderBy : vm.ConsultaProducao.DEFEITO_MODEL_ORDER_BY"
                            ng-dblclick="vm.ConsultaProducao.labelPush({LABEL:'Defeito',CAMPO:'DEFEITO_ID',DESCRICAO:item.DEFEITO_DESCRICAO,VALOR:item.DEFEITO_ID})">
                            <td title="Id: @{{ item.DEFEITO_ID }}">@{{ item.DEFEITO_DESCRICAO }}</td>
                            <td class="text-right">@{{ item.QUANTIDADE | number : 0 }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="text-right">@{{ vm.ConsultaProducao.totalizador(vm.ConsultaProducao.AGP_DEFEITO) | number : 0 }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>                 
                              
        </div>
    </div>
</div>


@overwrite

@section('modal-end')
    </form>
@overwrite