@extends('master2')

@section('titulo')
{{ Lang::get('ppcp/_22810.titulo') }}
@endsection

@section('estilo')
<link rel="stylesheet" href="{{ elixir('assets/css/22810.css') }}" />
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>

	<input type="hidden" class="_autologin" id="_autologin" value="{{ $autologin }}">
	<input type="hidden" class="_operador"  id="_operador"  value="{{ $OPERADOR }}">
	<input type="hidden" class="_up"  id="_up"  value="{{ $UP }}">

	<style>
		.t-status.status-0:before {
			background-color: rgb(217, 83, 79);
		}

		.t-status.status-1:before {
			background-color: rgb(68, 157, 68);
		}

		.table-condensed>thead>tr>th,
		.table-condensed>thead>tr>td,
		.table-condensed>tbody>tr>th,
		.table-condensed>tbody>tr>td,
		.table-condensed>tfoot>tr>th,
		.table-condensed>tfoot>tr>td {
			padding: 5px !important;
		}

		.tempo-input input, 
		.tempo-total input {
			width: 100% !important
		}

		#main {
			padding-top: 10px !important;
		}

		/* @media (max-width: 510px){
			ul.acoes3.abrir {
				left: 52px !important;
			}
		} */

		@media (max-width: 659px) {
			body > .container-fluid {
				padding-top: 30px !important;
			}
		}

		@media (max-width: 500px){
			body {
				padding-top: 50px !important;
			}
		}

		#logo-gc-inicio {
			display: none !important;
		}

        #status-websocket-btn, #duplicar-tela-btn, #go-fullscreen-btn, #go-favorito-1-btn, #go-favorito-2-btn, #go-calendario-btn, #go-ajuda-btn, #go-msg-btn, #go-rel-btn, #go-niver-btn {
            display: none !important;
        }

		#navbar-acoes-toggle3 {
			display: none !important;
		}

		#relogio {
			display: none !important;
		}
	</style>

	<form ng-submit="vm.RegProdOperador.consultar(1)" class="form-inline main-form">

		<!-- <div id="filtro_main" class="table-filter collapse in visualizar-taloes" aria-expanded="true" style="margin-bottom: 4px;
						background: rgba(221,221,221,.33);
						padding: 2px 10px 7px;
						border-radius: 5px;">

			<div class="form-group div-visualizar-talao">
				<button type="button" id="" class="btn btn-info" 
					ng-click="vm.RegProdOperador.abrirModalTaloes()">
					VISUALIZAR TALÕES REGISTRADOS
				</button>
			</div>
		</div> -->

		<div class="panel panel-primary" style="margin-bottom: 5px !important; margin-top: 3px;">
			<div class="panel-heading collapsed" style="cursor: pointer !important;" tabindex="-1" data-hotkey="alt+1" id="containerProducao1" 
				data-toggle="collapse" 
				data-target="#dadosProducao1" 
				aria-expanded="true" 
				aria-controls="dadosProducao1" 
				ng-click="vm.changePainel('dadosProducao1');">

				<h3 class="panel-title">Dados do Operador e UP
					<i class="fa fa-chevron-circle-down" style="float: right; cursor: pointer;" ng-class="{'fa-chevron-circle-down': !vm.DADOS_PRODUCAO1,
								'fa-chevron-circle-up': vm.DADOS_PRODUCAO1}" aria-hidden="true">
					</i>
				</h3>

			</div>

			<div class="panel-body collapse" id="dadosProducao1" aria-expanded="false" style="height: 30px;">
				
				<div class="row table-filter collapse in" id="filtro-main">

					<div class="form-group data-hora">

						<label>Data/Hora:</label>
						<input type="text" id="data-hora" class="form-control input-data-hora" required readonly>

					</div>

					<div class="form-group">

						<div class="consulta-up" id="consulta-up" style="display: contents;"></div>

					</div>

					<div class="form-group">

						<div class="consulta-operador-filtro" id="consulta-operador-filtro" style="display: contents;"></div>

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

		<div class="panel panel-primary" style="margin-bottom: 5px !important; margin-top: 3px;">
			<div class="panel-heading collapsed" style="cursor: pointer !important;" tabindex="-1" data-hotkey="alt+2" id="containerProducao2" 
				data-toggle="collapse" 
				data-target="#dadosProducao2" 
				aria-expanded="true" 
				aria-controls="dadosProducao2"
				ng-click="vm.changePainel('dadosProducao2');">

				<h3 class="panel-title">Dados da Remessa e Talão
					<i class="fa fa-chevron-circle-down" style="float: right; cursor: pointer;" ng-class="{'fa-chevron-circle-down': !vm.DADOS_PRODUCAO2,
								'fa-chevron-circle-up': vm.DADOS_PRODUCAO2}" aria-hidden="true">
					</i>
				</h3>

			</div>

			<div class="panel-body collapse" id="dadosProducao2" aria-expanded="false" style="height: 30px;">

				<div class="row table-filter collapse in" id="filtro-main">

					<div class="form-group">

						<div class="consulta-remessa" id="consulta-remessa" style="display: contents;"></div>

					</div>

					<div class="form-group">

						<div class="consulta-talao" id="consulta-talao" style="display: contents;"></div>

					</div>
				
				</div>

			</div>
		</div>

		<div class="panel panel-primary" style="margin-bottom: 5px !important; margin-top: 3px;">
			<div class="panel-heading collapsed" style="cursor: pointer !important;" tabindex="-1" data-hotkey="alt+3" id="containerProducao3" 
				data-toggle="collapse" 
				data-target="#dadosProducao3" 
				aria-expanded="true" 
				aria-controls="dadosProducao3"
				ng-click="vm.changePainel('dadosProducao3');">

				<h3 class="panel-title">Dados do Talão
					<i class="fa fa-chevron-circle-down" style="float: right; cursor: pointer;" ng-class="{'fa-chevron-circle-down': !vm.DADOS_PRODUCAO3,
								'fa-chevron-circle-up': vm.DADOS_PRODUCAO3}" aria-hidden="true">
					</i>
				</h3>

			</div>

			<div class="panel-body collapse" id="dadosProducao3" aria-expanded="false" style="height: 30px;">

				<div class="row table-filter collapse in" id="filtro-main">

					<div class="form-group modelo-input">

						<label>
							Modelo: 
							<!-- <a ng-click="vm.RegProdOperador.abrirModalModelo()" style="float: right">Ver Foto</a> -->
						</label>
						<input type="text" id="modelo" class="form-control" ng-model="vm.modelo" required readonly>

					</div>

					<div class="form-group tamanho-input">

						<label>Tamanho:</label>
						<input type="text" id="tamanho" class="form-control" ng-model="vm.tamanho" required readonly>

					</div>

					<div class="form-group cor-input">

						<label>Cor:</label>
						<input type="text" id="cor" class="form-control" ng-model="vm.cor" required readonly>

					</div>

					<div class="form-group qtd-pecas">

						<label>Qtd. Peças:</label>
						<input type="text" id="qtd-pecas" class="form-control" ng-model="vm.qtd_pecas" ng-value="vm.qtd_pecas|number: 0" required readonly>

					</div>

					<div class="form-group foto-modelo" ng-show="vm.RegProdOperador.validarCamposModelo()">
						<button type="button" id="btn-foto-modelo" class="btn btn-info" 
							ng-click="vm.RegProdOperador.abrirModalModelo()">
							VER FOTO
						</button>
					</div>

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

		<div id="filtro_main" class="table-filter collapse in" aria-expanded="true" style="margin-bottom: 4px;
						background: rgba(221,221,221,.33);
						padding: 2px 10px 7px;
						border-radius: 5px;">

			<div class="form-group">

				<div class="consulta-operacao" id="consulta-operacao" style="display: contents;"></div>

			</div>

			<div class="row tempos-operacao">

				<div class="form-group tempo-input">
					<label>Tempo Operacional</label>
					<input type="text" id="tamanho" class="form-control" ng-model="vm.tempo_operacional" required readonly>
				</div>

				<div class="form-group tempo-total">
					<label>Tempo Total</label>
					<input type="text" id="tamanho" class="form-control" ng-model="vm.tempo_total" required readonly>
				</div>

			</div>

			<div class="btn-group btn-group-justified acoes" role="group" aria-label="..." style="margin-top: 15px">

				<div class="btn-group" role="group" style="padding-right: 10px;">
					<button type="button" class="btn btn-success" id="startButton" ng-click="vm.RegProdOperador.iniciarProducao()" ng-disabled="!vm.RegProdOperador.validarCampos()">
						INICIAR
					</button>
				</div>

				<div class="btn-group" role="group" style="padding-right: 10px;">
					<button type="button" id="pauseButton" class="btn btn-danger" ng-click="vm.RegProdOperador.abrirModalPausarProducao()">PAUSAR</button>
				</div>

				<div class="btn-group" role="group">
					<button type="button" id="registerButton" class="btn btn-primary" ng-click="vm.RegProdOperador.finalizarProducao()">FINALIZAR</button>
				</div>

			</div>

		</div>

		<div id="filtro_main" class="table-filter collapse in" aria-expanded="true" style="margin-bottom: 4px;
						background: rgba(221,221,221,.33);
						padding: 2px 10px 7px;
						border-radius: 5px;">

			<div class="tempo-producao">

				<div class="form-group hora-inicio-i">

					<label>Hora/Min. Início:</label>
					<input type="text" id="hora-inicio" class="form-control" ng-value="vm.RegProdOperador.HORA_INICIO" required readonly>

				</div>

				<div class="form-group tempo-decorrido-i">

					<label>Tempo Decorrido:</label>
					<input type="text" id="tempo-decorrido" class="form-control" ng-value="vm.RegProdOperador.TEMPO_DECORRIDO" required readonly>

				</div>

				<div class="form-group tempo-pausado-i">

					<label>Tempo Pausado:</label>
					<input type="text" id="tempo-pausado" class="form-control" ng-value="vm.RegProdOperador.TEMPO_PAUSADO" required readonly>

				</div>

			</div>

		</div>

	</form>

	<!-- <div class="tabela_principal" id="tabela_principal"></div> -->

	<!--	
	<div class="form-group" style="margin-bottom: 4px;">
		<input 
			type="text"
			style="width: 100% !important;"
			placeholder="Filtragem rápida..."
			class="form-control input-maior" 
			required
			ng-model="vm.RegProdOperador.FILTRO_DADOS">
	</div>
	
    <div class="table-ec table-scroll" style="height: calc(100vh - 205px);">
        <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
            <thead>
                <tr gc-order-by="vm.RegProdOperador.ORDER_BY">
                    <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                    <th field="ID">ID</th>
					<th field="DESCRICAO">Descrição</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    ng-repeat="item in vm.RegProdOperador.DADOS_RENDER = ( vm.RegProdOperador.DADOS | orderBy : vm.RegProdOperador.ORDER_BY | find: {model : vm.RegProdOperador.FILTRO_DADOS ,fields : 'all'})"
                    ng-Click="vm.RegProdOperador.visualizar()"
                    ng-focus="vm.RegProdOperador.SELECTED = item"
                    ng-class="{ 'selected' : vm.RegProdOperador.SELECTED == item }"
                    tabindex="0"
                    >
                    <td class="t-status status-@{{ item.STATUS }}">
                    </td>
                    <td>
                        <span>
                            @{{ item.ID || 0 | lpad: [4,0] }}
                        </span>
                    </td>
                    <td>
                        <span>
                            @{{ item.DESCRICAO }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    -->

	@include($menu.'.modal.RegProdOperador')
	@include($menu.'.modal.RegProdOperadorItens')
	@include($menu.'.modal.RegProdOperadorImpressao')
	@include($menu.'.modal.TaloesRegOperador')
	@include($menu.'.modal.VisualizarFotoModelo')
	@include($menu.'.modal.PausarProducao')

	@include($menu.'.modal.ConfirmItensSelected')
</div>
@endsection

@section('script')
<script src="{{ elixir('assets/js/direct-print.js') }}"></script>
<script src="{{ elixir('assets/js/_22810.js') }}"></script>
@append