@extends('master')

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

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/11161.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">    
		<li>
			<button type="button" class="btn btn-primary btn-incluir" 
				data-hotkey="f6" ng-disabled="!{{ userMenu($menu)->INCLUIR }} || !(vm.Painel_ID > 0)" 
				ng-click="vm.Leeds.incluir()">
				<span class="glyphicon glyphicon-plus"></span> Novo Registro
			</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.LeedsImpressao.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.LeedsImpressao.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.Leeds.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>
	<form ng-submit="vm.Leeds.consultar(0)" 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>Painéis:</label>
				<div class="input-group">
					<select 
						name="repeatSelect" 
						id="repeatSelect" 
						ng-change="vm.Leeds.getWorkflowPainel();" 
						ng-model="vm.Painel_ID">
						<option ng-repeat="item in vm.Leeds.PAINEIS_DISP track by item.ID" ng-value="item.ID">@{{ item.TITULO }}</option>
					</select>
				</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.Leeds.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" 
						style="width: 130px; margin-left: 4px; margin-top: 4px;" 
						class="data-ini filter_main data1"
						ng-atalho
						ng-model="vm.Leeds.FILTRO_DATA_INICIAL">
					<label style="padding-top: 8px; padding-right: 5px; padding-left: 5px;"> à </label>
					<input 
						type="date" 
						style="width: 130px; margin-top: 4px;" 
						class="data-fim filter_main data2"
						ng-atalho
						ng-model="vm.Leeds.FILTRO_DATA_FINAL">
				</div>
			</div>

			<div class="form-group">
				<label>Situação:</label>
				<div class="input-group">
					<select 
						name="repeatSelect" 
						id="repeatSelect"  
						ng-model="vm.Leeds.FILTRO_SITUACAO">
						<option ng-value="'0'">ABERTOS/EM ATENDIMENTO</option>
						<option ng-value="'1'">ABERTOS</option>
						<option ng-value="'2'">EM ATENDIMENTO</option>
						<option ng-value="'3'">FECHADOS</option>
						<option ng-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º Registro:</label>
				<input 
					type="text" 
					only-digits2 
					class="form-control input-menor filter_main" 
					ng-model="vm.Leeds.CASO_ID_FILTRO" 
					style="text-align: end;">
			</div>

			<div class="form-group" style="width: calc(100% - 500px); padding-top: 15px; min-width: 200px;">
				<input type="text" style="width: 100% !important; min-width: 170px;"
					placeholder="Filtragem por ID e Descrição"
					class="form-control input-maior filter_main" 
					ng-model="vm.Leeds.FILTRO_DADOS">
			</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 id="aria-extend-card-caso" style="width: 100%; height: calc(100vh - 410px);" ng-show="vm.Leeds.TAREFAS_WORKFLOW.length > 0">
		<div class="tabela-workflow" ng-if="vm.Painel_ID > 0">
			<!-- <div class="tarefa-workflow" ng-repeat="item in vm.Leeds.TAREFAS_WORKFLOW | orderBy: item.ORDEM"> -->

			<div class="campos-workflow">
				<div class="complete" ng-repeat="item in vm.Leeds.TAREFAS_WORKFLOW | orderBy: item.ORDEM" style="background-color: @{{ item.COR }} !important; color: @{{ item.FONTE }} !important;">
					<div style="min-width: 300px; height: 100%; padding: 5px 20px;">

						<div class="image-icon-tarefa-princ" ng-show="item.IMAGEM != ''" style="background-color: @{{ item.COR }} !important; border-color: @{{ item.COR }} !important;">
							<div class="img-icon" 
								style="width: calc(100%); 
										height: calc(100%); 
										background-size: contain; 
										background-repeat: no-repeat; 
										background-position: center center; 
										background-image: url('@{{ item.IMAGEM }}');">
							</div>
						</div>

						@{{ item.TITULO }}

						<div class="arrow-wrapper">
							<div class="arrow-cover">
								<div class="arrow" style="border-color: #fff !important; background: @{{ item.COR }} !important;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--  -->

			<div class="campos-casos" style="min-width: 100%;">
				<div id="tabela-card-casos" style="display: inherit; overflow: hidden auto;" on-scroll-to-bottom="vm.Leeds.infiniteScrollTable();">
					<div class="colunas-casos" style="width: 100%;" ng-repeat="item in vm.Leeds.TAREFAS_WORKFLOW | orderBy: item.ORDEM">
						<div style="width: 300px; height: 100%; padding: 5px;">

							<div id="card-caso-@{{ caso.ID }}" class="card-caso" ng-repeat="caso in vm.Leeds.DADOS track by caso.ID" ng-if="caso.TAREFA_WORKFLOW_ID == item.ID" style="/* overflow: hidden; */cursor: pointer;" ng-click="vm.Leeds.defineSelected(caso);" ng-dblclick="vm.Leeds.visualizar();">

								<div style="padding: 5px; font-size: 14pt; border: solid 1px transparent; border-radius: 12px 12px 0px 0px; background-color: @{{ caso.STATUS_COR }}; color: @{{ caso.STATUS_TCOR }};">
									<span style="font-weight: bold;">
										@{{ caso.DESC_ID }}

										<span 
											ng-if="caso.MSG_PENDENTE > 0" 
											ttitle="@{{ caso.MSG_PENDENTE | number:0 }} mensagens não lidas" 
											style="font-size: 7pt; 
												   padding: 2px; 
												   border: solid 1px transparent; 
												   border-radius: 14px; 
												   background-color: #ff7100; color: #fff; 
												   position: absolute; 
												   margin: -5px 0px 0px 1px; 
												   width: 20px;">
											@{{ caso.MSG_PENDENTE }}
										</span>
									</span>
									<span style="font-weight: bold; font-size: 8pt; float: right;">@{{ caso.STATUS_DESC_ABREV }} <span class="glyphicon glyphicon-info-sign" ttitle="@{{ caso.STATUS_DESC }}"></span></span>
								</div>

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

								<div style="padding: 5px; font-size: 8pt; text-align: end;">
									<span ng-show="caso.CASO_ORIGEM_ID > 0"> <span style="font-weight: bold;"> <span class="glyphicon glyphicon-random"></span> Origem: </span> @{{ caso.DESC_CASO_ORIGEM_TABELA }} - @{{ caso.DESC_CASO_ORIGEM_ID }} </span> <br ng-show="caso.CASO_ORIGEM_ID > 0">
									<span> <span style="font-weight: bold;"> Dt.Registro: </span> @{{ caso.DATAHORA_REGISTRO_FORMAT }} </span> <br>
									<span ng-show="caso.FECHADO == 1"> <span style="font-weight: bold;"> Dt.Fechamento: </span> @{{ caso.DATA_FECHAMENTO_FORMAT }} </span>
								</div>

								<div style="padding: 5px; font-size: 10pt;">
									<span><span style="font-weight: bold;">@{{ vm.Leeds.MOTIVO_C_DESC }}:</span> @{{ caso.MOTIVO_DESC }}</span> <br>
									<span><span style="font-weight: bold;">@{{ vm.Leeds.TIPO_C_DESC }}:</span> @{{ caso.TIPO_DESC }}</span> <br>
									<span><span style="font-weight: bold;">@{{ vm.Leeds.ORIGEM_C_DESC }}:</span> @{{ caso.ORIGEM_DESC }}</span>
								</div>

								<div style="padding: 5px; font-size: 10pt;" ng-if="caso.ARRAY_CAMPOS_PRINC.length > 0">
									<div ng-repeat="campo in caso.ARRAY_CAMPOS_PRINC">
										<span ng-if="campo.TIPO != 2 && campo.TIPO != 6" auto-title style="width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"><span style="font-weight: bold;">@{{ campo.DESCRICAO }}:</span> @{{ campo.MASCARA_P }} @{{ campo.VALOR }} @{{ campo.MASCARA_S }}</span>
										<span ng-if="campo.TIPO == 2 || campo.TIPO == 6" auto-title style="width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"><span style="font-weight: bold;">@{{ campo.DESCRICAO }}:</span> @{{ campo.MASCARA_P }} @{{ campo.VALORF }} @{{ campo.MASCARA_S }}</span>
									</div>
								</div>

								<div style="padding: 5px; font-size: 10pt; text-align: center;">

									<span ng-show="caso.ATRASO == 1 && caso.FECHADO == 0 && item.ESCALA_ID > 0" class="glyphicon glyphicon-time sinal-atraso" ttitle="Tempo de Atraso: @{{ caso.TEMPO_ATRASO }}"></span>

									<span 
										class="ng-scope" 
										data-toggle="popover" 
										data-placement="bottom" 
										title="" 
										style="border: solid 1px transparent; border-radius: 8px; padding: 3px; background-color: @{{ caso.STATUS_COR }};" 
										data-element-content="#info-campos-tabela-exibidos-@{{ caso.ID }}" 
										on-finish-render="bs-init">
										<span class="glyphicon glyphicon-eye-open" style="color: @{{ caso.STATUS_TCOR }};"></span>
										<span class="fa fa-table" style="color: @{{ caso.STATUS_TCOR }};"></span>
									</span>

									<div id="info-campos-tabela-exibidos-@{{ caso.ID }}" style="display: none;">
										<div class="origem-container table-ec" style="height: 100% !important; overflow: auto !important; max-height: 350px !important;">

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

											<table class="table table-striped table-bordered" ng-show="item.ESCALA_ID > 0">
												<thead>
													<tr>
														<th class="text-left" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">
															<span style="display: inline-flex; font-weight: bold;">Tempo Total</span>
														</th>
														<th class="text-left" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">
															<span style="display: inline-flex; font-weight: bold;">Tempo Restante</span>
														</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-left" style="max-width: 150px;">
															<label style="font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: contents;">@{{ caso.TEMPO_TOTAL_PREVISTO }}</label>
														</td>
														<td class="text-left" style="max-width: 150px;">
															<label style="font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: contents;">@{{ caso.TEMPO_RESTANTE_PREVISTO }}</label>
														</td>
													</tr>
												</tbody>
											</table>
											<table class="table table-striped table-bordered" ng-show="item.ESCALA_ID > 0">
												<thead>
													<tr>
														<th class="text-left" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">
															<span style="display: inline-flex; font-weight: bold;">Data de Início</span>
														</th>
														<th class="text-left" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">
															<span style="display: inline-flex; font-weight: bold;">Previsão Fim</span>
														</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-left" style="max-width: 300px;">
															<label style="font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: contents;">@{{ caso.DATAHORA_REGISTRO_FORMAT }}</label>
														</td>
														<td class="text-left" style="max-width: 300px;">
															<label style="font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: contents;">@{{ caso.DATA_PREVISAO_RESTANTE_FORMAT }}</label>
														</td>
													</tr>
												</tbody>
											</table>

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

											<legend ng-show="item.ESCALA_ID > 0"></legend>

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

											<table class="table table-striped table-bordered" ng-repeat="campo in caso.ARRAY_CAMPOS">
												<thead>
													<tr>
														<th class="text-@{{ campo.ALIGN_CAMPO }}" style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; background-color: @{{ campo.COR_TITLE }} !important; color: @{{ campo.COR_LABEL }} !important;">
															<span style="display: inline-flex; font-weight: bold; background-color: @{{ campo.COR_TITLE }} !important; color: @{{ campo.COR_LABEL }} !important;">@{{ campo.DESCRICAO }}</span>
														</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-@{{ campo.ALIGN_CAMPO }}" style="max-width: 300px; background-color: @{{ campo.COR_CAMPO }} !important; color: @{{ campo.COR_TEXT }} !important;">
															<label ng-if="campo.TIPO != 2 && campo.TIPO != 6" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 20; -webkit-box-orient: vertical; font-weight: normal; background-color: @{{ campo.COR_CAMPO }} !important; color: @{{ campo.COR_TEXT }} !important;">@{{ campo.MASCARA_P }} @{{ campo.VALOR }} @{{ campo.MASCARA_S }}</label>
															<label ng-if="campo.TIPO == 2 || campo.TIPO == 6" style="font-weight: normal; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: contents; background-color: @{{ campo.COR_CAMPO }} !important; color: @{{ campo.COR_TEXT }} !important;">@{{ campo.MASCARA_P }} @{{ campo.VALORF }} @{{ campo.MASCARA_S }}</label>
															<div></div>
														</td>
													</tr>
												</tbody>
											</table>

										</div>
									</div>

								</div>

							</div>

						</div>
					</div>
				</div>
			</div>

			<!-- </div> -->

			<div class="campos-totalizador" ng-if="vm.Leeds.CONTEM_TOTALIZADOR">
				<div id="tabela-card-totalizador" style="width: 100%; display: inherit; overflow: hidden auto;">

					<div class="totalizador-coluna-tarefa" ng-repeat="item in vm.Leeds.TAREFAS_WORKFLOW | orderBy: item.ORDEM">
						<div style="width: 300px; height: 100%; padding: 5px;">
							
							<div class="card-totalizador">
								<span style="font-weight: bold;">@{{ item.MASCARA_P_TOTALIZADOR }} @{{ item.COLUNA_TOTALIZADOR_F }} @{{ item.MASCARA_S_TOTALIZADOR }}</span>
							</div>

						</div>
					</div>

					<div style="margin: 1px 0px; width: 50px; height: 29px; position: absolute; z-index: 1; padding: 5px 5px; font-size: 11pt; font-weight: bold; background-color: #cacaca;">
						<span>Total</span>
					</div>

				</div>
			</div>
		</div>


		<div ng-show="vm.Leeds.FIM_SCROLL == true" 
			style="text-align: center; 
				   border: solid 1px transparent; 
				   border-left-color: #ebe8e8; 
				   border-top-color: #ebe8e8; 
				   border-right-color: #ebe8e8; 
				   border-radius: 0px 0px 30px 30px; 
				   margin-top: 0px; 
				   background-color: #ebe8e8; 
				   color: red; 
				   font-weight: bold;">
			<span>TODOS OS REGISTROS FORAM CARREGADOS</span>
		</div>
	</div>

	<div class="form-group" ng-show="vm.Leeds.TAREFAS_WORKFLOW.length > 0" style="margin-top: 30px; margin-bottom: 0px;">
		<button type="button" class="btn btn-default" style="font-weight: bold; height: 34px; cursor: default !important;" ng-click="">
			<span class=""></span> Qtd. de Registros:  @{{ vm.Leeds.DADOS.length }}
		</button>

		<button type="button" class="btn btn-default" style="font-weight: bold; height: 34px; cursor: default !important;" ng-click="vm.Leeds.infiniteScrollTable();" ttitle="Próxima Página">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</button>

		<div class="legenda_padrao" style="height: 35px; padding: 5px; margin-top: 0px !important; max-width: 900px !important;" ng-show="vm.Leeds.LIST_STATUS.length > 0">
			<span style="font-weight: bold; margin-right: 5px;">Status:</span>

			<div ng-repeat="status in vm.Leeds.LIST_STATUS | orderBy: ['TIPO', 'ID']">
				<span style="margin-top: 4px; background-color: @{{ status.COR }};" class="status-legenda-w999" ttitle="@{{ status.DESCRICAO }}"></span>
				<span style="margin-left: 1px; margin-right: 10px;">@{{ status.DESC_ABREVIADA }}</span>
			</div>
		</div>

		<button type="button" class="btn btn-default" style="font-weight: bold; height: 34px; cursor: default !important; float: right;" ng-click="vm.Leeds.infiniteScrollTableAll();" ttitle="Carregar Todos os Registros">
			<span class="glyphicon glyphicon-save"></span>
		</button>
	</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.Leeds.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.Leeds.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.Leeds.DADOS_RENDER = ( vm.Leeds.DADOS | orderBy : vm.Leeds.ORDER_BY | find: {model : vm.Leeds.FILTRO_DADOS ,fields : 'all'})"
                    ng-Click="vm.Leeds.visualizar()"
                    ng-focus="vm.Leeds.SELECTED = item"
                    ng-class="{ 'selected' : vm.Leeds.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.Leeds')
	@include($menu.'.modal.LeedsFinalizar')
	@include($menu.'.modal.LeedsItens')
	@include($menu.'.modal.LeedsEnvolvidos')
	@include($menu.'.modal.LeedsLembretes')
	@include($menu.'.modal.LeedsWorkflow')
	@include($menu.'.modal.LeedsWorkflowProgresso')
	@include($menu.'.modal.LeedsWorkflowConsultaMultiInc')
	@include($menu.'.modal.LeedsImpressao')
	
	@include($menu.'.modal.ConfirmItensSelected')

	@include($menu.'.modal.LeedsHistorico')
</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="{{ elixir('assets/js/codemirror.js') }}"></script>
    <script src="{{ elixir('assets/js/_11161.js') }}"></script>
@append