@extends('helper.include.view.modal', ['id' => 'modal-taloes', 'class_size' => 'modal-big'])

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

@section('modal-header-left')

<h4 class="modal-title">
	<span ng-if="!vm.Remessa2.ALTERANDO">{{ Lang::get('ppcp/_22600.titulo3-exibir') }}</span>
	<span ng-if="vm.Remessa2.INCLUINDO">{{ Lang::get('ppcp/_22600.titulo3-incluir') }}</span>
    <span ng-if="vm.Remessa2.ALTERANDO == true && vm.Remessa2.INCLUINDO == false">{{ Lang::get('ppcp/_22600.titulo3-alterar') }}</span>
    
    <span>(@{{ vm.Remessa2.SELECTED.FDATA }} - @{{ vm.Remessa2.SELECTED.FDATA_FIM }})</span>
</h4>

@overwrite

@section('modal-header-right')

    <div  ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS > 0" class="form-group" id="formGroupFator2" style="display: inline-block;">
        <div class="input-group" style="display: flex;">
            <select style="width: 100px;" ng-model="vm.TIPO_PRINT_TESTE">
                <option ng-value="'1'">App</option>
                <option ng-value="'0'">Web</option>
            </select>
        </div>
    </div>

    <button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS > 0" ng-click="vm.ImprimirTaloes(vm.itens[0])" type="button" class="btn btn-warning" >
        <span class="glyphicon glyphicon-print"></span> 
        Imprimir
    </button>

    <button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS > 0" ng-click="vm.Remessa2.excluirTaloes(1)" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
    
    <button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS > 0" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Remessa2.cancelar2()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

    <button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS == 0"  ng-disabled="vm.Remessa2.ALTERANDO" ng-click="vm.Remessa2.processarAutomatico()" type="button" class="btn btn-warning btn-inline btn-distribuir-auto" data-hotkey="alt+l">
        <span class="glyphicon glyphicon-flash"></span> Processar Automaticamente 
    </button>
    
	<button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS == 0"  ng-disabled="vm.Remessa2.ALTERANDO || !vm.Remessa2.TALOES_PROGRAMADOS" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.Remessa2.SELECTED.TALOES_GERADOS == 0"  ng-click="vm.Remessa2.cancelar2()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 200px); margin-top: -15px; margin-left: -5px; margin-right: -5px;">

    <div style="width: 100%; display: flex;">
        <div style="width: 44%; display: inline-block;">
            <fieldset  style="margin-bottom: 0px;">
                <legend style="margin-bottom: 5px;">Talões Acumulados</legend>
                <div style="width: 100%; display: inline-block;" class="tabela_secundaria3" id="tabela_secundaria3"></div>
            </fieldset>
        </div>

        <!-- <div style="width: 34.5%; display: inline-block;">
            <fieldset  style="margin-bottom: 0px;">
                <legend style="margin-bottom: 5px;">Talões Detalhados</legend>
                <div style="width: 100%; display: inline-block;" class="tabela_secundaria4" id="tabela_secundaria4"></div>
            </fieldset>
        </div> -->

        <div style="width: 44%; display: inline-block;">
            <fieldset style="margin-bottom: 0px; display: grid;">
                <legend style="margin-bottom: 5px;">Roteiro de Produção</legend>
                <div class="row" style="display: flex;">
                    <ul id="tab_roteiro" class="nav nav-tabs" role="tablist"
                        style="overflow-y: scroll;
                               padding-right: 0;"> 
                        <li ng-repeat="resumo in vm.Remessa2.RESUMO_ROTEIRO_PRODUCAO track by $index" 
                            role="presentation" style="width: 100%"
                            class="@{{vm.Remessa2.ROTEIRO_ATIVO == resumo.KEY_ID ? 'active' : ''}} tab-detalhamento">
                            <a href="#@{{resumo.KEY_ID}}" id="tab@{{resumo.KEY_ID}}-tab" style="border-radius: 4px; display: flex; align-items: center; flex-wrap: nowrap; @{{resumo.INVALIDO ? 'color: red !important;' : ''}}" 
                                role="tab" data-toggle="tab" aria-controls="@{{resumo.KEY_ID}}" 
                                aria-expanded="@{{vm.Remessa2.ROTEIRO_ATIVO == resumo.KEY_ID ? true : false}}">
                                @{{ resumo.MODELO_DESCRICAO }}
                                <span class="btn btn-xs btn-default glyphicon glyphicon-repeat" style="cursor: pointer;" ng-click="vm.Remessa2.returnItemPadrao(resumo);" title="Restaurar Etapas Padrões"></span>
                            </a>
                        </li>
                    </ul>
                    
                    <div id="tab-content-roteiro" class="tab-content" style="height: calc(307px); width: calc(500px);">
                        <div role="tabpanel" ng-repeat="resumo in vm.Remessa2.RESUMO_ROTEIRO_PRODUCAO track by $index" 
                            class="tab-pane @{{vm.Remessa2.ROTEIRO_ATIVO == resumo.KEY_ID ? 'active in' : ''}} " id="@{{resumo.KEY_ID}}" 
                            name="" aria-labelledby="tab@{{resumo.KEY_ID}}-tab" style="height: 100%; overflow: auto;">
                            <div class="row">
                                <div class="table-ec table-scroll" style="height: calc(276px);">
                                    <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                                        <thead>
                                            <tr gc-order-by="'ORDEM'">
                                                <th class="text-left"   field="ORDEM">Ord.</th>
                                                <!-- <th class="text-left"   field="UP_ID">ID</th> -->
                                                <th class="text-left"   field="DESCRICAO">Roteiro</th>
                                                <th class="text-center" field="PRODUCAO">Prod. <span class="erro-alert-roteiro glyphicon glyphicon-alert" ng-if="resumo.ERRO_ETAPAS_PRODUCAO_INEXISTENTE == true"></span></th>
                                                <th class="text-center" field="ESTOQUE">Est. <span class="erro-alert-roteiro glyphicon glyphicon-alert" ng-if="resumo.ERRO_ETAPAS_ESTOQUE_INEXISTENTE == true"></span></th>
                                                <th class="text-center" field="OPCOES">Opções</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="item in resumo.MODELO_ROTEIRO_RENDER = ( resumo.MODELO_ROTEIRO | orderBy : 'ORDEM')" tabindex="0" id="tabela-roteiro-up-@{{item.UP_ID}}-@{{resumo.KEY_ID}}">                                                
                                                <td class="text-left" style="display: flex; align-items: center; flex-wrap: nowrap; height: 35px;">
                                                    <span>
                                                        @{{ item.ORDEM || 0 | lpad: [3,0] }}
                                                    </span>

                                                    <div style="display: initial; justify-items: center;"> <!-- style="display: inline-grid; align-content: center; align-items: center; justify-items: center;" -->
                                                        <span class="fa fa-arrow-up"   style="cursor: pointer; margin: 1px -10px 3px 15px; font-size: 10pt;" ng-click="vm.Remessa2.changeOrderRoteiro(item, 0, resumo);" ng-show="item.ORDEM > 1"></span>
                                                        <span class="fa fa-arrow-down" style="cursor: pointer; margin: 3px -10px 1px 15px; font-size: 10pt;" ng-click="vm.Remessa2.changeOrderRoteiro(item, 1, resumo);" ng-show="item.ORDEM < resumo.MODELO_ROTEIRO.length"></span>
                                                    </div>
                                                </td>
                                                <!-- <td class="text-left">
                                                    <span>
                                                        @{{ item.UP_ID }}
                                                    </span>
                                                </td> -->
                                                <td class="text-left">
                                                    <span>
                                                        @{{ item.DESCRICAO }}
                                                    </span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="glyphicon glyphicon-ok"     style="cursor: pointer; color: green;" ng-click="vm.Remessa2.changeValueItem(item, 0, 'PRODUCAO', resumo);" ng-if="item.PRODUCAO == 1"></span>
                                                    <span class="glyphicon glyphicon-remove" style="cursor: pointer; color: red;"   ng-click="vm.Remessa2.changeValueItem(item, 1, 'PRODUCAO', resumo);" ng-if="item.PRODUCAO == 0"></span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="glyphicon glyphicon-ok"     style="cursor: pointer; color: green;" ng-click="vm.Remessa2.changeValueItem(item, 0, 'ESTOQUE', resumo);" ng-if="item.ESTOQUE == 1"></span>
                                                    <span class="glyphicon glyphicon-remove" style="cursor: pointer; color: red;"   ng-click="vm.Remessa2.changeValueItem(item, 1, 'ESTOQUE', resumo);" ng-if="item.ESTOQUE == 0"></span>
                                                </td>
                                                <td class="text-center">
                                                    <button 
                                                        type="button" 
                                                        class="btn btn-sm btn-danger" 
                                                        ng-click="vm.Remessa2.excluirItemRoteiro(item, resumo);" 
                                                        ng-disabled="vm.Remessa2.SELECTED.TALOES_GERADOS > 0">
                                                        <span class="glyphicon glyphicon-trash"></span>
                                                    </button>
                                                </td>
                                            </tr>
                                            <tr tabindex="0" id="tabela-roteiro-up-999999999-@{{resumo.KEY_ID}}">
                                                <td class="text-right" colspan="5">

                                                    <button 
                                                        type="button" 
                                                        class="btn btn-sm btn-primary" 
                                                        ng-click="vm.Remessa2.incluirItemRoteiro(resumo);" 
                                                        ng-disabled="vm.Remessa2.SELECTED.TALOES_GERADOS > 0">
                                                        <span class="glyphicon glyphicon-plus"></span>
                                                    </button>

                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    
    <div class="tempo-disponivel gp" style="width: 100%;">
        <button style="margin-top: -10px; height: 22px;" ng-if="vm.Remessa2.PROGRAMADOS.length > 0" type="button" class="btn btn-xs btn-danger" title="Talões programados de outras remessas" ng-click="vm.Remessa2.abrirProgramado(0);">
            <span class="glyphicon glyphicon-list-alt"></span>
        </button>

        <div style="display: inline-block; width: calc(100% - 32px); height: 17px;" class="tempo-barra-progresso-container" title="@{{ vm.Remessa2.MINUTOS_PROGRAMADOS | number : 0 }}' / @{{ vm.Remessa2.MINUTOS_DISPONIVEIS | number : 0 }}">
            <span class="tempo-barra-progresso" style="width: @{{ 100 - ((vm.Remessa2.MINUTOS_PROGRAMADOS / vm.Remessa2.MINUTOS_DISPONIVEIS) * 100) }}%"></span>
            <span class="tempo-alocado">@{{ vm.Remessa2.MINUTOS_PROGRAMADOS | number : 2 }}' / @{{((vm.Remessa2.MINUTOS_PROGRAMADOS / vm.Remessa2.MINUTOS_DISPONIVEIS) * 100)  | number : 2 }}%</span>
        </div>
    </div>

    <div style="width: 100%; margin-top: 28px;" class="up-container">
        <div class="up-bloco" ng-repeat="up in vm.Remessa2.ESTACOES | orderBy : 'UP_DESCRICAO'">
            <label>UP: @{{up.UP_DES}}</label>
            <div class="estacao-container">

                <div class="estacao-bloco">
                    <div class="acoes-ordenar-estacao">
                        <button type="button" class="btn btn-xs btn-danger"  title="Remover Todos os talões" ng-disabled="up.TALOES.length == 0 || vm.Remessa2.SELECTED.TALOES_GERADOS > 0" ng-click="vm.Remessa2.limparUP(up);">
                            <span class="glyphicon glyphicon-ban-circle"></span>
                        </button>

                        <button ng-if="up.PROGRAMADO.length > 0" type="button" class="btn btn-xs btn-danger" title="Talões programados de outras remessas" ng-click="vm.Remessa2.abrirProgramado(up);">
                            <span class="glyphicon glyphicon-list-alt"></span>
                        </button>
                    </div>
                    
                    <div class="estacao-header-text" title="Perfil: @{{up.PERFIL_SKU_LIST}} | @{{up.PERFIL_SKU_LIST2}}">
                        <label class="estacao-perfil">Perfil: 
                            <span>
                                <span ng-repeat="(key, perfil) in up.PERFIL_SKU"  style="color:red;   font-weight:bold;">@{{perfil}} @{{ key < (up.PERFIL_SKU.length  - 1) ? ', ' : '' }}</span>
                                <span ng-repeat="(key, perfil) in up.PERFIL_SKU2" style="color:black; font-weight:bold;">@{{perfil}} @{{ key < (up.PERFIL_SKU2.length - 1) ? ', ' : '' }}</span>
                            </span>
                        </label>
                    </div>
                    
                    <div class="acoes-estacao">

                        <span
                            ng-class="{'sem-tempo' : up.TEMPO == 0}"
                            class="glyphicon glyphicon-info-sign"
                            data-toggle="popover"
                            data-placement="bottom" 
                            data-element-content="#info-up-@{{up.UP_ID}}" 
                            data-original-title="Tempo"></span>
                        
                        <div id="info-up-@{{up.UP_ID}}" style="display: none">
                            <div class="origem-container">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th style="text-align: right;">Tempo disponível</th>
                                            <th style="text-align: right;">Colaboradores</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td style="text-align: right; word-break: break-word; min-width: 100px;">@{{up.TEMPO | number:0}} MIN</td>
                                            <td style="text-align: right; word-break: break-word; min-width: 100px;">@{{up.COLABORADORES | number:0}}</td>
                                        </tr>
                                    </tbody>
                                </table> 
                            </div>
                        </div>
    
                        <button type="button" class="btn btn-xs btn-primary btn-incluir-consumo" title="Incluir Talões Acumulados." ng-disabled="vm.Remessa2.TALOES.SELECTED.ADD == true || vm.Remessa2.SELECTED.TALOES_GERADOS > 0" ng-click="vm.Remessa2.addTalao(up)">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <button type="button" class="btn btn-xs btn-danger btn-excluir-consumo"  title="Excluir Talões Acumulados." ng-disabled="vm.Remessa2.validarRemover(up) || vm.Remessa2.SELECTED.TALOES_GERADOS > 0" ng-click="vm.Remessa2.remTalao(up)">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </div>

                    <div id="DataTables_Table_5_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6"></div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="dataTables_scroll">
                                    <div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
                                        <div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 426px; padding-right: 10px;">
                                            <table class="table table-striped table-bordered table-hover estacao dataTable no-footer" data-estacao="0" role="grid" style="margin-left: 0px; width: 426px;">
                                                <thead>
                                                    <tr role="row">
                                                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 14px;"></th>
                                                        <!--
                                                        <th class="text-right densidade sorting_disabled" rowspan="1" colspan="1" style="width: 28px;">Dens.</th>
                                                        <th class="text-right espessura sorting_disabled" rowspan="1" colspan="1" style="width: 33px;">Esp.</th>
                                                        -->
                                                        <th class="modelo sorting_disabled" rowspan="1" colspan="1" style="width: 110px;">Modelo</th>
                                                        <th class="cor sorting_disabled" rowspan="1" colspan="1" style="width: 89px;">Cor</th>
                                                        <th class="text-right tamanho sorting_disabled" rowspan="1" colspan="1" style="width: 34px;">Tam.</th>
                                                        <th class="text-right qtd-prog sorting_disabled" rowspan="1" colspan="1" style="width: 67px;">Qtd. Prog.</th>
                                                        <th class="text-right tempo sorting_disabled" rowspan="1" colspan="1" style="width: 0px;">Tempo</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; height: 150px;">
                                        <table class="table table-striped table-bordered table-hover estacao dataTable no-footer" data-estacao="0" id="DataTables_Table_5" role="grid" style="width: 426px;">
                                            <thead>
                                                <tr role="row" style="height: 0px;">
                                                    <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 14px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;"></div>
                                                    </th>
                                                    <!--
                                                    <th class="text-right densidade sorting_disabled" rowspan="1" colspan="1" style="width: 28px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Dens.</div>
                                                    </th>
                                                    <th class="text-right espessura sorting_disabled" rowspan="1" colspan="1" style="width: 33px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Esp.</div>
                                                    </th>
                                                    -->
                                                    <th class="modelo sorting_disabled" rowspan="1" colspan="1" style="width: 110px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Modelo</div>
                                                    </th>
                                                    <th class="cor sorting_disabled" rowspan="1" colspan="1" style="width: 89px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Cor</div>
                                                    </th>
                                                    <th class="text-right tamanho sorting_disabled" rowspan="1" colspan="1" style="width: 34px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Tam.</div>
                                                    </th>
                                                    <th class="text-right qtd-prog sorting_disabled" rowspan="1" colspan="1" style="width: 67px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Qtd. Prog.</div>
                                                    </th>
                                                    <th class="text-right tempo sorting_disabled" rowspan="1" colspan="1" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;">
                                                        <div class="dataTables_sizing" style="height:0;overflow:hidden;">Tempo</div>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                
                                                <tr class="odd talao-@{{up.UP_ID}}-@{{$index}}" ng-repeat="talao in up.TALOES track by $index" tabindex="0" 
                                                    ng-keydown="vm.Remessa2.keypressEvent(up, talao, $event)"
                                                    ng-focus="up.SELECTED = talao"
                                                    ng-class="{ 'selected' : up.TALOES.SELECTED == talao }">
                                                    <td class="text-right ">@{{talao.CONTROLE}}</td>
                                                    <!--<td class="text-right densidade">@{{talao.DENSIDADE | number:2}}</td>
                                                        <td class="text-right espessura">@{{talao.ESPESSURA | number:2}}</td>-->
                                                    <td class="modelo" title="@{{talao.MODELO_DESCRICAO}}">@{{talao.MODELO_DESCRICAO}}</td>
                                                    <td class="cor"  title="@{{talao.COR_DESCRICAO}}">@{{talao.COR_DESCRICAO}}</td>
                                                    <td class="text-right tamanho">@{{talao.TAMANHO_DESCRICAO}}</td>
                                                    <td class="text-right qtd-prog">@{{talao.QUANTIDADE | number: talao.MODELO.QTD_MIN == 1 ? 0 : 2 }} @{{ item.MODELO.UM || ''}}</td>
                                                </tr>

                                                <tr class="odd" ng-if="up.TALOES.length == 0">
                                                    <td valign="top" colspan="7" class="dataTables_empty">Escolha Talões Acumulados</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-5"></div>
                            <div class="col-sm-7"></div>
                        </div>
                    </div>

                    <div class="tempo-disponivel gp" style="display: inline-flex;">
                        <div class="tempo-barra-progresso-container" title="@{{ up.MINUTOS_PROGRAMADOS | number : 0 }}' / @{{ up.MINUTOS_DISPONIVEIS | number : 0 }}">
                            <span class="tempo-barra-progresso" style="width: @{{ 100 - ((up.MINUTOS_PROGRAMADOS / up.MINUTOS_DISPONIVEIS) * 100) }}%"></span>
                            <span class="tempo-alocado">@{{ up.MINUTOS_PROGRAMADOS | number : 2 }}' / @{{((up.MINUTOS_PROGRAMADOS / up.MINUTOS_DISPONIVEIS) * 100)  | number : 2 }}%</span>
                        </div>

                        <span ng-if="!(vm.Remessa2.SELECTED.TALOES_GERADOS > 0)" title="Mudar tempo disponível da UP" style="display: inline-flex; font-size: 16px; padding: 3px; cursor: pointer;" ng-click="vm.Remessa2.mudarTempo(up)" class="glyphicon glyphicon-time" aria-hidden="true"></span>

                    </div>

                </div>

            </div>
        </div>
        
    </div>
        
</div>
</form>

@overwrite