Service Claim Raw

{% extends "musicians/musicians.html" %}

	{% block musician-content %}
		<div id="mus-title">
			Service Claim Form
		</div>
		<br/>

		<p>A separate form must be filled out for each concert/service week.</p><br/>
		<p>All claims submitted by the 20th of the month will be paid on the payrol of that
		same month.  Any forms submitted after the 20th will appear on the following month's check.
		A penalty of five percent (5%) of the total claimed shall be deducted from the payment for
		claims made after thirty (30) days following a service.</p><br/>

		<p>Required fields are in <b>bold</b></p>

		<form action="" method="post">{% csrf_token %}
			{{ form.non_field_errors }}
			<div class="fieldWrapper">
				{{ form.name.errors }}
				<label for="id_name"><b>Your name:</b></label>
				{{ form.name }}
			</div>
			<div class="fieldWrapper">
				{{ form.email.errors }}
				<label for="id_email"><b>Your email address:</b></label>
				{{ form.email }}
			</div>
			<div class="fieldWrapper">
				{{ form.date.errors }}
				<label for="id_date"><span class="has-tip" title="Please use format MM/DD/YYYY"><b>Date</b></span></label>
				{{ form.date }}
			</div>
			<div class="fieldWrapper">
				{{ form.distance.errors }}
				<label for="id_distance">Mileage claim:</label>
				{{ form.distance }}
			</div>
			<div class="fieldWrapper">
				{{ form.principal_instrument.errors }}
				<label for="id_principal_instrument">Principal instrument:</label>
				{{ form.principal_instrument }}
			</div>
			<div class="fieldWrapper">
				{{ form.double_1.errors }}
				<label for="id_double_1">Double 1</label>
				{{ form.double_1 }}
			</div>
			<div class="fieldWrapper">
				{{ form.double_2.errors }}
				<label for="id_double_2">Double 2</label>
				{{ form.double_2 }}
			</div>
			<div class="fieldWrapper">
				{{ form.double_3.errors }}
				<label for="id_double_3">Double 3</label>
				{{ form.double_3 }}
			</div>
			<div class="fieldWrapper">
				{{ form.double_4.errors }}
				<label for="id_double_4">Double 4</label>
				{{ form.double_4 }}
			</div>
			<div class="fieldWrapper">
				{{ form.service_number.errors }}
				<label for="id_service_number"><b>Number of services claimed</b></label>
				{{ form.service_number }}
			</div>
			<div class="fieldWrapper">
				{{ form.standard_cartage.errors }}
				<label for="id_standard_cartage">Standard cartage</label>
				{{ form.standard_cartage }}
			</div>
			<div class="fieldWrapper">
				{{ form.vibes.errors }}
				<label for="id_vibes">Vibes</label>
				{{ form.vibes }}
			</div>
			<div class="fieldWrapper">
				{{ form.marimba.errors }}
				<label for="id_marimba">Marimba</label>
				{{ form.marimba }}
			</div>
			<div class="fieldWrapper">
				{{ form.small_diem.errors }}
				<label for="id_small_diem">Single per diem</label>
				{{ form.small_diem }}
			</div>
			<div class="fieldWrapper">
				{{ form.big_diem.errors }}
				<label for="id_big_diem">Double per diem</label>
				{{ form.big_diem }}
			</div>
			<div class="fieldWrapper">
				{{ form.comments.errors }}
				<label for="id_comments">Comments:</label>
				{{ form.comments }}
			</div>
			<p><input type="submit" value="Submit request" /></p>
		</form>

		<div onload="initialize()">
			<form action="#" onsubmit="showLocation(); return false;">
				<div id="mus-title">Distance Calculator</div><br/>
					<p>Enter city, state (e.g. Little Rock, AR)</p>
				  <p>
					Starting city: <input type="text" name="address1" value="city 1" /><br/>
					Destination city: <input type="text" name="address2" value="city 2" />
					<input type="submit" value="Get mileage" />
				  </p>
			</form>
		</div>

		<p><i>Please submit a new form for each concert/service week.  You will receive an email confirmation
		of your submission immediately.</i></p>

	{% endblock %}

	{% block reveal %}


	{% endblock %}

<script>
  var geocoder, location1, location2, gDir;

function initialize() {
    geocoder = new GClientGeocoder();
    gDir = new GDirections();
    GEvent.addListener(gDir, "load", function() {
        var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
        var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
		var drivingDistanceMiles = document.getElementById('id_distance').value;
        document.getElementById('id_distance').value = drivingDistanceMiles;
    });
}

function showLocation() {
    geocoder.getLocations(document.forms[0].address1.value, function (response) {
        if (!response || response.Status.code != 200)
        {
            alert("Sorry, we were unable to geocode the first address");
        }
        else
        {
            location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
            geocoder.getLocations(document.forms[0].address2.value, function (response) {
                if (!response || response.Status.code != 200)
                {
                    alert("Sorry, we were unable to geocode the second address");
                }
                else
                {
                    location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                    gDir.load('from: ' + location1.address + ' to: ' + location2.address);
                }
            });
        }
    });
}

</script>