{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item ">
    <a class="nav-link active" data-toggle="tab" href="#query" role="tab"><i class="fa fa-database" aria-hidden="true"></i> Query</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#qhist_html" role="tab"><i class="fa fa-history" aria-hidden="true"></i> History</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#qanswer_html" role="tab"><i class="fa fa-list" aria-hidden="true"></i> Answerset</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="query" role="tabpanel">
 
  <div id="env_panel" class="panel panel-default" style="margin:5px;">
   <div class="container">
  <div class="panel-body">
  <div class="row">
  <div class="col-md-10"> 
  <p>Environment :</p>
  <select id="newsfenv">
	  {% for element in envs %}
		  <option value={{ element}}>{{ element}}
	  {% endfor %}
</select>
  </div>
  </div>
  </div>
  </div>
</div>

<div class="panel panel-default" style="margin:5px;">
 <div class="container">
<div class="panel-body">
 <div class="row">
 <div class="col-md-6"> 
  
  
<p> Table : </p> 
<input class="multiInput" type="text" name="names[]" id="tabnamelist" list="neym"/>
<datalist id="neym">
	{% for table in tableList %}
    <option value={{ table }}></option>
	{% endfor %}
</datalist>
</div>
</div>
 <div class="row" >
 <div class="col-md-5 space" >
	 <!--<input class="btn btn-success btn-sm" style="float: right;" type="submit" value="Columns" id="colselect" />-->
 </div>
 
 </div>

<div class ="row">
	 <div class="col-md-6">
		<p> Columns : </p> 
		 <div class="multiselect " >
<table id="collistdt" class="display select" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th><input name="select_all" value="1" type="checkbox"></th>
         <th>Column name</th>
      </tr>
   </thead>
</table>
			<!-- <div  id="collist"> -->
			<!-- </div> -->
		</div>
	</div>
</div>
 <div class="row" >
	 <div  class="col-md-5 space" >
	 	<input class="btn btn-success btn-sm" style="float: right;" type="submit" value="Build Query"  id="colquery" />
	 </div>
</div>
  <div class ="row">
 <div class="col-md-10">
 	<p> Query : </p> 
	
			<form method="post" id="post-form" action="query_ajax_url/">
				{% csrf_token %}
				{{ form.query }}
			<div style="float:right;word-wrap: break-word;width: 33%;" ><strong><u>SQL Tip:</u></strong></br>
			1. <strong><em>Desc account </strong></em> - Describes column details of account object that can be accessed by selected user
			</div>
			<div class="row" >
			<div  class="col-md-6 space" >
				<label id="include"><input type="checkbox" value="" id="queryallcheckbox" > Include deleted and archived records</label>
			<input class="btn btn-success btn-sm" style="float: right;" type="submit" value="Submit" id="qSubmit" />	
			</div>
			</div>
			</form>
		</div>
		</div>

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

  <div class="tab-pane" id="qhist_html" role="tabpanel">
  <div style="margin-left:5px;">
	<div style="width: 1250px;  padding: 10px ">
		<table cellpadding="0" cellspacing="0" border="0" id="qhist_table" class="display" cellspacing="0" width="100%">
		 <thead>
			 <tr>
			 <th>Query</th>
			 <th>SF_Object</th>
			 <th>Rows</th>
			 <th>Result</th>
			 <th>Elapsed</th>
			 <th>Date/Time</th>
			 <th>Environment</th>
			 </tr>
		 </thead>
		 <tbody></tbody>
		</table>
	<center><input class="btn btn-success btn-sm" id="qhistrefresh" type="submit" value="Refresh" /></center>
	</div>
	<script>
				function refresh_query(data){
			$('#post-text').val(data);
			}
	$('#qhist_table a').click(function () {
		refresh_query($(this).text());
    });
	</script>
	</div>
	</div>
  <div class="tab-pane" id="qanswer_html" role="tabpanel">
	  <div style="margin-left:5px;">
		<div id="tableDiv" >
			
			</div>
		</div>
  </div>
</div>


  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  
    <!--Data Table-->
   
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-3.1.3/dt-1.10.15/b-1.3.1/b-html5-1.3.1/cr-1.3.3/fh-3.1.2/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.textcomplete/1.8.4/jquery.textcomplete.min.js"></script>

<script src = "{% static 'js/soql_jquery.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>


{% endblock %}