@extends('master')

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

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

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak style="height: 100%;">

    <audio id="audio_alert">
		<source src="/assets/temp/mp3/incorrect.mp3" type="audio/mp3" />
	</audio>

    <input type="hidden" ng-init="vm.Parametro.DATA_PRODUCAO_TEXT     = '{{ $data_producao }} 00:00:00';" />
    <input type="hidden" ng-init="vm.Parametro.FAMILIA_ID             = '{{ $familia_id }}';" />
    <input type="hidden" ng-init="vm.ESTABELECIMENTO_PADRAO           = {{ $estabelecimento_padrao }};" />
    <input type="hidden" ng-init="vm.GP_PERFIL_PADRAO                 = {{ $gp_perfil_padrao }};" />
    <input type="hidden" ng-init="vm.GP_PADRAO                        = {{ $gp_padrao }};" />
    <input type="hidden" ng-init="vm.SOLICITAR_OPERADOR               = {{ fn_sistema('SOLICITA_OPERADOR') }};" />
    <input type="hidden" ng-init="vm.Eficiencia.MOSTRAR_PERC_EFIC     = {{ fn_sistema('TIPO_META_UP') == 2 ? 1 : 2}};" />
    <input type="hidden" ng-init="vm.Eficiencia.ALTERAR_DATA_PRODUCAO = {{ controleUser(167,'') }}" hidden>
    
    <style>
        #main-app {
            height: calc(100vh - 130px);
            min-width: 765px;
        }        
        
        .tab-content {
            height: calc(100vh - 170px);
        }
        
        .tab-content .tab-pane {
            height: 100%;
        }
        
        .modal-header .btn {
            font-size: 14px !important;
            padding: 4px !important;
        }        
    </style>

    <ul class="list-inline acoes">

        <li>
            <a class="btn btn-info" data-hotkey="alt+d" href="/_22231" target="_blank">
                <span class="fa fa-bug"></span>
                22231 - Registro de Produtos Defeituosos
            </a>
        </li>

        <a class="btn btn-default" data-hotkey="alt+i" style="background-color: #cefcce;" ng-click="vm.winPopUp('/_22603','producao-operador',{width:1000,height:700})" >
            <span class="glyphicon glyphicon-print"></span>
            22603 - Impressão de Etiquetas
        </a>

        <a ng-if="{{ fn_parametro('TBUSUARIO.PRODUCAO_MANUAL', Auth::user()->CODIGO) == 1 ? 1 : 0 }} == 1" class="btn btn-default" data-hotkey="alt+j" style="background-color: #f0ad4e;" ng-click="vm.Registro.ProducaoManual()" >
            <span class="glyphicon glyphicon-ok"></span>
            Registro de Produção Manual
        </a>

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

<!--
        <li>
			<button type="button" class="btn btn-warning" 
				data-hotkey="f4"
				ng-click="vm.RemessaItens2.TELA_ADD = 3; vm.RemessaItens2.incluir();">
				<span class="glyphicon glyphicon-print"></span> Impressão de Etiquetas
			</button>
		</li>
-->
        <!--
        <li>
            <a class="btn btn-primary" data-hotkey="alt+p" ng-click="vm.winPopUp('/_22220/'+vm.Parametro.ConsultaGp.GP_ID,'consulta-programacao',{width:950,height:680})" >
                <span class="fa fa-calendar"></span>
                22220 - Programação
            </a>
        </li>
        -->

    </ul>    
    
    <style>
        #gp-destaque {
            position: fixed;
            right: 15px;
            background: rgb(234, 234, 234);
            padding: 10px;
            /* top: 55px; */
            top: 99px;
            z-index: 99;
            border-radius: 7px;
            font-weight: bold;
            font-size: 28px !important;
            cursor: pointer;
            margin-bottom: 20px;
        }
        
        #gp-destaque:hover {
            background: rgb(214, 214, 214);
        }

        fieldset legend {
            font-size: 15px;
        }
    
        #main .registro-kpi {
            float: right;
            background: rgb(234, 234, 234);
            padding: 3px 3px 0px 3px;
            border-radius: 7px;    
            text-align: center;        
            width: 494px;
            margin-left: 5px;
        }
        
        #main .registro-kpi > div {
            display: inline-block;
            font-size: 22px;
            font-weight: bold;
            width: calc(20% - 4px);
        }
        
        #main .registro-kpi > div:not(:last-of-type) {
            border-right: 1px solid rgb(210, 210, 210);
            padding-right: 5px;        
        }

        #main .registro-kpi > div label {
            text-align: left;
            padding-right: 5px;
            display: block;
            margin: 0;
            font-weight: normal;
            font-size: 9px;
        }   

    </style>
    
    <div id="gp-destaque" ng-click="vm.Parametro.modalShow();" ttitle="Clique aqui para alterar o GP">
            @{{ vm.Parametro.ConsultaGp.GP_DESCRICAO }} @{{ vm.Parametro.DATA_PRODUCAO | date: 'dd/MM'}}
    </div>
    
    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#tab-registro-producao" ng-click="vm.ClickTab(0)" data-hotkey="alt+1">Eficiência</a>
            </li> 
            <li>
                <a data-toggle="tab" href="#tab-consulta-producao" ng-click="vm.ClickTab(1)" data-hotkey="alt+2">Produção</a>
            </li>   
            <li>
                <a data-toggle="tab" href="#tab-producao-hora-etapa" ng-click="vm.ClickTab(2)" data-hotkey="alt+3">Produção por Etapa</a>
            </li>                 
        </ul>    
        <div class="tab-content" style="height: calc(100vh - 170px);">
            <div id="tab-registro-producao" class="tab-pane in active">
                @include('ppcp._22610.index.tab-registro-producao.tab-registro-producao')
            </div>
            <div id="tab-consulta-producao" class="tab-pane in">
                @include('ppcp._22610.index.tab-consulta-producao')
            </div>
            <div id="tab-producao-hora-etapa" class="tab-pane in">
                @include('ppcp._22610.index.tab-registro-producao.tab-producao-hora-etapa')
            </div>
        </div>
    </div>
    
    @include('ppcp._22610.index.modalRegistroProducao')
    @include('ppcp._22610.index.modalResultadoProducao')

    @include('ppcp._22610.index.modal-parametro')
    
    @include('ppcp._22610.index.tab-registro-producao.modal-registrar-talao')
    @include('ppcp._22610.index.tab-consulta-coleta.modal-coleta-detalhe')
    @include('ppcp._22610.index.modal-consulta-producao')
    @include('ppcp._22610.index.modal-talao-corte-etiqueta')
    @include('ppcp._22610.index.modal-talao-corte-etiqueta2')
    @include('ppcp._22610.index.modalRetrabalho')
	@include('helper.include.view.autenticar')

    <div id="modalProgressoInclusaoItensRFID" class="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 9999999 !important;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-header-left">
						<h3 style="margin:0;">Conferir por RFID</h3>
					</div>

					<div class="modal-header-right">
						<button ng-if="vm.Registro.EM_PROCESSO_RFID == 0" ng-click="vm.Registro.fecharModalInclusaoItensRFID();" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc" ng-disabled="vm.Registro.INICIOU_PROCESSO_RFID == true">
							<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
						</button>
					</div>
				</div>
				<div class="modal-body">

					<div class="consulta-zonas-leitura" id="consulta-zonas-leitura"></div>

					<hr>

					<section id="open-dev" class="wrap-content open-dev" ng-class="{'open-dev-no-animation': vm.Registro.STATUS_RFID == 0}">
						<div class="wrap-two-up wrap-two-up-middle">
							<div class="content content-two-up">
							<div class="open-dev-radar">
								<div class="open-dev-radar-pulse"></div>
								<div class="open-dev-radar-pulse"></div>
								<div class="open-dev-radar-pulse"></div>
								<div class="open-dev-radar-pulse"></div>
								<div class="open-dev-badge">
									<img src="{{url('')}}/assets/images/pdv/icone_rfid_inclusao.png">
								</div>
							</div>
							</div>
						</div>
					</section>

                    <hr ng-if="vm.Registro.EM_PROCESSO_RFID == 1">

                    <h4 ng-if="vm.Registro.EM_PROCESSO_RFID == 1" style="text-align: center;">Confirma a leitura de <b ng-bind="vm.Registro.PRODUTOS_RFID.length"></b> produtos?</h4>

				</div>
				<div class="modal-footer">
					<button ng-if="vm.Registro.EM_PROCESSO_RFID == 0" type="button" class="btn btn-success" ng-disabled="vm.Registro.STATUS_RFID == 1 || vm.Registro.STATUS_RFID == 2" ng-click="vm.Registro.startInclusaoRFID();">	
						<span class="fa fa-play"></span> Iniciar
					</button>

					<button ng-if="vm.Registro.EM_PROCESSO_RFID == 0" type="button" class="btn btn-warning" ng-disabled="vm.Registro.STATUS_RFID == 0 || vm.Registro.STATUS_RFID == 1" ng-click="vm.Registro.stopInclusaoRFID();">	
						<span class="fa fa-stop"></span> Parar <span ng-if="vm.Registro.STATUS_RFID == 1 && vm.Registro.CONTADOR_RFID > 0">(@{{vm.Registro.CONTADOR_RFID}})</span>
					</button>

                    <button ng-if="vm.Registro.EM_PROCESSO_RFID == 1" type="button" class="btn btn-primary" ng-click="vm.Registro.confirmItensRFID();">	
						<span class="fa fa-check"></span> Sim
					</button>

                    <button ng-if="vm.Registro.EM_PROCESSO_RFID == 1" type="button" class="btn btn-default" ng-click="vm.Registro.cancelarConfirmacaoRFID();">	
						<span class="fa fa-ban"></span> Não
					</button>

				</div>
			</div>
		</div>
	</div>
    
</div>
@endsection

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