{% load i18n %}
{% load bootstrap3 %}

<div class="row">
	<div class="col-md-6">
		{% bootstrap_field customer_form.phone %}
	</div>
	<div class="col-md-6">
		{% bootstrap_field customer_form.email %}
	</div>
</div>

<div class="row">
	<div class="col-md-6">
		{% bootstrap_field customer_form.fname %}
	</div>
	<div class="col-md-6">
		{% bootstrap_field customer_form.lname %}
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		{% bootstrap_field customer_form.address %}
	</div>
	<div class="col-md-6">
		{% bootstrap_field customer_form.company %}
	</div>
</div>
<div class="row">
	<div class="col-md-6">
		<div class="row">
			<div class="col-md-6">
				{% bootstrap_field customer_form.postal_code %}
			</div>
			<div class="col-md-6">
				{% bootstrap_field customer_form.city %}
			</div>
		</div>
	</div>
	<div class="col-md-6">
		{% bootstrap_field customer_form.country %}
	</div>
</div>
{% comment %}
<div class="row">
	<div class="col-md-12">
		{% bootstrap_field customer_form.notify_by_sms %}
		{% bootstrap_field customer_form.notify_by_email %}
	</div>
</div>
{% endcomment %}

{% block media %}
{% if request.user.is_authenticated %}
<script type="text/javascript">

	function SearchViewModel() {
		var self = this;
		self.results = ko.observableArray();

		self.loadCustomer = function(c){
			$.get('{% url "checkin-get_customer" %}?c=' + c.id, function(r){
				$('#id_fname').val(r.fname);
				$('#id_lname').val(r.lname);
				$('#id_address').val(r.address);
				$('#id_postal_code').val(r.postal_code);
				$('#id_city').val(r.city);
				$('#id_country').val(r.country);
				$('#id_email').val(r.email);
				$('#modal').modal('hide');
			});
		}
	}

	var svm = new SearchViewModel();
	ko.applyBindings(svm);

	$('#id_phone').next('span').on('click', function(){
		var q = encodeURIComponent($('#id_phone').val());
		$.get('?phone=' + q, function(r){
			svm.results(r);
			$('#modal').modal();
		});
	});
</script>
{% endif %}
{% endblock media %}