{% extends "edumanage/welcome.html"%}

{% block crumbs %}
	<li><a href="{% url manage %}">Home</a><span class="divider">/</span></li>
	<li><a href="{% url services %}">Services</a><span class="divider">/</span></li>
	<li class="active">Add-Edit</li>
{% endblock %}
{% block extrahead %}
<script type="text/javascript" src="/static/js/jquery.formset.js"></script>
 <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
      <script src="/static/js/jquery_csrf_protect.js" type="text/javascript"></script>

<script type="text/javascript">
		function gettext(msgid) { return msgid; }
		
 		var lat = 36.97;
 		var lng = 23.71;
 		var zoomLevel = 6;
 		{% if form.data.latitude or form.instance.latitude %}
 			var lat = "{% if form.data.latitude %}{{form.data.latitude}}{% else %}{{form.instance.latitude}}{% endif %}";
 			var lat = parseFloat(lat.replace(",","."));
 		{% endif %}
 		{% if form.data.longitude or form.instance.longitude %}
			var lng = "{% if form.data.longitude %}{{form.data.longitude}}{% else %}{{form.instance.longitude}}{% endif %}";
			var lng = parseFloat(lng.replace(",","."));
			var zoomLevel = 14;
			getOnce = true;
		{% endif %}
		var latlng = new google.maps.LatLng(lat,lng);
		var map = '';
		var marker = '';
		var getOnce = false;

		function setPositionValues(position) {
			$("#id_longitude").val('');
			$("#id_latitude").val('');
			$("#id_address_street").val('');
			$("#id_address_city").val('');

			$("#id_longitude").val(position.lng().toPrecision(8));
			$("#id_latitude").val(position.lat().toPrecision(8));
			codeLatLng(position);
		}

		function getPosition(position) {
			latlng = new google.maps.LatLng(position.coords.latitude,
					position.coords.longitude);
			getOnce = true;
			map.setCenter(latlng);
			map.setZoom(15);
			marker.setPosition(latlng);
			setPositionValues(latlng);
		}

		function moveMarker(position) {
			marker.setPosition(position);
			setPositionValues(position);
		}
		
		function geocode(position){
			geocoder
			.geocode(
					{
						'latLng' : position
					},
					function(results, status) {
						if (status == google.maps.GeocoderStatus.OK) {
							if (results.length >= 1) {
								for ( var ii = 0; ii < results[0].address_components.length; ii++) {
									var street_number = route = street = city = state = zipcode = country = formatted_address = '';
									var types = results[0].address_components[ii].types
											.join(",");
									if (types == "street_number") {
										addr.street_number = results[0].address_components[ii].long_name;
									}
									if (types == "route"
											|| types == "point_of_interest,establishment") {
										addr.route = results[0].address_components[ii].long_name;
									}
									if (types == "sublocality,political"
											|| types == "locality,political"
											|| types == "neighborhood,political"
											|| types == "political") {
										addr.city = (city == '' || types == "locality,political") ? results[0].address_components[ii].long_name
												: city;
									}
									if (types == "administrative_area_level_1,political") {
										addr.state = results[0].address_components[ii].short_name;
									}
									if (types == "postal_code"
											|| types == "postal_code_prefix,postal_code") {
										addr.zipcode = results[0].address_components[ii].long_name;
									}
									if (types == "country,political") {
										addr.country = results[0].address_components[ii].long_name;
									}
								}
							}

							if (addr.route && addr.city) {
								addr_field = addr.route;
								if (addr.street_number) {
									addr_field = addr.route + " "
											+ addr.street_number;
								}
								$("#id_address_street").val(addr_field);
								city_field = addr.city;
								if (addr.zipcode) {
									city_field = addr.city + ", "
											+ addr.zipcode;
								}
								$("#id_address_city").val(city_field);
							}
						}
					});
		}
		
		function codeLatLng(position) {
			addr = {};
			latlng = position;
			addr_num = '';
			addr_name = '';
			addr_city = '';
			addr_code = '';
			geocode(position)
		}
		function initialize() {
			image = new google.maps.MarkerImage('/static/img/edupin.png',
					// This marker is 29 pixels wide by 40 pixels tall.
					new google.maps.Size(29, 40),
					// The origin for this image is 0,0.
					new google.maps.Point(0,0),
					// The anchor for this image is the base of the flagpole at 18,42.
					new google.maps.Point(14, 40)
				);
			var styleArray = [
			                   {
			                       featureType: "all",
			                       stylers: [
			                         { saturation: -60 },
			                         {gamma: 1.00 }
			                       ]
			                     },{
			                       featureType: "poi.business",
			                       elementType: "labels",
			                       stylers: [
			                         { visibility: "off" }
			                       ]
			                     },
			                     { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },
			                     { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] },
			                     {'featureType': "administrative.country",
			                     'elementType': "labels",
			                     'stylers': [
			                         { 'visibility': "off" }
			                     ]}

			                     
			                   ];
			geocoder = new google.maps.Geocoder();
			var mapOptions = {
				center : latlng,
				zoom : zoomLevel,
				styles: styleArray,
				 mapTypeId: google.maps.MapTypeId.ROADMAP,
				    mapTypeControlOptions: {
					      style: google.maps.MapTypeControlStyle.DEFAULT
					    },
					navigationControl: true,
					mapTypeControl: false,
			};
			map = new google.maps.Map(document.getElementById("map_canvas"),
					mapOptions);
			if (getOnce == false) {
				marker = new google.maps.Marker({
					position : latlng,
					draggable : true,
					'icon': image,
					animation : google.maps.Animation.DROP,

				});
				marker.setMap(map);
				setPositionValues(latlng);
			}
			google.maps.event.addListener(map, 'idle', function() {
				
			{% if not form.data.latitude  %}
				{% if not form.instance.latitude  %}
					if (navigator.geolocation && getOnce == false) {
						navigator.geolocation.getCurrentPosition(getPosition);
					}
				{% endif %}
			{% endif %}

			});

			google.maps.event.addListener(map, 'click', function(event) {
				moveMarker(event.latLng);
			});
			google.maps.event.addListener(marker, 'dragend', function(event) {
				setPositionValues(marker.getPosition());
			});

		}

		$(document).ready(function() {
			
			initialize();
			$("#updatemap").click(function(){
				latlng = new google.maps.LatLng($("#id_latitude").val(), $("#id_longitude").val());
				moveMarker(latlng);
				map.setCenter(latlng);
				$("#updatemap").addClass('disabled');
				$("#updatemap").attr('disabled', 'disabled');
				return false;
			});
			
			$("#myloc").click(function(){
				navigator.geolocation.getCurrentPosition(getPosition);
				return false;
			});
			
			$("#id_latitude").keypress(function(){
				$("#updatemap").removeClass('disabled');
				$("#updatemap").removeAttr('disabled');
			});
			$("#id_longitude").keypress(function(){
				$("#updatemap").removeClass('disabled');
				$("#updatemap").removeAttr('disabled');
			});
			
			// Initialize jquery formset
			
			 $('#urlsform tbody tr').formset({
            prefix: '{{urls_form.prefix}}',
            formCssClass: "dynamic-formset1",
            added: addButton,
        });
			
			 $('#locsform tbody tr').formset({
		            prefix: '{{services_form.prefix}}',
		            formCssClass: "dynamic-formset2",
		            added: addButton
		        });
			 
			 $(".delete-row").prepend('<i class="icon-remove-sign icon-white"></i> ').addClass('btn btn-small btn-warning');
			 $(".add-row").prepend('<i class="icon-plus-sign icon-white"></i> ').addClass('btn btn-small btn-info');
			 
			 $("#adduserSubmit").click(function(){
					$.ajax({
						url:"{% url adduser %}", 
						data:$("#add_user_form").serialize(),
						type: "POST",
						cache: false,
						success:function(data){
								try {
									value = data.value;
									text = data.text;
									if (typeof value === 'undefined' && typeof text === 'undefined'){
										$('#mymodalbody').html(data);	
									}
									else{
										$('#id_contact').append($("<option></option>").attr("value",value).text(text));
										$('#myModal').modal('hide')
									}
								}
								catch (exception) {
									$('#mymodalbody').html(data);
								}					
							}
							});
					return false;
				});
			 
			 $("#add_contact").click(function(){
				 $('#myModal').modal('show')
				 $.ajax({
						url:"{% url adduser %}",
						type: "GET",
						success: function(data){
							$('#mymodalbody').html(data);
							}
						});
			
				 return false;
			 });
			 
		});
		function addButton(row){
			$(row).find(".delete-row").prepend('<i class="icon-remove-sign icon-white"></i> ').addClass('btn btn-small btn-warning');
		}
		
		
		
	</script>


{% endblock %}
			
{% block homeactive %}{% endblock %}
{% block servicesactive %}class="active"{% endblock %}
{% block subcontent %}

<h4>Services Add/Edit</h4>
<hr>
<form method="POST" class="form-horizontal">
	{% csrf_token %}
	{% if form.non_field_errors %}
	<p class="error">
		{{ form.non_field_errors}}
	</p>
	{% endif %}
	<div style="display: none">
		{{form.institutionid}}
	</div>
	<div class="control-group {% if form.longitude.errors or form.latitude.errors %} error {% endif %}">
		<label class="control-label" for="id_map_canvas"><b>Location</b></label>
		<div class="controls">
			<div id="map_canvas" style="width:100%; height:350px;"></div>
			<span class="help-block">{{ form.longitude.help_text }}</span>
		</div>
		<div class="controls">
			Lng:{{ form.longitude }} Lat:{{ form.latitude }}
			<button class="btn btn-info disabled" id="updatemap" disabled="disabled">
				Update Map
			</button>
			<button class="btn btn-info" id="myloc">
				Current Location
			</button>
			{% if form.longitude.errors %} <span class="help-inline"> {{ form.longitude.errors|join:", " }} </span>
			{% endif %}
			{% if form.latitude.errors %} <span class="help-inline"> {{ form.latitude.errors|join:", " }} </span>
			{% endif %} <span class="help-block">{{ form.longitude.help_text }}</span>
		</div>
	</div>

	<div class="control-group {% for err in services_form.errors %}{% if err|length > 0 %}error{% endif %}{% endfor %}{% if services_form.non_form_errors %}error{% endif %}">
		<label class="control-label" for="id_address_city"><b>loc_name</b></label>
		{{services_form.management_form}}
		<div class="controls">
		{% for err in services_form.errors %}{% if err|length > 0 %}<span class="help-inline"></span>{% endif %}{% endfor %}
		{% if services_form.non_form_errors %} <span class="help-inline"> {{ services_form.non_form_errors|join:", "}}</span>{% endif %}
			<table id="locsform"><thead><tr><td>Name</td><td>language</td></tr></thead><tbody>
		{% for formset_s in services_form.forms %}
		{{ formset_s.id }}
		
		
			<tr id="{{ formset_s.prefix }}-row">
			<td> {% if formset_s.instance.pk %}{{ formset_s.DELETE }}{% endif %}{{ formset_s.name }}{% if formset_s.name.errors %}<br><div class="help-inline"> {{ formset_s.name.errors|join:", " }} </div>{% endif %}</td> 
             <td>{{formset_s.lang}}{% if formset_s.lang.errors %}<br><p class="help-inline"> {{ formset_s.lang.errors|join:", " }} </p>{% endif %}</td>
             
		</tr>
		{% endfor %}
		</tbody></table>
		</div>
	</div>
	<div class="control-group {% if form.address_street.errors %} error {% endif %}">
		<label class="control-label" for="id_address_street"><b>Address Street</b></label>
		<div class="controls">
			{{ form.address_street }}
			{% if form.address_street.errors %} <span class="help-inline"> {{ form.address_street.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.address_street.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.address_city.errors %} error {% endif %}">
		<label class="control-label" for="id_address_city"><b>Address City</b></label>
		<div class="controls">
			{{ form.address_city }}
			{% if form.address_city.errors %} <span class="help-inline"> {{ form.address_city.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.address_city.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.SSID.errors %} error {% endif %}">
		<label class="control-label" for="id_url"><b>SSID</b></label>
		<div class="controls">
			{{ form.SSID }}
			{% if form.SSID.errors %} <span class="help-inline"> {{ form.SSID.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.SSID.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.contact.errors %} error {% endif %}">
		<label class="control-label" for="id_url"><b>Contact</b></label>
		<div class="controls">
			{{ form.contact }} <button class="btn btn-small btn-info" id="add_contact"><i class="icon-plus-sign icon-white"></i>Add...</button>
			{% if form.contact.errors %} <span class="help-inline"> {{ form.contact.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.contact.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.enc_level.errors %} error {% endif %}">
		<label class="control-label" for="id_oper_name"><b>enc_level</b></label>
		<div class="controls">
			{{ form.enc_level }}
			{% if form.enc_level.errors %} <span class="help-inline"> {{ form.enc_level.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.enc_level.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.port_restrict.errors %} error {% endif %}">
		<label class="control-label" for="id_number_user">port_restrict</label>
		<div class="controls">
			{{ form.port_restrict }}
			{% if form.port_restrict.errors %} <span class="help-inline"> {{ form.port_restrict.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.port_restrict.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.transp_proxy.errors %} error {% endif %}">
		<label class="control-label" for="id_number_id">transp_proxy</label>
		<div class="controls">
			{{ form.transp_proxy }}
			{% if form.transp_proxy.errors %} <span class="help-inline"> {{ form.transp_proxy.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.transp_proxy.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.IPv6.errors %} error {% endif %}">
		<label class="control-label" for="id_number_id">IPv6</label>
		<div class="controls">
			{{ form.IPv6 }}
			{% if form.IPv6.errors %} <span class="help-inline"> {{ form.IPv6.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.IPv6.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.NAT.errors %} error {% endif %}">
		<label class="control-label" for="id_number_id">NAT</label>
		<div class="controls">
			{{ form.NAT }}
			{% if form.NAT.errors %} <span class="help-inline"> {{ form.NAT.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.NAT.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.AP_no.errors %} error {% endif %}">
		<label class="control-label" for="id_number_id"><b>AP_no</b></label>
		<div class="controls">
			{{ form.AP_no }}
			{% if form.AP_no.errors %} <span class="help-inline"> {{ form.AP_no.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.AP_no.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% if form.wired.errors %} error {% endif %}">
		<label class="control-label" for="id_number_id">wired</label>
		<div class="controls">
			{{ form.wired }}
			{% if form.wired.errors %} <span class="help-inline"> {{ form.wired.errors|join:", " }} </span>
			{% endif %} <span class="help-block"> {{ form.wired.help_text }}</span>
		</div>
	</div>
	<div class="control-group {% for err in urls_form.errors %}{% if err|length > 0 %}error{% endif %}{% endfor %}{% if urls_form.non_form_errors %}error{% endif %}">
		<label class="control-label" for="id_urls">Urls</label>
		{{urls_form.management_form}}
		<div class="controls">
		{% for err in urls_form.errors %}{% if err|length > 0 %}<span class="help-inline">{{err}}</span>{% endif %}{% endfor %}
		{% if urls_form.non_form_errors %} <span class="help-inline"> {{ urls_form.non_form_errors|join:", "}}</span>{% endif %}
			<table id="urlsform"><thead><tr><td>url</td><td>type</td><td>language</td></tr></thead><tbody>
		{% for formset in urls_form.forms %}
		{{ formset.id }}
		
		
			<tr id="{{ formset.prefix }}-row">
			<td> {% if formset.instance.pk %}{{ formset.DELETE }}{% endif %}{{ formset.url }}{% if formset.url.errors %}<br><div class="help-inline"> {{ formset.url.errors|join:", " }} </div>{% endif %}</td> 
             <td>{{formset.urltype}}{% if formset.urltype.errors %}<br><p class="help-inline"> {{ formset.urltype.errors|join:", " }} </p>{% endif %}</td>
             <td>{{formset.lang}}{% if formset.lang.errors %}<br><p class="help-inline"> {{ formset.lang.errors|join:", " }} </p>{% endif %}</td>
             
		</tr>
		{% endfor %}
		</tbody></table>
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<button type="submit" id="applybutton" value="Apply" class="btn btn-large btn-primary"/>
			Apply</button>
		</div>
	</div>
</form>

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Add User</h3>
</div>
<div class="modal-body" id="mymodalbody">

</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<a class="btn btn-primary" id="adduserSubmit" href="#">Save changes</a>
</div>
</div>

{% endblock %}