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

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

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.CPCasosPainelConf.SELECTED.DESCRICAO}} -->
	<span ng-if="!vm.CPCasosPainelConf.ALTERANDO">{{ Lang::get('chamados/_26031.titulo13-exibir') }}</span>
	<span ng-if="vm.CPCasosPainelConf.INCLUINDO">{{ Lang::get('chamados/_26031.titulo13-incluir') }}</span>
	<span ng-if="vm.CPCasosPainelConf.ALTERANDO == true && vm.CPCasosPainelConf.INCLUINDO == false">{{ Lang::get('chamados/_26031.titulo13-alterar') }}</span>
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.CPCasosPainelConf.ALTERANDO == true" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>

    <button ng-if="vm.CPCasosPainelConf.ALTERANDO == true" ng-click="vm.CPCasosPainelConf.fecharModalSql()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>

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

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 160px);">
<!--<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.CPCasosPainelConf.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.CPCasosPainelConf.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.CPCasosPainelConf.TIPO_ADD < 3">

		<div>
			<fieldset style="margin-bottom: 10px;">
					<ul>
						<li>
							<textarea style="height: 450px" ng-show="vm.SHOW_SQL == true" id="sql_editor" class="sql_editor normal-case normalcase"></textarea>
						</li>
					</ul>
			</fieldset>
		</div>

		<div class="row">

			<div class="form-group" style="margin-top: 25px;">   
				<button 
					type="button"
					class="btn btn-warning btn-incluir"
					data-hotkey="f4"
					ng-disabled="!vm.CPCasosPainelConf.ALTERANDO"
					ng-click="vm.CPCasosPainelConf.atualizarCampos()">
					<span class="glyphicon glyphicon-refresh"></span> Carregar Campos
				</button>
			</div>

			<div class="form-group">
				<label>Tam. da Tabela:</label>
				<div class="input-group right-icon">
					<input 
						type="number"
						step="1"
						min="0"
						max="99999999"
						ng-required="vm.CPCasosPainelConf.SELECTED.TIPO == 7"
						class="form-control input-menor" 
						ng-model="vm.CPCasosPainelConf.SELECTED.TAMANHO_TABELA"
						ng-readonly="!vm.CPCasosPainelConf.ALTERANDO"
						ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						style="width: 115px !important; text-align: end;">
					<div class="input-group-addon" style="padding: 9px !important;">px</div>
				</div>
			</div>
		
			<div class="form-group">
				<label ttitle="Nome do Campo que será gravado">Campo Gravar:</label>
				<div class="input-group">
					<select 
						ng-required="vm.CPCasosPainelConf.SELECTED.TIPO == 7"
						ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						ng-model="vm.CPCasosPainelConf.SELECTED.CAMPO_GRAVAR"
						g-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						style="width: 235px;">
						<option ng-repeat="item in vm.CPCasosPainelConf.SELECTED.CAMPOS" ng-value="item">@{{item}}</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label ttitle="Nome do Campo retornado na visualização">Campo Visualizar:</label>
				<div class="input-group">
					<select 
						ng-required="vm.CPCasosPainelConf.SELECTED.TIPO == 7"
						ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						ng-model="vm.CPCasosPainelConf.SELECTED.CAMPO_VISUALIZAR"
						g-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						style="width: 235px;">
						<option ng-repeat="item in vm.CPCasosPainelConf.SELECTED.CAMPOS" ng-value="item">@{{item}}</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label ttitle="Nome do Campo que fica no Input ao selecionar um registro">Campo Retorno:</label>
				<div class="input-group">
					<select 
						ng-required="vm.CPCasosPainelConf.SELECTED.TIPO == 7"
						ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						ng-model="vm.CPCasosPainelConf.SELECTED.CAMPOS_RETORNO"
						g-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7"
						style="width: 235px;">
						<option ng-repeat="item in vm.CPCasosPainelConf.SELECTED.CAMPOS" ng-value="item">@{{item}}</option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label style="opacity: 0;">:</label>
				<input type="checkbox" id="click18" style="top: 3px" class="form-control"
					ng-checked="vm.CPCasosPainelConf.SELECTED.AUTOLOAD == '1'"
					ng-true-value="'1'"	ng-false-value="'0'"
					ng-model="vm.CPCasosPainelConf.SELECTED.AUTOLOAD"
					ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7">
				<label for="click18" style= "margin-left: 5px; font-weight: bold; top: 3px;">
					Carregar Campo
				</label>
			</div>
		</diV>

		<!-- <div class="row">
			<div style="margin-top: 10px;">   
				<ul class="list-inline"> 
					<button 
						type="button"
						class="btn btn-warning btn-incluir"
						data-hotkey="f4"
						ng-disabled="!vm.CPCasosPainelConf.ALTERANDO"
						ng-click="vm.CPCasosPainelConf.atualizarCampos()">
						<span class="glyphicon glyphicon-refresh"></span> Carregar Campos
					</button>
				</ul>
			</div>
		</div> -->

		<div class="table-ec table-scroll" style="width: 300px;  height: 250px; display: inline-flex; margin-top: 15px; margin-bottom: 15px;">
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th class="">Campos</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-if="!vm.CPCasosPainelConf.ALTERANDO" class="odd" ng-repeat="item in vm.CPCasosPainelConf.SELECTED.CAMPOS track by $index" tabindex="0">
						<td class="">@{{item}}</td>
					</tr>
					<tr ng-if="vm.CPCasosPainelConf.ALTERANDO" ng-dblclick="vm.CPCasosPainelConf.SELECTED.OBJ_CAMPO_TABELA.push({CAMPO : item, DESCRICAO : ''});" class="odd" ng-repeat="item in vm.CPCasosPainelConf.SELECTED.CAMPOS track by $index" tabindex="0">
						<td class="">@{{item}}</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="table-ec table-scroll" style="width: 600px; display: inline-flex; height: 250px; margin-top: 15px; margin-bottom: 15px;">
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th class="">Campos Tabela</th>
						<th class="" style="width: 50px;">Campos Descrição</th>
						<th class="" style="width: 50px;"></th>
					</tr>
				</thead>
				<tbody>
					<tr class="odd" ng-repeat="item in vm.CPCasosPainelConf.SELECTED.OBJ_CAMPO_TABELA track by $index" tabindex="0">
						<td class="">@{{item.CAMPO}}</td>

						<td class="" style="padding: 1px;">
							<input 
								type="text"
								ng-required="vm.CPCasosPainelConf.SELECTED.TIPO == 7"
								class="form-control input-medio" 
								ng-model="item.DESCRICAO"
								ng-readonly="!vm.CPCasosPainelConf.ALTERANDO"
								maxlength="50"
								ng-disabled="!vm.CPCasosPainelConf.ALTERANDO || vm.CPCasosPainelConf.SELECTED.TIPO != 7">
						</td>

						<td style="padding: 1px;">
							<button 
								style="margin: 3px;"
								type="button"
								class="btn btn-danger"
								ng-disabled="!vm.CPCasosPainelConf.ALTERANDO"
								ng-click="vm.CPCasosPainelConf.removerCampo(item)">
								<span class="glyphicon glyphicon-trash"></span>
							</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

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

@overwrite