@extends('master')

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

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

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

	<ul class="list-inline acoes">    
		<!-- <li>
            <button type="button" class="btn btn-primary btn-incluir" 
                data-hotkey="f6" ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                ng-click="vm.CalendarioProducaoGP.incluir()">
                <span class="glyphicon glyphicon-plus"></span> Gerar Calendário
            </button>
		</li> -->
		<input type="hidden" class="permite_alterar_data_livre" id="permite_alterar_data_livre" 
			value="{{fn_parametro('TBUSUARIO.PERMITE_ALTERAR_CALENDARIO_GP_LIVRE', Auth::user()->CODIGO)}}">
		
	<!----><li>
			<button type="button" class="btn btn-default" 
				id="filtrar-toggle" data-toggle="collapse" 
				data-target="#filtro_main" aria-expanded="true" 
				aria-controls="filtro_main"
				ng-click="vm.CalendarioProducaoGP.tabela_height()">
				Filtro
				<span class="caret"></span>
			</button>
		</li>                                              
	</ul>  
        
    <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;
		}
        
    </style>
	

	<div class="row">

		<!-- <div class="resize resize-transacao table-lc" style="height: 400px; min-height: 195px;"> -->
			<!-- <div style="height: 100%; border: 1px solid #a2a1a1; margin: 0px 8px 0px 8px; padding: 5px; border-radius: 10px; background-color: #c3c3c38c;"> -->
		<div class="col-md-7">

			<form ng-submit="vm.CalendarioProducaoGP.consultar(0)" class="form-inline">		
				<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" style="width: calc(100% - 100px); padding-top: 5px; min-width: 200px;">
						<input type="text" style="width: 100% !important; min-width: 170px;"
							placeholder="Filtragem rápida..."
							class="form-control input-maior filter_main" 
							ng-model="vm.CalendarioProducaoGP.FILTRO_DADOS">
					</div> -->

					<div class="form-group">
						<label>Status UP:</label>
						<div class="input-group">
							<select 
								name="repeatSelect" 
								id="repeatSelect"  
								ng-model="vm.CalendarioProducaoGP.FILTRO_STATUS_UP">
								<option value="1">ATIVOS</option>
								<option value="0">INATIVOS</option>
								<option value="">TODOS</option>
							</select>
						</div>
					</div>

					<div style="display: -webkit-inline-box;" class="consulta-gp-filtro"></div>

					<div style="display: -webkit-inline-box;" class="consulta-ccusto-filtro"></div>

					<div style="display: -webkit-inline-box;" class="consulta-perfil-filtro"></div>

					<div style="display: -webkit-inline-box;" class="consulta-familia-filtro"></div>

					<div class="form-group" style="padding-top: 16px; width: fit-content; padding-right: 10px;">
						<button type="submit" class="btn btn-xs btn-primary btn-filtrar"
							data-hotkey="alt+f" id="btn-table-filter">
							<span class="glyphicon glyphicon-filter"></span> Filtrar
						</button>
					</div>	
				</div>
			</form>
			
			<div class="tabela_principal" id="tabela_principal"></div>	
		</div>

		<div class="col-md-5">
			<fieldset>
				<legend>
					<span ng-class="{'classeGP': vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.TIPO_CALENDARIO == 1, 'classeUP': vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.TIPO_CALENDARIO == 2}">
						Calendário de Produção <span ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true" ng-bind="vm.CalendarioGPUP.DESC_LABEL_LEGEND"></span>
					</span>
					
					<div style="display: inline-block; float: right;">
						
						<button ttitle="Reprogramar Calendário" style="padding: 9px !important;" ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.REPROGRAMAR == true" ng-click="vm.CalendarioGPUP.addconfirmeCalendario(2)" type="button" class="btn btn-custom" data-hotkey="f6" ng-class="{'btn-custom-gp': vm.CalendarioGPUP.TIPO_CALENDARIO == 1, 'btn-custom-up': vm.CalendarioGPUP.TIPO_CALENDARIO == 2}">
							<span class="fa fa-wrench" style="top: -1px !important;"></span>
						</button>  

						<button ttitle="Reprogramar Calendário das UP's de acordo com GP" style="padding: 9px !important;" ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.REPROGRAMAR == true &&  vm.CalendarioGPUP.TIPO_CALENDARIO == 1" ng-click="vm.CalendarioGPUP.addconfirmeCalendario(3)" type="button" class="btn btn-default" data-hotkey="f7">
							<span class="glyphicon glyphicon-refresh" style="top: -1px !important;"></span>
						</button>  

						<button ttitle="Excluir Calendário" style="padding: 9px !important;" ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.REPROGRAMAR == true" ng-click="vm.CalendarioGPUP.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
							<span class="glyphicon glyphicon-trash" style="top: -1px !important;"></span> 
						</button>  

						<button ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0" ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true && vm.CalendarioGPUP.REPROGRAMAR == false" ng-click="vm.CalendarioGPUP.addconfirmeCalendario(1)" type="button" class="btn btn-primary" data-hotkey="f6">
							<span class="glyphicon glyphicon-repeat"></span> Gerar
						</button>  

						<button ttitle="Histórico" style="padding: 9px !important;" ng-if="vm.CalendarioGPUP.HABILITA_CONSULTA == true" data-consulta-historico data-tabela="TBCALENDARIO" data-tabela-id="@{{ vm.CalendarioProducaoGP.SELECTED.CHAVE }}" type="button" class="btn gerar-historico" data-hotkey="alt+h">
							<span class="glyphicon glyphicon-time" style="top: -1px !important;"></span>
						</button> 	

						<div class="form-group" style="display: inline-block;">
							<select class="form-control" ng-model="vm.CalendarioGPUP.FILTRO_MES" ng-change="vm.CalendarioProducaoGP.keepFocusWhenChangeMonthAndYear()">
								<option ng-repeat="item in vm.ARRAY_MESES track by $index" ng-value="item.VALOR">@{{item.MES}}</option>
							</select>						
						</div>
			
						<div class="form-group" style="display: inline-block;">
							<select class="form-control" ng-model="vm.CalendarioGPUP.FILTRO_ANO" ng-change="vm.CalendarioProducaoGP.keepFocusWhenChangeMonthAndYear()">
								<option ng-repeat="item in vm.ARRAY_ANOS track by $index" ng-value="item.ANO">@{{ item.ANO }}</option>
							</select>						
						</div>
					</div>
				</legend>


				<div class="tabela_calendario_gp_up" id="tabela_calendario_gp_up" style="margin-top: 10px;"></div>	
			</fieldset>
			
		</div>
			<!-- </div> -->
		<!-- </div> -->
	</div>

    
	<div id="modalAlteracaoPerfil" class="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-header-left">
						<h4 class="modal-title">
							<span>Alteração de Perfil</span>
						</h4>
					
					</div>
					<div class="modal-header-right">

						<button ng-click="vm.CalendarioProducaoGP.gravarEdicaoPerfil();" type="button" class="btn btn-success" data-hotkey="f1">
							<span class="glyphicon glyphicon-ok"></span> Gravar
						</button>

						<button ng-click="vm.CalendarioProducaoGP.cancelarEdicaoPerfil();" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
							<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
						</button>
						
					</div>
					
				</div>
				<div class="modal-body" style="height: 370px !important;">

					<form class="form-inline">

						<div class="row">

							<fieldset>
								<legend>Estação @{{vm.CalendarioProducaoGP.SELECTED.DESC_EST_ID}} - @{{vm.CalendarioProducaoGP.SELECTED.DESCRICAO_ESTACAO}}</legend>

								<div class="row">

									<div class="col-md-5">
										<span style="font-weight: bold; font-size: 14px;">De:</span>
									</div>
									
									<div class="col-md-6">
										<span style="font-weight: bold; font-size: 14px;">Para:</span>
									</div>
									
									<div class="col-md-5" style="border-right: 1px solid lightgray !important;">
										<div style="display: -webkit-inline-box;" class="consulta-perfil-old"></div>
									</div>
									
									<div class="col-md-6">
										<div style="display: -webkit-inline-box;" class="consulta-perfil-new"></div>
									</div>

								</div>
							</fieldset>
						

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



	@include($menu.'.modal.CalendarioProducaoGP')
	@include($menu.'.modal.CalendarioProducaoGPItens')
	@include($menu.'.modal.CalendarioGPUP')

	<div id="modalAdicionarCP" class="modal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-small">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-header-left">
						<h4 class="modal-title">
							<span>Adicionar Capacidade</span>
						</h4>
					
					</div>
					<div class="modal-header-right">

						<button ng-click="vm.CalendarioGPUP.gravarAdicionarCP();" type="button" class="btn btn-success" data-hotkey="f1">
							<span class="glyphicon glyphicon-ok"></span> Gravar
						</button>

						<button ng-click="vm.CalendarioGPUP.cancelarAdicionarCP();" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
							<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
						</button>
						
					</div>
					
				</div>
				<div class="modal-body" style="height: 370px !important;">

					<form class="form-inline">

						<div class="row">

							<div class="form-group">
								<label>Tempo:</label>
								<input 
									type="time"
									id="tempoFormula"
									style="width: 130px;"
									class="form-control text-right"
									ng-model="vm.CalendarioGPUP.TEMPO_CP">
							</div>

							<div class="form-group">
								<label>Colaboradores:</label>
								<div class="input-group right-icon">
									<div class="input-group-addon" style="padding: 9px !important;"><span class="fa fa-user"></span></div>
									<input 
										type="text"
										ng-number-format="2"
										style="width: 130px !important;"
										class="form-control text-right"
										ng-model="vm.CalendarioGPUP.COLABORADORES_CP">
								</div>
							</div>

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

</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/_22481.js') }}"></script>
@append