@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>
				</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;" 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="info-talao-modal" style="width: 100%;">
					<div class="descricao">Consumo</div>
					<div>
						<table class="tabela-items-info-talao">
							<tr>
								<th>Alocado</th>
								<th>Estoque</th>
								<th>ID</th>
								<th>Produto</th>
								<th>Quantidade</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>
							</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>

				<div class="info-talao-modal"  style="width: 33%;">
					<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: 33%;">
					<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>

				<div class="info-talao-modal">
					<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>
	        <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>
@overwrite