
<?php echo view('admin/includes/head');?>

<body>
	<div id="global-loader">
		<div class="whirly-loader"> </div>
	</div>
	<!-- Main Wrapper -->
	<div class="main-wrapper">

		<!-- Header -->
<?php echo view('admin/includes/header');?>
		<!-- /Header -->

		<!-- Sidebar -->
<?php echo view('admin/includes/sidebarmenulogo');?>
		<!-- /Sidebar -->



		<div class="page-wrapper">
			<div class="content">

		<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4 class="fw-bold">Edit Product</h4>
							<h6>Edit product</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Refresh"><i class="ti ti-refresh"></i></a>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i class="ti ti-chevron-up"></i></a>
						</li>
					</ul>
					<div class="page-btn mt-0">
						<a href="<?= base_url('productlist')?>" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Product</a>
					</div>
				</div>
						<?php 
					if(session()->getFlashdata('success')): ?>
				   <div class="alert alert-success d-flex align-items-center" role="alert">
                                        <i class="feather-check-circle flex-shrink-0 me-2"></i>
                                        <div>
	<?= session()->getFlashdata('success') ?>
					
					
				 </div>
                                    </div>
<?php endif; ?>
			
				    <form action="<?= base_url('updateproduct')?>" method="POST" enctype="multipart/form-data" class="add-product-form" id="prodForm">
				    <div class="add-product">
						<div class="accordions-items-seperate" id="accordionSpacingExample">
							<div class="accordion-item border mb-4">
							   	<h2 class="accordion-header" id="headingSpacingOne">
									<div class="accordion-button collapsed bg-white" data-bs-toggle="collapse" data-bs-target="#SpacingOne" aria-expanded="true" aria-controls="SpacingOne">
										<div class="d-flex align-items-center justify-content-between flex-fill">
										<h5 class="d-flex align-items-center"><i data-feather="info" class="text-primary me-2"></i><span>Product Information</span></h5>
										</div>
									</div>
									
								</h2> 
									<div id="SpacingOne" class="accordion-collapse collapse show" aria-labelledby="headingSpacingOne">
									<div class="accordion-body border-top">
										<div class="row">
										<div class="col-sm-6 col-12">
												<div class="mb-3">
													<label class="form-label">Product Name<span class="text-danger ms-1">*</span></label>
													<input type="text" name="product_name" required autocomplete="off" class="form-control" value="<?= esc($product['product_name']) ?>">
													<input type="hidden" name="product_id" required autocomplete="off" class="form-control" value="<?= $product['product_id'] ?>">
												</div>
											</div>
											<div class="col-sm-6 col-12">
												<div class="mb-3">
													<label class="form-label">Product Code<span class="text-danger ms-1">*</span></label>
													<input type="text"name="product_code" required autocomplete="off"  class="form-control"  value="<?= esc($product['product_code']) ?>">
												</div>
											</div>
										</div>
									
										<div class="row">
											<div class="col-sm-4 col-12">
												<div class="mb-3">
													<label class="form-label">Category<span class="text-danger ms-1">*</span></label>
													<select class="select" name="product_category" required>
														<option value="<?= $product['product_category'] ?>" selected>- - <?= esc($product['category_name']) ?> - -</option>
														<?php foreach ($categories as $row): ?>
                                              <option value="<?= $row['category_id']?>"><?= $row['category_name'] ?></option>
                                              <?php endforeach; ?>
														
													</select>
												</div>
											</div>
										<div class="col-sm-4 col-12">
													<div class="mb-3">
														<div class="add-newplus">
															<label class="form-label">Unit<span class="text-danger ms-1">*</span></label>
														</div>
														<select class="select" name="product_unit" required>
															<option value="<?= $product['product_unit'] ?>" selected>- - <?= esc($product['unit_name']) ?> - -</option>
														<?php foreach ($units as $row): ?>
                                              <option value="<?= $row['unit_id']?>"><?= $row['unit_name'] ?></option>
                                            <?php endforeach; ?>
														</select>
													</div>
												</div>
													<div class="col-sm-4 col-12">
													<div class="mb-3">
														<div class="add-newplus">
															<label class="form-label">Size<span class="text-danger ms-1">*</span></label>
														</div>
														<select class="select" name="product_size" required>
														<option value="<?= $product['product_size'] ?>" selected>- - <?= esc($product['product_size']) ?> - -</option>
															<option value="Small(S)">Small(S)</option>
															<option value="Medium(M)">Medium(M)</option>
															<option value="Large(L)">Large(L)</option>
															<option value="Xtra Large(XL)">Xtra Large(XL)</option>
															<option value="Double Extra Large(XXL)">Double Extra Large(XXL)</option>
														</select>
													</div>
												</div>
										</div>
								
										<div class="row">
											<div class="col-sm-12 col-12">
												<div class="mb-3">
													<label class="form-label">Description<span class="text-danger ms-1">*</span></label>
												<textarea name="product_description" class="form-control"><?= esc($product['product_description']) ?></textarea>
												</div>
													<p class="fs-14 mt-1">Maximum 60 Words</p>
											</div>
										</div>	
								
									</div>
								</div>
								
							    </div>
							    
							    
							    	<div class="accordion-item border mb-4">
							   	<h2 class="accordion-header" id="headingSpacingOne">
									<div class="accordion-button collapsed bg-white" data-bs-target="#SpacingOne" aria-expanded="true" aria-controls="SpacingOne">
										<div class="d-flex align-items-center justify-content-between flex-fill">
										<h5 class="d-flex align-items-center"><i data-feather="dollar-sign" class="text-primary me-2"></i><span>Pricing</span></h5>
										</div>
									</div>
									
								</h2> 
									<div id="SpacingOne" class="accordion-collapse collapse show" aria-labelledby="headingSpacingOne">
									<div class="accordion-body border-top">
								
										<div class="row">
												
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3">
															<label class="form-label">Price<span class="text-danger ms-1">*</span></label>
															<input type="text"  name="product_price" required  class="form-control"  value="<?= esc($product['product_price']) ?>">
														</div>
													</div>
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3">
															<label class="form-label">Tax Type<span class="text-danger ms-1">*</span></label>
															<select class="select"  name="product_tax_type" required >
																<option value="<?= $product['product_tax_type'] ?>" selected>- - <?= esc($product['product_tax_type']) ?> - -</option>
																<option value="Exclusive">Exclusive</option>
																	<option value="Inclusive">Inclusive</option>
																</select>
															</div>
														</div>
														<div class="col-lg-4 col-sm-6 col-12">
															<div class="mb-3">
																<label class="form-label">Tax<span class="text-danger ms-1">*</span></label>
																<select class="select"  name="product_tax_percent" required >
																	<option value="<?= $product['product_tax_percent'] ?>" selected>- - <?= esc($product['product_tax_percent']) ?>% - -</option>
																	<option value="18">18%</option>
																	<option value="0">0</option>
															</select>
														</div>
													</div>
									
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3">
															<label class="form-label">Discount Type<span class="text-danger ms-1">*</span></label>
															<select class="select"   name="product_discount_type" required>
																<option value="<?= $product['product_discount_type'] ?>" selected>- - <?= esc($product['product_discount_type']) ?> - -</option>
																<option  value="Percentage">Percentage</option>
																	<option value="Fixed">Fixed</option>
															</select>
														</div>
													</div>
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3">
															<label class="form-label">Discount Value in %<span class="text-danger ms-1">*</span></label>
															<input class="form-control"  name="product_discount_value_percentage" required type="text"  value="<?= esc($product['product_discount_value_percentage']) ?>">
														</div>
													</div>
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3">
															<label class="form-label">Quantity Alert (Stolck Level)<span class="text-danger ms-1">*</span></label>
															<input type="text" class="form-control" name="product_quantity_alert_level" required  value="<?= esc($product['product_quantity_alert_level']) ?>">
														</div>
													</div>
												</div>	
								
									</div>
								</div>
								
							    </div>
							<!--    		<div class="accordion-item border mb-4">-->
							<!--	<h2 class="accordion-header" id="headingSpacingThree">-->
							<!--		<div class="accordion-button collapsed bg-white" data-bs-toggle="collapse" data-bs-target="#SpacingThree" aria-expanded="true" aria-controls="SpacingThree">-->
							<!--			<div class="d-flex align-items-center justify-content-between flex-fill">-->
							<!--			<h5 class="d-flex align-items-center"><i data-feather="image" class="text-primary me-2"></i><span>Product Images</span></h5>-->
							<!--			</div>-->
							<!--		</div>-->
							<!--	</h2>-->
							<!--	<div id="SpacingThree" class="accordion-collapse collapse show" aria-labelledby="headingSpacingThree">-->
							<!--		<div class="accordion-body border-top">-->
							<!--			<div class="text-editor add-list add">-->
							<!--				<div class="col-lg-12">-->
							<!--					<div class="add-choosen" style=" width: 100%;">-->
							<!--						<div class="mb-3">-->
							<!--						<div class="image-upload image-upload-two">-->
							<!--								<input type="file"id="imageInput"accept="image/*"multiple>-->
							<!--								<div class="image-uploads">-->
							<!--									<i data-feather="plus-circle" class="plus-down-add me-0"></i>-->
							<!--									<h4>Add Images</h4>-->
							<!--								</div>-->
							<!--							</div>-->
							<!--						</div>-->
							<!--						<input type="file" id="finalImages" name="images[]" multiple   hidden>-->
							<!--						<div class="phone-img" id="imagePreview"></div>-->

		
							<!--					</div>-->
							<!--				</div>-->
							<!--			</div>-->
							<!--		</div>-->
							<!--	</div>-->
							<!--</div>-->
							    </div>
							    </div>
							    	<div class="col-lg-12">
						<div class="d-flex align-items-center justify-content-end mb-4">
							<!--<button type="button" class="btn btn-secondary me-2">Cancel</button>-->
							<button type="submit" class="btn btn-primary" id="submitBtn">Edit Product</button>
						</div>
					</div>
		        </form>
              <script>
    const form = document.getElementById('prodForm');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function() {
        // Disable the button
        submitBtn.disabled = true;

        // Add spinner to the button
        submitBtn.innerHTML = `
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            Editing...
        `;
    });
</script>

				
			</div>
		
			<?php echo view('admin/includes/coppy');?>
		</div>

	</div>
	<!-- /Main Wrapper -->



	<!-- jQuery -->
	<?php echo view('admin/includes/bottomscript');?>
	<script>
const imageInput = document.getElementById('imageInput');
const finalInput = document.getElementById('finalImages');
const preview = document.getElementById('imagePreview');

let dataTransfer = new DataTransfer();

imageInput.addEventListener('change', function () {

    Array.from(this.files).forEach(file => {
        if (!file.type.startsWith('image/')) return;

        dataTransfer.items.add(file);
        finalInput.files = dataTransfer.files;

        const reader = new FileReader();
        reader.onload = function (e) {

            const box = document.createElement('div');
            box.className = 'image-box';

            const img = document.createElement('img');
            img.src = e.target.result;

            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-img';
            removeBtn.innerHTML = '×';
            removeBtn.onclick = () => {
                const index = Array.from(preview.children).indexOf(box);
                dataTransfer.items.remove(index);
                finalInput.files = dataTransfer.files;
                box.remove();
            };

            box.appendChild(img);
            box.appendChild(removeBtn);
            preview.appendChild(box);
        };

        reader.readAsDataURL(file);
    });

    this.value = '';
});

</script>

	</body>


</html>