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

@section('modal-header-left')

	<h4 class="modal-title">
        Registro de Produção Manual
	</h4>

@overwrite

@section('modal-header-right')

    <button 
        ng-if="vm.Registro.OPERADOR != undefined && vm.Registro.OPERADOR.OPERADOR_ID > 0"
        type="button" 
        class="btn btn-warning" 
        data-hotkey="f8"
        ng-click="vm.Registro.logofOperador()">
        <span class="fa fa-sign-out"></span> LogOff (@{{vm.Registro.OPERADOR.TEMPO}}s)
    </button>

    <button 
        ng-if="vm.Registro.OPERADOR == undefined || vm.Registro.OPERADOR.OPERADOR_ID == 0"
        type="button" 
        class="btn btn-warning" 
        data-hotkey="f8"
        ng-click="vm.Registro.loginOperador()">
        <span class="glyphicon glyphicon-user"></span> Login Operador
    </button>

    <button ng-if="vm.Registro.ITENS_GRAVAR.length > 0" style="padding: 6px 12px !important;" type="button" class="btn btn-success" data-hotkey="f1" ng-click="vm.Registro.gravarProduaoManual()">
        <span class="glyphicon glyphicon-ok"></span>
        Gravar
    </button>

	<button style="padding: 6px 12px !important;" type="button" class="btn btn-default btn-voltar" ng-click="vm.Registro.fecharProducaoManual()" data-dismiss="modal" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> 
		Voltar
	</button>

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 170px);">

    <form ng-submit="vm.Registro.filtrarTaloes()" class="form-inline" style="margin-bottom: -20px;">
        <div id="filtro_main" class="table-filter" style="margin-bottom: 4px;
            background: rgba(221,221,221,.33);
            padding: 2px 10px 7px;
            border-radius: 5px;">

            <div class="form-group" style="margin-right: 0px !important;">
                <div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
                    background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
                    <select class="form-control" ng-model="vm.Registro.TIPO_DATA"
                        style="margin-right: 0px; background-color: #e2e2e2; border-radius: 4px 0px 0px 4px; height: 35px; font-weight: 600; border-top: 0px; border-left: 0px; margin-top: -1px; margin-bottom: -1px; text-transform: capitalize; width: 160px;">
                        <option style="font-weight: 600;" ng-value="'1'">Data de Emissão</option>
                        <option style="font-weight: 600;" ng-value="'2'">Período da Remessa</option>
                    </select>

                    <input type="date" style="width: 130px; margin-left: 4px; margin-top: 4px;"
                    class="form-control filter_main " ng-model="vm.Registro.DATA1" ng-atalho>
                    
                    <label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>

                    <input type="date" style="width: 130px; margin-top: 4px;" class="form-control filter_main " ng-model="vm.Registro.DATA2" ng-atalho>
                </div>
            </div>

            <div style="display: -webkit-inline-box; margin-right: -10px;" class="consulta-up-rem">     </div>
            <div style="display: -webkit-inline-box; margin-right: -10px;" class="consulta-modelo-rem"> </div>
            <div style="display: -webkit-inline-box; margin-right: -10px;" class="consulta-cor-rem">    </div>
        
            <div class="form-group">
                <label>Tamanho:</label>
                <input type="text" style="width: 60px !important;"
                    class="form-control input-maior filter_main" ng-model="vm.Registro.FILTRO_TAMANHO">
            </div>   
            
            <div class="form-group" style="padding: 5px 0px 5px 9px; border: 1px solid #cccccc; border-radius: 10px;">
                <label>Peça </label>
                <div class="form-group" style="display: inline-flex;margin-top: -18px;">                
                    <div class="form-group" ng-repeat="filtro in vm.Registro.ARRAY_SEQUENCIA">
                        <input type="checkbox" class="form-control" ng-model="filtro.HABILITADO">
                        <label style="font-weight: bolder;">@{{filtro.PECA}}</label>
                    </div>
                </div>
            </div>  
        
            <div class="form-group" style="width: calc(100% - 1150px); padding-top: 16px; min-width: 150px;">
                <input type="text" style="width: 100% !important; min-width: 120px;" placeholder="Remessa, Remessa ID, Detalhe ID"
                    class="form-control input-maior filter_main" ng-model="vm.Registro.FILTRO_DADOS">
            </div>

            <div class="form-group" style="padding-top: 16px; 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">
                    <span class="glyphicon glyphicon-filter"></span> Filtrar
                </button>
            </div>	
        </div>
	</form>

    <br>


    <ul id="tab" class="nav nav-tabs" role="tablist" style="margin-top: 5px;"> 
        <li role="presentation" ng-repeat="grupo in vm.Registro.GRUPOS track by $index" class="tab-info-geral @{{$index == 0 ? 'active' : ''}}">
            <a class="desc_item" href="#tab@{{$index+1}}container" id="tab@{{$index+1}}tab" data-hotkey="alt+@{{$index +1 }}" role="tab" data-toggle="tab" 
                aria-controls="tab@{{$index+1}}container" aria-expanded="false">
                <label class="item_desc" > @{{ grupo.ETAPAS.length || 0 }} Etapas </label>
            </a>
        </li>
        <!-- <li role="presentation" class="tab-info-geral active">
            <a class="desc_item" href="#tab1container" id="tab1tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1container" aria-expanded="false">
                <label class="item_desc" > @{{ vm.Registro.GRUPOS[0].ETAPAS.length || 0 }} Etapas </label>
            </a>
        </li>
        <li role="presentation" class="tab-info-geral"  ng-show="vm.Registro.GRUPOS[1].ETAPAS.length > 0">
            <a class="desc_item" href="#tab2container" id="tab2tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2container" aria-expanded="false">
                <label class="item_desc" > @{{ vm.Registro.GRUPOS[1].ETAPAS.length }} Etapas </label>
            </a>
        </li>
        <li role="presentation" class="tab-info-geral"  ng-show="vm.Registro.GRUPOS[2].ETAPAS.length > 0">
            <a class="desc_item" href="#tab3container" id="tab3tab" data-hotkey="alt+3" role="tab" data-toggle="tab" aria-controls="tab3container" aria-expanded="false">
                <label class="item_desc" > @{{ vm.Registro.GRUPOS[2].ETAPAS.length }} Etapas </label>
            </a>
        </li>
        <li role="presentation" class="tab-info-geral"  ng-show="vm.Registro.GRUPOS[3].ETAPAS.length > 0">
            <a class="desc_item" href="#tab4container" id="tab4tab" data-hotkey="alt+4" role="tab" data-toggle="tab" aria-controls="tab4container" aria-expanded="false">
                <label class="item_desc" > @{{ vm.Registro.GRUPOS[3].ETAPAS.length }} Etapas </label>
            </a>
        </li>
        <li role="presentation" class="tab-info-geral"  ng-show="vm.Registro.GRUPOS[4].ETAPAS.length > 0">
            <a class="desc_item" href="#tab5container" id="tab5tab" data-hotkey="alt+5" role="tab" data-toggle="tab" aria-controls="tab5container" aria-expanded="false">
                <label class="item_desc" > @{{ vm.Registro.GRUPOS[4].ETAPAS.length }} Etapas </label>
            </a>
        </li> -->

        <div class="form-group" style="display: inline-flex;
                float: right;
                margin-bottom: 1px;
                background-color: #f4f4f4;
                padding: 3px;
                padding-top: 0px;
                border-radius: 5px;
                border: 1px solid #cccccc;
                margin-right: 5px;">
            <input
                type="checkbox"
                class="item_registros_editar"
                name="item_registros_editar"
                id="item_registros_editar"
                ng-checked="vm.Registro.REGISTROS_ALTERAR == '1'"
                ng-true-value="'1'"
                ng-false-value="'0'"
                ng-click="vm.Registro.REGISTROS_ALTERAR = (vm.Registro.REGISTROS_ALTERAR == '1') ? '0' : '1'; vm.Registro.MontarTabelas();">
            <label for="item_registros_editar" style="margin-top: 3px; margin-left: 5px;">Ver registros não produzíveis</label>
        </div>        

        <div class="form-group" style="display: inline-flex;
                float: right;
                margin-bottom: 1px;
                background-color: #f4f4f4;
                padding: 3px;
                padding-top: 0px;
                border-radius: 5px;
                border: 1px solid #cccccc;">
            <input
                type="checkbox"
                class="item_registros_editar"
                name="item_registros_editar"
                id="item_registros_conjunto"
                ng-checked="vm.Registro.REGISTRAR_OUTRAS_PECAS == '1'"
                ng-true-value="'1'"
                ng-false-value="'0'"
                ng-click="vm.Registro.REGISTRAR_OUTRAS_PECAS = (vm.Registro.REGISTRAR_OUTRAS_PECAS == '1') ? '0' : '1'; vm.Registro.MontarTabelas();">
            <label for="item_registros_conjunto" style="margin-top: 3px; margin-left: 5px;">Registrar Todos os Talões do mesmo Conjunto/Kit</label>
        </div>        

    </ul>
    
    <div id="tab-content" class="tab-content"  style="height: calc(100% - 180px);">
        
        <!-- @include('ppcp._22610.index.tabela',['index' => 0])
        @include('ppcp._22610.index.tabela',['index' => 1])
        @include('ppcp._22610.index.tabela',['index' => 2])
        @include('ppcp._22610.index.tabela',['index' => 3])
        @include('ppcp._22610.index.tabela',['index' => 4]) -->
        <div role="tabpanel" ng-repeat="grupo in vm.Registro.GRUPOS track by $index" class="tab-pane @{{$index == 0 ? 'active' : ''}}" id="tab@{{$index+1}}container" name="" aria-labelledby="tab@{{$index+1}}tab" style="height: 100%; overflow:auto;">
            <div class="table-ec table-scroll" style="height: calc(100vh - 450px); min-height: 300px;"> 
                
                <div ng-repeat="iten in grupo.ITENS">           
                        <div ng-if="iten.ALTERAVEL = '1'" ng-repeat="etps in iten.ETAPAS">
                            <div ng-if="etps.PERMICAO == 0 || (etps.PERMICAO == 2 && vm.Registro.OPERADOR.UPS.includes(etps.SETOR_ID))">
                                
                            </div>
                        </div>                
                </div>

                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr>                   
                            <th style="width: 26px; padding: 4px; background: white; border: 1px solid white;">
                                <span title="Ações disponíveis" class="glyphicon glyphicon-cog" style="font-size: 14pt;"></span>
                            </th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                            <th style="background: white; border: 1px solid white;"></th>
                        
                            <th style="max-width: 60px; text-align: center; background: white; border: 1px solid white;" ng-repeat="etapa in grupo.ETAPAS">                         
                                <button title="Marcar todos" type="button" class="btn btn-primary" ng-click="vm.Registro.marcarTodos(grupo, etapa.CODIGO)" 
                                    style="width: 20px; height: 25px;" ng-if="vm.Registro.ativarMarcarTodos(grupo, etapa.CODIGO)">
                                    <span class="glyphicon glyphicon-ok" style="position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);"></span>
                                </button>
                                <button title="Desmarcar todos" type="button" class="btn btn-danger" ng-click="vm.Registro.desmarcarTodos(grupo, etapa.CODIGO)"
                                    style="width: 20px; height: 25px;" ng-if="vm.Registro.ativarMarcarTodos(grupo, etapa.CODIGO)">
                                    <span class="glyphicon glyphicon-remove" style="position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);"></span>
                                </button>
                            </th>
                        </tr>

                        <tr>                   
                            <th class="tabela_cl" style="width: 26px; padding: 4px;">
                                <span title="Ações disponíveis" class="glyphicon glyphicon-cog" style="font-size: 14pt;"></span>
                            </th>
                            <th class="tabela_cl">Remessa</th>
                            <th class="tabela_cl">Talão</th>
                            <th class="tabela_cl">Conjunto</th>
                            <th class="tabela_cl">Modelo</th>
                            <th class="tabela_cl">Cor</th>
                            <th class="tabela_cl">Tamanho</th>
                            <th class="tabela_cl" style="text-align: right">Quantidade</th>
                        
                            <th class="tabela_cl" style="max-width: 60px; text-align: center;" ng-repeat="etapa in grupo.ETAPAS">
                                @{{etapa.DESCRICAO_RESUMIDA}}                        
                            </th>
                        </tr>

                    </thead>
                    <tbody vs-repeat="" vs-scroll-parent=".table-ec">
                        <tr ng-repeat="item in grupo.ITENS"
                            ng-focus="vm.SELECTED2 = item"
                            ng-class="{ 'selected' : vm.SELECTED2 == item }"
                            tabindex="0"
                            >
                            <td>
                                <span ng-if="item.ALTERADO == true" class="t-status status-1"></span>
                                <span ng-if="item.ALTERADO != true" class="t-status status-0"></span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.REMESSA }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.CONTROLE }} / @{{ item.TALAO_DETALHE_ID }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.PECA_CONJUNTO_ID }} / @{{ item.PECA_CONJUNTO_SEQ }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.MODELO }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.COR }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.TAMANHO_DESCRICAO }}
                                </span>
                            </td>                                 
                            <td style="text-align: right">
                                <span>
                                    @{{ item.QUANTIDADE_PEDIDO | number : 2 }}
                                </span>
                            </td>                                 
                                            
                            <th ng-repeat="etapa in item.ETAPAS" style="max-width: 54px;">                                       

                                <div ng-if="etapa.PERMICAO == 0 || (etapa.PERMICAO == 2 && vm.Registro.OPERADOR.UPS.includes(etapa.SETOR_ID))" ng-click="etapa.SITUACAO_ORIGINAL == 1 ? '' : vm.Registro.mudarSituacao(item, etapa);" style="text-align: center; cursor: pointer;">
                                    <span ng-if="etapa.SITUACAO_ORIGINAL == 0 && etapa.SITUACAO == 1" style="text-align: center;
                                                padding: 4px;
                                                padding-bottom: 8px;
                                                cursor: pointer;
                                                color: @{{ etapa.ETAPA.PROX_REGISTRA_OFICINA == 1 ? '#673AB7' : 'green' }};"
                                    class="glyphicon glyphicon-ok"></span>

                                    <span ng-if="etapa.SITUACAO_ORIGINAL == 0 && etapa.SITUACAO == 0" style="text-align: center;
                                                padding: 4px;
                                                padding-bottom: 8px;
                                                cursor: pointer;
                                                color: red;"
                                    class="glyphicon glyphicon-remove"></span>
                                </div>

                                <div ng-if="etapa.PERMICAO == 2 && !vm.Registro.OPERADOR.UPS.includes(etapa.SETOR_ID)" style="text-align: center;">
                                    <span ng-if="etapa.SITUACAO_ORIGINAL == 0" style="text-align: center;
                                                padding: 4px;
                                                padding-bottom: 8px;
                                                color: red;"
                                    class="glyphicon glyphicon-ban-circle"></span>
                                </div>

                                <div ng-if="etapa.SITUACAO_ORIGINAL == 1" style="text-align: center;">
                                    <span style="text-align: center;
                                                padding: 4px;
                                                padding-bottom: 8px;
                                                color: blue;"
                                    class="glyphicon glyphicon-asterisk"></span>
                                </div>

                                <div ng-if="etapa.PERMICAO == 1 && etapa.SITUACAO_ORIGINAL == 0" style="text-align: center;">
                                    <span style="text-align: center;
                                                padding: 4px;
                                                padding-bottom: 8px;
                                                color: blue;"
                                    class="glyphicon glyphicon-tags"></span>
                                </div>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div ng-if="grupo.ITENS.length > 0" style="display: inline-block;">
                <div class="tag-tab" style="padding: 3px;"><span><strong>Qtd. de Registros:</strong> <span ng-bind="grupo.ITENS.length"></span></span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: green;" class="glyphicon glyphicon-ok"          ></span><span>Registrar Produção</span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: #673AB7;" class="glyphicon glyphicon-ok"        ></span><span>Registrar Produção + Oficina</span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: red;"   class="glyphicon glyphicon-remove"      ></span><span>NÃO Registrar Produção</span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: blue;"  class="glyphicon glyphicon-asterisk"    ></span><span>Produzido</span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: blue;"  class="glyphicon glyphicon-tags"        ></span><span>Conferência de Peças</span></div>
                <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: red;"   class="glyphicon glyphicon-ban-circle"  ></span><span>Operador sem Permissão/Não Logado</span></div>
            </div>

        </div>
    </div>
   
</div>
@overwrite