@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')

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

@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.SELECTED.INICIAR_ATENDIMENTO &&
		vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 1" 
		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.SELECTED.INICIAR_ATENDIMENTO &&
		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.SELECTED.CONCLUIR_ATENDIMENTO &&
		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.SELECTED.INCLUIR" 
		ng-click="vm.PortalColaboradorChamadosRH.incluirNovo()" 
		type="button" 
		class="btn btn-primary">
        <span class="glyphicon glyphicon-plus"></span> Incluir Novo Registro 
    </button> 
	
	<!-- <button 
	 	ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO" 
		ng-click="vm.PortalColaboradorChamadosRH.copiar()" 
		type="button" 
		class="btn btn-primary" 
		data-hotkey="f8">
        <span class="fa fa-files-o"></span> Copiar Registro
    </button>    -->
	
	<button 
		ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO && vm.PortalColaboradorChamadosRH.SELECTED.ALTERAR" 
		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.SELECTED.EXCLUIR" 
		ng-click="vm.PortalColaboradorChamadosRH.excluir()" 
		type="button" 
		class="btn btn-danger">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button 
		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">

	<ul id="ticket-tabs" class="nav nav-tabs nav-justified" role="tablist"> 
		<li role="presentation" class="active tab-detalhamento">
			<a href="#tab1-container" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
				<i class="fa fa-tasks" aria-hidden="true"></i> Detalhes
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-if="!vm.PortalColaboradorChamadosRH.ALTERANDO">
			<a href="#tab2-container" id="tab2-tab" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
				<div class="message-tab-title">
					<i class="fa fa-comments" aria-hidden="true"></i> Mensagens 

					<i class="socket-conn-status awaiting-socket-loader" 
						ng-if="vm.PortalColaboradorChamadosRH.SOCKET_STATUS == 0" 
						data-placement="bottom" 
						ttitleb="Aguardando conexão com o servidor de mensagens"></i>
					<i class="socket-conn-status fa fa-check-circle-o text-success"
						 ng-if="vm.PortalColaboradorChamadosRH.SOCKET_STATUS == 1"
						 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.SOCKET_STATUS == 2"
						data-placement="bottom" 
						ttitleb="Erro ao conectar com o servidor de mensagens"></i>
				</div>
			</a>
		</li>
	</ul>

	<div id="tab-content" class="tab-content" style="height: calc(100% - 100px);">

		<div role="tabpanel" class="tab-pane active in h-100" id="tab1-container" aria-labelledby="tab1-tab" style="overflow:auto;">

			<div class="row">

				<div class="ticket-labels" ng-if="!vm.PortalColaboradorChamadosRH.INCLUINDO">
					<div class="status-badge">
						<div class="name">
							<span>
								Protocolo
							</span>
						</div>
						<div class="status success">
							<span class="ticket-protocol">
								@{{ vm.PortalColaboradorChamadosRH.SELECTED.PROTOCOLO }}
							</span>
						</div>
					</div>
					<div class="status-badge">
						<div class="name">
							<span>
								Atendente
							</span>
						</div>
						<div class="status info">
							<span>
								@{{ vm.PortalColaboradorChamadosRH.SELECTED.DESC_OPERADOR }}
							</span>
						</div>
					</div>
					<div class="status-badge">
						<div class="name">
							<span>
								Status
							</span>
						</div>
						<div class="status" 
							ng-class="{
								'success' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 1,
								'info' 		: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 2,
								'primary' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 3,
								'warning' 	: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 4,
								'dark' 		: vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 5
							}">
							<span>
								@{{ vm.PortalColaboradorChamadosRH.SELECTED.DESC_STATUS }}
							</span>
						</div>
					</div>
				</div>

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

				<div class="form-group">
					<label>Data de Registro:</label>
					<input 
						type="text" 
						class="form-control"
						id="ticket-register-timepicker" 
						placeholder="mm/aaaa hh:mm"
						readonly
						ng-class="{'air-datepicker-disabled': !vm.PortalColaboradorChamadosRH.ALTERANDO}"
					>
				</div>

				<div class="form-group" ng-show="!vm.PortalColaboradorChamadosRH.INCLUINDO">
					<label>Data de Atendimento:</label>
					<input 
						type="text" 
						class="form-control"
						id="ticket-attend-timepicker" 
						placeholder="mm/aaaa hh:mm"
						readonly
						ng-class="{'air-datepicker-disabled': !vm.PortalColaboradorChamadosRH.ALTERANDO}"
					>
				</div>

				<div class="form-group" ng-show="!vm.PortalColaboradorChamadosRH.INCLUINDO">
					<label>Data de Conclusão:</label>
					<input 
						type="text" 
						class="form-control"
						id="ticket-finish-timepicker" 
						placeholder="mm/aaaa hh:mm"
						readonly
						ng-class="{'air-datepicker-disabled': !vm.PortalColaboradorChamadosRH.ALTERANDO}"
					>
				</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="form-group ticket-filepicker">
					<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>

		<div role="tabpanel" class="tab-pane chat-background h-100" id="tab2-container" aria-labelledby="tab2-tab">

			<div id="messages-alert-1" class="row" ng-if="vm.PortalColaboradorChamadosRH.SELECTED.STATUS < 3">
				<div class="alert alert-warning" role="alert" style="font-size: 18px;"> 
					Aguardando o início do atendimento... 
				</div>
			</div>

			<div class="row chat-container" 
				ng-if="vm.PortalColaboradorChamadosRH.SELECTED.STATUS >= 4">

				<div class="chat-body">

					<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}"
					>

						<!-- <div class="chat-message-avatar">
							<img ng-src="@{{ message.AVATAR_URL }}">
						</div> -->

						<div class="talk-bubble tri-right round-bubble"
							ng-class="{'right-top': message.REMETENTE == 1, 'left-top': message.REMETENTE == 0}">
							<div class="talktext">
								<p>
									@{{ message.MENSAGEM }}
								</p>
							</div>
							<div class="talktext-details">
								<span class="sending-message-loader" ng-show="message.isSending"></span>
								<span class="talktext-datetime-sent">
									@{{ message.FMT_DATA_HORA_ENVIO }}
								</span>
							</div>
						</div>

					</div>

				</div>

				<div class="chat-reply">

					<div class="well well-sm chat-disabled-well" ng-if="vm.PortalColaboradorChamadosRH.SELECTED.STATUS == 5">
						Atendimento concluído. Não é possível enviar mensagens.
					</div>

					<div ng-if="vm.PortalColaboradorChamadosRH.SELECTED.STATUS < 5">

						<div class="chat-reply-main">

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

						</div>

						<div class="chat-reply-send" ng-click="vm.PortalColaboradorChamadosRH.sendMessage()">
							<i class="fa fa-send fa-2x" aria-hidden="true"></i>
						</div>

					</div>

				</div>

			</div>
			
		</div>

	</div>
	
</div>

</form>

@overwrite