{% extends "layouts/default.html" %}

{% block title %} Manage Customers {% endblock title %}

{% block stylesheets %}

    <link rel="stylesheet" href="/static/assets/css/suggestags.css">

{% endblock stylesheets %}

{% block content %}

    {% if current_user.is_authenticated %}
    {{ form.hidden_tag() }}
		<div class="page-inner">
			<a class="mb-2 ml-1 text-dark" href="/manage/customers?cid={{ session['current_case'].case_id }}"><i class="fa-solid fa-arrow-left"></i> Back</a>
			<div class="mt-2 mb-4">
				<div class="row ml-2 mr-2">
					<h2 class="pb-2">
						<a href="/manage/customers?cid={{ session['current_case'].case_id }}" class="text-dark">Customers</a> > {{ customer.customer_name }} (#{{customer.customer_id}})</h2>
					<button class="btn btn-light btn-sm ml-auto" onclick="customer_detail('{{ customer.customer_id }}');">Edit customer</button>
				</div>
			</div>
			<input id="customer_id" style="display:none;" value="{{ customer.customer_id }}"/>
				<div class="row">
					<div class="col-md-2">
						<div class="card card-dark bg-success-gradient">
							<div class="card-body pb-0">
								<div class="h1 fw-bold float-right"></div>
								<h2 id="current_open_cases" class="mb-2">0</h2>
								<p>Current open cases</p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div id="chart_current_open_cases"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<div class="card card-dark bg-info-gradient">
							<div class="card-body pb-0">
								<div class="h5 fw-bold float-right"><span id="ratio_month"></span></div>
								<h2 id="cases_current_month" class="mb-2"></h2>
								<p>Current month</p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div id="chart_month_cases"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<div class="card card-dark bg-info-gradient">
							<div class="card-body pb-0">
								<div class="h1 fw-bold float-right"></div>
								<h2 id="cases_last_month" class="mb-2">0</h2>
								<p>Last month</p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div id=""></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<div class="card card-dark bg-info-gradient">
							<div class="card-body pb-0">
								<div class="h5 fw-bold float-right"><span id="ratio_year"></span></div>
								<h2 id="cases_current_year" class="mb-2">0</h2>
								<p>Current year </p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div id="chart_year_cases"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<div class="card card-dark bg-info-gradient">
							<div class="card-body pb-0">
								<div class="h3 fw-bold float-right"></div>
								<h2 id="cases_last_year" class="mb-2">0</h2>
								<p>Last year (<span id="last_year"></span>)</p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div></div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<div class="card card-dark bg-close-gradient">
							<div class="card-body pb-0">
								<div class="h1 fw-bold float-right"></div>
								<h2 id="cases_total" class="mb-2">0</h2>
								<p>Total</p>
								<div class="pull-in sparkline-fix chart-as-background">
									<div></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card card-customer">
							<div class="card-body">
								<div class="row">
									<div class="col-md-3 info-customer">
										<h5 class="sub"><b>Customer name</b></h5>
										<p>{{ customer.customer_name }}</p>
									</div>
									<div class="col-md-3 info-customer">
										<h5 class="sub"><b>Customer Description</b></h5>
										<p>{{ customer.customer_description }}</p>
									</div>
									<div class="col-md-3 info-customer">
										<h5 class="sub  text-bold"><b>Customer SLAs</b></h5>
										<p>{{ customer.customer_sla }}</p>
									</div>
									<div class="col-md-3 info-customer">
										<h5 class="sub  text-bold"><b>Average case duration</b></h5>
										<p><span id="average_case_duration"></span> days</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card card-customer">
							<div class="card-header">
								<div class="row">
									<div class="col-12">
										<div class="row">
											<h3><strong><i class="ml-1 fa-regular fa-address-book mr-1"></i> Contacts</strong></h3>
											<button class="btn btn-light btn-sm ml-auto" onclick="add_new_contact({{ customer.customer_id }});">Add Contact</button>
										</div>
									</div>
								</div>
							</div>
							<div class="card-body">
								<div class="customer-list">
									{% for contact in contacts %}
									<div class="contact-list-item">
										<div class="contact-list-detail">
											<span class="date float-right"><button class="btn btn-light btn-sm" onclick="edit_contact('{{ contact.id }}','{{ customer.customer_id }}');">Edit</button></span>
											<span class="h4">{{ contact.contact_name }}</span>
											<p class="ml-2">
											{% if contact.contact_role %}
												<b>Role: </b>{{ contact.contact_role }}<br/>
											{% endif %}
											{% if contact.contact_email %}
												<b>Email: </b>{{ contact.contact_email }}<br/>
											{% endif %}
											{% if contact.contact_work_phone %}
												<b>Work phone: </b>{{ contact.contact_work_phone }}<br/>
											{% endif %}
											{% if contact.contact_mobile_phone %}
												<b>Mobile phone: </b>{{ contact.contact_mobile_phone }}<br/>
											{% endif %}
											{% if contact.contact_note %}
												<b>Notes: </b>{{ contact.contact_note }}<br/>
											{% endif %}
										</div>
									</div>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<div class="row">
									<div class="col-12">
										<div class="row">
											<div class="col col-heading collapsed" href="#collapse_client_users_view" title="Click to unfold"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapse_client_users_view">
												<span class="accicon float-left mr-3"><i class="fas fa-angle-right rotate-icon"></i></span>
												<div class="card-title">Associated Users</div>
											</div>
											<div class="col">
												<a class="btn btn-light btn-sm float-right" href="/manage/access-control">Manage</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="card-body collapse" id="collapse_client_users_view">
								The users below are associated with this customer and have by default access to the customer's related data, including
								alerts and cases.
								<div class="table-responsive" id="client_users_table_wrapper">
									<div class="selectgroup">
										<span id="table_buttons"></span>
									</div>
									<table class="table display table table-striped table-hover" width="100%"
										   cellspacing="0" id="client_users_table">
										<thead>
										<tr>

											<th>#ID</th>
											<th>Name</th>
											<th>Login Name</th>
											<th>Service Account</th>
										</tr>
										</thead>
										<tfoot>
										<tr>
											<th>#ID</th>
											<th>Name</th>
											<th>Login Name</th>
											<th>Service Account</th>
										</tr>
										</tfoot>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<div class="row">
									<div class="col-12">
										<div class="row">
											<div class="col col-heading collapsed" href="#collapse_client_cases_view" title="Click to unfold"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapse_client_cases_view">
												<span class="accicon float-left mr-3"><i class="fas fa-angle-right rotate-icon"></i></span>
												<div class="card-title">Cases</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="card-body collapse" id="collapse_client_cases_view">
								The cases below have been opened for this customer. Click on a case to view its details.
								<div class="table-responsive" id="client_cases_table_wrapper">
									<table class="table display table table-striped table-hover" width="100%"
										   cellspacing="0" id="client_cases_table">
										<thead>
										<tr>
											<th>Name</th>
											<th>Opening date</th>
											<th>State</th>
											<th>Owner</th>
										</tr>
										</thead>
										<tfoot>
										<tr>
											<th>Name</th>
											<th>Opening date</th>
											<th>State</th>
											<th>Owner</th>
										</tr>
										</tfoot>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			   <div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<div class="row">
									<div class="col-12">
										<div class="row">
											<div class="col col-heading collapsed" href="#collapse_client_assets_view" title="Click to unfold"  data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapse_client_assets_view">
												<span class="accicon float-left mr-3"><i class="fas fa-angle-right rotate-icon"></i></span>
												<div class="card-title">Assets</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="card-body collapse" id="collapse_client_assets_view">
								The assets below have been seen for this customer.
								<div class="table-responsive" id="client_assets_table_wrapper">
									<table class="table display table table-striped table-hover" width="100%"
										   cellspacing="0" id="client_assets_table">
										<thead>
										<tr>
											<th>Name</th>
											<th>Description</th>
											<th>Type</th>
											<th>IP</th>
											<th>Seen in case</th>
										</tr>
										</thead>
										<tfoot>
										<tr>
											<th>Asset name</th>
											<th>Description</th>
											<th>Type</th>
											<th>IP</th>
											<th>Seen in case</th>
										</tr>
										</tfoot>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

		</div>
    {% endif %}
<div class="modal" tabindex="-1" role="dialog" id="modal_add_customer" data-backdrop="true">
	<div class="modal-xl modal-dialog" role="document">
		<div class="modal-content" id="modal_add_customer_content">

		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>
<div class="modal" tabindex="-1" role="dialog" id="modal_add_contact" data-backdrop="true">
	<div class="modal-lg modal-dialog" role="document">
		<div class="modal-content" id="modal_add_contact_content">

		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>
{% endblock content %}

{% block javascripts %}

    <script src="/static/assets/js/iris/manage.customers.js"></script>
    <script src="/static/assets/js/iris/view.customers.js"></script>

{% endblock javascripts %}