@extends('helper.include.view.modal', ['id' => 'modal-PesquisaStats', 'class_size' => 'modal-big'])

@section('modal-start')
    <form class="form-inline" ng-submit="vm.PesquisaStats.TIPO_ADD < 3 ? vm.PesquisaStats.gravar() : vm.PesquisaStats.confirmItensSelected()">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.Pesquisa.SELECTED.DESCRICAO}} -->
	<span>{{ Lang::get('opex/_25050.titulo-estatisticas') }}</span>
</h4>

@overwrite

@section('modal-header-right')
	
	<!-- <label ttitle="Quantidade de etiquetas a serem impressas">Qtd:</label>
	<input class="form-group input-menor" style="text-align: right;" min="1" type="number" ng-model="vm.PesquisaStats.SELECTED.PRINT_QTD">
	
	<label>Tipo:</label>
	<select class="form-group" ng-model="vm.PesquisaStats.SELECTED.PRINT_TIPO">
		<option value="1">Etiqueta</option>
	</select>

	<button ng-if="vm.PesquisaStats.ALTERANDO && vm.PesquisaStats.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.PesquisaStats.ALTERANDO && vm.PesquisaStats.TIPO_ADD == 3" type="submit" class="btn btn-primary" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>
	
	<button ng-if="vm.PesquisaStats.ALTERANDO" ng-click="vm.PesquisaStats.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>

	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || (vm.PesquisaStats.TIPO_ADD == 2 && vm.Pesquisa.ALTERANDO == false)" ng-if="!vm.PesquisaStats.ALTERANDO" ng-click="vm.PesquisaStats.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
        <span class="glyphicon glyphicon-edit"></span> Alterar
    </button>   
	
	<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0 || (vm.PesquisaStats.TIPO_ADD == 2 && vm.Pesquisa.ALTERANDO == false)" ng-if="!vm.PesquisaStats.ALTERANDO" ng-click="vm.PesquisaStats.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>-->
	
	<button ng-if="!vm.PesquisaStats.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Pesquisa.fecharModalStats()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	 

@overwrite

@section('modal-header-end')

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 100px);">
	<div class="row">
		<div class="form-group">
			<label style="font-size: 18px;">@{{ vm.Pesquisa.SELECTED.ID | lpad:['5',0]}} - @{{ vm.Pesquisa.SELECTED.TITULO }}</label>
		</div>

		<div class="row" style="margin-top: 15px;">
			<legend>Resumo</legend>
			<div class="qtd_group">
				<div class="qtd_esperada">
					<label style="margin-bottom: 0px;">Qtd. esperada: </label><label class="num_qtd_esperada">@{{ vm.Pesquisa.SELECTED.QTD_ESPERADA }}</label>
				</div>
				<div class="qtd_respondida">
					<label style="margin-bottom: 0px;">Qtd. respondida: <label class="num_qtd_respondida">@{{ vm.Pesquisa.SELECTED.QTD_RESPONDIDA }}</label></label>
				</div>
				<div class="qtd_falta">
					<label style="margin-bottom: 0px;">Faltam responder: <label class="num_qtd_falta">@{{ vm.Pesquisa.SELECTED.QTD_FALTA }}</label></label>
				</div>
			</div>

			<div class="dash_graficos" style="width: 90%;">
				<!-- <div class="chart-bar grafico2">
					<canvas id="myPieChart"></canvas>
					<canvas id="myPieChartSatis_porcento"></canvas>
					<canvas id="myPieChartSatis"></canvas>
				</div> -->

				<!-- <div class="chart-bar grafico3">
					
				</div> -->
				<div class="chart-bar grafico2" style="width: 80%; margin-left: 95px;">
					<div style="width: 100%; margin-left: 10px;">
						<canvas width="100vw" height="100vh" id="myPieChart"></canvas>				
					</div>
					<div style="width: 100%; margin-left: 100px;">
						<canvas width="100vw" height="100vh" id="myPieChartSatis_porcento"></canvas>				
					</div>
					<div style="width: 100%; margin-left: 100px;">
						<canvas width="100vw" height="100vh" id="myPieChartSatis"></canvas>				
					</div>
				</div>				

			</div>							
		</div>

		<section class="row" style="margin-top: 15px;">
			<legend>Destinatários</legend>
			<div class="row" style="width: 100%; display: flex;">			
				<div style="width: 26%;" class="tabela_destinatario" id="tabela_destinatario"></div>				
				
				<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%;">
					<div class="tabela_resposta" id="tabela_resposta" style="margin-left: 30px; width: 100%; min-height: 344px;"></div>
					<div class="select_destinatario">
						<h3>Clique e selecione um destinatário na tabela ao lado para exibir sua(s) resposta(s)</h3>
					</div>
					<div class="select_destinatario_sr" style="display: none;">
						<h3>Usuário sem respostas</h3>
					</div>
				</div>
				

				<div class="form-group" style="width: 16%; display: flex; flex-direction: column; align-items: center; margin-left: 2%;">
					<label>Satisfação do Destinatário</label>
					<div class="chart-bar grafico3">
						<div>
							<canvas id="myPieChartDestinatario" style="width: 250px; height: 250px;"></canvas>
						</div>
						<div>
							<canvas id="myPieChartDestinatario_porcento" style="width: 250px; height: 250px;"></canvas>
						</div>												
					</div>
				</div>
			</div>
		</section>
		
		<div class="row" style="margin-top: 5px;">			
			<!-- <div class="tabela_respostas_ger" id="tabela_respostas_ger"></div> -->
			<legend>Perguntas</legend>
			<div class="panel panel-primary" style="margin-bottom: 5px !important;" ng-repeat="pergunta in vm.Pesquisa.PERGUNTAS_DESC track by $index"> 
				<div class="panel-heading collapsed" style="cursor: pointer !important;" tabindex="0" id="containerCasos_@{{pergunta.ORDEM}}" data-toggle="collapse" data-target="#dadosCasos_@{{pergunta.ORDEM}}" aria-expanded="true" aria-controls="dadosCasos_@{{pergunta.ORDEM}}" ng-click="vm.changePainel('dadosCasos+'+pergunta.ORDEM);"> 				
					<h3 class="panel-title">@{{ ($index + 1) | lpad: [2,0] }} - @{{ pergunta.PERGUNTA_DESCRICAO }}</sub>
						<!-- <i class="fa fa-chevron-circle-down" 
						style="float: right; cursor: pointer;"
						ng-class="{'fa-chevron-circle-down': !vm.DADOS_CASOS2,
									'fa-chevron-circle-up': vm.DADOS_CASOS2}" aria-hidden="true">
						</i></h3>  -->
				</div> 
				<div class="panel-body collapse" id="dadosCasos_@{{pergunta.ORDEM}}" aria-expanded="false" style="height: 30px;">					
					<div class="row">	
						<div class="form-group">							
							<ul class="list-inline" style="margin-top: 10px; display: grid;">
								<li ng-repeat="resposta in pergunta.ALTERNATIVAS">@{{ resposta.ALTERNATIVA_DESCRICAO }}: @{{ resposta.RESPOSTA }}</li>															
							</ul>
						</div>						
					</div>
				</div>
			</div>															
		</div>
		
	</div>
	
</div>
</form>

@overwrite