{% extends 'base.html' %}

{% load static %}




{% block content %}

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

		<div class="mb-3">
			<h1 class="h3 d-inline align-middle">Update Product - {{product.code}} - {{product.name|upper}} </h1>
			<br><i>All fields marked with an asterisk (<span style="color:red;">*</span>) are required</i>

			{% include 'partials/_messages.html' %}
			
		</div>
		

			<form class="row" action="{% url 'update-product' product.id %}" method="post" enctype="multipart/form-data">


				{% csrf_token %}

				<input type="hidden" id="txt-original-custom-item-code" name="original_custom_product_code" value="{{product.code}}">


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

					
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h5 class="card-title">Product Details</h5>
							</div>
							<div class="card-body">
								<div class="mb-3 row form-group">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Product Image</label>
									<div class="col-sm-8">
										<div class="mb-2">
											{% if product.image %}
												<img id="current-image" src="{{ product.image.url }}" alt="{{ product.name }}" style="max-height:100px;">
												<p class="text-muted" id="current-label">Current Image</p>
											{% endif %}
											<!-- This will hold new preview -->
											<img id="preview-image" src="" alt="Preview" style="max-height:100px; display:none;">
										</div>
								
										<input type="file"
											class="form-control"
											name="image"
											id="txt-image"
											accept=".png,image/png">
								
										<small class="text-muted">
											Upload PNG, max 512 KB. Leave empty to keep current image.
										</small>
									</div>
								</div>
								

								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Product Type</label>
									<div class="col-sm-8">
										<select class="form-select" name="product_type" id="sel-product-type">
											{% for product_type in product_type_list %}

												{% if old_input_field_values %}
													{% if product_type|lower == old_input_field_values.product_type|lower %}
													<option name="product_type" value="{{product_type}}" selected>
														{{product_type|upper}}</option>
													{% else %}
													<option name="product_type" value="{{product_type}}">
														{{product_type|upper}}</option>
													{% endif %}

												{% else %}
													{% if product_type == product.type %}
													<option name="product_type" value="{{product_type}}" selected>
														{{product_type|upper}}</option>
													{% else %}
													<option name="product_type" value="{{product_type}}">
														{{product_type|upper}}</option>
													{% endif %}
												{% endif %}
												
											{% endfor %}
										</select>
									</div>
								</div>

								
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Product Name</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="product_name" id = "txt-product-name" placeholder="Product Name" 
										{% if old_input_field_values %} value="{{old_input_field_values.product_name}}" {% else %} value="{{product.name}}" {% endif %}>
									</div>
								</div>

								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Product Brand</label>
									<div class="col-sm-8">
										<select class="form-select" name="product_brand" id="sel-product-type">
											{% for product_brand in brand_list %}

												{% if old_input_field_values %}
													{% if product_brand|lower == old_input_field_values.product_brand|lower %}
													<option name="product_brand" value="{{product_brand}}" selected>
														{{product_brand|upper}}</option>
													{% else %}
													<option name="product_brand" value="{{product_brand}}">
														{{product_brand|upper}}</option>
													{% endif %}

												{% else %}
													{% if product_brand == product.brand %}
													<option name="product_brand" value="{{product_brand}}" selected>
														{{product_brand|upper}}</option>
													{% else %}
													<option name="product_brand" value="{{product_brand}}">
														{{product_brand|upper}}</option>
													{% endif %}
												{% endif %}
												
											{% endfor %}
										</select>
									</div>
								</div>


								
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Device Model</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="model_id" id = "txt-description" placeholder="Device Model" 
										{% if old_input_field_values %} value="{{old_input_field_values.model_id}}" {% else %} value="{{product.model_id}}" {% endif %} >
									</div>
								</div>
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Model Name ID</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="custom_product_code" id = "txt-custom-product-code" placeholder="Model Name ID" 
										{% if old_input_field_values %} value="{{old_input_field_values.custom_product_code}}" {% else %} value="{{product.code}}" {% endif %} >
									</div>
								</div>

								
													

								<div class="mb-3 row form-group">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Description</label>
									<div class="col-sm-8">
										<input type="text" class="form-control" name="description" id = "txt-description" placeholder="Description" 
										{% if old_input_field_values %} value="{{old_input_field_values.description}}" {% else %} value="{{product.description}}" {% endif %} >
									</div>
								</div>
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Temperature Unit</label>
									<div class="col-sm-8">
										<select class="form-select" name="default_temperature" id="sel-product-type">
											{% for default_temperature in default_temperature_list %}

												{% if old_input_field_values %}
													{% if default_temperature|lower == old_input_field_values.default_temperature|lower %}
													<option name="default_temperature" value="{{default_temperature}}" selected>
														{{default_temperature|upper}}</option>
													{% else %}
													<option name="default_temperature" value="{{default_temperature}}">
														{{default_temperature|upper}}</option>
													{% endif %}

												{% else %}
													{% if default_temperature == product.default_temperature %}
													<option name="default_temperature" value="{{default_temperature}}" selected>
														{{default_temperature|upper}}</option>
													{% else %}
													<option name="default_temperature" value="{{default_temperature}}">
														{{default_temperature|upper}}</option>
													{% endif %}
												{% endif %}
												
											{% endfor %}
										</select>
									</div>
								</div>
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Density Unit</label>
									<div class="col-sm-8">
										<select class="form-select" name="default_density" id="sel-product-type">
											{% for default_density in default_density_list %}

												{% if old_input_field_values %}
													{% if default_density|lower == old_input_field_values.default_density|lower %}
													<option name="default_density" value="{{default_density}}" selected>
														{{default_density|upper}}</option>
													{% else %}
													<option name="default_density" value="{{default_density}}">
														{{default_density|upper}}</option>
													{% endif %}

												{% else %}
													{% if default_density == product.default_density %}
													<option name="default_density" value="{{default_density}}" selected>
														{{default_density|upper}}</option>
													{% else %}
													<option name="default_density" value="{{default_density}}">
														{{default_density|upper}}</option>
													{% endif %}
												{% endif %}
												
											{% endfor %}
										</select>
									</div>
								</div>
								<div class="mb-3 row form-group required">
									<label class="col-form-label control-label col-sm-4 text-sm-end">Status</label>
									<div class="col-sm-8">
										<select class="form-select" name="status" id="sel-product-type">
											{% for status in status_list %}

												{% if old_input_field_values %}
													{% if status|lower == old_input_field_values.status|lower %}
													<option name="status" value="{{status}}" selected>
														{{status|upper}}</option>
													{% else %}
													<option name="status" value="{{status}}">
														{{status|upper}}</option>
													{% endif %}

												{% else %}
													{% if status == product.status %}
													<option name="status" value="{{status}}" selected>
														{{status|upper}}</option>
													{% else %}
													<option name="status" value="{{status}}">
														{{status|upper}}</option>
													{% endif %}
												{% endif %}
												
											{% endfor %}
										</select>
									</div>
								</div>
								
							</div>
						</div>
					</div>
					<div class ="col-12">
						<div class="card">
							
							<div class="card-body">
								<div class="mb-3 row form-group">
									<label class="col-form-label control-label col-sm-4 text-sm-end">
										Catalog Link
									</label>
									<div class="col-sm-8">
										<input 
											type="url"
											class="form-control"
											name="catelog_link"
											id="txt-catelog_link"
											placeholder="Enter PDF link (e.g., https://example.com/file.pdf)"
											{% if old_input_field_values %}
											value="{{ old_input_field_values.catelog_link }}" 
											{% else %}
											value="{{product.catelog_link}}" {% endif %} 
										>
									</div>
								</div>
								
							</div>
						</div>
					</div>

				</div>
				
				<div class="col-6">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h5 class="card-title">Product Integration Type</h5>
							</div>
							<div class="card-body">
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">Manual Integration</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_manual_integration">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_manual_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_manual_integration %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_manual_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_manual_integration %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>						
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">QR Integration</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_QR_integration">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_QR_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_QR_integration %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_QR_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_QR_integration %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>						
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">Bluetooth Integration</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_bluetooth_integration">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_bluetooth_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_bluetooth_integration %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_bluetooth_integration %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_bluetooth_integration %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>						
							</div>
						</div>
					</div>
					<div class="col-12 ">
						<div class="card">
							<div class="card-header">
								<h5 class="card-title">Product Result Type</h5>
							</div>
							<div class="card-body">
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">Manual Result Reading</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_manual_result_reading">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_manual_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_manual_result_reading %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_manual_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_manual_result_reading %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>
							
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">QR Result Reading</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_qr_result_reading">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_qr_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_qr_result_reading %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_qr_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_qr_result_reading %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>
							
								<div class="mb-3 row">
									<label class="col-form-label col-sm-4 text-sm-end">Bluetooth Result Reading</label>
									<div class="col-sm-8">
										<select class="form-select" name="is_bluetooth_result_reading">
											{% if old_input_field_values %}
											<option value="True"  {% if old_input_field_values.is_bluetooth_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not old_input_field_values.is_bluetooth_result_reading %}selected{% endif %}>No</option>
											{% else %}
											<option value="True"  {% if product.is_bluetooth_result_reading %}selected{% endif %}>Yes</option>
											<option value="False" {% if not product.is_bluetooth_result_reading %}selected{% endif %}>No</option>
											{% endif %}
										</select>
									</div>
								</div>
							
							</div>
							
						</div>
					</div>
					<div class="col-12 ">
						
						<div class="card">
							<div class="card-header">
								<h5 class="card-title mb-0">Device Pairing Details</h5>
							</div>
						
							<div class="card-body">
								<input type="hidden" name="available_for_device_pairing" value="False">
						
								<div class="form-check">
									<input
										class="form-check-input"
										type="checkbox"
										name="available_for_device_pairing"
										id="chk-device-pairing"
										value="True"
										{% if old_input_field_values %}
											{% if old_input_field_values.available_for_device_pairing == "True" %}
												checked
											{% endif %}
										{% else %}
											{% if product.available_for_device_pairing %}
												checked
											{% endif %}
										{% endif %}
									>
									<label class="form-check-label" for="chk-device-pairing">
										Available for Device Pairing
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="col-12 text-sm-end">
								<button type="submit" class="btn btn-primary mb-3 mt-3" id="btn-update-item">Save Changes</button>
								<span><a href="{% url 'update-product' product.id %}" class="btn btn-secondary mb-3 mt-3">Clear</a></span>
							</div>
						</div>
					</div>

				</div>

			</form>
		

	</div>
</main>
<script>
	document.getElementById("txt-image").addEventListener("change", function(event) {
		const file = event.target.files[0];
		if (file) {
			// Check size (512 KB)
			if (file.size > 524288) {
				alert("File size exceeds 512 KB limit.");
				event.target.value = "";
				return;
			}
	
			const reader = new FileReader();
			reader.onload = function(e) {
				// Hide current image & label if present
				const currentImage = document.getElementById("current-image");
				const currentLabel = document.getElementById("current-label");
				if (currentImage) currentImage.style.display = "none";
				if (currentLabel) currentLabel.style.display = "none";
	
				// Show new preview
				const preview = document.getElementById("preview-image");
				preview.src = e.target.result;
				preview.style.display = "block";
			};
			reader.readAsDataURL(file);
		}
	});
</script>
	


<script src="{% static 'js/number-separator.js' %}"></script>
<script src="{% static 'js/itemregistry/update-item.js' %}"></script>
{% endblock %}