{% 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">Add New Product</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 'add-product' %}" method="post" id="form-add-product" 	enctype="multipart/form-data">

				{% csrf_token %}

				<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">
										{% if product.image %}
											<div class="mb-2">
												<img src="{{ product.image.url }}" alt="{{ product.name }}" style="max-height:100px;">
												<p class="text-muted">Current Image</p>
											</div>
										{% endif %}
								
										<input type="file"
											class="form-control"
											name="image"
											id="txt-image"
											accept=".png,image/png">
								
										<!-- Preview new upload -->
										<div class="mt-2">
											<img id="preview-image" src="" alt="Preview" style="max-height:100px; display:none;">
										</div>
								
										<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 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 %}
											{% 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-unique-product-name" placeholder="Product Name" value="{{old_input_field_values.product_name}}">
									</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-brand">
											{% for product_brand in brand_list %}
												{% 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 %}
											{% 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" value="{{old_input_field_values.model_id}}">
									</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="Custom Product Code"
										 value="{{old_input_field_values.custom_product_code}}">
									</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="Descriptions" value="{{old_input_field_values.description}}">
									</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-brand">
											{% for default_temperature in default_temperature_list %}
												{% 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 %}
											{% 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-brand">
											{% for default_density in default_density_list %}
												{% 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 %}
											{% 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)"
											value="{{ old_input_field_values.catelog_link }}"
										>
									</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" id="sel-manual-integration">
											<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>
										</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" id="sel-qr-integration">
											<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>
										</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" id="sel-bluetooth-integration">
											<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>
										</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" id="sel-manual-result">
											<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>
										</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" id="sel-qr-result">
											<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>
										</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" id="sel-bluetooth-result">
											<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>
										</select>
									</div>
								</div>
						
							</div>
						</div>					

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

						<div class="card">
							<div class="card-header">
								<h5 class="card-title">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.available_for_device_pairing == "True" %}
											checked
										{% 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">
								<a href="{% url 'add-product' %}" class="btn btn-secondary mb-3 mt-3">Clear</a>
								<button type="submit" class="btn btn-primary mb-3 mt-3" id="btn-add-item">
								  Add
								</button>
								
							</div>

						</div>
					</div>

				</div>

		</form>

	</div>
</main>
<script>
	document.getElementById("txt-image").addEventListener("change", function(event) {
		const file = event.target.files[0];
		if (file) {
			// Optional: file size check (512 KB = 524288 bytes)
			if (file.size > 524288) {
				alert("File size exceeds 512 KB limit.");
				event.target.value = ""; // clear the file input
				return;
			}
	
			const reader = new FileReader();
			reader.onload = function(e) {
				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/add-item2.js' %}"></script>


{% endblock %}