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

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

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.Implantacao.SELECTED.DESCRICAO}} -->
	<span ng-if="!vm.ImplantacaoDesenvolvimento.ALTERANDO && vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS == false">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Visualizar</span>
	<span ng-if="vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Excluir</span>
	<span ng-if="vm.ImplantacaoDesenvolvimento.INCLUINDO">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Incluir</span>
	<span ng-if="vm.ImplantacaoDesenvolvimento.COPIANDO">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Copiar</span>
	<span ng-if="vm.ImplantacaoDesenvolvimento.ALTERANDO == true && vm.ImplantacaoDesenvolvimento.INCLUINDO == false && vm.ImplantacaoDesenvolvimento.COPIANDO == false">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Alterar</span>
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.ImplantacaoDesenvolvimento.ALTERANDO && vm.ImplantacaoDesenvolvimento.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<!-- <button ng-if="(vm.ImplantacaoDesenvolvimento.ALTERANDO && vm.ImplantacaoDesenvolvimento.TIPO_ADD == 3) || vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS == false" type="submit" class="btn btn-primary" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button> -->
	
	<button ng-if="vm.ImplantacaoDesenvolvimento.ALTERANDO || vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS == true" ng-click="vm.ImplantacaoDesenvolvimento.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.ImplantacaoDesenvolvimento.ALTERANDO && !vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS" ng-click="vm.ImplantacaoDesenvolvimento.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.ImplantacaoDesenvolvimento.ALTERANDO && !vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS" ng-click="vm.ImplantacaoDesenvolvimento.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.ImplantacaoDesenvolvimento.TIPO_ADD == 2 && vm.Implantacao.ALTERANDO == false)" ng-if="!vm.ImplantacaoDesenvolvimento.ALTERANDO && !vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS" ng-click="vm.ImplantacaoDesenvolvimento.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.ImplantacaoDesenvolvimento.TIPO_ADD == 2 && vm.Implantacao.ALTERANDO == false)" ng-if="!vm.ImplantacaoDesenvolvimento.ALTERANDO && !vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS" ng-click="vm.ImplantacaoDesenvolvimento.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.ImplantacaoDesenvolvimento.ALTERANDO && vm.ImplantacaoDesenvolvimento.EXCLUINDO_MULTIPLOS == false" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.ImplantacaoDesenvolvimento.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 - 230px);">

	<!---->
	<div class="row" >

		<div class="form-group">
            <label>ID:</label>
            <input
			type="text"
			class="form-control input-menor"
			ng-model="vm.ImplantacaoDesenvolvimento.SELECTED.DESC_ID"
			readonly="readonly">
        </div>
		
		<div class="form-group">
            <label>Consultor:</label>
            <input
                type="text"
                class="form-control input-maior"
				maxlength="20"
				style="width: 300px;"
                ng-model="vm.ImplantacaoDesenvolvimento.SELECTED.CONSULTOR"
                ng-readonly="!vm.ImplantacaoDesenvolvimento.ALTERANDO">
        </div>
		
		<div class="form-group">
			<label>Data:</label>
			<input
				style="width: 150px;"
				type="date"
				ng-atalho
				class="form-control"
				ng-model="vm.ImplantacaoDesenvolvimento.SELECTED.DATAF"
				ng-disabled="!vm.ImplantacaoDesenvolvimento.ALTERANDO"
				required/>
		</div>

		<div style="display: -webkit-inline-box;" class="consulta-modulo"></div>
		<div style="display: -webkit-inline-box;" class="consulta-tela"></div>

		<div class="form-group">
			<label>Áreas:</label>
			<textarea maxlength="10000" style="resize: none;" class="form-control normal-case"
				cols="100" rows="2" ng-model="vm.ImplantacaoDesenvolvimento.SELECTED.AREA"
				ng-readonly="!vm.ImplantacaoDesenvolvimento.ALTERANDO">
			</textarea>
		</div>

		<div class="form-group">
			<label>Observações:</label>
			<textarea maxlength="10000" style="resize: none;" class="form-control normal-case"
				cols="100" rows="8" ng-model="vm.ImplantacaoDesenvolvimento.SELECTED.OBSERVACOES"
				ng-readonly="!vm.ImplantacaoDesenvolvimento.ALTERANDO">
			</textarea>
		</div>

		<fieldset style="margin-top: 5px;">
			<legend>Arquivos</legend>
			<ul class="list-inline" style="position: absolute; width: -webkit-fill-available; padding: 5px 5px 5px 0px; z-index: 19;">			
		
				<li>
					<button 
						type="button"
						class="btn btn-info"
						ng-click="vm.ImplantacaoDesenvolvimento.addArquivo(vm.ImplantacaoDesenvolvimento.SELECTED)"
						ng-disabled="vm.ImplantacaoDesenvolvimento.INCLUINDO">
						<span class="glyphicon glyphicon-plus"></span> Adicionar Arquivos
					</button>
				</li>

				<!-- <li>
					<button
						type="button" 
						class="btn gerar-historico"
						ng-click="vm.ImplantacaoDesenvolvimento.abrirModalProgresso();">
						<span class="glyphicon glyphicon-time"></span> Progresso
					</button>
				</li> -->

			</ul>

			<div class="row" style="position: relative; float: left; width: 100%; background-color: #f3f0f0; margin-top: 45px; border-radius: 5px;">
		
				<div style="overflow-x: auto; height: 130px; display: flex;">
		
					<br>
													
					<div ng-repeat="arq in vm.ImplantacaoDesenvolvimento.SELECTED.ARQUIVOS track by $index" class="lateral-arquivos" style="margin-bottom: 5px; margin-top: 10px; float: left; width: 9%; min-width: 150px; display: flex; margin-left: 5px;">
	
						<div style="display: inline-flex;
									flex-wrap: nowrap;
									justify-content: center;
									background-color: aliceblue;
									padding: 0px 0px 5px 0px;
									border-radius: 5px;
									border: 1px solid #b8d6f1; margin-bottom: 10px; margin-left: 5px; width: 100%;"
							ng-if="vm.ImplantacaoDesenvolvimento.SELECTED.ARQUIVOS.length > 0"
							class="arquivo-container">
		
							<div class="form-group" style="display: block; margin-bottom: 0px; width: 90px; height: 90px;">
	
								<div class="form-group elementoPaiZoom" style="display: block; margin-bottom: 0px;/* margin-left: 10px; */">
									<!-- <label>Arquivo:</label> -->
									<input 
										type="file"
										multiple
										class="form-control input-medio arquivo-binario"
										ngf-select="vm.ImplantacaoDesenvolvimento.processarArquivo($event, arq, vm.ImplantacaoDesenvolvimento.SELECTED)"
										ng-model="arq.BINARIO"
										ng-if="!arq.BINARIO">

									<img
										class="pre-visualizacao-arquivo"
										src="@{{ arq.BINARIO.$ngfBlobUrl }}"
										ngf-src="arq.BINARIO"
										ng-click="arq.VER = true"
										ng-if="(arq.TIPO.indexOf('image') > -1)
											|| (arq.TIPO.indexOf('png') > -1)
											|| (arq.TIPO.indexOf('jpg') > -1)
											|| (arq.TIPO.indexOf('webp') > -1)
											|| (arq.TIPO.indexOf('gif') > -1)" 
										style="display: block !important; width: 80px !important; height: 80px !important; transform-origin: bottom !important; z-index: 9999;">
	
									<span 
										class="pre-visualizacao-arquivo A@{{ arq.CSS != unknown ? arq.CSS : arq.TIPO }}" 
										ng-click="arq.VER = true" 
										ng-if="(arq.TIPO.indexOf('image') == -1)
											&& (arq.TIPO.indexOf('png') == -1)
											&& (arq.TIPO.indexOf('jpg') == -1)
											&& (arq.TIPO.indexOf('webp') == -1) 
											&& (arq.TIPO.indexOf('gif') == -1)"
										style="display: block; width: 80px !important; height: 80px !important; transform-origin: bottom !important; z-index: 9999;">
									</span>
	
								</div>
	
								<div class="visualizar-arquivo" ng-show="arq.VER">
	
									<span style="position: fixed; top: 85px; left: 28px; color: white; font-size: 15px;">
										<span style="font-weight: bold;">ID:</span> @{{ arq.ID }},
										<span style="font-weight: bold;">Observação:</span> @{{ arq.OBSERVACAO }},
										<span style="font-weight: bold;">Sequência:</span> @{{ arq.SEQUENCIA }},
									</span>
	
									<button 
										ng-click="vm.ImplantacaoDesenvolvimento.enviarArquivo('@{{ vm.ImplantacaoDesenvolvimento.email_usuario }}', arq)" 
										style="position: fixed; top: 60px; right: 215px;" type="button" class="btn btn-default">
										<span class="glyphicon glyphicon-envelope"></span> Enviar
									</button>
	
									<a style="display: block !important;" 
										class="btn btn-default download-arquivo" 
										href="@{{ arq.BINARIO.$ngfBlobUrl }}" 
										ngf-src="arq.BINARIO" 
										download
										data-hotkey="alt+b">
										<span class="glyphicon glyphicon-download"></span> Baixar
									</a>
	
									<button 
										type="button" 
										class="btn btn-default esconder-arquivo" 
										data-hotkey="esc" 
										ng-click="arq.VER = false">
										<span class="glyphicon glyphicon-chevron-left"></span> Voltar 
									</button>
	
									<div class="visualizar-arquivo-@{{ arq.ID }}-pdf" ng-if="(arq.TIPO.indexOf('pdf') > -1)" style="width: 100%; height: 100%;">
										<object type="application/pdf" 
											data-host="'@{{ vm.ImplantacaoDesenvolvimento.url_host_base }}'" 
											data="@{{ (arq.ID > 0 ? vm.ImplantacaoDesenvolvimento.url_host_base : '') + arq.BINARIO.$ngfBlobUrl }}" 
											ng-class="{ imagem : 
														(arq.TIPO.indexOf('image') > -1) 
													|| (arq.TIPO.indexOf('png') > -1) 
													|| (arq.TIPO.indexOf('jpg') > -1) 
													|| (arq.TIPO.indexOf('webp') > -1) 
													|| (arq.TIPO.indexOf('gif') > -1) }" 
											ng-if="(arq.TIPO.indexOf('pdf') > -1)">
										</object>
									</div>
	
									<img 
										class="" 
										style="width: 100%; object-fit: scale-down; height: calc(100vh - 250px); display: block !important; " 
										src="@{{ arq.BINARIO.$ngfBlobUrl }}" 
										ngf-src="arq.BINARIO"
										ng-if="(arq.TIPO.indexOf('image') > -1)
											|| (arq.TIPO.indexOf('png') > -1)
											|| (arq.TIPO.indexOf('jpg') > -1)
											|| (arq.TIPO.indexOf('webp') > -1)
											|| (arq.TIPO.indexOf('gif') > -1)">
	
									<span
										style="width: calc(100% - 60px); position: absolute; height: 10%; background-position: center; background-repeat: no-repeat; background-size: contain;"
										class="A@{{ arq.CSS != unknown ? arq.CSS : arq.TIPO }}"
										ng-if="(arq.TIPO.indexOf('image') == -1) 
											&& (arq.TIPO.indexOf('pdf') == -1) 
											&& (arq.TIPO.indexOf('png') == -1) 
											&& (arq.TIPO.indexOf('jpg') == -1) 
											&& (arq.TIPO.indexOf('webp') == -1) 
											&& (arq.TIPO.indexOf('gif') == -1)">
									</span>
	
									<label 
										style="margin-top: 100px; text-align: center; font-size: 20px; font-weight: normal; color: white; display: block;" 
										class="lbl-visualizacao-indisponivel" 
										ng-if="(arq.TIPO.indexOf('image') == -1) 
											&& (arq.TIPO.indexOf('pdf') == -1) 
											&& (arq.TIPO.indexOf('png') == -1) 
											&& (arq.TIPO.indexOf('jpg') == -1) 
											&& (arq.TIPO.indexOf('webp') == -1) 
											&& (arq.TIPO.indexOf('gif') == -1)">
										Visualização indisponível!
									</label>
	
								</div>

								<div class="form-group" style="position: absolute; left: 82px; display: block; margin-bottom: 0px; width: 15px; margin-top: -5px;">
									<!-- <label style="opacity: 0;">Observação:</label> -->
									<button 
										style="height: 27px; font-size: 8pt; width: 30px; display: flex; justify-content: center; align-items: center;" 
										type="button" 
										class="btn btn-danger" 
										ng-click="vm.ImplantacaoDesenvolvimento.excluirArquivo(arq, vm.ImplantacaoDesenvolvimento.SELECTED)">
										<span class="glyphicon glyphicon-trash"></span>
									</button>
								</div>

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

</div>
</form>

@overwrite