@extends('master')

@section('titulo')
    {{ Lang::get('vendas/_12500.titulo') }}
@endsection

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

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

	<input type="hidden" value="{{$periodoAnterior}}" class="periodoAnterior" />

	<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.MetasCliente.tabela_height()">
				Filtro
				<span class="caret"></span>
			</button>
		</li>
		<li style="float: right !important; margin-right: 26px !important; display: none;">
			<label style="font-weight: bold; margin-right: 4px;">Modo de visualização:</label>

			<div class="form-group" style="display: inline-block !important;">
				<div class="check-group">
					<label class="lbl" style="margin-right: 25px;">
						<input type="radio" ng-model="vm.MetasCliente.MODO_VISUALIZACAO" ng-value="0" ng-checked="vm.MetasCliente.MODO_VISUALIZACAO == 0" ng-change="vm.MetasCliente.changeModoVisualizacao();" tabindex="-1">
						<span>Por região</span>
					</label>
					<label class="lbl" style="margin-right: 25px;">
						<input type="radio" ng-model="vm.MetasCliente.MODO_VISUALIZACAO" ng-value="1" ng-checked="vm.MetasCliente.MODO_VISUALIZACAO == 1" ng-change="vm.MetasCliente.changeModoVisualizacao();" tabindex="-1">
						<span>Por cliente</span>
					</label>
				</div>
			</div>
		</li>
	</ul>  

	@php $cliente_id = isset($_GET['CLIENTE_ID']) ? $_GET['CLIENTE_ID'] : 0

	<input type="hidden" id="CLS_CLIENTE_ID" name="CLS_CLIENTE_ID" value="{{ $cliente_id }}">

        
    <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.MetasCliente.consultar(1)" class="form-inline">		
			<div id="filtro_main" class="collapse in" aria-expanded="true" 
				 style="margin-bottom: 4px;
						background: rgba(221,221,221,.33);
						padding: 2px 10px 7px;
						border-radius: 5px;">
				<div class="bs-callout bs-callout-info" id="callout-glyphicons-dont-mix" style="display: inline-block; width: 25% !important;" ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1">
					<h4>Cliente
						<a tabindex="-1" href="/_12360" target="_blank" rel="noopener noreferrer"><span class="fa fa-external-link" title="12360 - Cadastro de Clientes"></span></a>
						<span ng-show="vm.ConsultaCliente.item.selected == true" style="font-size: 11px; float: right;">Dt.Cadastro: @{{vm.ConsultaCliente.item.dados.DATA_CADASTRO}}</span>						
						<span ng-show="vm.ConsultaCliente.item.selected == true"
							class="glyphicon glyphicon-info-sign"
							data-toggle="popover"
							data-placement="bottom"
							style="color: #337ab7; cursor: pointer; float: right; margin-top: -2px; margin-right: 7px;"
							data-element-content="#info-@{{ vm.ConsultaCliente.item.dados.ID }}"
							on-finish-render="bs-init"
							data-original-title="Grupo: @{{vm.ConsultaCliente.item.dados.EMPRESA_GRUPO_DESC}}">
						</span> 
						<div id="info-@{{ vm.ConsultaCliente.item.dados.ID }}" style="display: none;">
							<div class="origem-container">
								<table class="table table-striped table-bordered">
									<thead>
										<tr>
											<th class="text-left">Cliente</th>
											<th class="text-left">Cidade(UF)</th>
											<th class="text-left">Situação</th>
											<th class="text-left">Última Compra</th>
										</tr>
									</thead>
									<tbody>
										<tr style="vertical-align: middle;font-size: 20px;font-weight: normal;cursor: text; margin-right: 7px;" 
											ng-repeat="iten in vm.ConsultaCliente.item.dados.EMPRESAS track by $index">
											<td class="text-left">								
												<span style="color: #337ab7; font-size: 12pt;">@{{iten.ID}} - @{{iten.NOMEFANTASIA}}</span>
											</td>
											<td class="text-left">								
												<span style="color: #337ab7; font-size: 12pt;">@{{iten.CIDADE}}(@{{iten.UF}})</span>
											</td>
											<td class="text-left">								
												<span style="color: #337ab7; font-size: 12pt;">@{{iten.SITUACAO_DESC}}</span>
											</td>
											<td class="text-left">								
												<span style="color: #337ab7; font-size: 12pt;">@{{iten.ULTIMA_COMPRA}}</span>
											</td>
										</tr>  
									</tbody>
								</table>
							</div>
						</div>
					</h4>
					<div style="display: -webkit-inline-box; width: 100% !important;" class="consulta-cliente"></div>
				</div>
				
				<div class="bs-callout bs-callout-warning" id="callout-glyphicons-dont-mix" style="display: inline-block; width: 15% !important;" ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1">
					<h4>Grupo de Cliente
						<a tabindex="-1" href="/_12450" target="_blank" rel="noopener noreferrer"><span class="fa fa-external-link" title="12450 - Cadastro de Grupos de Clientes"></span></a>
					</h4>
					<br ng-if="vm.ConsultaCliente.item.selected == false">
					<span ng-show="vm.ConsultaCliente.item.selected == true">@{{vm.ConsultaCliente.item.dados.EMPRESA_GRUPO_DESC}}</span>
					
					<!-- <div style="display: -webkit-inline-box; width: 100% !important;" class="consulta-grupo-cliente"></div> -->
				</div>

				<div class="bs-callout bs-callout-success" id="callout-glyphicons-dont-mix" style="display: inline-block; width: 15% !important;" ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1">
					<h4>Região</h4>
					<br ng-if="vm.ConsultaCliente.item.selected == false">
					<span ng-show="vm.ConsultaCliente.item.selected == true">@{{vm.ConsultaCliente.item.dados.REGIAO_DESC}}</span>
				</div>

				<div class="bs-callout bs-callout-danger" id="callout-glyphicons-dont-mix" style="display: inline-block !important; width: 33% !important;">
					<h4>Período
						<a tabindex="-1" href="/_21250" target="_blank" rel="noopener noreferrer"><span class="fa fa-external-link" title="21250 - Cadastro de Regiões"></span></a>
					</h4>
					<div style="display: -webkit-inline-box; width: 100% !important;" class="consulta-periodo"></div>
				</div>


				<div class="form-group" style="margin-left: 20px;">
					<button type="submit" class="btn 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="row" style="margin-top: 20px !important;">
		<div class="col-sm-6 col-md-6 col-lg-6" ng-if="vm.MetasCliente.CONSULTADO && vm.MetasCliente.MODO_VISUALIZACAO == 1 && vm.ConsultaCliente.item.selected">
			<div ng-if="vm.MetasCliente.PERCENTUAL_META_ATU >= 100" class="alert alert-success" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-check"></i>Cliente Atingiu a Meta!</strong>
			</div>
			<div ng-if="!(vm.MetasCliente.PERCENTUAL_META_ATU >= 100)" class="alert alert-danger" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-close"></i>Faltam R$ @{{vm.MetasCliente.VALORES_PERIODO_ATU_FALT_COPIA | number: 2 }} para o Cliente Atingir a Meta.</strong>
			</div>
		</div>
		
		<div class="col-sm-6 col-md-6 col-lg-6" ng-if="vm.MetasCliente.CONSULTADO && vm.MetasCliente.MODO_VISUALIZACAO == 1 && vm.ConsultaCliente.item.selected">
			<div ng-if="vm.MetasCliente.PERCENTUAL_META_ANT >= 100" class="alert alert-success" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-check"></i>Cliente Atingiu a Meta!</strong>				
			</div>
			<div ng-if="!(vm.MetasCliente.PERCENTUAL_META_ANT >= 100)" class="alert alert-danger" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-close"></i>Faltam R$ @{{vm.MetasCliente.VALORES_PERIODO_ANT_FALT_COPIA | number: 2 }} para o Cliente Atingir a Meta.</strong>
			</div>
		</div>

		<div class="col-sm-12 col-md-12 col-lg-6">

			<div class="card card-header-actions h-100">
				<div class="card-header">
					<span ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1">Compras no período atual</span>
					<span ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 0">Compras dessa região</span>
				</div>
				<div class="card-body">
					<div class="chart-bar"  ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1"><canvas id="myComprasAtuais" width="100%" height="400"></canvas></div>
					<div class="chart-bar"  ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 0"><canvas id="myComprasAtuaisGeral" width="100%" height="400"></canvas></div>
				</div>
			</div>

		</div>

	
		<div class="col-sm-12 col-md-12 col-lg-6">

			<div class="card card-header-actions h-100">
				<div class="card-header">
					<span ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1">Compras no período selecionado</span>
					<span ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 0">Compras de outras regiões</span>
				</div>
				<div class="card-body">
					<div class="chart-bar"  ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 1"><canvas id="myComprasAnteriores" width="100%" height="400"></canvas></div>
					<div class="chart-bar"  ng-show="vm.MetasCliente.MODO_VISUALIZACAO == 0"><canvas id="myComprasAnterioresGeral" width="100%" height="400"></canvas></div>
				</div>
			</div>

		</div>

		<div class="col-sm-6 col-md-6 col-lg-6" ng-if="vm.MetasCliente.CONSULTADO && vm.MetasCliente.MODO_VISUALIZACAO == 1 && vm.ConsultaCliente.item.selected">
			<div class="alert @{{ vm.MetasCliente.PERCENTUAL_META_ATU >= 100 ? 'alert-success' : 'alert-danger' }}" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-close"></i>Percentual Atingido @{{vm.MetasCliente.PERCENTUAL_META_ATU | number: 2}}%</strong>
				
			</div>
		</div>

		<div class="col-sm-6 col-md-6 col-lg-6" ng-if="vm.MetasCliente.CONSULTADO && vm.MetasCliente.MODO_VISUALIZACAO == 1 && vm.ConsultaCliente.item.selected">
			<div class="alert @{{ vm.MetasCliente.PERCENTUAL_META_ANT >= 100 ? 'alert-success' : 'alert-danger' }}" role="alert" style="text-align: center; font-size: 20px;">
				<strong><i style="margin-right: 8px;" class="fa fa-close"></i>Percentual Atingido @{{vm.MetasCliente.PERCENTUAL_META_ANT | number: 2}}%</strong>				
			</div>
		</div>

	</div>

	<!-- <div class="tabela_principal" id="tabela_principal"></div>	 -->
	
    @include($menu.'.modal.MetasCliente')
	@include($menu.'.modal.MetasClienteItens')
	@include($menu.'.modal.MetasClienteImpressao')
	
	@include($menu.'.modal.ConfirmItensSelected')
</div>
@endsection

@section('script')
	<script src="{{ elixir('assets/js/direct-print.js') }}"></script>
	<script src="{{ url('js/chart3.2.1.js') }}"></script>
	
	<script src="{{ url('js/chart_plugin_datalabels2.0.0.js') }}"></script>
    <script src="{{ elixir('assets/js/_12500.js') }}"></script>
@append