@extends('master')

@section('titulo')
    {{ Lang::get('pessoal/_23350.titulo') }}
@endsection

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

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

	<ul class="list-inline acoes">    
		@php $colaborador = isset($_GET['COLABORADOR']) ? $_GET['COLABORADOR'] : ''
		@php $filtro_ano  = isset($_GET['MES'])  ? $_GET['MES']  : ''
		@php $filtro_mes  = isset($_GET['ANO'])  ? $_GET['ANO']  : ''
		<input type="hidden" id="COLABORADOR" value="{{$colaborador}}">
		<input type="hidden" id="FILTRO_MES"  value="{{$filtro_ano}}">
		<input type="hidden" id="FILTRO_ANO"  value="{{$filtro_mes}}">
	</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>
	
	<form ng-submit="vm.RelatorioPonto.filtrar_relatorio()" 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="margin-right: 0px !important;">
				<label>Período de Admissão</label>
				<div class="form-group" style="display: flex;">					
					<input type="date" style="width: 130px; margin-left: 4px; margin-top: 4px;" class="form-control data1" ng-model="vm.RelatorioPonto.FILTRO_DATA1" ng-atalho>
					<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input type="date" style="width: 130px; margin-top: 4px;" class="form-control data2" ng-model="vm.RelatorioPonto.FILTRO_DATA2" ng-atalho>
				</div>		 
			</div>

			<div class="form-group">
				<label>Mês:</label>
				<select class="form-control filter_main" ng-model="vm.RelatorioPonto.FILTRO_MES">
					<option ng-repeat="item in vm.RelatorioPonto.FILTRO_MESES track by $index" value="@{{item.VALOR}}">@{{item.MES}}</option>
				</select>
			</div>

			<div class="form-group">
				<label>Ano:</label>
				<select class="form-control filter_main" ng-model="vm.RelatorioPonto.FILTRO_ANO">
					<option ng-repeat="item in vm.RelatorioPonto.FILTRO_ANOS track by $index" value="@{{item.VALOR}}">@{{item.ANO}}</option>
				</select>
			</div>

			<!--div class="form-group">
				<label>Período:</label>
				<div class="form-group" style="display: flex; width: calc(28%); min-width: fit-content; max-width: fit-content;">
					<input type="date" required style="width: 130px;" class="form-control filter_main"
						ng-model="vm.RelatorioPonto.FILTRO.DATA1">
					<label style="padding-top: 5px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input required type="date" style="width: 130px;" class="form-control filter_main"
						ng-model="vm.RelatorioPonto.FILTRO.DATA2">
				</div>		 
			</div-->
			
			
			<div style="display: -webkit-inline-box;" class="consulta-estabelecimento"></div>			
			<div style="display: -webkit-inline-box;" class="consulta-turno">		   </div>			

			<div class="form-group">
				<label>Situação:</label>
				<select class="form-control filter_main" ng-model="vm.RelatorioPonto.FILTRO_SITUACAO">
					<option ng-repeat="item in vm.RelatorioPonto.FILTRO_SIT track by $index" value="@{{item.VALOR}}">@{{item.DESCRICAO}}</option>
				</select>
			</div>

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

			<br>

			<div>
				<div style="width: 115px; float: left;">
					<ul id="tab" class="nav nav-tabs" role="tablist" style=""> 
						<li style="text-align: end; border: 1px solid #7e7979; border-radius: 5px 0px 0px 5px; border-right: 0px;
							background-color: #f1efef; margin-bottom: 3px; width: 100%;"  
							
							ng-click="vm.RelatorioPonto.tabParanClick(param, '.consulta-g-' + param.TAG);"
							role="presentation"
							class="@{{$index == 0 ? 'active' : ''}} tab-detalhamento"
							ng-repeat="param in vm.RelatorioPonto.CONSULTAS2  | orderBy:'ORDEM' track by $index">
		
							<a style="padding: 8px 15px 9px 0px; float: right; border-radius: 5px 1px 1px 4px; width: calc(100% - 2px);
								border: 0px; font-weight: bold; height: 35px; margin-right: -2px;"
								href="#@{{param.PARAMETRO}}-container" id="@{{param.PARAMETRO}}-tab" data-hotkey="alt+@{{$index+1}}" role="tab" data-toggle="tab" aria-controls="@{{param.PARAMETRO}}-container" aria-expanded="true">
							
								<label ng-if="(param.TTITLE+'').length == 0">@{{param.DESCRICAO}}</label>
								<label ttitle="@{{param.TTITLE}}" ng-if="(param.TTITLE+'').length > 0">@{{param.DESCRICAO}}</label>
							</a>
						</li>
					</ul>		
				</div>
				<div style="width: calc(100% - 115px); float: right; padding: 5px; border: 1px solid #7e7979; border-radius: 0px 4px 5px 5px; background-color: #ffffff;">

					<div id="tab-content" class="tab-content" style="height: calc(100% - 45px); padding: 3px; border: 0px;">

						<div ng-repeat="param in vm.RelatorioPonto.CONSULTAS2 | orderBy:'ORDEM' track by $index"
							role="tabpanel" class="tab-item-aconsulta tab-pane @{{$index == 0 ? 'active' : ''}}"
							id="@{{param.PARAMETRO}}-container" aria-labelledby="@{{param.PARAMETRO}}-tab">

							<div class="consulta-g-@{{param.TAG}}" id="consulta-g-@{{param.TAG}}"></div>

							<div class="table-ec table-scroll" style="height: 180px; width: 550px;" >
								<table class="table table-striped tab-enter table-bordered table-condensed table-no-break table-middle table-low tabelaJS">
									<thead>
										<tr>
											<th scope="col" ng-repeat="campo in param.Consulta.option.campos_tabela">@{{campo[1]}}</th>
											<th style="width: 50px;"></th>
										</tr>
									</thead>
								<tbody>
									<tr ng-repeat="item in param.ITENS" ng-keydown="vm.RelatorioPonto.atalhoTabelaItenParan(item, '.consulta-g-' + param.TAG, $event)"
										ng-focus="param.SELECTED = item;" ng-class="{ 'selected' : param.SELECTED == item }" tabindex="0">
										<th ng-repeat="campo in param.Consulta.option.campos_tabela">@{{item[campo[0]]}}</th>
										<th style="width: 50px; padding: 3px;">
											<button type="button" class="btn btn-sm btn-danger" style="margin-left: 6px;" data-toggle="dropdown"
												aria-expanded="false" ng-disabled="param.Consulta.usuario_vinculado == true"
												ng-click="vm.RelatorioPonto.removerItemTabelaParan(item, param.ITENS);">
												<span class="glyphicon glyphicon-trash"></span>
											</button>
										</th>
									</tr>
								</tbody>
								</table>
							</div>
						</div>

					</div>
				</div>
				
			</div>
		</div>
	</form>
	
	<div class="form-group" id="div_relatorio" style="width: calc(100%);">
		
	</div>
	
    @include($menu.'.modal.RelatorioPonto')
	@include($menu.'.modal.RelatorioPontoItens')
	@include($menu.'.modal.progresso')
</div>
@endsection

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