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

@section('modal-header-left')

    <h4 class="modal-title">
        <span></span>
    </h4>

@overwrite

@section('modal-header-right')

    <button type="button" class="btn btn-info"
        ng-click="vm.Tecelagem.preDefeito('RD'+(vm.MODAL.TALAO_DETALHE_ID+'').padStart(11,'0'),1)">
        <span class="fa fa-bug"></span> Registro de Produtos Defeituosos
    </button>

    <button type="button" class="btn btn-success" id="iniciar" data-hotkey="home"
        ng-disabled="vm.MODAL.ORDEM > 0 || vm.MODAL.PROGRAMACAO_STATUS == 2 || vm.MODAL.PROGRAMACAO_STATUS == 3 || vm.MODAL.PROGRAMACAO_STATUS == 6 || vm.OPERADOR.LOGADO == false || vm.MODAL.MAQUINA.STATUS_PARADA > 0"
        ng-click="vm.Acoes.validarMatriz()">
        <span class="glyphicon glyphicon-play"></span> {{ Lang::get('master.iniciar') }}
    </button>

    <button type="button" class="btn btn-primary" id="pausar" data-hotkey="pause"
        ng-disabled="vm.MODAL.PROGRAMACAO_STATUS == 0 || vm.MODAL.PROGRAMACAO_STATUS == 1 || vm.MODAL.PROGRAMACAO_STATUS == 3 || vm.MODAL.PROGRAMACAO_STATUS == 6 || vm.OPERADOR.LOGADO == false || vm.MODAL.MAQUINA.STATUS_PARADA > 0"
        ng-click="vm.Acoes.pararTalao(vm.MODAL)">
        <span class="glyphicon glyphicon-pause"></span> {{ Lang::get('master.pausar') }}
    </button>

    <button type="button" class="btn btn-danger" id="finalizar" data-hotkey="end"
        ng-disabled="vm.MODAL.ORDEM > 0  || vm.MODAL.PROGRAMACAO_STATUS == 0 || vm.MODAL.PROGRAMACAO_STATUS == 1 || vm.MODAL.PROGRAMACAO_STATUS == 3 || vm.MODAL.PROGRAMACAO_STATUS == 6 || vm.OPERADOR.LOGADO == false || vm.MODAL.MAQUINA.STATUS_PARADA > 0"
        ng-click="vm.Acoes.finalizarTalao()">
        <span class="glyphicon glyphicon-stop"></span> {{ Lang::get('master.finalizar') }}
    </button>

    <button ng-if="!vm.Tecelagem.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar"
        ng-click="vm.Tecelagem.fecharModalTalao()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>

@overwrite

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

        <div class="row" style="margin: -10px; zoom: 0.9;">

            <button ng-click="vm.Acoes.justInefic(vm.MODAL)" type="button" class="btn btn-temp btn-warning">
                <span class="glyphicon glyphicon-tags"></span> Justificar
            </button>

            <div id="info-destaque">
                <div class="label label-warning" id="operador">
                    <span>Operador:</span>
                    <span class="valor" ng-if="vm.OPERADOR.LOGADO == true">
                        @{{ vm.OPERADOR.OPERADOR_NOME }}
                        <button ng-click="vm.Acoes.LogOff()" type="button" class="btn  btn-temp btn-warning"
                            id="finalizar">
                            <span class="glyphicon glyphicon-user"></span> logOff
                        </button>

                        <button ng-show="vm.OPERADOR.OPERADOR_ID == 2126" ng-click="vm.Acoes.getEtiqueta()" type="button"
                            class="btn btn-temp btn-warning">
                            <span class="glyphicon glyphicon-print"></span> Print
                        </button>

                    </span>
                    <span class="valor" ng-if="vm.OPERADOR.LOGADO == false">
                        <button ng-click="vm.Acoes.modalLogin()" type="button" class="btn  btn-temp btn-warning"
                            id="finalizar">
                            <span class="glyphicon glyphicon-user"></span> Login
                        </button>
                    </span>
                    <input type="hidden" name="_operador_id" id="_operador-id" autocomplete="off">
                </div>
                <div class="label label-primary" id="up-destaque">
                    <span>UP:</span>
                    <span class="valor">@{{ vm.MODAL.UP_DESCRICAO }}</span>
                </div>
                <div ng-show="vm.MODAL.PROGRAMACAO_STATUS != 2 && vm.OPERADOR.LOGADO == true && (vm.MODAL.REQUISICAO.STATUS == 3 || vm.MODAL.STATUS_REQUISICAO == 0)"
                    class="label label-danger" id="estacao-destaque">
                    <span>Programação:</span>
                    <button
                        ng-click="vm.Acoes.modalTrocaEstacao({{ fn_parametro('TBUSUARIO.REPROG_TAL_CONF', Auth::user()->CODIGO) }});"
                        type="button"
                        ng-if="vm.MODAL.PROGRAMACAO_STATUS != 2 && vm.OPERADOR.LOGADO == true && (vm.MODAL.REQUISICAO.STATUS == 3 || vm.MODAL.STATUS_REQUISICAO == 0)"
                        class="btn  btn-temp btn-danger" id="finalizar">
                        <span class="glyphicon glyphicon-random"></span> Reprogramar
                    </button>
                </div>
                <div class="label label-success" id="remessa-talao-destaque">
                    <span>Remessa / Talão / Detalhe:</span>
                    <span class="valor">
                        <a title="Clique aqui para consultar" href="{{ url('_22120') }}?remessa=@{{ vm.MODAL.REMESSA_ORIGEM }}"
                            target="_blank" class="ng-binding">@{{ vm.MODAL.REMESSA }}</a>
                        / @{{ vm.MODAL.REMESSA_TALAO_ID }} / @{{ vm.MODAL.TALAO_DETALHE_ID }}</span>
                </div>
                <div class="label label-default" id="data-destaque">
                    <span>Data Produção:</span>
                    <span class="valor">@{{ vm.MODAL.DATA_PRODUCAO }}</span>
                </div>

            </div>

            <div class="erros-talao" style="margin-top: 40px;">

                <div class="alert alert2 alert-danger " ng-if="vm.MODAL.JUSTIFICATIVA_ORIGEM.length > 0">
                    <b>@{{ vm.MODAL.JUSTIFICATIVA_ORIGEM }}</b></p>
                </div>

                <div class="alert alert2 alert-danger " ng-if="vm.MODAL.ORDEM > 0 && vm.MODAL.TALAO_ENCERRADO == 0">
                    <b>Só é possível iniciar o primeiro talão de cada estação</b></p>
                </div>

                <div class="alert alert2 alert-danger " ng-if="vm.MODAL.MAQUINA.STATUS_PARADA > 0">
                    <p ng-if="vm.MODAL.MAQUINA.STATUS_PARADA > 0"><b>Estação esta parada por @{{ vm.MODAL.MAQUINA.DESCRI_PARADA }}</b></p>
                </div>

                <div class="alert alert2 alert-danger " ng-if="vm.OPERADOR.LOGADO == false">
                    <p ng-if="vm.OPERADOR.LOGADO == false"><b>O operador não esta logado</b></p>
                </div>

                <div class="alert alert2 alert-danger " ng-if="vm.MODAL.STATUS_PARADA >  0">
                    <p><b>Talão parado por @{{ vm.MODAL.DESCRICAO_PARADA }}</b></p>
                </div>

                <div class="group-info-modal">

                    <div class="info-talao-modal" style="width: 100%;">
                        <div class="descricao">Talão</div>
                        <div>
                            <table
                                class="tabela-items-info-talao table table-striped table-bordered table-hover lista-obj">

                                <tr>
                                    <th>MODELO

                                        {{-- <button style="padding: 4px; float: right; margin-top: -6px;" type="button"
                                            class="btn btn-sm btn-warning"
                                            ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.visualizarFichaProcesso()">
                                            Ficha de Processos
                                        </button> --}}

                                    </th>
                                    <th>COR</th>
                                    <th>TAMANHO</th>
                                    <th>QUANTIDADE</th>
                                    <th>SKU</th>
                                </tr>
                                <tr>
                                    <td>
                                        @{{ vm.MODAL.MODELO_ID }} - @{{ vm.MODAL.MODELO_DESCRICAO }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.COR_ORIGEM }} - @{{ vm.MODAL.COR_ORIGEM_DESCRICAO }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.TAMANHO }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.QUANTIDADE | number: 0 }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.SKU }}
                                    </td>
                                </tr>
                            </table>

                            <table
                                class="tabela-items-info-talao table table-striped table-bordered table-hover lista-obj">

                                <tr>
                                    <th>Pedidos</th>
                                    <th>TALÃO ID</th>
                                    <th>TALÃO DETALHE ID</th>
                                    <th>DATA REMESSA</th>
                                </tr>
                                <tr>
                                    <td>
                                        @{{ vm.MODAL.PEDIDOS }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.ID }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.TALAO_DETALHE_ID }}
                                    </td>
                                    <td>
                                        @{{ vm.MODAL.DATA_REMESSA }}
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>

                    <p>

                    <div class="ficha-de-processos-dinamica" style="display: flex; flex-direction: column"
                        id="area_de_info">
                        <legend style="border-bottom: 4px solid #e5e5e5;"></legend>

                        <div style="display: flex; justify-content: space-between;">

                            <div>
                                <div style="display: -webkit-inline-box;" class="consulta-FichaProcessos"></div>
                            </div>
                            <div>
                                <div id="divPrincipalInformacoesDoc" ng-show="vm.Tecelagem.TALOES_VINCULADOS.length > 0"
                                    ng-class="{'backTransp': !vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES, '': vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES}"
                                    style="
                                background: #fbfbfb;
                                border: 1px solid #659fe2;
                            ">
                                    <div class="toggle informacoesDoc" id="toggleDetailsVinculo"
                                        ng-click="vm.Tecelagem.toggleInformacoes();"
                                        ng-class="{'toggleRight': !vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES, '': vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES}"
                                        style="
                                    display: flex;
                                    align-items: center;
                                    padding: 0 10px;
                                    justify-content: space-between;
                                    color: #fff;
                                    width: 100%;
                                ">
                                        <i class="fa"
                                            ng-class="{'fa-chevron-circle-right': vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES, 'fa-chevron-circle-left': !vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES}"></i>
                                        Ver talões agrupados
                                    </div>

                                    <div class="box-informacoes-doc" ng-show="vm.Tecelagem.CHEVRON_TOGGLE_INFORMACOES">
                                        <div class="box__content">
                                            <ul class="notification-list" style="margin-left: 10px;">
                                                {{-- <li class="notification-list__item"> --}}
                                                <li ng-repeat="vinculo in vm.Tecelagem.TALOES_VINCULADOS">
                                                    <p>ID Talão: @{{ vinculo.DETALHE_ID }} | Remessa: @{{ vinculo.REMESSA }}
                                                        /
                                                        @{{ vinculo.ACUMULADO }} </p>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info-talao-modal" ng-if="vm.ConsultaFichaProcessos.ID > 0"
                            style="overflow: hidden; width: 100vw; overflow-x: scroll;">
                            <div class="descricao">@{{ vm.ConsultaFichaProcessos.TIPO_DESCRICAO == 'ARQUIVOS_PROCESSOS' ? 'Arquivos' : vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.DADOS_FICHA.TIPO_DESCRICAO }}</div>
                            <div style="overflow: hidden;width: 100vw;overflow-x: scroll;/* display: flex !important; */">
                                <div ng-show="vm.ConsultaFichaProcessos.TIPO_DESCRICAO == 'ARQUIVOS_PROCESSOS'"
                                    style="display: inline-flex; margin: 2px; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center; height: 176px;">
                                    <div
                                        ng-if="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ARQUIVOS_MODELO.IMAGENS.length == 0">
                                        <h4>Sem arquivos cadastrados</h4>
                                    </div>
                                    <div ng-repeat="chave in vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.ARQUIVOS_MODELO.IMAGENS track by $index"
                                        class="arquivo-container"
                                        style="max-width: fit-content; width: 142px; display: flex; flex-direction: column;">
                                        <div id="foto_@{{ $index }}" ng-if="chave.EXTENSAO != 'PDF'"
                                            ng-mouseover="vm.ZoominItemTemplate(chave, $index, $event, 2);"
                                            ng-mouseleave="vm.ZoomoutItemTemplate(chave, $index, $event);"
                                            ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.visualizarFotoFicha(chave)"
                                            title="Clique duas vezes para abrir a foto."
                                            style="background-color: rgb(255, 255, 255); margin-right: 5px; 
                                            background-size: contain;
                                            border: 1px solid rgb(51, 122, 183);
                                            background-repeat: no-repeat;
                                            background-position: center center;
                                            height: 116px;
                                            border-radius: 12px 12px 0px 0px;
                                            width: 136px;
                                            cursor: pointer;
                                            background-image: url('@{{ chave.DADOS }}');">
                                        </div>

                                        <div id="foto_@{{ $index }}" ng-if="chave.EXTENSAO == 'PDF'"
                                            class="form-group"
                                            ng-click="vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.showArquivos(chave.CAMINHO_REL, chave)"
                                            title="Clique para visualizar PDF">
                                            <span class="Apdf"
                                                style="background-color: rgb(255, 255, 255); margin-right: 5px; 
                                                background-size: contain;
                                                border: 1px solid rgb(51, 122, 183);
                                                background-repeat: no-repeat;
                                                background-position: center center;
                                                height: 116px;
                                                border-radius: 12px 12px 0px 0px;
                                                width: 136px;
                                                cursor: pointer;">
                                            </span>
                                        </div>

                                        <label
                                            style="width: calc(100% - 6px);
                                               height: 30px;
                                               background-color: #337ab7;
                                               margin-left: 0px;
                                               margin-top: -15px;
                                               color: white;
                                               border-radius: 0px 0px 7px 7px;
                                               font-size: 10px;
                                               display: inline-flex;
                                               max-width: 138px;
                                               padding-left: 5px">
                                            <label style="width: 100px;">@{{ chave.NOME_ARQUIVO }}</label>
                                        </label>

                                    </div>
                                </div>
                                <div ng-show="!(vm.ConsultaFichaProcessos.TIPO_DESCRICAO == 'ARQUIVOS_PROCESSOS')"
                                    style="width: 100vw;">
                                    <table class="tabela-items-info-talao">
                                        <tr>
                                            <th></th>
                                            <th ng-repeat="coluna in vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.DADOS_FICHA.COLUNAS"
                                                class="@{{ coluna.CLASSE }}" id="COL-FICHA-@{{ coluna.ID }}">
                                                @{{ coluna.DESCRICAO }}</th>
                                        </tr>
                                        <tr
                                            ng-repeat="linha in vm.CADDEMODELFICHATECNICA_CONS_TEMPLATE.DADOS_FICHA.TABELA">
                                            <td>@{{ linha.LINHA.DESCRICAO }}</td>
                                            <td ng-repeat="valor in linha.COLUNAS | filter:{ LINHA_ID: linha.ID }"
                                                style="min-width: 80px;" class="@{{ valor.COLUNA.CLASSE }}">
                                                @{{ valor.VALOR }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <br>
                        <legend style="border-  bottom: 4px solid #e5e5e5;"></legend>
                    </div>

                    <div class="info-talao-modal" style="width: 100vw;">
                        <div class="descricao" style="min-height: 37px;">Consumo

                            <button ng-if="vm.MODAL.EDITAR_LOTE == false"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px;"
                                type="button" class="btn btn-sm btn-warning" ng-click="vm.Tecelagem.editarLote()">
                                Editar Lotes
                            </button>

                            <button ng-if="vm.MODAL.EDITAR_LOTE == true"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px; color: #fff; background-color: #d9534f; border-color: #d43f3a;"
                                type="button" class="btn btn-sm btn-danger" ng-click="vm.Tecelagem.cancelarLote()">
                                Cancelar
                            </button>

                            <button ng-if="vm.MODAL.EDITAR_LOTE == true"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px;"
                                type="button" class="btn btn-sm btn-success" ng-click="vm.Tecelagem.gravarLote()">
                                Gravar
                            </button>

                        </div>

                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <th>Alocado</th>
                                    <th>Estoque</th>
                                    <th>ID</th>
                                    <th>Produto</th>
                                    <th>Quantidade</th>
                                    <th style="width: 10vw;">Lote</th>
                                </tr>
                                <tr ng-repeat="consumo in vm.MODAL.INFO_TALAO.CONSUMO track by $index">

                                    <td>
                                        <span ng-if="consumo.ALOCADO >= consumo.QUANTIDADE" class="t-status status-1"
                                            style="width: 12px; height: 12px; background-color: #449d44; display: -ms-flexbox; display: flex; border-radius: 6px;"></span>
                                        <span ng-if="consumo.ALOCADO < consumo.QUANTIDADE" class="t-status status-0"
                                            style="width: 12px; height: 12px; background-color: #d9534f; display: -ms-flexbox; display: flex; border-radius: 6px;"></span>
                                    </td>

                                    <td>
                                        <span ng-if="consumo.ESTOQUE_SALDO >= consumo.QUANTIDADE"
                                            class="t-status status-1"
                                            style="width: 12px; height: 12px; background-color: #449d44; display: -ms-flexbox; display: flex; border-radius: 6px;"></span>
                                        <span ng-if="consumo.ESTOQUE_SALDO < consumo.QUANTIDADE" class="t-status status-0"
                                            style="width: 12px; height: 12px; background-color: #d9534f; display: -ms-flexbox; display: flex; border-radius: 6px;"></span>
                                    </td>

                                    <td>@{{ consumo.CONSUMO_ID }}</td>
                                    <td>@{{ consumo.PROD_DESCRICAO }}</td>
                                    <td style="text-align: end;">@{{ consumo.QUANTIDADE | number: 4 }} @{{ consumo.UM }}</td>
                                    <td style="width: 10vw; padding: 2px;">
                                        <div class="input-group" style="width: 10vw;">
                                            <input maxlength="50" type="text"
                                                style=" width: 10vw !important;
													border-radius: 3px;
													text-align: end;
													font-size: 0.9vw;
													height: 2.5vw;"
                                                class="atalho-input-tabela form-control input-medio"
                                                ng-model="consumo.LOTE_ID" ng-readonly="vm.MODAL.EDITAR_LOTE == false"
                                                ng-disabled="vm.MODAL.EDITAR_LOTE == false">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <p>

                    <div class="info-talao-modal" style="width: 30vw;">
                        <div class="descricao" style="min-height: 37px;">Controle de Tolerâncias

                            <button ng-if="!vm.Cep.ALTERANDO_VALORES == 1"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px;"
                                type="button" class="btn btn-sm btn-warning" ng-click="vm.Cep.edit()">
                                Editar
                            </button>

                            <button ng-if="vm.Cep.ALTERANDO_VALORES == 1"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px; color: #fff; background-color: #d9534f; border-color: #d43f3a;"
                                type="button" class="btn btn-sm btn-danger" ng-click="vm.Cep.cancel()">
                                Cancelar
                            </button>

                            <button ng-if="vm.Cep.ALTERANDO_VALORES == 1"
                                style="padding: 4px; float: right; margin-top: 4px; margin-right: 10px; width: 80px;"
                                type="button" class="btn btn-sm btn-success" ng-click="vm.Cep.post()">
                                Gravar
                            </button>

                        </div>

                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <th>Parâmetro</th>
                                    <th>Padrão</th>
                                    <th>Faixa de tolerância</th>
                                    <th>Valor</th>
                                </tr>
                                <tr class="odd" ng-repeat="(key, item) in vm.Cep.PARAMS track by $index"
                                    tabindex="0" ng-focus="vm.Cep.PARAM_SELECTED = item;"
                                    ng-class="{ 'selected' : vm.Cep.PARAM_SELECTED == item }">
                                    <td>@{{ item.TIPO_DESCRICAO }}</td>
                                    <td style="text-align: end;">@{{ item.LINHA_MEDIA | number: 8 }}</td>
                                    <td style="text-align: end;">@{{ item.LIMITE_INFERIOR | number: 6 }} a @{{ item.LIMITE_SUPERIOR | number: 6 }}</td>
                                    <td style="width: 10vw; padding: 2px;">
                                        <div class="input-group" style="100%;">
                                            <span
                                                style="height: 35px; display: flex; align-items: center; text-align: end; justify-content: flex-end; padding-right: 2px;">
                                                <input class="form-control input-menor"
                                                    style="width: 11rem !important; text-align: end;width: 11rem !important;"
                                                    ng-change="vm.Cep.VALORES[item.TIPO_ID].ITEM = item"
                                                    ng-model="vm.Cep.PARAMS[key].QUANTIDADE" type="text"
                                                    name="value" id="value-cep-@{{ key }}" min="0"
                                                    max="999999" ng-number-format="8"
                                                    ng-disabled="!vm.Cep.ALTERANDO_VALORES == 1"></span>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <p>

                    <div class="info-talao-modal" ng-if="vm.MODAL.STATUS_REQUISICAO == 1" style="width: 33%;">
                        <div class="descricao">Requisições</div>
                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <th></th>
                                    <th>Tipo</th>
                                    <th>Requisição</th>
                                    <th>Remessa</th>
                                    <th>Talão</th>
                                    <th>Qtd.</th>
                                    <th>Status</th>
                                    <th>Data Requisição</th>
                                </tr>
                                <tr ng-repeat="item in vm.MODAL.REQUISICAO.ITENS track by $index">
                                    <td>
                                        <div class="@{{ item.PLACA == 1 ? 'talao_de_placa' : 'talao_de_bojo' }}@{{ item.STATUS }}"
                                            style="width: 16px;height: 16px; border-radius: 23px; margin-left: 4px;"></div>
                                    </td>

                                    <td>@{{ item.PLACA == 1 ? 'PLACA' : 'BOJO' }}</td>
                                    <td>@{{ item.ID }}</td>
                                    <td>@{{ item.REMESSA }}</td>
                                    <td>@{{ item.TALAO }}</td>
                                    <td>@{{ item.QUANTIDADE | number: 0 }} <label ng-if="item.PLACA == 1"> /
                                            @{{ item.ABASTECIDO | number: 0 }}</label></td>
                                    <td>@{{ item.DESC_STATUS }}</td>
                                    <td>@{{ item.DATAHORA }}</td>

                                </tr>
                            </table>
                        </div>
                    </div>

                    <p>

                        <legend style="border-  bottom: 4px solid #e5e5e5;"></legend>
                    <div class="info-talao-modal" style="width: 30vw;">
                        <div class="descricao">Programação</div>

                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <td>Inicio/Fim:</td>
                                    <td>@{{ vm.MODAL.DATAHORA_INICIO | toDate | date: 'dd/MM HH:mm' }} a @{{ vm.MODAL.DATAHORA_FIM | toDate | date: 'dd/MM HH:mm' }}</td>
                                </tr>
                                <tr>
                                    <td>Tempo Previsto:</td>
                                    <td>@{{ vm.MODAL.TEMPO_TOTAL | number: 4 }} Min.</td>
                                </tr>
                                <tr>
                                    <td>Tempo Operacional:</td>
                                    <td>@{{ vm.MODAL.TEMPO_OPERACIONAL | number: 4 }} Min.</td>
                                </tr>
                                <tr>
                                    <td>Tempo Setup:</td>
                                    <td>@{{ vm.MODAL.TEMPO_SETUP | number: 4 }} Min.</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="info-talao-modal" style="width: 30vw;">
                        <div class="descricao">Tempo Peça</div>

                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <td>Tempo Previsto:</td>
                                    <td>@{{ (vm.MODAL.TEMPO_TOTAL / vm.MODAL.QUANTIDADE) | number: 4 }} Min.</td>
                                </tr>
                                <tr>
                                    <td>Tempo Operacional:</td>
                                    <td>@{{ (vm.MODAL.TEMPO_OPERACIONAL / vm.MODAL.QUANTIDADE) | number: 4 }} Min.</td>
                                </tr>
                                <tr>
                                    <td>Tempo Setup:</td>
                                    <td>@{{ (vm.MODAL.TEMPO_SETUP / vm.MODAL.QUANTIDADE) | number: 4 }} Min.</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <p>

                    <div class="info-talao-modal" style="width: 100vw;">
                        <div class="descricao">Histórico</div>
                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <th>Status</th>
                                    <th>Data/Hora</th>
                                    <th>Operador</th>
                                    <th>Justificativa</th>
                                    <th>Estação</th>
                                    <th>Tipo</th>
                                    <th>TEMPO</th>
                                </tr>
                                <tr ng-repeat="historico in vm.MODAL.INFO_TALAO.HISTORICO track by $index">
                                    <td>@{{ historico.STATUS }}</td>
                                    <td>@{{ historico.DATAHORA }}</td>
                                    <td>@{{ historico.OPERADOR }}</td>
                                    <td>@{{ historico.JUSTIFICATIVA }}</td>
                                    <td>@{{ historico.ESTACAO }}</td>
                                    <td>@{{ historico.TIPO }}</td>
                                    <td
                                        ng-class="{
										'ind-vermelho' : historico.FLAG == 0,
										'ind-amarelo'  : historico.FLAG == 1,
										'ind-verde'	   : historico.FLAG == 2,
										'ind-branco'   : historico.FLAG == 3
									}">
                                        @{{ historico.FLAG == 3 ? '' : historico.TEMPO }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <p>

                    <div class="info-talao-modal" ng-if="vm.MODAL.LISTA_DEFEITOS.length > 0">
                        <div class="descricao">Defeitos</div>
                        <div>
                            <table class="tabela-items-info-talao">
                                <tr>
                                    <th>ID</th>
                                    <th>Defeito</th>
                                    <th>Quantidade</th>
                                    <th>Classificação</th>
                                    <th>Data/Hora</th>
                                </tr>
                                <tr ng-repeat="defeitos in vm.MODAL.LISTA_DEFEITOS track by $index">
                                    <td>@{{ defeitos.ID }}</td>
                                    <td>@{{ defeitos.DESCRICAO }}</td>
                                    <td style="text-align: end;">@{{ defeitos.QUANTIDADE | number: 0 }}</td>
                                    <td style="text-align: center;">@{{ defeitos.CLASSIFICACAO }}ª</td>
                                    <td>@{{ defeitos.DATAHORA }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <div class="alert alert2 alert-warning"
                        ng-repeat="requisicao in vm.MODAL.REQUISICAO.ITENS track by $index"
                        ng-if="requisicao.REMESSA > 0">
                        <p><b>Requisicão Remessa:@{{ requisicao.REMESSA }} Talão:@{{ requisicao.TALAO }}
                                @{{ requisicao.DESC_STATUS }}</b></p>
                    </div>
                </div>

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