@extends('master')

@section('titulo')
	{{ Lang::get('admin/_11160.titulo') }}
@endsection

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

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

	@php $CASO_ID			= isset($_GET['CASO_ID'])	?	$_GET['CASO_ID']	:	0;
	<input type="hidden"	class="_casos_id"	id="_casos_id"	value="{{ $CASO_ID }}"		>

	<input type="hidden"	class="_painel_id"	id="_painel_id"	value="{{ $painel_id }}"	>


	<ul class="list-inline acoes" ng-show="!(vm.painel_id > 0)">
		<li>
			<a tabindex="-1" href="{{ url_origin($_SERVER) }}/_26031" target="_blank" rel="noopener noreferrer" style="padding: 5px 8px; border: solid 1px #0f17a9; background-color: #0f17a9; border-radius: 4px;">
				<span style="color: #fff; font-size: 8pt; font-weight: bold;" ttitle="Abrir Cadastro de Paineis de Casos (26031)">
					26031 - CADASTRO DE PAINEIS DE CASOS
					<span class="fa fa-external-link" style="margin-left: 10px;"></span>
				</span>
			</a>
		</li>
	</ul>

	<ul class="list-inline acoes" ng-show="vm.painel_id > 0">
		<li>
			<button type="button" class="btn btn-primary btn-incluir" 
				data-hotkey="f6" ng-disabled="!{{ userMenu($menu)->INCLUIR }} || vm.PERMISSOES_USUARIO.ADICIONAR == 0" 
				ng-click="vm.Casos.incluir()">
				<span class="glyphicon glyphicon-plus"></span> Incluir
			</button>
		</li>

		<li>
			<a style="padding: 7px 10px; border: solid 1px #0f17a9; background-color: #0f17a9; border-radius: 4px;">
				<span style="color: #fff; font-size: 13pt; font-weight: bold;">
					@{{ vm.PERMISSOES_USUARIO.PAINEL }}
					<span class="fa fa-folder-open" style="margin-left: 10px;"></span>
				</span>
			</a>
		</li>

		<li style="float: right;">
			<button type="button" class="btn btn-default btn-incluir" 
				 ng-click="vm.listaPainel();">
				<span class="glyphicon glyphicon-chevron-left"></span> Voltar
			</button>
		</li>

		<li style="float: right;" ng-show="!vm.TEMPORIZADOR">
			<button type="button" class="btn btn-warning btn-incluir" 
				 ng-click="vm.defineTemporizador();" style="height: 34px;">
				<span class="glyphicon glyphicon-time"></span>
			</button>
		</li>

		<li style="float: right;" ng-show="vm.TEMPORIZADOR">
			<button type="button" class="btn btn-success btn-incluir" 
				 ng-click="vm.marcar_minutos();" style="height: 34px;">
				<span id="timer"></span>
			</button>

			<button type="button" class="btn btn-danger btn-incluir" 
				 ng-click="vm.TEMPORIZADOR = false; vm.MINUTOS = 0; vm.marcar_minutos();" style="height: 34px;">
				<span class="glyphicon glyphicon-remove"></span>
			</button>
		</li>

		<!-- <li>
			<div class="dropdown" id="dropCompilado">
				<button
					id="dLabel"
					type="button"
					data-toggle="dropdown"
					data-hotkey="f2"
					class="btn btn-danger"
					ng-click="vm.CasosImpressao.focusItem($event);"
					ng-dbclick="$event.stopPropagation();">
					<span class="fa fa-th-list"></span> Funcionalidades
				</button>
				<ul class="dropdown-menu multi-level" 
					role="menu" 
					aria-labelledby="dropdownMenu">
					<li class="dropdown-header" style="text-transform: initial; font-weight: bold;">Ações Disponíveis</li>
					<li tabindex="0" 
						ng-repeat="item in vm.FUNCIONALIDADES track by $index" 
						ng-keypress="$event.keyCode == 13 && item.FUNCAO();" 
						ng-keydown="vm.CasosImpressao.changeSelection($event)">
						<a ng-click="item.FUNCAO()" style="cursor: pointer;">
							<span class="@{{item.ICONE}}"></span> @{{item.NOME}}
						</a>
					</li>
				</ul>
			</div>
		</li> -->

		<!-- <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.Casos.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 ng-show="vm.painel_id == 0">
		<div ng-if="false">

			<form ng-submit="vm.verificaPainelCaso()" class="form-inline">
				<div id="filter_main_verif1" 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">
						<label>Nº Caso:</label>
						<input 
							type="text" 
							only-digits2 
							class="form-control input-menor filter_main_verif1" 
							ng-model="vm.CASO_ID_FILTRO_PAINEIS" 
							ng-change="vm.removeMensagemAlteracao(vm.CASO_ID_FILTRO_PAINEIS, $event);" 
							style="text-align: end;">
					</div>

					<div class="form-group" style="padding-top: 12px; 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-verif1">
							<span class="glyphicon glyphicon-filter"></span> Filtrar
						</button>
					</div>

					<!-- ----------------------------------------------------------------------------------- -->

					<div class="form-group animacao_notificacao animar" ng-show="vm.AVISO_ALERTA_VISIVEL == true">

						<span ng-bind="vm.MENSAGEM_AVISO_FILTRO"></span>

					</div>

				</div>
			</form>

		</div>

		<legend>Painéis de Casos  <span class="btn btn-xs btn-default glyphicon glyphicon-refresh" ng-click="vm.verificaPaineisVisiveis();"></span> </legend>

		<div style="display: inline-flex; flex-wrap: wrap; /* align-items: center; */ justify-content: center; align-content: center;">
			<div ng-repeat="item in vm.DADOS_PAINEL track by item.PAINEL_ID" style="margin: 10px; border: solid 5px #0f17a9; border-radius: 12px; overflow: hidden; max-width: 380px;" id="grupo_painel_caso_@{{item.PAINEL_ID}}" class="grupo_painel_caso_@{{item.PAINEL_ID}}">

				<div style="padding: 0px; cursor: pointer;" ng-click="vm.selecionaPainel(item.PAINEL_ID);" id="agrupamento_painel_caso_@{{item.PAINEL_ID}}" class="agrupamento_painel_caso_@{{item.PAINEL_ID}}">
					<div style="padding: 10px;background-color: #0f17a9;">
						<span style="font-size: 13pt; font-weight: bold; color: #ffffff;">@{{ item.DESC_PAINEL }}</span> <br>
						<span style="font-size: 8pt; color: #ffffff;" ng-show="item.PAINEL_MENU_GRUPO != ''"><span style="font-weight: bold;">Grupo:</span> @{{ item.PAINEL_MENU_GRUPO }} - @{{ item.PAINEL_MENU_GRUPO_DESC }}</span>
					</div>

					<legend style="margin: 5px 0px 0px 0px;"></legend>

					<div style="padding: 10px;">
						<span style="font-size: 11pt;"><span style="font-weight: bold;">Abertos nas Últimas 24h:</span> @{{ item.COUNT_ULT_ABERTOS | number:0 }}</span> <br>
						<span style="font-size: 11pt;"><span style="font-weight: bold;">Fechados nas Últimas 24h:</span> @{{ item.COUNT_ULT_FECHADOS | number:0 }}</span>

						<br> <br>

						<span style="font-size: 11pt;"><span style="font-weight: bold;">Qtd. Abertos:</span> @{{ item.COUNT_CASOS_ABERTOS | number:0 }}</span> <br>
						<!-- <span style="font-size: 11pt;"><span style="font-weight: bold;">Qtd. Fechados:</span> @{{ item.COUNT_CASOS_FECHADOS | number:0 }}</span> <br>
						<span style="font-size: 11pt;"><span style="font-weight: bold;">Qtd. Total:</span> @{{ item.COUNT_CASOS_TOTAL | number:0 }}</span> <br> -->
						<span class="fa fa-folder-open" style="float: right; font-size: 25pt; margin-top: -30px;"></span>
					</div>
				</div>

			</div>
		</div>

	</div>
	
	<div ng-show="vm.painel_id > 0">

		<form ng-submit="vm.Casos.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 class="form-group">
					<label>Período:</label>
					<div>
						<input 
							type="date" 
							ng-atalho 
							class="data-ini filter_main data1 data1-princ" 
							required 
							ng-model="vm.Casos.FILTRO_DATA_INICIAL">
						<label class="periodo-a">à</label>
						<input 
							type="date" 
							ng-atalho 
							class="data-fim filter_main data2 data2-princ" 
							required 
							ng-model="vm.Casos.FILTRO_DATA_FINAL">
					</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" 
							ng-model="vm.Casos.FILTRO_TIPO_DATA" 
							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">Abertura</option>
							<option style="font-weight: 600;" value="2" ng-value="2">Fechamento</option>
						</select>
						<input 
							type="date" 
							ng-atalho 
							class="data-ini filter_main data1" 
							required 
							ng-model="vm.Casos.FILTRO_DATA_INICIAL" 
							style="width: 130px; margin-left: 4px; margin-top: 4px;">
						<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;">à</label>
						<input 
							type="date" 
							ng-atalho 
							class="data-fim filter_main data2" 
							required 
							ng-model="vm.Casos.FILTRO_DATA_FINAL" 
							style="width: 130px; margin-top: 4px;"> 
					</div>
				</div>


				<div class="form-group">
					<label>Situação:</label>
					<div class="input-group">
						<select 
							name="repeatSelect" 
							id="repeatSelect" 
							ng-model="vm.Casos.SITUACAO_FILTRO">
							<option value="90">ABERTOS/ATENDIMENTO</option>
							<option value="1">ABERTOS</option>
							<option value="2">EM ATENDIMENTO</option>
							<option value="3">FECHADOS</option>
							<option value="">TODOS</option>
						</select>
					</div>
				</div>

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


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

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

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

				<div class="form-group">
					<label>Nº Caso:</label>
					<input 
						type="text" 
						only-digits2 
						class="form-control input-menor filter_main" 
						ng-model="vm.Casos.FILTRO_CASO_ID" 
						style="text-align: end;">
				</div>

				<div class="form-group" style="width: calc(100% - 1475px); padding-top: 15px; min-width: 300px;">
					<input type="text" style="width: 100% !important; min-width: 170px;" 
						placeholder="Filtragem por Dados" 
						class="form-control input-maior filter_main"  
						ng-model="vm.Casos.FILTRO_DADOS">
				</div>

				<div class="form-group" ng-show="vm.PERMISSOES_USUARIO.TIPO_VISUAL_WK == 2" style="margin-top: -5px;">
					<input type="checkbox" id="click18842_filtro" class="form-control" 
						ng-checked="vm.Casos.FILTRO_DETALHE_WORKFLOW == 1" 
						ng-true-value="1"	ng-false-value="0" 
						check-standard2 
						ng-model="vm.Casos.FILTRO_DETALHE_WORKFLOW">
					<label for="click18842_filtro" style="margin-left: 5px;/* font-weight: bold */">
						Mostrar Workflows Detalhados
					</label>
				</div>

				<div class="form-group" style="padding-top: 12px; 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="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.Casos.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.Casos.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.Casos.DADOS_RENDER = ( vm.Casos.DADOS | orderBy : vm.Casos.ORDER_BY | find: {model : vm.Casos.FILTRO_DADOS ,fields : 'all'})"
					ng-Click="vm.Casos.visualizar()"
					ng-focus="vm.Casos.SELECTED = item"
					ng-class="{ 'selected' : vm.Casos.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.Casos')
	@include($menu.'.modal.CasosItens')
	@include($menu.'.modal.CasosEnvolvidos')
	@include($menu.'.modal.CasosWorkflows')
	@include($menu.'.modal.CasosImpressao')

	@include($menu.'.modal.CasosFile')
	@include($menu.'.modal.CasosLembrete')
	@include($menu.'.modal.CasosCadastroContato')
	@include($menu.'.modal.CasosFinalizar')

	@include($menu.'.modal.CasosHistorico')

	@include($menu.'.modal.ConfirmItensSelected')
</div>
@endsection

@section('script')
	<script src="{{ elixir('assets/js/direct-print.js') }}"></script>
	<script src="{{ url('js/editor4.16.1/ckeditor.js') }}"></script>
	<script src="{{ url('kcfinder3/ckfinder.js') }}"></script>
	<!-- <script src="{{ url('assets/js/editor/ckeditor.js') }}"></script> -->
    <script src="{{ elixir('assets/js/codemirror.js') }}"></script>
	<script src="{{ elixir('assets/js/_11160.js') }}"></script>
@append