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

@section('modal-start')
<form class="form-inline" ng-submit="vm.PortalColaboradorChamadosRH.gravar()">
	@overwrite

	@section('modal-header-left')

	<div class="modal-header-title">

		<!-- <i class="fa fa-long-arrow-left fa-2x" 
			ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" 
			ng-click="vm.PortalColaboradorChamadosRH.fecharModal()"
			aria-hidden="true">
		</i> -->

		<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" 
			type="button" 
			class="btn btn-default btn-fechar-modal btn-voltar" 
			ng-click="vm.PortalColaboradorChamadosRH.fecharModal()">
			<i class="fa fa-long-arrow-left fa-2x" aria-hidden="true"></i>
		</button>

		<h4 class="modal-title">
			<span ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO">{{ Lang::get('pessoal/_23540.titulo-exibir') }}</span>
			<span ng-if="vm.PortalColaboradorChamadosRH.INCLUINDO">{{ Lang::get('pessoal/_23540.titulo-incluir') }}</span>
			<span ng-if="vm.PortalColaboradorChamadosRH.COPIANDO">{{ Lang::get('pessoal/_23540.titulo-copiar') }}</span>
			<span ng-if="vm.PortalColaboradorChamadosRH.ALTERANDO == true && vm.PortalColaboradorChamadosRH.INCLUINDO == false && vm.PortalColaboradorChamadosRH.COPIANDO == false">{{ Lang::get('pessoal/_23540.titulo-alterar') }}</span>
		</h4>

	</div>

	@overwrite

	@section('modal-header-right')

	<button ng-if="vm.PortalColaboradorChamadosRH.ALTERANDO"
		type="submit" 
		class="btn btn-success">
		<span class="glyphicon glyphicon-ok"></span> Gravar
	</button>

	<button ng-if="vm.PortalColaboradorChamadosRH.ALTERANDO" 
		ng-click="vm.PortalColaboradorChamadosRH.cancelar()" 
		type="button" 
		class="btn btn-danger btn-cancelar">
		<span class="glyphicon glyphicon-ban-circle"></span> Cancelar
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && 
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 1 &&
		vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 1 &&
		vm.PortalColaboradorChamadosRH.SELECTED.OPERADOR_ID == 999999" 
		ng-click="vm.PortalColaboradorChamadosRH.realizarAtendimento()" 
		type="button" 
		class="btn btn-primary">
		<i class="fa fa-rocket" aria-hidden="true"></i> Realizar Atendimento
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && 
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 1 &&
		vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 2" 
		ng-click="vm.PortalColaboradorChamadosRH.iniciarAtendimento()" 
		type="button" 
		class="btn btn-success">
		<span class="glyphicon glyphicon-play"></span> Iniciar Atendimento
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && 
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 0 &&
		vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 4" 
		ng-click="vm.PortalColaboradorChamadosRH.concluirAtendimento()" 
		type="button" 
		class="btn btn-success">
		<span class="glyphicon glyphicon-ok"></span> Marcar como Resolvido
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && 
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 1" 
		ng-click="vm.PortalColaboradorChamadosRH.alterar()" 
		type="button" 
		class="btn btn-warning">
		<span class="glyphicon glyphicon-edit"></span> Alterar
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && 
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 1" 
		ng-click="vm.PortalColaboradorChamadosRH.excluir()" 
		type="button" 
		class="btn btn-danger">
		<span class="glyphicon glyphicon-trash"></span> Excluir
	</button>

	<button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO &&
		vm.PortalColaboradorChamadosRH.COLABORADOR.PERMITE_ADM_PORTAL_COLAB == 1" 
		data-consulta-historico data-tabela="TBCHAMADO_RH" 
		data-tabela-id="@{{ vm.PortalColaboradorChamadosRH.SELECTED.ID }}" 
		type="button" 
		class="btn gerar-historico">
        <span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
    </button>

	<!-- <button 
	 	ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" 
		data-consulta-arquivos 
		data-tabela="TBCHAMADO_RH" 
		data-tabela-id="@{{ vm.PortalColaboradorChamadosRH.SELECTED.ID }}" 
		type="button" 
		class="btn btn-info" 
		data-hotkey="alt+a">
        <span class="glyphicon glyphicon-file"></span> {{ Lang::get('master.arquivos') }}
    </button> -->

	<!-- <button ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" 
		type="button" 
		class="btn btn-default btn-fechar-modal btn-voltar" 
		ng-click="vm.PortalColaboradorChamadosRH.fecharModal()">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
	</button> -->

	@overwrite

	@section('modal-header-end')

	<!-- PARA USAR OS BOTÕES DE AVANÇAR E RETROCEDER BASTA DESCOMENTAR AS LINHAS ABAIXO -->

	<!-- <button style="height: 31px;" ng-click="vm.PortalColaboradorChamadosRH.previousRecord()" ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</button>

	<button style="height: 31px;" ng-click="vm.PortalColaboradorChamadosRH.nextRecord()" ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</button> -->

	@overwrite

	@section('modal-body')
	<div class="ticket-tab-container">

		<div class="row">

			<div class="col-md-6 ticket-labels-left" ng-if="!vm.PortalColaboradorChamadosRH.INCLUINDO">

				<div class="ticket-labels">
					<div class="ticket-label">
						<label>Protocolo:</label>
						<span class="label label-success">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.PROTOCOLO }}
						</span>
					</div>
					<div class="ticket-label">
						<label>Atendente:</label>
						<span class="label label-info">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.DESC_OPERADOR }}
						</span>
					</div>
					<div class="ticket-label">
						<label>Status:</label>
						<span class="label"
							ng-class="{
								'label-success' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 1,
								'label-info' 		: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 2,
								'label-primary' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 3,
								'label-warning' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 4,
								'label-default' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 5
							}">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.DESC_STATUS }}
						</span>
					</div>
				</div>
			</div>

			<div class="col-md-6 ticket-labels-right" ng-if="!vm.PortalColaboradorChamadosRH.INCLUINDO">
				<div class="ticket-labels">
					<div class="ticket-label" ng-if="vm.PortalColaboradorChamadosRH.SELECTED.DATA_HORA_REGISTRO">
						<label>Data de Registro:</label>
						<span class="label label-success">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.FMT_DATA_HORA_REGISTRO }}
						</span>
					</div>

					<div class="ticket-label" ng-if="vm.PortalColaboradorChamadosRH.SELECTED.DATA_HORA_ATENDIMENTO">
						<label>Data de Atendimento:</label>
						<span class="label label-info">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.FMT_DATA_HORA_ATENDIMENTO }}
						</span>
					</div>

					<div class="ticket-label" ng-if="vm.PortalColaboradorChamadosRH.SELECTED.DATA_HORA_CONCLUSAO">
						<label>Data de Conclusão:</label>
						<span class="label label-primary">
							@{{ vm.PortalColaboradorChamadosRH.SELECTED.FMT_DATA_HORA_CONCLUSAO }}
						</span>
					</div>
				</div>
			</div>

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

			<div class="form-group ticket-description">
				<label>Descrição:</label>
				<textarea class="form-control normal-case" 
					maxlength="1000" 
					cols="148" 
					rows="3" 
					required 
					ng-model="vm.PortalColaboradorChamadosRH.SELECTED.DESCRICAO" 
					ng-readonly="!vm.PortalColaboradorChamadosRH.ALTERANDO">
				</textarea>
				<span class="remaining-characters-text" ng-show="vm.PortalColaboradorChamadosRH.INCLUINDO || vm.PortalColaboradorChamadosRH.ALTERANDO">
					Caracteres restantes: @{{vm.PortalColaboradorChamadosRH.SELECTED.DESCRICAO.length <= 1000 ? (1000 - (vm.PortalColaboradorChamadosRH.SELECTED.DESCRICAO.length || 0)) : 1000}}
				</span>
			</div>

			<!-- <div class="panel panel-primary ticket-filepicker" ng-show="vm.Arquivos.data.length">
				<div class="panel-heading"
					tabindex="-1" 
					id="containerArquivos" 
					data-toggle="collapse" 
					data-target="#painelArquivos" 
					aria-expanded="true" 
					aria-controls="painelArquivos"
					ng-click="vm.changePainel('arquivos');">
					<h3 class="panel-title" 
						style="font-size: 14px;">
						Arquivos
					</h3> 
					<i class="fa fa-chevron-circle-down" 
						style="float: right; cursor: pointer;"
						ng-class="{'fa-chevron-circle-down': !vm.ABA_ARQUIVOS, 'fa-chevron-circle-up': vm.ABA_ARQUIVOS}" 
						aria-hidden="true">
					</i>
				</div>
				<div class="panel-body collapse" 
					id="painelArquivos" 
					aria-expanded="false">
					<a role="button" class="btn btn-lg bs4-btn-outline-primary" 
						ng-click="vm.Arquivos.addArquivo()" 
						ng-if="vm.PortalColaboradorChamadosRH.ALTERANDO">
						<span class="glyphicon glyphicon-paperclip"></span> Anexar Arquivos
					</a>

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

			<div class="row chat-background chat-container" 
				ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && vm.PortalColaboradorChamadosRH.SELECTED.OPERADOR_ID != 999999">

				<div class="chat-title">
					<i class="fa fa-comments" aria-hidden="true"></i> Mensagens 
					<i class="socket-conn-status fa fa-check-circle-o text-success"
						 ng-if="vm.PortalColaboradorChamadosRH.socketIO.connected"
						 data-placement="bottom" 
						 ttitleb="Conectado ao servidor de mensagens"></i>
					<i class="socket-conn-status fa fa-times-circle-o text-danger" 
						ng-if="!vm.PortalColaboradorChamadosRH.socketIO.connected"
						data-placement="bottom" 
						ttitleb="Falha ao conectar com o servidor de mensagens"></i>
				</div>

				<div class="chat-body"
					on-scroll-to-bottom-fixed="vm.PortalColaboradorChamadosRHMensagens.handleInfiniteScroll()">

					<div class="chat-message" 
						ng-repeat="message in vm.PortalColaboradorChamadosRH.SELECTED.MENSAGENS track by $index" 
						ng-class="{'sender': message.REMETENTE == 1, 'receiver': message.REMETENTE == 0}"
						id="chat-message-@{{ $index }}">

						<div class="talk-bubble tri-right round-bubble" 
							ng-class="{'right-top': message.REMETENTE == 1, 'left-top': message.REMETENTE == 0}">
							<div class="talktext-container">
								<div class="talktext">
									<p>
										@{{ message.MENSAGEM.CORPO }}
									</p>
								</div>
								<div ng-show="message.MENSAGEM.ANEXOS.length"
									id="talktext-attachment-@{{ $index }}" 
									class="talktext-attachment dropup">
									<i class="fa fa-paperclip fa-2x dropdown-toggle" 
										aria-hidden="true" 
										data-toggle="dropdown" 
										aria-haspopup="true" 
										aria-expanded="false">
									</i>
									<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="attachmentsDropdownMenu">
										<li ng-repeat="anexo in message.MENSAGEM.ANEXOS track by $index">
											<a ng-href="@{{ anexo.URL }}" target="_blank" class="attachment-dd-item">
												@{{ anexo.NOME }}
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="talktext-details">
								<div class="talktext-details-left">
									<span class="taltext-user">
										@{{ message.DESC_USUARIO }}
									</span>
								</div>
								<div class="talktext-details-right">
									<span class="sending-message-loader" ng-show="message.ENVIANDO"></span>
									<span class="talktext-datetime-sent">
										@{{ message.FMT_DATA_HORA_ENVIO }}
									</span>
								</div>
							</div>
						</div>

					</div>

				</div>

				<div class="chat-reply" 
					ng-if="vm.PortalColaboradorChamadosRH.socketIO.connected">

					<div class="chat-reply-main">
						<textarea class="form-control normal-case" 
							rows="1" id="chat-comment" 
							placeholder="Enviar Mensagem..." 
							ng-model="vm.PortalColaboradorChamadosRHMensagens.MENSAGEM">
						</textarea>
					</div>

					<div class="btn-group dropup open"> 
						<a role="button" 
							class="btn btn-default" 
							ng-click="vm.PortalColaboradorChamadosRHMensagens.handleSendMessage()"
							ng-disabled="vm.PortalColaboradorChamadosRHMensagens.uploadingFiles">
							<i class="fa fa-send fa-2x" aria-hidden="true"></i>
						</a> 
						<a role="button" 
							class="btn btn-default dropdown-toggle" 
							data-toggle="dropdown" 
							aria-haspopup="true" 
							aria-expanded="true"> 
							<i class="fa fa-caret-up fa-2x" aria-hidden="true"></i>
						</a> 
						<ul class="dropdown-menu dropdown-menu-right"> 
							<li class="dropdown-header"
								ng-if="vm.PortalColaboradorChamadosRHMensagens.ARQUIVOS_MENSAGEM.length">
								@{{ vm.PortalColaboradorChamadosRHMensagens.ARQUIVOS_MENSAGEM.length }} arquivo(s) selecionado(s)
							</li>
							<li ng-click="vm.PortalColaboradorChamadosRHMensagens.handleMessageFilepicker()">
								<a>
									<i class="fa fa-paperclip fa-2x" aria-hidden="true"></i> Anexar Arquivos
								</a>
							</li> 
							<input type="file" 
								accept=".pdf, .png, .jpg, .jpeg, .csv, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .odt, .ods, .odp"
								multiple
								id="message-filepicker"
								ngf-select="vm.PortalColaboradorChamadosRHMensagens.processMessageFiles($event)"
								class="hidden-file-input">
						</ul> 
					</div>

				</div>

			</div>

		</div>

	</div>

</form>

@overwrite