@extends('master')

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

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

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

	<ul class="list-inline acoes">    		
		<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.Relatorio.tabela_height()">
				Filtro
				<span class="caret"></span>
			</button>
		</li>
		
        <li>
            <button type="button" class="btn btn-warning " ng-click="vm.Relatorio.exportToCsvExec();">
                <span class="glyphicon glyphicon-save"></span>
                Exportar CSV
            </button>
		</li>
		
        <li>
            <button type="button" class="btn btn-warning " ng-click="vm.Relatorio.exportToXlsExec();">
                <span class="glyphicon glyphicon-save"></span>
                Exportar XLS
            </button>
        </li>
		
        <li>
            <button type="button" class="btn btn-warning " ng-click="vm.Relatorio.exportToHtmlExec();">
                <span class="glyphicon glyphicon-save"></span>
                Exportar HTML
            </button>
        </li>
		
        <li>
            <button type="button" class="btn btn-warning " ng-click="vm.TabelaPrincipal.imprimir();">
                <span class="glyphicon glyphicon-print"></span>
                Imprimir
            </button>
        </li>

		<li>
			<button ng-disabled="vm.TabelaPrincipal.DADOS.length <= 0 || vm.Relatorio.TIPO_V_AGP == 'B'" type="button" class="btn btn-primary " ng-click="vm.Relatorio.gerarProjecaoConsumo();">
				<span class="glyphicon glyphicon-share-alt"></span>
				Gerar Projeção de Consumo
			</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>
	

	<form ng-submit="vm.Relatorio.consultar(1)" 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 style="display: contents;" class="consulta-estabelecimento"></div> -->

			<div class="form-group" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					<select class="form-control no_selection" ng-model="vm.Filtro.TipoData" ng-change="vm.Filtro.apagar_filtro();" 
						style="width: 158px; margin-right: 0px; background-color: #e2e2e2; border-radius: 4px 0px 0px 4px; height: 35px; font-weight: 600;
							border-top: 0px; border-left: 0px; margin-top: -1px; margin-bottom: -1px; text-transform: capitalize;">
						<option style="font-weight: 600;" value="1" ng-value="1">Período Faturamento</option>						
					</select>
					<!--ng-change="vm.TabelaPrincipal.apagar();" ng-change="vm.TabelaPrincipal.apagar();"-->
					<input type="date" style="width: 136px; margin-left: 4px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro.DataInicio" ng-atalho ng-readonly="vm.Filtro.TipoData == 3">
					<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input type="date" style="width: 136px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro.DataFim" ng-atalho ng-readonly="vm.Filtro.TipoData == 3">
				</div>		 
			</div>

			<div class="form-group" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					<select class="form-control no_selection" ng-model="vm.Filtro2.TipoData" ng-change="vm.Filtro2.apagar_filtro();" 
						style="margin-right: 0px; background-color: #e2e2e2; border-radius: 4px 0px 0px 4px; height: 35px; font-weight: 600;
							border-top: 0px; border-left: 0px; margin-top: -1px; margin-bottom: -1px; text-transform: capitalize;">
						<option style="font-weight: 600;" value="1" ng-value="1">Período Prev.Faturamento</option>
					</select>
					<!--ng-change="vm.TabelaPrincipal.apagar();" ng-change="vm.TabelaPrincipal.apagar();"-->
					<input type="date" style="width: 136px; margin-left: 4px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro2.DataInicio" ng-atalho ng-readonly="vm.Filtro2.TipoData == 3">
					<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input type="date" style="width: 136px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro2.DataFim" ng-atalho ng-readonly="vm.Filtro2.TipoData == 3">
				</div>
			</div>

			<div class="form-group">
				<label>Tamanho:</label>
				<input class="form-control input-menor text-left filter_main" type="text" 
					style="width: 65px !important;" ng-model="vm.Relatorio.FILTRO_TAMANHO">
			</div>

			<br>

			<div class="form-group" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					<select class="form-control no_selection" ng-model="vm.Filtro4.TipoData" ng-change="vm.Filtro4.apagar_filtro();" 
						style="margin-right: 0px; background-color: #e2e2e2; border-radius: 4px 0px 0px 4px; height: 35px; font-weight: 600;
							border-top: 0px; border-left: 0px; margin-top: -1px; margin-bottom: -1px; text-transform: capitalize;">
						<option style="font-weight: 600;" value="1" ng-value="1">Período Produção</option>
					</select>
					<!--ng-change="vm.TabelaPrincipal.apagar();" ng-change="vm.TabelaPrincipal.apagar();"-->
					<input type="date" style="width: 136px; margin-left: 4px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro4.DataInicio" ng-atalho ng-readonly="vm.Filtro4.TipoData == 3">
					<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input type="date" style="width: 136px; margin-top: 4px;" class="form-control filter_main"
						ng-model="vm.Filtro4.DataFim" ng-atalho ng-readonly="vm.Filtro4.TipoData == 3">
				</div>
			</div>
			<div class="consulta-etapa-prod" id="consulta-etapa-prod"></div>
			<br>
			<div class="form-group" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					
					<input 
						style="margin-top: -5px; margin-left: 7px;"
						type="checkbox" 
						ng-checked="vm.Relatorio.TIPO_V_TELA == 'B'"
						ng-true-value="'B'"
						ng-false-value="'A'"
						ng-click="vm.Relatorio.TIPO_V_TELA = (vm.Relatorio.TIPO_V_TELA  == 'B') ? 'A' : 'B'">

					<div ng-click="vm.Relatorio.TIPO_V_TELA = (vm.Relatorio.TIPO_V_TELA == 'B') ? 'A' : 'B'"
							style="width: 190px; display: block; padding: 9px 0px 0px 3px; cursor: pointer;">
						Somente Itens com Necessidade
					</div>
					
				</div>		 
			</div> 

			<div class="form-group" ng-if="vm.Relatorio.TIPO_V_TELA != 'B'" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					
					<input 
						style="margin-top: -5px; margin-left: 7px;"
						type="checkbox" 
						ng-checked="vm.Relatorio.TIPO_E_SKU == 'B'"
						ng-true-value="'B'"
						ng-false-value="'A'"
						ng-click="vm.Relatorio.TIPO_E_SKU = (vm.Relatorio.TIPO_E_SKU  == 'B') ? 'A' : 'B'">

					<div ng-click="vm.Relatorio.TIPO_E_SKU = (vm.Relatorio.TIPO_E_SKU == 'B') ? 'A' : 'B'"
						style="width: 190px; display: block; padding: 9px 0px 0px 3px; cursor: pointer;">
						Exibir Todos os Tamanhos
					</div>					
				</div>		 
			</div>

			<div class="form-group" style="margin-right: 0px !important;">
				<div class="form-group" style="display:flex; width: calc(29%); min-width: fit-content; max-width: fit-content; margin-top: 16px;
					background-color: #e2e2e2; padding: 0px; border-radius: 6px; height: 35px; padding-right: 4px; border: 1px solid #cccccc;">
					
					<input 
						style="margin-top: -5px; margin-left: 7px;"
						type="checkbox" 
						ng-checked="vm.Relatorio.TIPO_V_AGP == 'B'"
						ng-true-value="'B'"
						ng-false-value="'A'"
						ng-click="vm.Relatorio.TIPO_V_AGP = (vm.Relatorio.TIPO_V_AGP  == 'B') ? 'A' : 'B'; vm.TabelaPrincipal.apagar();">

					<div ng-click="vm.Relatorio.TIPO_V_AGP = (vm.Relatorio.TIPO_V_AGP == 'B') ? 'A' : 'B'; vm.TabelaPrincipal.apagar();"
							style="width: 190px; display: block; padding: 9px 0px 0px 3px; cursor: pointer;">
						Agrupar por Perfil de Cor
					</div>
					
				</div>		 
			</div>

			<div class="form-group" ng-if="vm.Relatorio.TIPO_V_AGP == 'B'">
				<label>Cálculo de Necessidade:
					<span class="glyphicon glyphicon-question-sign" data-toggle="popover" data-placement="right" 
						title="" data-element-content="<strong>PRÉ-AGRUPAMENTO:<br>
														O sistema calculará a necessidade de produção por cor individualmente, e fará agrupamento das cores por perfil somente após esse cálculo;<br>
														PÓS-AGRUPAMENTO:<br>
														O sistema agrupará as cores antes do cálculo da necessidade de produção;</strong>" 
								on-finish-render="bs-init"></span></label>
				<select class="form-control" ng-model="vm.Relatorio.TIPO_V_NEC">
					<option value="A">Pré-Agrupamento</option>
					<option value="B">Pós-Agrupamento</option>
				</select>
			</div>
			<!-- <div class="form-group">
				<label>Visualização em tela:</label>
				<select class="form-control" ng-model="vm.Relatorio.TIPO_V_TELA">
					<option value="A">Tudo</option>
					<option value="B">Com necessidade</option>
					 <option value="B">Com necessidade de produção</option>
					<option value="C">Com necessidade de estoque</option> 
				</select>
			</div> -->

			<br>

			<div style="width: 620px; display: flex;">

				<div style="width: 132px; float: left;">
					<ul id="tab" class="nav nav-tabs" role="tablist"> 
						<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-if="param.VISIVEL == true"
							ng-click="vm.Relatorio.tabParanClick(param, '.consulta-g-' + param.TAG);"
							role="presentation"
							class="@{{$index == 0 ? 'active' : ''}} tab-detalhamento"
							ng-repeat="param in vm.Relatorio.CONSULTAS  | orderBy:'ORDEM' track by $index">
		
							<a
								style=" padding: 8px 15px 7px 0px;
										float: right;
										border-radius: 5px 1px 1px 4px;
										width: calc(100% - 2px);
										border: 0px;
										font-weight: bold;
										height: 35px;										
    									margin-right: 1px;"
								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 style="white-space: nowrap;" 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% - 70px); padding: 3px; border: 0px;">
		
						<div
							ng-repeat="param in vm.Relatorio.CONSULTAS | 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="@{{param.TAG}} consulta-multipla" id="@{{param.TAG}}"></div>
		
							<div class="table-ec table-scroll" style="height: 185px;" >
								<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.Relatorio.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.Relatorio.removerItemTabelaParan(item, param.ITENS);">
													<span class="glyphicon glyphicon-trash"></span>
												</button>
											</th>
										</tr>
									</tbody>
								</table>
							</div>
							
							<div ng-if="param.PARAMETRO == 'Estabelecimento'" class="alert alert-warning" role="alert">Estabelecimentos para análise de faturamento</div>
							<div ng-if="param.PARAMETRO == 'Localizacao'" 	  class="alert alert-warning" role="alert">Localizações para análise do comparativo de estoque</div>
							<div ng-if="param.PARAMETRO == 'Localizacao2'"    class="alert alert-warning" role="alert">Localizações para análise do comparativo de estoque</div>
						</div>
		
					</div>
				</div>
				<div class="form-group" style="width: fit-content; position: relative; top: 290px; margin-left: 15px;">
					<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>

		</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.Relatorio.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.Relatorio.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.Relatorio.DADOS_RENDER = ( vm.Relatorio.DADOS | orderBy : vm.Relatorio.ORDER_BY | find: {model : vm.Relatorio.FILTRO_DADOS ,fields : 'all'})"
                    ng-Click="vm.Relatorio.visualizar()"
                    ng-focus="vm.Relatorio.SELECTED = item"
                    ng-class="{ 'selected' : vm.Relatorio.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.progresso')
    @include($menu.'.modal.Relatorio')
	@include($menu.'.modal.RelatorioItens')
	@include($menu.'.modal.RelatorioImpressao')
	
	@include($menu.'.modal.ConfirmItensSelected')
</div>
@endsection

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