{% 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="h3 d-inline align-middle">{{product.name|upper}} ({{product.code|upper}})</h1>
					</div>

					<div class="col-md-6 mb-3 d-flex justify-content-end gap-2">
						<a href="{% url 'product-list' %}" class="btn btn-dark">
							<i class="align-middle" data-feather="list"></i> Product List
						</a>
						<a href="{% url 'add-product' %}" class="btn btn-secondary">
							Add Product
						</a>
					</div>					
					
				</div>
			</div>
		</div>


		<div class="row">

			

				<div class="col-12 col-xl-6">

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

					<div class="card">
						<div class="card-header d-flex justify-content-between align-items-center">
							<h5 class="card-title mb-0">Product Details</h5>
							
						</div>
						<div class="card-body">


							<div class="row">

								<div class="col-md-4">
									<div class="text-center">
										{% if product.image %}
											<img src="{{ product.image.url }}" alt="{{ product.name }}" style="max-width:150px; height:auto;">
										{% else %}
											<span>No image</span>
										{% endif %}
									</div>
								</div>

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

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

											<tr>
												<th>Product Type</th>
												<td>{{product.type}}</td>
											</tr>
											
											<tr>
												<th>Model Name ID</th>
												<td>{{product.code}}</td>
											</tr>
											<tr>
												<th>Device Model</th>
												<td>{{product.model_id}}</td>
											</tr>
											<tr>
												<th>Product Name</th>
												<td>{{product.name}}</td>
											</tr>
												
											<tr>
												<th>Description</th>
												<td>{{product.description}}</td>
											</tr>
											<tr>
												<th>Temperature Unit</th>
												<td>{{product.default_temperature}}</td>
											</tr>
											<tr>
												<th>Density Unit</th>
												<td>{{product.default_density}}</td>
											</tr>
											<tr>
												<th>Catalog</th>
												<td>
												  {% if product.catelog_link %}
													<a href="{{ product.catelog_link }}" target="_blank">View Catalog (PDF)</a>
												  {% else %}
													No catalog available
												  {% endif %}
												</td>
											 </tr>				  
											  
											
											<tr>
												<th>Is_manual_integration</th>
												<td class="text-sm-end">
												  {% if product.is_manual_integration %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Is_QR_integration</th>
												<td class="text-sm-end">
												  {% if product.is_QR_integration %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Is_bluetooth_integration</th>
												<td class="text-sm-end">
												  {% if product.is_bluetooth_integration %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Is_manual_result_reading</th>
												<td class="text-sm-end">
												  {% if product.is_manual_result_reading %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Is_qr_result_reading</th>
												<td class="text-sm-end">
												  {% if product.is_qr_result_reading %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Is_bluetooth_result_reading</th>
												<td class="text-sm-end">
												  {% if product.is_bluetooth_result_reading %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											<tr>
												<th>Available for Device Pairing</th>
												<td class="text-sm-end">
												  {% if product.available_for_device_pairing %}YES{% else %}NO{% endif %}
												</td>
											</tr>
											  
											<tr>
												<th>Status</th>
												<td class="text-sm-end">{{product.status}}</td>
											</tr>

											<tr>
												<th>Created At</th>
												<td class="text-sm-end">{{product.created_At}}</td>
											</tr>
											<tr>
												<th>Updated At</th>
												<td class="text-sm-end">{{product.updated_At}}</td>
											</tr>
											<tr>
												<th>Created User</th>
												<td class="text-sm-end">{{product.created_user}}</td>
											</tr>
											<tr>
												<th>Updated User</th>
												<td class="text-sm-end">{{product.updated_user}}</td>
											</tr>											
										</tbody>
									</table>

								</div>

							</div>

							<div class="col-12 text-sm-end">
															
								<div class="btn-group mr-5" role="group" aria-label="Second group">
	
									<a href="{% url 'update-product' product.id %}"
										class="btn btn-primary mb-3 mt-3">Update Product</a>
								</div>

								<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#centeredModalDanger">
									Delete Product
								</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 Product ({{product.name}} - {{product.code}})</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 product 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-product' %}"
													method="post">
													{% csrf_token %}
													<input type="hidden" id="customItemCode" name="custom_product_code" value="{{product.code}}">
													<button type="submit" class="btn btn-danger mb-3 mt-3">Delete Product</button>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>

				</div>

			
		</div>

	</div>
</main>

{% endblock %}