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

@section('modal-start')
    <form class="form-inline">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.CadCampanha.SELECTED.DESCRICAO}} -->
	<span>12550 - Registro de Informações sobre o Contato</span>
</h4>

@overwrite

@section('modal-header-right')

	<!-- <button ng-click="" type="button" class="btn btn-warning" data-hotkey="" ng-disabled="false">
		<span class="glyphicon glyphicon-user"></span> @{{ vm.dados_user.DESC_USUARIO }}
	</button> -->

	<button ng-click="vm.CadCampanhaItens.gravarContato()" type="button" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>

	<button ng-click="vm.CadCampanhaItens.cancelarContato()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>

@overwrite

@section('modal-header-end')

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 250px); overflow: hidden;">


	<div style="width: calc(29% - 1px); height: 100%; float: left; overflow: hidden auto; padding: 5px; border: solid 2px transparent; border-right-color: #000;">

		<div>

			<div ng-repeat="item in vm.CadCampanhaItens.SELECTED.CONTATOS track by item.USUARIO_ID" class="card-contato-reg" ng-click="vm.CadCampanhaItens.selecionaRegistro(item, $event);" style="color: @{{ item.COLOR }} !important; background-color: @{{ item.BACK_COLOR }};">

				<span style="font-weight: bold;">@{{ item.DESC_USUARIO }}</span>
				<span>@{{ item.DATAHORA }}</span>

			</div>

		</div>

	</div>
	

	<div style="width: calc(69% - 1px); height: 100%; float: right; overflow: hidden auto;">

		<div class="row">

			<div class="form-group">
				<label>ID:</label>
				<input 
					type="text" 
					class="form-control input-menor" 
					ng-model="vm.CadCampanhaItens.SELECTED.DESC_ID" 
					readonly="readonly">
			</div>

			<div class="form-group">
				<label>Cliente: <a tabindex="-1" href="/_12360?CODIGO=@{{vm.CadCampanhaItens.SELECTED.CLIENTE_ID}}" target="_blank" rel="noopener noreferrer"><span class="fa fa-external-link" title="12360 - Cadastro de Clientes"></span></a> </label>

				<div style="display: inline-flex; align-items: center; flex-wrap: nowrap; justify-content: center; position: fixed; margin-top: -20px; margin-left: 75px; font-size: 7pt;">
					<label style="margin-right: 5px;">Grupo de Clientes:</label>
					<input 
						type="text" 
						class="form-control input-medio" 
						ng-model="vm.CadCampanhaItens.SELECTED.DESC_GRUPO" 
						ng-readonly="true" 
						style="font-size: 7pt; height: 20px; width: 200px;">


					<span 
						class="glyphicon glyphicon-info-sign" 
						style="margin-left: 5px;" 
						data-toggle="popover" 
						ng-show="vm.CadCampanhaItens.SELECTED.ARRAY_EMPRESA_GRUPO.length > 0" 
						data-placement="bottom" 
						data-element-content="#info-grupo-cliente-@{{ vm.CadCampanhaItens.SELECTED.GRUPO_ID }}" 
						on-finish-render="bs-init" 
						data-original-title="Clientes">
					</span>

					<div id="info-grupo-cliente-@{{ vm.CadCampanhaItens.SELECTED.GRUPO_ID }}" style="display: none">
						<div class="origem-container">
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th class="text-left">ID</th>
										<th class="text-left">Razão Social</th>
										<th class="text-left">Nome Fantasia</th>
										<th class="text-left">CPF/CNPJ</th>
										<th class="text-left">UF</th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="arr in vm.CadCampanhaItens.SELECTED.ARRAY_EMPRESA_GRUPO track by arr.ID">
										<td class="text-left"> @{{ arr.DESC_ID }} </td>
										<td class="text-left"> @{{ arr.RAZAOSOCIAL }} </td>
										<td class="text-left"> @{{ arr.NOMESOCIAL }} </td>
										<td class="text-left"> @{{ arr.DESC_CNPJ }} </td>
										<td class="text-left"> @{{ arr.UF }} </td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

				</div>

				<input 
					type="text" 
					class="form-control input-maior" 
					ng-model="vm.CadCampanhaItens.SELECTED.DESC_CLIENTE" 
					ng-readonly="true">
			</div>

		</div>

		<fieldset style="margin-top: 10px;">
			<legend>Informações do Contato</legend>
			<div style="margin-bottom: 10px;">
				<ul class="list-inline">

				</ul>

				<div class="row">

					<div class="form-group">
						<label>Contato:</label>
						<input 
							type="text" 
							class="form-control input-medio" 
							ng-model="vm.CadCampanhaItens.SELECTED.CONTATO" 
							ng-readonly="true" 
							style="width: 230px;">
					</div>

					<div class="form-group">
						<label>Aniversário:</label>
						<input 
							type="text" 
							class="form-control input-medio" 
							ng-model="vm.CadCampanhaItens.SELECTED.ANIVERSARIO_EMPRESA_FORMAT" 
							ng-readonly="true" 
							style="width: 220px;">
					</div>

					<div class="form-group">
						<label>Email:</label>
						<div class="input-group left-icon">
							<div class="input-group-addon" style="padding: 9px; color: #337ab7;"> @ </div>
							<input 
								type="text" 
								class="form-control input-maior normal-case" 
								ng-model="vm.CadCampanhaItens.SELECTED.EMAIL" 
								ng-readonly="true" 
								style="width: 432px !important;">
						</div>
					</div>

					<div class="form-group">
						<label>Telefone:</label>
						<div class="input-group left-icon">
							<div class="input-group-addon" style="padding: 9px; color: #337ab7;"> <span class="fa fa-phone"></span> </div>
							<input 
								type="text" 
								class="form-control input-medio" 
								ng-model="vm.CadCampanhaItens.SELECTED.DESC_FONE" 
								ng-readonly="true">
						</div>
					</div>

					<div class="form-group">
						<label>Telefone ²:</label>
						<div class="input-group left-icon">
							<div class="input-group-addon" style="padding: 9px; color: #337ab7;"> <span class="fa fa-phone"></span> </div>
							<input 
								type="text" 
								class="form-control input-medio" 
								ng-model="vm.CadCampanhaItens.SELECTED.DESC_FAX" 
								ng-readonly="true">
						</div>
					</div>

					<div class="form-group">
						<label>Celular:</label>
						<div class="input-group left-icon">
							<div class="input-group-addon" style="padding: 9px; color: #337ab7;"> <span class="fa fa-mobile"></span> </div>
							<input 
								type="text" 
								class="form-control input-medio" 
								ng-model="vm.CadCampanhaItens.SELECTED.DESC_CELULAR" 
								ng-readonly="true" 
								style="width: 202px;">
						</div>
					</div>

					<br>

					<div class="form-group">
						<div class="form-group">
							<label></label>
							<textarea 
								style="resize: auto; width: 100%;" 
								class="form-control normal-case" 
								maxlength="2000" 
								cols="120" 
								rows="8" 
								ng-keypress="vm.CadCampanhaItens.SELECTED_CONTATO.OBSERVACAO.length > 2000 ? $event.preventDefault() : true;" 
								ng-model="vm.CadCampanhaItens.SELECTED_CONTATO.OBSERVACAO" 
								ng-disabled="vm.CadCampanhaItens.SELECTED_CONTATO.ALTERAR != 1">
							</textarea>
						</div>
						<div>Caracteres restantes: @{{vm.CadCampanhaItens.SELECTED_CONTATO.OBSERVACAO.length <= 2000 ? (2000 - (vm.CadCampanhaItens.SELECTED_CONTATO.OBSERVACAO.length || 0)) : 2000}}</div>
					</div>

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

		<!--  -->

		<div class="alert alert-success" style="display: flex; margin-top: 5px;" ng-if="trim_null(vm.CadCampanha.SELECTED.MENSAGEM) != ''">
			<ul style="list-style-type: disc; padding-left: 15px;">
				<p><b>Mensagem:</b></p>
				<p>@{{ vm.CadCampanha.SELECTED.MENSAGEM }}</p>
			</ul>
		</div>

	</div>

</div>
</form>

@overwrite