<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

{% extends "base.html" %}
{% block title %} FQM - {{ page_title }} {% endblock %}
{% block head %}
{{ super() }}
<script>
{% if form.errors %}
$(document).ready(function () {
	$('.updb').click()
})
{% endif %}
</script>
<style>
.qrw:hover {
  filter: brightness(0.8);
}
</style>
{% endblock %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "_macros.html" as macros %}

{%- from "sb_manage.html" import sb_manage with context %}
{% block sidebar %}
{{ sb_manage() }}
{% endblock %}

{% block page_content %}
{% from "_helpers.html" import render_field with context %}
{%- from "auto_reload.html" import auto_reloader with context %}
{% from "_modals.html" import confirmModal, qrModal %}
{%- from "_helpers.html" import render_field with context %}
{%- from "_footers.html" import panel_footer, spacer with context %}
{%- from "_tickets.html" import ticket_color, ticket_actions, processed_ticket_modal, ticket_orders with context %}
<div class="col-md-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
	    	<div class="row">
				{{ auto_reloader(True, duration=translate('Duration', 'en', [defLang]), refresh=translate('Auto reload', 'en', [defLang]), durMsg=translate('Enter a duration in seconds to auto-reload the page in :', 'en', [defLang])) }}
    			<div class="col-xs-12 hidden-md hidden-lg text-center mt-2">
        			<a href="#" data-toggle="modal" data-target="#branch_qr"
        				data-toggle="tooltip"
        				title="{{ translate('QR Code : Office', 'en', [defLang]) }}"
					>
						<i class="fa fa-4x fa-fw fa-qrcode fa-spin qrw" style="color: white;"></i>
					</a>
    			</div>
				<div class="col-xs-12">
		    		<h2 class="text text-center">
						<strong>{{ translate('Office', 'en', [defLang]) }} : {{ offices.filter_by(id=o_id).first().name }}</strong>
		    		</h2>
				</div>
			</div>
			<div class='row text-center ar2'>{{ ticket_orders() }} </div>
	    	<div class="row text-center text-muted h4 ar2">
				<div class="col-sm-10 col-sm-offset-1 col-lg-offset-1 col-md-3 well">
					{{ translate('Prefix', 'en', [defLang]) }} : <u>{{ offices.filter_by(id=o_id).first().prefix }}</u>
				</div>
				<div class="col-sm-10 col-sm-offset-1 col-md-offset-0 col-md-4 well">
					{{ translate('Created', 'en', [defLang]) }} : <u> {{ moment(offices.filter_by(id=o_id).first().timestamp).format('L') }}</u>
				</div>
				<div class="col-sm-10 col-sm-offset-1 col-md-offset-0 col-md-3 well">
					{{ translate('Last ticket pulled', 'en', [defLang]) }} : <u> {{ last_ticket_pulled.number or 'None' }}</u>
				</div>
	    	</div>
	    	<div class="row">
				<div class="col-xs-12 text-center">
		    		<div class="btn-group-justified">
						{% if getattr(current_user, 'role_id', None) != 3 %}
						<a class="btn btn-info updb" data-toggle="modal" data-target="#upd">
			    			<span class="fa fa-pencil hidden-xs"></span>
			    			<strong>{{ translate('Update', 'en', [defLang]) }}</strong>
						</a>
						{% endif %}
						<a class="btn btn-warning" data-toggle="modal" data-target="#rall">
			    			<span class="fa fa-reply hidden-xs"></span>
          					<strong>{{ translate('Reset', 'en', [defLang]) }}</strong>
						</a>
						{% if getattr(current_user, 'role_id', None) != 3 %}
						<a class="btn btn-danger" data-toggle="modal" data-target="#dall">
			    			<span class="fa fa-trash hidden-xs"></span>
			    			<strong>{{ translate('Delete', 'en', [defLang]) }}</strong>
						</a>
						{% endif %}
		    		</div>
				</div>
	    	</div>
		</div>
        <div class="panel-body">
	    	<div class="row text-center h3 text-muted hidden-xs ar2">
				<div class="col-xs-1">
				    ({{ translate('Ticket', 'en', [defLang]) }})
				</div>
				<div class="col-xs-2">
				    ({{ translate('Issued', 'en', [defLang]) }})
				</div>
				<div class="col-xs-2">
				    ({{ translate('Pulled', 'en', [defLang]) }})
				</div>
				<div class="col-xs-2">
		    		({{ translate('In-Waiting', 'en', [defLang]) }})
				</div>
				<div class="col-xs-3">
				    ({{ translate('Value', 'en', [defLang]) }})
				</div>
				<div class="col-xs-2">
					({{ translate('Actions', 'en', [defLang]) }})
				</div>
	    	</div>
	    	{% for o in officesp %}
	     	
				<div class="row well h4 ar1 text-center {{ ticket_color(o) }}">
		  			<div class="col-xs-12 col-sm-1">
		    			<b> {{ ooid.prefix }}{{ o.number }}.</b>
		  			</div>
		  			<div class="col-xs-12 col-sm-2">
		    			<u>{{ moment(o.timestamp).format('L') }}</u>
		  			</div>
		  			<div class="col-xs-12 col-sm-2">
						{% if o.p %} <u>{{ users.filter_by(id=o.pulledBy).first().name }} / {{ moment(o.pdt).fromNow() }}</u>
		  				{% else %} <u>{{ translate('Waiting', 'en', [defLang]) }}</u> {% endif %}
					</div>
					<div class="col-xs-12 col-sm-2">
						{% if o.p %} <u> {{ moment_wrapper(moment(o.timestamp)).toTime(o.pdt) }} </u>
						{% else %} <u> {{ moment_wrapper(moment(o.timestamp)).toNow() }} </u> {% endif %}
					</div>
		  			<div class="col-xs-12 col-sm-3">
		  		  		{% if o.n %}<u> {{ o.name }} </u> {% else %}
		  		    	<u> {{ translate('None', 'en', [defLang]) }}/{{ translate('Printed', 'en', [defLang]) }} </u> {% endif %}
		  			</div>
					<div class="col-xs-12 col-sm-2">
						{{ ticket_actions(o) }}
					</div>
				</div>

				{{ processed_ticket_modal(tickets_form, o, o_id) }}
			{% endfor %}
			{{ spacer([translate('No tickets been issued yet to display', 'en', [defLang]), officesp|length]) }}
	    </div>
	    <div class="panel-footer text-center">
			{{ panel_footer([
				[it(['Tickets total', serial.count()]), it(['Waiting', serial.waiting.count(), 'danger'])],
				[it(['Processed', serial.processed.count()]), it(['Unattended', serial.unattended.count(), 'warning'])],
			])}}
			<div class="row text-center">
		    	<div class="pagination">
					{{ macros.pagination_widget(pagination, '.offices', o_id=o_id, order_by=order_by) }}
		    	</div>
			</div>
	    </div>
	</div>
</div>

{{ confirmModal([
	['rall', translate('Warning : Rest all tasks', 'en', [defLang]), translate("You are attempting to reset an office to zero, with its all tickets been deleted and will not be retrievable , Are you sure of that ?", 'en', [defLang]), url_for('core.serial_r', o_id=o_id)],
	['dall', translate('Warning : Delete office', 'en', [defLang]), translate("You are attempting to delete an office with its all tickets which will not be retrievable , Are you sure of that ?", 'en', [defLang]), url_for('manage_app.office_d', o_id=o_id)]
], yes=translate('Yes', 'en', [defLang]), no=translate('No', 'en', [defLang])) }}
{{ qrModal([['branch_qr', translate('QR code - Office', 'en', [defLang]) + ' ' + str(offices.filter_by(id=o_id).first().name), qrcode(url_for('manage_app.offices', o_id=o_id, _external=True))]], close=translate('Exit', 'en', [defLang]))}}

<div class="modal fade" id="upd">
    <div class="modal-dialog">
		<div class="modal-content">
	    	<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title text-center ar1">{{ translate('Update office', 'en', [defLang]) }}</h4>
	    	</div>
	    	<form method="POST" enctype="multipart/form-data" id="fm">
				<div class="modal-body">
					<p class="pt-10"></p>
		    		{{ form.csrf_token }}
		    		{{ render_field(form.name, class="form-control") }}
		    		{{ render_field(form.prefix, class="form-control") }}
		    		<p class="pt-10"></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="close btn btn-md btn-warning pull-left" data-dismiss="modal">{{ translate('Exit', 'en', [defLang]) }}</button>
					<button type="submit" class="close btn btn-md btn-danger">{{ translate('Update', 'en', [defLang]) }}</button>
				</div>
	    	</form>
		</div>
    </div>
</div>
{% endblock %}
