{% extends 'base.html' %}

{% load static %}
{% load humanize %}



{% block content %}

<main class="content">
	<div class="container-fluid p-0">

		
		<div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-6 mb-3">
						<h1 class="h4 d-inline align-middle">Customer - ({{customer.first_name}}  {{customer.last_name}})</h1>
					</div>

					<div class="col-md-6 mb-3 text-sm-end">
						<span><a href="{% url 'customer-details' %}" class="btn btn-dark"><i class="align-middle" data-feather="list"></i> Customer Details</a></span>
					</div>
				</div>

			</div>
		</div>


		<div class="row">


			{% include 'partials/_messages.html' %}

			<div class="col-6 mb-4">

				<div class="card h-100">
					<div class="card-header">
						<h5 class="card-title mb-0">Customer Details</h5>
					</div>
					<div class="card-body">

						<div class="row">


							<div class="col-md-12">

								<table class="table table-sm mt-2 mb-4">
									<tbody>

										<tr>
											<th>First Name</th>
											<td>{{customer.first_name}}</td>
										</tr>
										<tr>
											<th>Last Name</th>
											<td>{{customer.last_name}}</td>
										</tr>
										
										<tr>
											<th>Email Address</th>
											<td>{{customer.email}}</td>
										</tr>
										<tr>
											<th>Language</th>
											<td>{{customer.language}}</td>
										</tr>
										
										<tr>
											<th>Mobile</th>
											<td>{{customer.mobile}}</td>
										</tr>
										<tr>
											<th>Registration Status</th>
											<td>
											  {% if customer.registration_status == "PENDING" %}
												<span class="badge bg-warning text-dark">PENDING</span>
											  {% elif customer.registration_status == "APPROVED" %}
												<span class="badge bg-success">APPROVED</span>
											  {% elif customer.registration_status == "REJECTED" %}
												<span class="badge bg-danger">REJECTED</span>
											  {% else %}
												<span class="badge bg-secondary">{{ customer.registration_status }}</span>
											  {% endif %}
											</td>
										  </tr>
										  
										<tr>
											<th>Customer Status</th>
											<td>
												{% if customer.customer_status == "ACTIVE" %}
												  <span class="badge bg-success">ACTIVE</span>
												{% elif customer.customer_status == "INACTIVE" %}
												  <span class="badge bg-danger">INACTIVE</span>
												{% else %}
												  <span class="badge bg-secondary">{{ customer.customer_status }}</span>
												{% endif %}
											</td>
										</tr>
										<tr>
											<th>Lock Status</th>
											<td>
												{% if customer.is_locked %}
													<span class="badge bg-danger">LOCKED</span>
												{% else %}
													<span class="badge bg-success">ACTIVE</span>
												{% endif %}
											</td>
										</tr>
										<tr>
											<th>Created At</th>
											<td>{{customer.created_At}}</td>
										</tr>
										<tr>
											<th>Updated At</th>
											<td>{{customer.updated_At}}</td>
									</tbody>
								</table>

							</div>

						</div>

					</div>
				</div>

			</div>
		</div>
		<div class="row">
			<div class="col-md-6">

				<div class="card">
					<div class="card-body">
						<div class="row">

						<div class="col-md-12 text-sm-end">

							{% if customer.is_locked %}
								<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#unlockCustomerModal">
									Unlock Customer
								</button>
							{% else %}
								<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#lockCustomerModal">
									Lock Customer
								</button>
							{% endif %}
							<div class="modal fade" id="lockCustomerModal" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">Lock Customer ({{customer.first_name}})</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
										</div>
										<div class="modal-body m-3">
											<p class="mb-0">
												Locking this customer will prevent login and activities.
											</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
											<form method="post" action="{% url 'toggle-customer-lock' customer.id %}">
												{% csrf_token %}
												<button type="submit" class="btn btn-warning">Lock Customer</button>
											</form>
										</div>
									</div>
								</div>
							</div>
							<div class="modal fade" id="unlockCustomerModal" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">Unlock Customer ({{customer.first_name}})</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
										</div>
										<div class="modal-body m-3">
											<p class="mb-0">
												Unlocking this customer will allow login and activities.
											</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
							
											<form method="post" action="{% url 'toggle-customer-lock' customer.id %}">
												{% csrf_token %}
												<button type="submit" class="btn btn-success">Unlock Customer</button>
											</form>
										</div>
									</div>
								</div>
							</div>

							{% if super_admin or sub_feature_matrix.update_customer %}
							
							<div class="btn-group mr-5" role="group" aria-label="Second group">

								<a href="{% url 'update-customer' customer.id %}"
									class="btn btn-primary mb-3 mt-3">Update Customer</a>
							</div>
							<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#centeredModalDanger">
								Delete Customer
							</button>
							<div class="modal fade" id="centeredModalDanger" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">Delete Customer ({{customer.first_name}})</h5>
											<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
										</div>
										<div class="modal-body m-3">
											<p class="mb-0">Deleting this Customer may cause loss of data</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>

											<form class="form-inline" action="{% url 'delete-customer' %}"
												method="post">
												{% csrf_token %}
												<input type="hidden" id="txt-doctor-id" name="customer_id" value="{{customer.id}}">
												<button type="submit" class="btn btn-danger mb-3 mt-3">Delete Customer</button>
											</form>
										</div>
									</div>
								</div>
							</div>

							{% endif %}


						</div>

					</div>

					</div>
				</div>
			</div>
		</div>

	</div>
</main>

{% endblock %}