{% extends 'sstreasury/base.html' %}

{#
    Society Self-Service
    Copyright © 2018-2019  Yingtong Li (RunasSudo)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
#}

{% block title %}{% if request.resolver_match.url_name == 'claim_new' %}New{% else %}Edit{% endif %} reimbursement claim{% endblock %}

{% block maincontent %}
	<h1>{% if request.resolver_match.url_name == 'claim_new' %}New{% else %}Edit{% endif %} reimbursement claim</h1>
	
	<form class="ui form" method="POST" enctype="multipart/form-data">
		<div class="ui disabled inline grid field">
			<label class="three wide column">ID</label>
			<input class="eleven wide column" type="text" name="id" value="{{ 'RE-{}'.format(claim.id) if claim.id != None else '' }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Purpose</label>
			<input class="eleven wide column" type="text" name="purpose" value="{{ claim.purpose }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Expenditure date</label>
			<div class="eleven wide column">
				<div class="ui calendar" id="cal_date">
					<div class="ui input left icon grid">
						<i class="calendar icon" style="z-index: 999;"></i>
						<input class="twelve wide column" type="text" name="date" value="{{ claim.date or '' }}">
					</div>
				</div>
			</div>
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Budget ID (if known)</label>
			<input class="eleven wide column" type="text" name="budget_id" value="{{ claim.budget_id }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Submitter</label>
			<div class="eleven wide column">
				<div class="ui list">
					<div class="item">
						<i class="user circle icon"></i>
						<div class="content">
							<a href="mailto:{{ claim.author.email }}">
								{% if claim.author.first_name %}
									{{ claim.author.first_name }} {{ claim.author.last_name }}
								{% else %}
									{{ claim.author.email }}
								{% endif %}
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui divider"></div>
		<div class="ui inline grid field">
			<label class="three wide column">Comments</label>
			<textarea class="eleven wide column" rows="2" name="comments">{{ claim.comments }}</textarea>
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">Payee name</label>
			<input class="eleven wide column" type="text" name="payee_name" value="{{ claim.payee_name }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Payee BSB</label>
			<input class="eleven wide column" type="text" name="payee_bsb" value="{{ claim.payee_bsb }}">
		</div>
		<div class="ui required inline grid field">
			<label class="three wide column">Payee account number</label>
			<input class="eleven wide column" type="text" name="payee_account" value="{{ claim.payee_account }}">
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">Receipts</label>
			<div class="eleven wide column">
				<ul>
					{% for claim_receipt in claim.claimreceipt_set.all() %}
						<li><a href="{{ MEDIA_URL }}{{ claim_receipt.uploaded_file.name }}">{{ claim_receipt.uploaded_file.name.split('/')[-1] }}</a> <button class="ui mini red basic icon button" type="submit" name="submit" value="DeleteFile{{ claim_receipt.id }}" style="margin-left: 1em;" onclick="return confirm('Are you sure you want to delete this file? If you have any unsaved changes, you should save the claim first.');"><i class="trash icon"></i></button></li>
					{% endfor %}
				</ul>
				<input type="file" name="upload_file" multiple>
			</div>
		</div>
		<div class="ui divider"></div>
		<div class="ui required inline grid field">
			<label class="three wide column">Items</label>
			<div class="eleven wide column"></div>
		</div>
		<div id="items_grid"></div>
		<input type="hidden" name="items" id="items_input">
		<div class="ui divider"></div>
		<div class="ui error message"></div>
		<div>
			<h2 class="ui header">Declaration</h2>
			<p>By submitting this form for processing with my MUMUS account, I agree that MUMUS Inc. will accept this communication as containing my signature for the purposes of the Electronic Transactions Acts. I certify that the information on this form is true and accurate. I acknowledge that incorrect information may result in the forfeiture of this reimbursement.</p>
			<p>Under the Pay As You Go legislation and guidelines produced by the Australian Taxation Office, I state that the supply to MUMUS Inc. described on this form is wholly of a private or domestic nature for me, I have no reasonable expectation of profit or gain from the activity undertaken, and I consider that I do not meet the definition of enterprise for tax purposes. Therefore, I do not need to quote an Australian Business Number and MUMUS Inc. is not required to withhold tax from my payment.</p>
		</div>
		<div class="ui divider"></div>
		<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
		<input class="ui primary button" type="submit" name='submit' value="Save">
		<input class="ui button" type="submit" name='submit' value="Save and continue editing">
		{% if request.resolver_match.url_name == 'claim_edit' %}
			<input class="ui right floated red button" type="submit" name='submit' value="Delete" onclick="return confirm('Are you sure you want to delete this reimbursement claim? This action is IRREVERSIBLE.');">
		{% endif %}
	</form>
{% endblock %}

{% block head %}
	{{ super() }}
	
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.css" integrity="sha256-KCHiPtYk/vfF5/6lDXpz5r5FuIYchVdai0fepwGft80=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.css" integrity="sha256-a/jNbtm7jpeKiXCShJ8YC+eNL9Abh7CBiYXHgaofUVs=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid-theme.min.css" integrity="sha256-0rD7ZUV4NLK6VtGhEim14ZUZGC45Kcikjdcr4N03ddA=" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dragula@3.7.2/dist/dragula.min.css" integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous">
{% endblock %}

{% block script %}
	{{ super() }}
	
	<script src="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.js" integrity="sha256-Pnz4CK94A8tUiYWCfg/Ko25YZrHqOKeMS4JDXVTcVA0=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/dragula@3.7.2/dist/dragula.min.js" integrity="sha256-ug4bHfqHFAj2B5MESRxbLd3R3wdVMQzug2KHZqFEmFI=" crossorigin="anonymous"></script>
	
	<script src="{{ static('sstreasury/claim.js') }}"></script>
	
	<script>
		function leftpad(n) {
			if (n < 10)
				return '0' + n;
			return '' + n;
		}
		$('#cal_date').calendar({
			type: 'date',
			formatter: {
				date: function(date, settings) {
					return date.getFullYear() + '-' + leftpad(date.getMonth() + 1) + '-' + leftpad(date.getDate());
				}
			}
		});
		
		$('.ui.form').form({
			on: 'blur',
			keyboardShortcuts: false,
			fields: {
				purpose: 'empty',
				date: 'empty'
			},
			onSuccess: function(event, fields) {
				var items_data = [];
				$('#items_grid .jsgrid-grid-body tr:not(.totalrow):not(.jsgrid-nodata-row)').each(function(i, el) {
					var row = $(el).data('JSGridItem');
					items_data.push({
						'Description': row['Description'],
						'Unit price': row['Unit price\n(incl GST)'],
						'Units': row['Units'],
						'GST-free': row['GST-free'],
					});
				});
				$('#items_input').val(JSON.stringify(items_data));
			}
		});
		
		// Interferes with jsGrid
		$('.ui.form').on('keyup keypress', function(e) {
			var keyCode = e.keyCode || e.which;
			if (keyCode === 13) {
				e.preventDefault();
				return false;
			}
		});
		
		var items_data = JSON.parse({{ import('json').dumps(import('json').dumps(claim.items))|safe }});
		for (var row of items_data) {
			row['Unit price\n(incl GST)'] = row['Unit price'];
		}
		var editing = true;
		makeGrid();
		
		dragula([document.querySelector('#items_grid tbody')], {
			accepts: function (el, target, source, sibling) {
				return sibling !== null && !sibling.classList.contains('totalrow');
			},
			invalid: function (el, handle) {
				return el.classList.contains('totalrow');
			}
		});
	</script>
{% endblock %}