{% extends "base.html" %}

{% block content %}

<!-- POST request to /search -->
<script type="text/javascript">
	var api_host = '';
	$(function() {
		$('.sendButton').click(function() {
			$.ajax({
				url: api_host+'/api/search',
				data: $('form').serialize(),
				type: 'POST',
				beforeSend: function() {
					$('.sendButton').attr('disabled', true);
					$('.load').show();
				},
				success: function(response) {
					console.log(response);
				},
				error: function(error) {
					console.log(error);
				}
				complete: function() {
					$('.load').hide();
				},
			});
		});
	});

	// GET request to /login
	$(function() {
		function get_search_results(query_id) {
			$.ajax({
				data: query_id,
				url: api_host+'/api/result',
				type: 'GET',
				success: function(response) {
					console.log(response);
					console.log("Everything finished, no errors");
				},
				error: function(jqXHR, textStatus, errorThrown) {
					if (jqXHR.status == 401) {
						console.log("Error 401");
					}
					if (jqXHR.status == 404) {
						console.log("Not finished");
					}
				}
			});
		};
	});
</script>


<!-- Check and disable form field -->
<script type="text/javascript">
	$(document).ready(function(){
		$('input').click(function(){
			if ($('input[value="lexis"]').is(':checked')) {
				$('.js-third').attr('disabled', true);
				$('.js-third').val('');
				$('.js-first').show();
				$('.js-second').show();
			}
			else {
				$('.js-third').attr('disabled', false);
				$('.js-first').hide();
				$('.js-second').hide();
			}
		})

	});
	// clear function
	function Clear() {
		document.getElementById("form").reset();
	}
</script>

<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4" style="margin-top:5%;">
			<form id="form" action="/api/search" method="POST" role="form">
				<p><img class="load" src="{{ url_for('static', filename='img/loading.gif') }}" style="display:none;"></p>
				<div class="alert alert-info">Please enter the data to search:</div>
				<p>
					<input type="text" name="first_name" class="form-control js-first" placeholder="First name" style="display:none;">
				</p>
				<p>
					<input type="text" name="last_name" class="form-control js-second" placeholder="Last name" style="display:none;">
				</p>
				<p>
					<input type="text" name="full_name" class="form-control js-third" placeholder="Full name" required>
				</p>
				<p>
					<input type="text" name="id" class="form-control js-four" placeholder="ID" required>
				</p>
				<p>
					<input type="text" name="current_country" class="form-control" placeholder="Current country" required>
				</p>
				<p>
					<input type="text" name="origin_country" class="form-control" placeholder="Origin country" required>
				</p>
				<p>
					<div class="checkbox">
						<label><input type="checkbox" value="google" name="google">Google</label>
					</div>
					<div class="checkbox">
						<label><input type="checkbox" value="factiva" name="factiva">Factiva</label>
					</div>
					<div class="checkbox">
						<label><input type="checkbox" value="lexis" name="lexis">Lexis</label>
					</div>
				</p>
				<button class="btn btn-primary" type="submit" class="sendButton">Search</button>
				<button class="btn btn-danger" type="button" onclick="Clear()">Clear</button>
			</form>
		</div>
	</div>
</div>

{% endblock %}