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

{#
    Society Self-Service
    Copyright © 2018–2023  Yingtong Li (RunasSudo)
    Copyright © 2023  MUMUS Inc.

    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 %}{{ revision.name }}{% endblock %}

{% block aftersidebar %}
	<div class="eight wide column">
		<h1>{{ revision.name }}</h1>
		
		<form class="ui form" action="{{ url('budget_action', kwargs={'id': revision.budget.id}) }}" method="POST">
			<span class="ui header">Status: {{ revision.get_state_display() }}</span>
			
			{% if is_latest %}
				{% if revision.can_submit(request.user) %}
					<button class="ui mini labeled primary icon button" data-action="Submit" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="paper plane icon"></i> Submit</button>
				{% endif %}
				{% if revision.can_endorse(request.user) %}
					<button class="ui mini labeled positive icon button" data-action="Endorse" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Endorse</button>
					
					<button class="ui mini labeled basic negative icon button" data-action="Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
				{% endif %}
				{% if revision.can_approve(request.user) %}
					<button class="ui mini labeled positive icon button" data-action="Approve" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="check icon"></i> Approve</button>
					
					<button class="ui mini labeled basic negative icon button" data-action="CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Return for re-drafting</button>
				{% endif %}
				{% if revision.can_withdraw(request.user) %}
					<button class="ui mini labeled basic negative icon button" data-action="Withdraw" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="undo icon"></i> Withdraw</button>
				{% endif %}
				{% if revision.can_cancel(request.user) %}
					<button class="ui mini labeled basic negative icon button" data-action="Cancel" style="margin-left: 1em;" onclick="return uiConfirm(this);"><i class="times circle outline icon"></i> Cancel</button>
				{% endif %}
				
				{% if revision.can_edit(request.user) %}
					<a class="ui mini labeled right floated icon button" href="{{ url('budget_edit', kwargs={'id': revision.budget.id}) }}"><i class="edit icon"></i> Edit</a>
				{% endif %}
				
				<a class="ui mini labeled right floated icon button" href="{{ url('budget_print', kwargs={'id': revision.budget.id}) }}" target="_blank"><i class="print icon"></i> Print</a>
				
				{% if not revision.can_edit(request.user) and revision.can_withdraw(request.user) %}
					<div class="ui message">
						<p>This budget has been submitted and is now awaiting approval. If you wish to edit this budget, you must first withdraw it. This will revert the budget to a draft.</p>
					</div>
				{% endif %}
				
				<input type="hidden" name="action" value="">
				<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
			{% else %}
				<a class="ui mini labeled right floated icon button" href="{{ url('budget_print', kwargs={'id': revision.budget.id}) }}?revision={{ revision.id }}" target="_blank"><i class="print icon"></i> Print</a>
				
				<div class="ui visible warning message">
					<p>You are viewing an older version of this budget. To make any changes, <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}">click here</a> to return to the current version.</p>
				</div>
			{% endif %}
		</form>
		
		<table class="ui mydefinition table">
			<tbody>
				<tr>
					<td class="two wide">ID</td>
					<td class="fourteen wide">BU-{{ revision.budget.id }}</td>
				</tr>
				<tr>
					<td>Title</td>
					<td>{{ revision.name }}</td>
				</tr>
				<tr>
					<td>Due date</td>
					<td>{{ revision.date or '' }}</td>
				</tr>
				<tr>
					<td>Event details</td>
					<td>
						{% if revision.event_dt %}{{ localtime(revision.event_dt) }}.{% endif %}
						{% if revision.event_attendees %}{{ revision.event_attendees }} attendees.{% endif %}
						{% if not revision.event_dt and not revision.event_attendees %}N/A{% endif %}
					</td>
				</tr>
				<tr>
					<td>Contributors</td>
					<td>
						<div class="ui list">
							{% for contributor in revision.contributors.all() %}
								<div class="item">
									<i class="user circle icon"></i>
									<div class="content"><a href="mailto:{{ contributor.email }}">
										{% if contributor.first_name %}
											{{ contributor.first_name }} {{ contributor.last_name }}
										{% else %}
											{{ contributor.email }}
										{% endif %}
									</a></div>
								</div>
							{% endfor %}
						</div>
					</td>
				</tr>
				<tr>
					<td>Cost centre</td>
					<td>{{ revision.cost_centre }}</td>
				</tr>
				<tr>
					<td>Responsible committee</td>
					<td>{{ dict(settings.AVAILABLE_APPROVERS)[revision.approver][0] }}</td>
				</tr>
				<tr>
					<td>Comments</td>
					<td>{{ revision.comments|markdown }}</td>
				</tr>
				<tr>
					<td>Revenue</td>
					<td>
						<div id="revenue_grid"></div>
						{% if revision.revenue_comments %}
							<div class="ui accordion">
								<div class="active title">
									<i class="dropdown icon"></i>
									Revenue comments
								</div>
								<div class="active content">
									{{ revision.revenue_comments|markdown }}
								</div>
							</div>
						{% endif %}
					</td>
				</tr>
				<tr>
					<td>Expenses</td>
					<td>
						{% if revision.expense_no_emergency_fund %}
							<p><input type="checkbox" id="expense_no_emergency_fund" disabled checked> No emergency fund required (please add a comment explaining why)</p>
						{% endif %}
						<div id="expense_grid"></div>
						{% if revision.expense_comments %}
							<div class="ui accordion">
								<div class="active title">
									<i class="dropdown icon"></i>
									Expense comments
								</div>
								<div class="active content">
									{{ revision.expense_comments|markdown }}
								</div>
							</div>
						{% endif %}
					</td>
				</tr>
				<tr>
					<td>Total Profit (Loss)</td>
					<td style="text-align: right; font-weight: bold; padding-right: 2.3em;">{{ '${:.2f}'.format(revision.get_revenue_total() - revision.get_expense_total()) if revision.get_revenue_total() >= revision.get_expense_total() else '(${:.2f})'.format(revision.get_expense_total() - revision.get_revenue_total()) }}</td>
				</tr>
			</tbody>
		</table>
		
		{% if is_latest %}
			<form class="ui form" action="{{ url('budget_action', kwargs={'id': revision.budget.id}) }}" method="POST">
				<div class="required field">
					<textarea rows="4" name="comment"></textarea>
				</div>
				<input type="hidden" name="action">
				<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
				<button class="ui primary button" data-action="Comment" onclick="return uiSubmit(this);">Comment</button>
				
				{% if revision.state == import('sstreasury.models').BudgetState.AWAIT_REVIEW.value and request.user.groups.filter(name='Treasury').exists() %}
					<button class="ui right floated labeled basic negative icon button" data-action="Comment,Return" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
					
					<button class="ui right floated labeled positive icon button" data-action="Comment,Endorse" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and endorse</button>
				{% elif revision.state != import('sstreasury.models').BudgetState.APPROVED.value and request.user.groups.filter(name='Secretary').exists() %}
					<button class="ui right floated labeled basic negative icon button" data-action="Comment,CmteReturn" onclick="return uiConfirm(this);"><i class="undo icon"></i> Comment and return for re-drafting</button>
					
					<button class="ui right floated labeled positive icon button" data-action="Comment,Approve" onclick="return uiConfirm(this);"><i class="check icon"></i> Comment and approve</button>
				{% endif %}
			</form>
			
			<div class="ui feed">
				{% for item in history %}
					{% if item.__class__.__name__ == 'BudgetComment' %}
						<div class="event">
							<div class="label">
								<i class="comment alternate outline icon"></i>
							</div>
							<div class="content">
								<div class="summary">
									<i class="user circle icon"></i>
									<a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> commented
									<div class="date">
										{{ localtime(item.time) }}
									</div>
								</div>
								<div class="extra text">
									{{ item.content|markdown }}
								</div>
							</div>
						</div>
					{% elif item.__class__.__name__ == 'BudgetRevision' %}
						<div class="event">
							<div class="label">
								<i class="edit icon"></i>
							</div>
							<div class="content">
								<div class="summary">
									{% if item.action == import('sstreasury.models').BudgetAction.CREATE.value %}
										<i class="user circle icon"></i> <a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> created the budget <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}?revision={{ item.id }}">(view)</a>
									{% elif item.action == import('sstreasury.models').BudgetAction.EDIT.value %}
										<i class="user circle icon"></i> <a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> edited the budget <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}?revision={{ item.id }}">(view)</a>
									{% elif item.action == import('sstreasury.models').BudgetAction.UPDATE_STATE.value %}
										<i class="user circle icon"></i> <a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> changed the state to: {{ item.get_state_display() }} <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}?revision={{ item.id }}">(view)</a>
									{% elif item.action == import('sstreasury.models').BudgetAction.AUTO_APPROVE.value %}
										System changed the state to: {{ item.get_state_display() }} <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}?revision={{ item.id }}">(view)</a>
									{% else %}
										<i class="user circle icon"></i> <a href="mailto:{{ item.author.email }}">{{ item.author.first_name }} {{ item.author.last_name }}</a> modified the budget <a href="{{ url('budget_view', kwargs={'id': revision.budget.id}) }}?revision={{ item.id }}">(view)</a>
									{% endif %}
									<div class="date">
										{{ localtime(item.time) }}
									</div>
								</div>
							</div>
						</div>
					{% elif item.__class__.__name__ == 'BudgetVote' %}
						<div class="event">
							<div class="label">
								<i class="gavel icon"></i>
							</div>
							<div class="content">
								<div class="summary">
									<i class="user circle icon"></i>
									<a href="mailto:{{ item.voter.email }}">{{ item.voter.first_name }} {{ item.voter.last_name }}</a>
									{% if item.vote_type == import('sstreasury.models').BudgetVoteType.IN_FAVOUR.value %}
										voted in favour of the budget
									{% elif item.vote_type == import('sstreasury.models').BudgetVoteType.AGAINST.value %}
										voted against the budget
									{% elif item.vote_type == import('sstreasury.models').BudgetVoteType.ABSTAIN.value %}
										abstained from voting
									{% endif %}
									<div class="date">
										{{ localtime(item.time) }}
									</div>
								</div>
							</div>
						</div>
					{% endif %}
				{% endfor %}
			</div>
		{% endif %}
		
		{% if revision.state == import('sstreasury.models').BudgetState.ENDORSED.value %}
			<h2>Committee voting</h2>
			
			<form action="{{ url('budget_action', kwargs={'id': revision.budget.id}) }}" method="POST">
				<p>
					{{ dict(settings.AVAILABLE_APPROVERS)[revision.approver][1] }} votes in favour are required for approval.
					{% if is_latest and request.user.groups.filter(name='Executive').exists() %}
						<button style="margin-left: 1em;" class="ui small primary labeled icon button" type="submit" name="action" value="SendVotingReminders"><i class="envelope icon"></i>Send urgent reminder emails</button>
					{% endif %}
				</p>
				
				<div class="ui three column grid">
					<div class="column">
						<div class="ui fluid card">
							<div class="content">
								<div class="header">In favour ({{ revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.IN_FAVOUR.value).count() }})</div>
								{% if revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.IN_FAVOUR.value).exists() %}
									<div class="description">
										<ul style="margin-bottom:0">
											{% for vote in revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.IN_FAVOUR.value) %}
												<li>{{ vote.voter.first_name }} {{ vote.voter.last_name }}</li>
											{% endfor %}
										</ul>
									</div>
								{% endif %}
							</div>
							{% if is_latest and revision.can_vote(request.user) %}
								<button class="ui bottom attached positive button" type="submit" name="action" value="VoteInFavour">
									Vote in favour
								</button>
							{% endif %}
						</div>
					</div>
					<div class="column">
						<div class="ui fluid card">
							<div class="content">
								<div class="header">Against ({{ revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.AGAINST.value).count() }})</div>
								{% if revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.AGAINST.value).exists() %}
									<div class="description">
										<ul style="margin-bottom:0">
											{% for vote in revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.AGAINST.value) %}
												<li>{{ vote.voter.first_name }} {{ vote.voter.last_name }}</li>
											{% endfor %}
										</ul>
									</div>
								{% endif %}
							</div>
							{% if is_latest and revision.can_vote(request.user) %}
								<button class="ui bottom attached negative button" type="submit" name="action" value="VoteAgainst">
									Vote against
								</button>
							{% endif %}
						</div>
					</div>
					<div class="column">
						<div class="ui fluid card">
							<div class="content">
								<div class="header">Abstentions ({{ revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.ABSTAIN.value).count() }})</div>
								{% if revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.ABSTAIN.value).exists() %}
									<div class="description">
										<ul style="margin-bottom:0">
											{% for vote in revision.budgetvote_set.filter(is_current=True, vote_type=import('sstreasury.models').BudgetVoteType.ABSTAIN.value) %}
												<li>{{ vote.voter.first_name }} {{ vote.voter.last_name }}</li>
											{% endfor %}
										</ul>
									</div>
								{% endif %}
							</div>
							{% if is_latest and revision.can_vote(request.user) %}
								<button class="ui bottom attached secondary button" type="submit" name="action" value="VoteAbstain">
									Abstain
								</button>
							{% endif %}
						</div>
					</div>
				</div>
				<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
			</form>
		{% endif %}
		
		{% if is_latest %}
			{% if claims is not none %}
				<h2>Reimbursement claims</h2>
				
				{% if claims %}
					<table class="ui celled table">
						<thead>
							<tr>
								<th class="nine wide">Purpose</th>
								<th class="four wide">Status</th>
								<th class="two wide">Total</th>
								<th class="one wide">View</th>
							</tr>
						</thead>
						<tbody>
							{% for claim in claims %}
								<tr>
									<td>{{ claim.purpose }}</td>
									<td>{{ claim.get_state_display() }}</td>
									<td>{{ '${:.2f}'.format(claim.get_total()) }}</td>
									<td>
										<a href="{{ url('claim_view', kwargs={'id': claim.id}) }}" class="ui tiny primary icon button"><i class="eye icon"></i></a>
									</td>
								</tr>
							{% endfor %}
							<tr>
								<td style="font-weight:bold" colspan="2">Total paid:</td>
								<td style="font-weight:bold">{{ '${:.2f}'.format(claims_total_paid) }}</td>
								<td></td>
							</tr>
						</tbody>
					</table>
					
					<div class="ui warning message">
						<p>This list will not include invoices, or other transactions tracked outside of Self Service.</p>
					</div>
				{% else %}
					<p>There are no claims to display.</p>
				{% endif %}
			{% endif %}
		{% endif %}
		
		<div class="ui modal">
			<div class="content" data-action="Submit">
				<p>Are you sure you want to submit this budget for Treasury review? You will not be able to make any additional changes without withdrawing the budget.</p>
			</div>
			<div class="content" data-action="Endorse">
				<p>Are you sure you want to give this budget Treasury endorsement?</p>
			</div>
			<div class="content" data-action="Comment,Endorse">
				<p>Are you sure you want to give this budget Treasury endorsement?</p>
			</div>
			<div class="content" data-action="Return">
				<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
			</div>
			<div class="content" data-action="Comment,Return">
				<p>Are you sure you want to refuse this budget Treasury endorsement and return it for re-drafting?</p>
			</div>
			<div class="content" data-action="Approve">
				<p>Are you sure you want to mark this budget as committee-approved?</p>
			</div>
			<div class="content" data-action="Comment,Approve">
				<p>Are you sure you want to mark this budget as committee-approved?</p>
			</div>
			<div class="content" data-action="CmteReturn">
				<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
			</div>
			<div class="content" data-action="Comment,CmteReturn">
				<p>Are you sure you want to refuse this budget committee approval and return it for re-drafting?</p>
			</div>
			<div class="content" data-action="Withdraw">
				<p>Are you sure you want to withdraw this budget from being considered for approval? The budget will be reverted to a draft.</p>
			</div>
			<div class="content" data-action="Cancel">
				<p>Are you sure you want to cancel this budget?</p>
			</div>
			<div class="actions">
				<div class="ui primary approve button">Continue</div>
				<div class="ui cancel button">Cancel</div>
			</div>
		</div>
	</div>
	
	<div class="four wide column">
		{% if revision.expense %}
			<p class="ui header">Expenses</p>
			<canvas id="chartExpenses"></canvas>
		{% endif %}
		
		{% if revision.expense or revision.revenue %}
			<p class="ui header">Revenue and expenses</p>
			<canvas id="chartRevExp"></canvas>
		{% endif %}
	</div>
{% endblock %}

{% block head %}
	{{ super() }}
	
	<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">
	
	<style>
		/* Fix the CSS */
		
		.ui.mydefinition.table > tbody > tr > td:first-child:not(.ignored) {
			background: rgba(0,0,0,.03);
			font-weight: 700;
			color: rgba(0,0,0,.95);
		}
		
		.jsgrid-align-right, .jsgrid-align-right input, .jsgrid-align-right select, .jsgrid-align-right textarea {
			text-align: right !important;
		}
		.jsgrid-cell {
			padding: .5em !important;
		}
		.jsgrid-header-row .jsgrid-header-cell {
			text-align: center !important;
		}
		
		/* Full screen width for graphs */
		@media only screen and (min-width: 768px) {
			.ui.container {
				width: auto;
				margin-left: 64px !important;
				margin-right: 64px !important;
			}
		}
	</style>
{% endblock %}

{% block script %}
	{{ super() }}
	
	<script>
		function uiSubmit(button) {
			button.form.elements['action'].value = button.dataset['action'];
			button.form.submit();
			return false;
		}
		
		function uiConfirm(button) {
			$('.ui.modal .content').hide();
			$('.ui.modal .content').filter('[data-action="' + button.dataset['action'] + '"]').show();
			$('.ui.modal').modal({
				closable: false,
				onApprove: function() {
					uiSubmit(button);
				}
			}).modal('show');
			
			return false;
		}
	</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/chart.js@4.3.0/dist/chart.umd.js" integrity="sha256-5dsP1lVzcWPn5aOwu+zs+G+TqAu9oT8NUNM0C4n3H+4=" crossorigin="anonymous"></script>
	
	<script src="{{ static('sstreasury/budget.js') }}"></script>
	
	<script>
		const ticketingFeeName = JSON.parse({{ import('json').dumps(import('json').dumps(settings.TICKETING_FEE_NAME))|safe }});
		const ticketingFeeProportion = {{ revision.ticketing_fee_proportion }};
		const ticketingFeeFixed = {{ revision.ticketing_fee_fixed }};
		const editing = false;
		
		var revenue_data = JSON.parse({{ import('json').dumps(import('json').dumps(revision.revenue))|safe }});
		var expense_data = JSON.parse({{ import('json').dumps(import('json').dumps(revision.expense))|safe }});
		
		makeGrid();
		makeCharts();
	</script>
{% endblock %}