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

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

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.Chamados.SELECTED.DESCRICAO}} -->
	<span ng-if="!vm.ChamadosItens.ALTERANDO">{{ Lang::get('pcm/_32050.titulo2-exibir') }}</span>
	<span ng-if="vm.ChamadosItens.INCLUINDO">{{ Lang::get('pcm/_32050.titulo2-incluir') }}</span>
	<span ng-if="vm.ChamadosItens.COPIANDO">{{ Lang::get('pcm/_32050.titulo2-copiar') }}</span>
	<span ng-if="vm.ChamadosItens.ALTERANDO == true && vm.ChamadosItens.INCLUINDO == false && vm.ChamadosItens.COPIANDO == false">{{ Lang::get('pcm/_32050.titulo2-alterar') }}</span>
</h4>

@overwrite

@section('modal-header-right')

	<!-- <button ng-if="vm.ChamadosItens.ALTERANDO && vm.ChamadosItens.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
		<span class="glyphicon glyphicon-ok"></span> Gravar
	</button>

	<button ng-if="vm.ChamadosItens.ALTERANDO && vm.ChamadosItens.TIPO_ADD == 3" type="submit" class="btn btn-primary" data-hotkey="f1">
		<span class="glyphicon glyphicon-ok"></span> Confirmar
	</button>

	<button ng-if="vm.ChamadosItens.ALTERANDO" ng-click="vm.ChamadosItens.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)->INCLUIR }}" ng-if="!vm.ChamadosItens.ALTERANDO" ng-click="vm.ChamadosItens.incluirNovo()" type="button" class="btn btn-primary" data-hotkey="f7">
		<span class="glyphicon glyphicon-plus"></span> Incluir Novo Registro
	</button>

	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.ChamadosItens.ALTERANDO" ng-click="vm.ChamadosItens.copiar()" type="button" class="btn btn-primary" data-hotkey="f8">
		<span class="fa fa-files-o"></span> Copiar Registro
	</button>

	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || (vm.ChamadosItens.TIPO_ADD == 2 && vm.Chamados.ALTERANDO == false)" ng-if="!vm.ChamadosItens.ALTERANDO" ng-click="vm.ChamadosItens.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.ChamadosItens.TIPO_ADD == 2 && vm.Chamados.ALTERANDO == false)" ng-if="!vm.ChamadosItens.ALTERANDO" ng-click="vm.ChamadosItens.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
		<span class="glyphicon glyphicon-trash"></span> Excluir
	</button> -->

	<!-- <button type="button" class="btn btn-warning" ng-click="vm.ChamadosItens.criarAgendamentoCalendario();" data-hotkey="alt+a" ttitle="Criar Agendamento/Lembrete no Calendário do GC">
		<span class="fa fa-calendar-plus-o"></span> Criar Lembrete
	</button> -->

	<button type="button" class="btn btn-primary" ng-click="vm.Chamados.visualizar(0);" data-hotkey="f7" ttitle="Visualizar Detalhes do Chamado">
		<span class="glyphicon glyphicon-log-in"></span> Detalhes
	</button>

	<button ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 3 && vm.Chamados.SELECTED.USUARIO_SOLICITANTE_ID == {{ Auth::user()->CODIGO }}" type="button" class="btn btn-danger" ng-click="vm.GerarTabelas('AVALIACAO');" data-hotkey="f8">
		<span class="glyphicon glyphicon-list-alt"></span> Avaliar Atendimento
	</button>

	<button ng-if="!vm.ChamadosItens.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.ChamadosItens.fecharModal()" 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 - 130px);">
<!--<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>-->
<!--<ul id="tab" class="nav nav-tabs" role="tablist"> 
		<li role="presentation" class="active tab-detalhamento">
			<a href="#tab1-container" id="tab1-tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
				1
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-if="!vm.ChamadosItens.ALTERANDO">
			<a href="#tab2-container" id="tab2-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
				2
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento"  ng-if="!vm.ChamadosItens.ALTERANDO">
			<a href="#tab3-container" id="tab3-tab" data-hotkey="alt+3" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
				3
			</a>
		</li>
	</ul>

	<div id="tab-content" class="tab-content"  style="height: calc(100% - 45px);">
		
		<div role="tabpanel" class="tab-pane active in" id="tab1-container" name="" aria-labelledby="tab1-tab" style="height: 100%; overflow:auto;">
			<div class="row">
		
			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab2-container" name="" aria-labelledby="tab2-tab" style="height: 100%; overflow:auto;">
			<div class="row">

			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab3-container" name="" aria-labelledby="tab3-tab" style="height: 100%; overflow:auto;">
			<div class="row">

			</div>
		</div>

	</div>
	
	-->

	<!---->
	<div class="row" ng-show="vm.ChamadosItens.TIPO_ADD < 3">

		<div class="row">
			<!-- Sem a opção da cópia de URL -->
			<div class="row">
				<div class="form-group" style="float: left; margin: -12px 10px;">
					<h6 style="font-weight: bold;">
						<span>
							Chamado Número: <span>@{{ vm.Chamados.SELECTED.DESC_ID }}</span> | Criado por <span style="text-transform: capitalize;" ttitle="@{{vm.Chamados.SELECTED.DESC_USUARIO}}">@{{ vm.Chamados.SELECTED.USUARIO_DESC2 }}</span> em <span>@{{ vm.Chamados.SELECTED.DATAHORA_REG_FORMAT }}</span> 
						</span>

						<span ttitle="Atualizar Mensagens" class="btn btn-xs btn-default glyphicon glyphicon-refresh" ng-click="vm.ChamadosItens.gerarInformacoes('', 0); vm.GerarTabelas('MENSAGEM');" style="margin-top: -5px;"></span>
					</h6>
				</div>

				<div class="legenda_reduzida" style="float: right;">
					<span style="font-weight: bold;">Operador:</span>
					<span class="caixa-texto-0"></span>

					<span style="font-weight: bold;">Solicitante:</span>
					<span class="caixa-texto-1"></span>
					
					<span style="font-weight: bold;">Anotação:</span>
					<span class="caixa-texto-2"></span>

					<span style="font-weight: bold;">Sistema:</span>
					<span class="caixa-texto-3"></span>
				</div>
			</div>

			<!-- Com a opção da cópia de URL (Em teste) -->
			<!-- <div class="row">
				<div class="form-group" style="margin: -12px 10px; float: left; display: inline-flex;">
					
					<h6 style="font-weight: bold;">
						<span>
							Chamado Número: <span>@{{ vm.Chamados.SELECTED.DESC_ID }}</span> | Criado por <span style="text-transform: capitalize;" ttitle="@{{vm.Chamados.SELECTED.DESC_USUARIO}}">@{{ vm.Chamados.SELECTED.USUARIO_DESC2 }}</span> em <span>@{{ vm.Chamados.SELECTED.DATAHORA_REG_FORMAT }}</span> 
						</span>

						<span ttitle="Atualizar Mensagens" class="btn btn-xs btn-default glyphicon glyphicon-refresh" ng-click="vm.ChamadosItens.gerarInformacoes('', 0); vm.GerarTabelas('MENSAGEM');" style="margin-top: -5px;"></span>
					</h6>
					
					<div class="form-group" style="margin: 5px 10px 5px 20px;">
						<input 
							type="text" 
							id="url" 
							class="form-control input-medio normal-case url" 
							ng-value="vm.URL_Chamado"
							readonly="true"
							style="height: 24px;">
					</div>

				</div>

				<div class="legenda_reduzida" style="float: right;">
					<span style="font-weight: bold;">Operador:</span>
					<span class="caixa-texto-0"></span>

					<span style="font-weight: bold;">Solicitante:</span>
					<span class="caixa-texto-1"></span>
					
					<span style="font-weight: bold;">Anotação:</span>
					<span class="caixa-texto-2"></span>
				</div>
			</div> -->

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

			<div class="row" style="display: inline-flex;">

				<div class="form-group" style="margin: 2px 20px;">
					<label style="font-size: 12px;">Problema Relatado:</label>
					<h4 style="font-weight: bold;margin-left: 20px;">
						<span>@{{ vm.Chamados.SELECTED.CHAMADO_TIPO_DESC }}</span>
					</h4>
				</div>

				<div class="form-group" style="display: inline-block; margin: 0px 0px; font-size: 12px;" ng-show="vm.Chamados.OPERADOR">
					<label style="display: inline-block; margin-left: 15px; z-index: 1; background-color: rgb(255, 255, 255); width: fit-content; padding-right: 5px; padding-left: 5px;">Informações do Solicitante</label>
					<div class="form-group" style="display: flex; width: fit-content; padding-left: 15px; padding-bottom: 5px; border-radius: 9px; border-width: 1px 1px 1px 1px; border-color: rgb(221, 221, 221); border-style: solid; margin-top: -9px;">
						<div class="form-group">

							<div class="form-group">
								<label ttitle="@{{vm.Chamados.SELECTED.DESC_USUARIO_SOLICITANTE}}">Nome:</label>
								<input 
									type="text"
									class="form-control input-medio campo-info"
									ng-model="vm.Chamados.SELECTED.SOLICITANTE_NOME"
									readonly="readonly">
							</div>

							<div class="form-group">
								<label>Email:</label>
								<input 
									type="text"
									class="form-control input-medio normal-case campo-info"
									ng-model="vm.Chamados.SELECTED.SOLICITANTE_CONTATO1"
									readonly="readonly">
							</div>

							<div class="form-group">
								<label>Telefone:</label>
								<input 
									type="text"
									class="form-control input-medio campo-info"
									ng-model="vm.Chamados.SELECTED.DESC_SOLICITANTE_CONTATO2"
									readonly="readonly">
							</div>
							
						</div>
					</div>
				</div>

			</div>

			<div class="row" ng-show="vm.Chamados.OPERADOR" style="float: left; width: calc(70% - 5px); overflow-x: hidden;">

				<div class="form-group">
					<label>Descrição:</label>
					<textarea
						style="resize: auto;"
						class="form-control normal-case"
						cols="98"
						rows="5"
						ng-model="vm.Chamados.SELECTED.DESCRICAO_COPY"
						readonly="true">
					</textarea>
				</div>

			</div>

			<div class="row" ng-show="vm.Chamados.OPERADOR && (vm.empresa_nome == 'kayros' || vm.empresa_nome == '')" style="float: right; width: calc(30% - 5px); overflow-x: hidden; margin-top: 5px; resize: vertical; height: 150px;">

				<button type="button" ng-click="vm.Chamados.carregarImagensChamado(1);" class="btn btn-default btn-sm" title="Carregar Imagens" style="margin: 0px 0px -30px 0px; float: right; z-index: 9;">
					<span class="glyphicon glyphicon-refresh"></span>
				</button>

				<div class='div_arquivos'></div>

			</div>
		</div>

		<div class="row">

			<!-- Janela Lateral para Informações Adicionais e Ações do Chamado -->
			<div id="divPrincipalInformacoesCham" ng-class="{ 'backTransp' : !vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES, '' : vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES }">
				<div class="toggle informacoesCham" ttitle="Ocultar / Mostrar <br> Alt + L" id="toggleDetailsCham" ng-click="vm.ChamadosItens.toggleInformacoes();" ng-class="{ 'toggleRight': !vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES, '' : vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES }">
					<i class="fa" ng-class="{ 'fa-chevron-circle-right' : vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES, 'fa-chevron-circle-left' : !vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES }"></i>
				</div>

				<div class="box box-informacoes-cham" ng-show="vm.ChamadosItens.CHEVRON_TOGGLE_INFORMACOES">
					<div class="box__header">
						<h5>Resumo do Chamado e Ações
							<!-- <span class="fa fa-chevron-right" ng-click="vm.Chamados." style="cursor: pointer; float: left; margin-right: 15px;"></span> -->
						</h5>
					</div>
					<div class="box__content">
						<ul class="notification-list">
							<li class="notification-list__item" ttitle="Setor: @{{vm.Chamados.SELECTED.OP_ATEND_USETOR}} | Cargo: @{{vm.Chamados.SELECTED.OP_ATEND_UCARGO}}">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Responsável</small>
									<span ng-bind="vm.Chamados.SELECTED.OP_ATENDIMENTO"></span>
								</a>
							</li>

							<li class="notification-list__item">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Status</small>
									<span ng-bind="vm.Chamados.SELECTED.DESC_STATUS"></span>
								</a>
							</li>

							<li class="notification-list__item">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Prioridade</small>
									<span ng-bind="vm.Chamados.SELECTED.DESC_PRIORIDADE"></span>
								</a>
							</li>
							
							<li class="notification-list__item" ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 0">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Previsão de Resposta</small>
									<span ng-bind="vm.Chamados.SELECTED.DATAHORA_PREVISAO_RESP_FORMAT"></span>
								</a>
							</li>
							
							<li class="notification-list__item" ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 1 || vm.Chamados.SELECTED.STATUS_TIPO == 2">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Previsão de Solução</small>
									<span ng-bind="vm.Chamados.SELECTED.DATAHORA_PREVISAO_SOLU_FORMAT"></span>
								</a>
							</li>
							
							<li class="notification-list__item" ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 3">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Solucionado</small>
									<span ng-bind="vm.Chamados.SELECTED.DATAHORA_SOLUCAO_FORMAT"></span>
								</a>
							</li>
						</ul>

						<!-- <div class="form-group">
							<label ttitle="Setor: @{{vm.Chamados.SELECTED.OP_ATEND_USETOR}} | Cargo: @{{vm.Chamados.SELECTED.OP_ATEND_UCARGO}}">Responsável:</label>
							<input 
								type="text"
								class="form-control input-medio"
								ng-model="vm.Chamados.SELECTED.OP_ATENDIMENTO"
								ng-readonly="true"
								style="width: 240px;">
						</div>

						<div class="form-group">
							<label>Status:</label>
							<input
								type="text"
								class="form-control input-medio"
								ng-model="vm.Chamados.SELECTED.DESC_STATUS"
								ng-readonly="true"
								style="width: 240px;">
						</div>

						<div class="form-group">
							<label>Prioridade:</label>
							<input
								type="text"
								class="form-control input-medio"
								ng-model="vm.Chamados.SELECTED.DESC_PRIORIDADE"
								ng-readonly="true"
								style="width: 240px;">
						</div>

						<div class="form-group" ng-if="vm.Chamados.SELECTED.STATUS == 0">
							<label>Previsão de Resposta:</label>
							<input
								type="datetime-local"
								class="form-control input-medio"
								step="1"
								ng-model="vm.Chamados.SELECTED.DATAHORA_PREVISAO_RESP"
								ng-readonly="true"
								style="width: 240px;">
						</div>

						<div class="form-group" ng-if="vm.Chamados.SELECTED.STATUS == 1 || vm.Chamados.SELECTED.STATUS == 2 || vm.Chamados.SELECTED.STATUS == 3 || vm.Chamados.SELECTED.STATUS == 4">
							<label>Previsão de Solução:</label>
							<input
								type="datetime-local"
								class="form-control input-medio"
								step="1"
								ng-model="vm.Chamados.SELECTED.DATAHORA_PREVISAO_SOLU"
								ng-readonly="true"
								style="width: 240px;">
						</div>

						<div class="form-group" ng-if="vm.Chamados.SELECTED.STATUS == 5 || vm.Chamados.SELECTED.STATUS == 6">
							<label>Finalizado:</label>
							<input
								type="datetime-local"
								class="form-control input-medio"
								step="1"
								ng-model="vm.Chamados.SELECTED.DATAHORA_FINALIZADO"
								ng-readonly="true"
								style="width: 240px;">
						</div> -->

						<fieldset ng-show="vm.ChamadosItens.OPERADOR > 0" style="margin-top: 10px; margin-bottom: 5px;">
							<legend>
								Ações <span ttitle="Atualizar Tabela" class="btn btn-xs btn-default glyphicon glyphicon-refresh" ng-click="vm.GerarTabelas('SECUNDARIA');" style="margin-top: -5px;"></span>
							</legend>
							<div style="margin-bottom: 0px;">
								<ul class="list-inline" ng-if="vm.Chamados.SELECTED.STATUS_TIPO != 3">

									<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 0">
										<button 
											ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 0"
											type="button" 
											class="btn btn-success" 
											data-hotkey="alt+i"
											ttitle="Iniciar Atendimento"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.ChamadosItens.TIPO_OPERACAO = 1; vm.ChamadosItens.operacaoChamado();">
											<span class="glyphicon glyphicon-play"></span>
										</button>
									</li>

									<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 1">
										<button 
											ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 1"
											type="button" 
											class="btn btn-warning" 
											data-hotkey="alt+p"
											ttitle="Pausar Atendimento"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.ChamadosItens.TIPO_OPERACAO = 2; vm.ChamadosItens.operacaoChamado();">
											<span class="glyphicon glyphicon-pause"></span>
										</button>
									</li>

									<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 2">
										<button 
											ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 2"
											type="button" 
											class="btn btn-success" 
											data-hotkey="alt+i"
											ttitle="Continuar Atendimento"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.ChamadosItens.TIPO_OPERACAO = 3; vm.ChamadosItens.operacaoChamado();">
											<span class="glyphicon glyphicon-play"></span>
										</button>
									</li>

									<li>
										<button 
											type="button" 
											class="btn btn-danger" 
											data-hotkey="alt+v"
											ttitle="Encerrar Atendimento"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.ChamadosItens.TIPO_OPERACAO = 4; vm.ChamadosItens.operacaoChamado();">
											<span class="glyphicon glyphicon-stop"></span>
										</button>
									</li>

									<!-- <li ng-show="vm.ChamadosItens.LAST_REG_STATUS == -1">
										<button 
											ng-if="vm.ChamadosItens.LAST_REG_STATUS == -1"
											type="button" 
											class="btn btn-danger" 
											data-hotkey="alt+v"
											ttitle="Encerrar Atendimento"
											ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
											ng-click="vm.ChamadosItens.TIPO_OPERACAO = 5; vm.ChamadosItens.operacaoChamado();">
											<span class="glyphicon glyphicon-stop"></span>
										</button>
									</li> -->

								</ul>

								<div class="tabela_secundaria" id="tabela_secundaria"></div>

							</div>
						</fieldset>

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

			<!-- Janela Lateral para tarefas - ativa quando habilitado para o setor -->
			<div id="divPrincipalInformacoesCham-task" ng-class="{ 'backTransp-task' : !vm.ChamadosItens.CHEVRON_TOGGLE_TASK, '' : vm.ChamadosItens.CHEVRON_TOGGLE_TASK }" ng-show="vm.Chamados.SELECTED.SETOR_HABILITA_TAREFAS == '1'">
				<div class="toggle informacoesCham-task" ttitle="Ocultar / Mostrar <br> Alt + K" id="toggleDetailsCham-task" ng-click="vm.ChamadosItens.toggleTask();" ng-class="{ 'toggleRight-task': !vm.ChamadosItens.CHEVRON_TOGGLE_TASK, '' : vm.ChamadosItens.CHEVRON_TOGGLE_TASK }">
					<i class="fa" ng-class="{ 'fa-chevron-circle-right' : vm.ChamadosItens.CHEVRON_TOGGLE_TASK, 'fa-chevron-circle-left' : !vm.ChamadosItens.CHEVRON_TOGGLE_TASK }"></i>
				</div>

				<div class="box box-informacoes-cham-task" ng-show="vm.ChamadosItens.CHEVRON_TOGGLE_TASK">
					<div class="box__header-task">
						<h5>Tarefas
							<!-- <span class="fa fa-chevron-right" ng-click="vm.Chamados." style="cursor: pointer; float: left; margin-right: 15px;"></span> -->
						</h5>
					</div>
					<div class="box__content-task">
						<ul class="notification-list-task">
							<!-- <li class="notification-list__item-task" ttitle="Setor: @{{vm.Chamados.SELECTED.OP_ATEND_USETOR}} | Cargo: @{{vm.Chamados.SELECTED.OP_ATEND_UCARGO}}">
								<a href="javascript:void(0);">
									<! -- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -- >
									<small>Responsável</small>
									<span ng-bind="vm.Chamados.SELECTED.OP_ATENDIMENTO"></span>
								</a>
							</li> -->

							<li class="notification-list__item-task">
								<a href="javascript:void(0);">
									<!-- <small ng-if="item.ERROR == '1'"><span class="fa fa-remove" style="color: rgb(255, 0, 0);"></span> &nbsp; Passo @{{$index + 1}}</small> -->
									<small>Status</small>
									<span ng-bind="vm.Chamados.SELECTED.DESC_STATUS"></span>
								</a>
							</li>
						</ul> 

						<fieldset style="margin-top: 10px; margin-bottom: 5px;">
							<legend></legend>
							<div style="margin-bottom: 0px; height: calc(100vh - 400px); min-height: 250px; overflow-x: hidden; overflow-y: auto;">

								<div id="inc_task_operador" 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;" ng-show="vm.Chamados.OPERADOR">

									<div class="form-group" style="width: calc(100% - 170px); padding-top: 15px; min-width: 200px;">
										<input type="text" style="width: 100% !important; min-width: 170px;" 
											placeholder="Adicione Task..." 
											class="form-control input-maior normal-case inclusao_task_operador" 
											ng-model="vm.ChamadosItens.MSG_TASK"
											maxlength="1000">
									</div>

									<div class="form-group" style="padding-top: 12px; width: fit-content; padding-right: 10px;">
										<button type="button" ng-click="vm.ChamadosItens.incluirTask(vm.ChamadosItens.MSG_TASK);" class="btn btn-xs btn-primary btn-incluir" id="btn-inclusao_task_operador">
											<span class="glyphicon glyphicon-plus"></span> Incluir
										</button>
									</div>

									<div class="form-group" style="padding-top: 12px; width: fit-content; padding-right: 10px;" ng-show="vm.ChamadosItens.HABILITA_SALVAR_TASK == true">
										<button type="button" ng-click="vm.ChamadosItens.salvarTaskOperador();" class="btn btn-xs btn-success btn-incluir" id="btn-inclusao_task_operador">
											<span class="glyphicon glyphicon-ok-sign"></span> Gravar
										</button>
									</div>

								</div>

								<div class="row" style="display: inline-grid;">
									<div class="form-group" ng-repeat="item in vm.Chamados.SELECTED.TAREFAS_FORMAT track by $index" style="display: inline-flex;">
										<input type="checkbox" id="click-task-@{{item.ORDEM}}" class="form-control" 
											ng-checked="item.VALOR == '1'" 
											ng-true-value="'1'"	ng-false-value="'0'" 
											ng-model="item.VALOR" 
											ng-disabled="!vm.Chamados.OPERADOR" 
											ng-change="vm.ChamadosItens.atualizaInformacoesTasks(item.ORDEM, $index);" 
											style="margin: 0px 5px; margin-top: -5px; width: 16.06px; height: 20px;">

										<!-- <input
											type="text" 
											class="form-control input-medio normal-case" 
											ng-model="item.DESCRICAO" 
											ng-disabled="!vm.Chamados.OPERADOR" 
											ng-readonly="!vm.Chamados.OPERADOR" 
											ng-change="vm.ChamadosItens.atualizaInformacoesTasks(item.ORDEM, $index);" 
											style="margin: 0px 5px;"> -->

										<textarea 
											style="resize: auto; width: 100% !important; margin: 0px 5px; max-width: 340px;" 
											class="form-control normal-case" 
											maxlength="1000" 
											cols="40" 
											rows="1" 
											ng-model="item.DESCRICAO" 
											ng-disabled="!vm.Chamados.OPERADOR" 
											ng-readonly="!vm.Chamados.OPERADOR" 
											ng-change="vm.ChamadosItens.atualizaInformacoesTasks(item.ORDEM, $index);">
										</textarea>

										<button type="button" ng-click="vm.ChamadosItens.excluirTask(item.ORDEM, $index);" ng-disabled="!vm.Chamados.OPERADOR" class="btn btn-xs btn-danger btn-excluir" style="margin: 0px 5px; width: 34px; height: 34px;">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
									</div>
								</div>

							</div>
						</fieldset>

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

		</div>

		<!-- Acompanhamento e Linha do Tempo do Chamado -->
		<fieldset style="margin-top: 10px; margin-bottom: 0px;">
			<legend></legend>
			<div style="margin-bottom: 0px;">
				<div style="display: inline-flex; align-items: center;">
					<!-- Botões de Ação Geral -->
					<ul class="list-inline" style="margin-right: 5px;">
						<li>
							<button
								type="button" 
								class="btn btn-primary btn-incluir"
								data-hotkey="f6"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosMensagem.incluir()">
								<span class="glyphicon glyphicon-plus"></span> Incluir
							</button>
						</li>

						<!-- <li>
							<button
								ng-if="vm.Chamados.OPERADOR == true"
								type="button"
								class="btn btn-warning btn-incluir"
								data-hotkey="alt+a"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}"
								ng-click="vm.ChamadosMensagem.incluir(0)">
								<span class="glyphicon glyphicon-plus"></span> Anotação
							</button>
						</li> -->
					</ul>
					
					<!-- Botões de Ação do Operador -->
					<ul class="list-inline" ng-if="vm.Chamados.SELECTED.STATUS_TIPO != 3 && vm.ChamadosItens.OPERADOR > 0 && vm.ChamadosItens.ACOES_VISIVEIS == true">
						<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 0">
							<button 
								ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 0"
								type="button" 
								class="btn btn-success btn-incluir" 
								data-hotkey="alt+i"
								ttitle="Iniciar Atendimento"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosItens.TIPO_OPERACAO = 1; vm.ChamadosItens.operacaoChamado();"
								style="height: 34px;">
								<span class="glyphicon glyphicon-play"></span>
							</button>
						</li>

						<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 1">
							<button 
								ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 1"
								type="button" 
								class="btn btn-warning btn-incluir" 
								data-hotkey="alt+p"
								ttitle="Pausar Atendimento"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosItens.TIPO_OPERACAO = 2; vm.ChamadosItens.operacaoChamado();"
								style="height: 34px;">
								<span class="glyphicon glyphicon-pause"></span>
							</button>
						</li>

						<li ng-show="vm.Chamados.SELECTED.STATUS_TIPO == 2">
							<button 
								ng-if="vm.Chamados.SELECTED.STATUS_TIPO == 2"
								type="button" 
								class="btn btn-success btn-incluir" 
								data-hotkey="alt+i"
								ttitle="Continuar Atendimento"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosItens.TIPO_OPERACAO = 3; vm.ChamadosItens.operacaoChamado();"
								style="height: 34px;">
								<span class="glyphicon glyphicon-play"></span>
							</button>
						</li>

						<li>
							<button 
								type="button" 
								class="btn btn-danger btn-incluir" 
								data-hotkey="alt+v"
								ttitle="Encerrar Atendimento"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosItens.TIPO_OPERACAO = 4; vm.ChamadosItens.operacaoChamado();"
								style="height: 34px;">
								<span class="glyphicon glyphicon-stop"></span>
							</button>
						</li>

						<!-- <li ng-show="vm.ChamadosItens.LAST_REG_STATUS == -1">
							<button 
								ng-if="vm.ChamadosItens.LAST_REG_STATUS == -1"
								type="button" 
								class="btn btn-danger btn-incluir" 
								data-hotkey="alt+v"
								ttitle="Encerrar Atendimento"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
								ng-click="vm.ChamadosItens.TIPO_OPERACAO = 5; vm.ChamadosItens.operacaoChamado();"
								style="height: 34px;">
								<span class="glyphicon glyphicon-stop"></span>
							</button>
						</li> -->
					</ul>
				</div>

				<div ng-repeat="item in vm.ChamadosMensagem.DADOS track by $index">
					
					<!--ng-if="item.REMETENTE == '0' && item.VISIVEL == '1'"-->

					<div style="margin-bottom: 20px;" ng-class="{ 'div-msg-operador' : item.REMETENTE == '0' , 'div-msg-solicitante' : item.REMETENTE == '1' }">

						<div ng-class="{ 'sep-anotacao' : item.TIPO_MENSAGEM == '1' , 'sep-operador' : item.TIPO_MENSAGEM == '0' }" ng-if="item.REMETENTE == '0' && item.VISIVEL == '1'">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13" width="8" height="13">
								<path opacity=".13" fill="#0000000" d="M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z"></path>
								<path fill="currentColor" d="M1.533 2.568L8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z"></path>
							</svg>
						</div>

						<div class="sep-solicitante" ng-if="item.REMETENTE == '1' && item.VISIVEL == '1'">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13" width="8" height="13">
								<path opacity=".13" d="M5.188 1H0v11.193l6.467-8.625C7.526 2.156 6.958 1 5.188 1z"></path>
								<path fill="currentColor" d="M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z"></path>
							</svg>
						</div>

						<div class="sep-sistema" ng-if="item.REMETENTE == '2' && item.VISIVEL == '1'">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13" width="8" height="13">
								<path opacity=".13" fill="#0000000" d="M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z"></path>
								<path fill="currentColor" d="M1.533 2.568L8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z"></path>
							</svg>
						</div>

						<div class="chat-msg operador-campo" ng-class="{ 'anotacao-campo' : item.TIPO_MENSAGEM == '1' , 'sistema-campo' : item.TIPO_MENSAGEM == '2' }" ng-if="item.VISIVEL == '1'">
							<div class="info-msg">
								<span style="text-transform: none; font-weight: bold;" ttitle="@{{item.DESC_USUARIO}}">@{{ item.REMETENTE == '1' ? 'Solicitante:' : 'Operador:'}} @{{ item.USUARIO_DESC2 }} | Situação: @{{ item.STATUS_CHAMADO_DESC }}</span>
								
								<div class="funcionalidades-op">
									<span class="glyphicon glyphicon-share" title="Visualizar Mensagem" ng-click="vm.ChamadosMensagem.visualizar(item.ID);" style="cursor: pointer;"></span>
									<span class="glyphicon glyphicon-pencil" title="Alterar Mensagem" ng-click="vm.ChamadosMensagem.visualizar(item.ID, 1);" style="cursor: pointer;" ng-if="vm.Chamados.OPERADOR"></span>
									<span class="glyphicon glyphicon-trash" title="Excluir Mensagem" ng-click="vm.ChamadosMensagem.visualizar(item.ID, 2);" style="cursor: pointer;" ng-if="vm.Chamados.OPERADOR"></span>
								</div>
							</div>
							
							<div class="corpo-msg" ng-bind-html="trustAsHtml(item.MENSAGEM, item)"></div>

							<div ng-if="item.REMETENTE == '1'" style="height: 10px; text-align: end; font-size: 10px;"><span>Criado em: @{{ item.DATAHORA_ENV_FORMAT }}</span></div>
							<div ng-if="item.REMETENTE == '0'" style="height: 10px; text-align: start; font-size: 10px;"><span>Criado em: @{{ item.DATAHORA_ENV_FORMAT }}</span></div>
							<div ng-if="item.REMETENTE == '2'" style="height: 10px; text-align: start; font-size: 10px;"><span>Criado em: @{{ item.DATAHORA_ENV_FORMAT }}</span></div>
						</div>

					</div>

					<!--
					<div class="chat-msg solicitante-campo" ng-if="item.REMETENTE == '1' && item.VISIVEL == '1'">
						<div class="info-msg">
							<span style="text-transform: none;" ttitle="@{{item.DESC_USUARIO}}">Solicitante: @{{ item.USUARIO_NOME }} </span>
							<span>Criado em: @{{ item.DATAHORA_ENV_FORMAT }} | Situação: @{{ item.STATUS_CHAMADO_DESC }}</span>
						</div>
						<hr>
						<div class="corpo-msg">
							<span> @{{ item.MENSAGEM }} </span>
						</div>
					</div>
					--->

				</div>
			</div>
		</fieldset>
		
		<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -->
		<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ -->

		<!-- <div class="row" style="float: right;width: calc(30% - 5px); border: solid 1px transparent; height: calc(100vh - 130px); border-left-color: #000; padding: 5px;"> <! -- Referente aos Procedimentos de Atendimento do Operador <-> ChamadosItens -- >

			<div class="row">

				<div class="panel panel-primary" style="margin-bottom: 5px !important;">
					<div class="panel-heading collapsed" style="cursor: pointer !important;" tabindex="0" data-hotkey="alt+1" id="containerChamadosItens1" data-toggle="collapse" data-target="#dadosChamadosItens1" aria-expanded="true" aria-controls="dadosChamadosItens1" ng-click="vm.changePainel('dadosChamadosItens1');">
						<h3 class="panel-title">Informações Gerais<sub style="margin-left: 5px;">Alt+1</sub>
							<i class="fa fa-chevron-circle-down" style="float: right; cursor: pointer;" ng-class="{'fa-chevron-circle-down': !vm.DADOS_CHAMADOSITENS1, 'fa-chevron-circle-up': vm.DADOS_CHAMADOSITENS1}" aria-hidden="true"></i>
						</h3>
					</div>
					<div class="panel-body collapse" id="dadosChamadosItens1" aria-expanded="false" style="height: 30px;">

						

					</div>
				</div>

			</div>

			
		
		</div> -->

	</div>
	

	<!---->
	<div class="row" ng-show="vm.ChamadosItens.TIPO_ADD == 3">

		<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" style="width: calc(100% - 100px); padding-top: 5px; min-width: 200px;">
				<input type="text" style="width: 100% !important; min-width: 170px;"
					placeholder="Filtragem rápida..."
					class="form-control input-maior filter_main_itens" 
					ng-model="vm.ChamadosItens.FILTRO_DADOS_ADD">
			</div>
			
			<!-- Caso a Tabela de Itens for Infinite Scroll, passar '1' na função getItensAdd() -->
			<div class="form-group" style="margin-top: 9px; width: fit-content; padding-right: 10px;">
				<button type="button" ng-click="vm.ChamadosItens.getItensAdd(1)" class="btn btn-xs btn-primary btn-filtrar"
					data-hotkey="alt+f" id="btn-table-filter2">
					<span class="glyphicon glyphicon-filter"></span> Filtrar
				</button>
			</div>	
		</div>

		<div class="tabela_add_itens" id="tabela_add_itens"></div> 
	</div>
	
	
</div>
</form>

@overwrite