@include('layouts.header')
<style>
	.select2-selection__choice{
		background:blueviolet !important;
	}
	.select2-container--default .select2-selection--single {
		
		border: 1px solid #e9edf6 !important;
		height:40px !important; 
	   
	}
	..select2-container--default .select2-selection--multiple{
		border: 1px solid #e9edf6 !important;


	}
	.select2-container .select2-selection--single .select2-selection__arrow {
		height: 100% !important;
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 20px !important; 
		background-color: transparent !important;
		border-left: 1px solid #aaa !important; 
	}
	
	.select2-container .select2-selection__arrow b {
	  
		border-width: 5px 5px 0 5px !important; 
		border-style: solid !important;
		display: inline-block !important;
		margin-top: 5px !important;
		vertical-align: middle !important;
	}
	
	.select2-container--default .select2-selection--single .select2-selection__arrow 
	{
		display: none !important;
	}
	.select2-selection__clear{
		display: none !important;
		/* color:#aaa; */
	}
	
	</style>

		<!-- /Header -->
		@include('layouts.sidebar')

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>Edit Product</h4>
						
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('product_list')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Product</a>
							</div>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>
					
				</div>
				<!-- /add -->
				@if(session()->has('success'))
                    <div class="alert alert-success">
                        {{ session()->get('success') }}
                    </div>
					@endif
					@if(session()->has('error'))
					<div class="alert alert-danger">
						{{ session()->get('error') }}
					</div>
				    @endif
				<form action="{{ route('update_product')}}" method="post" enctype="multipart/form-data">
					@csrf
					<input type="hidden" name="id" value="{{ $product->id}}">
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"  aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Product Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										<div class="row">
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label>Product Code</label>
													<input type="text" name="product_code" readonly id="product_code" class="form-control list" value="{{ $product->product_code}}">
													
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Buyer Company</label>
													<select class="form-control" name="company_id" id="company_id">
														<option value="">Select</option>
														@foreach($company as $row)
														<option value="{{ $row->id}}" {{ $product->company_id == $row->id ? 'selected' : '' }}>{{ $row->company_name}}</option>
														@endforeach 
													
													</select>
												</div>
											</div>
											
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Suppliers</label>
																										<select class="select" name="supplier_id[]" multiple required>
														<option value="" disabled>Select</option>
														@foreach($suppliers as $row)
															<option value="{{ $row->id }}"
																@if(is_array($newarray) && in_array($row->id, $newarray))
																	selected
																@endif>
																{{ $row->supplier_name }}
															</option>
														@endforeach
													</select>
												</div>
											</div>
											
										</div>

										<div class="row">
											
											<div class="addservice-info">
												<div class="row">
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3 add-product">
															<div class="add-newplus">
																<label class="form-label">Category</label>
																<!--<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-units-category"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add
																		New</span></a>-->
															</div>
															<select class="form-control" name="category" id="category">
																<option value="">Select</option>
																@foreach($category as $row)
																<option value="{{ $row->id}}" {{ $product->category_id == $row->id ? 'selected' : '' }}>{{ $row->category_name}}</option>
																@endforeach
															</select>
														</div>
													</div>
													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3 add-product">
															<label class="form-label">Sub Category</label>
															<select class="form-control" name="subcategory" id="subcategory" required>
																<option value="">Select</option>
																@foreach($subcategory as $row) 
																<option value="{{ $row->id }}" {{ $product->subcategory_id == $row->id ? 'selected' : '' }}>
																	{{ $row->sub_category_name }}
																</option>
																@endforeach
															</select>
														</div>
													</div>

													<div class="col-lg-4 col-sm-6 col-12">
														<div class="mb-3 add-product">
															<div class="add-newplus">
																<label class="form-label">Brand</label>
																<!--<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-units-brand"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add New</span></a>-->
															</div>
															<select class="form-control" name="brand_id" id="brand">
																<option value="">Select</option>	
																@foreach($brands as $row)
																<option value="{{ $row->id}}" {{ $product->brand_id == $row->id ? 'selected' : '' }}>{{ $row->brand_name}}</option>
																@endforeach
															</select>
														</div>
													</div>
													
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Product Name</label>
													<input type="text"  name="product_name" id="product_name" class="form-control" value="{{ $product->product_name}}">
												</div>
											</div>
											
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
				
													<div class="add-newplus">
														<label class="form-label">Selling Unit</label>
														<!--<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-unit"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add New</span></a>-->
													</div>
													<select class="form-control" name="unit_id" id="unit_id">
														<option value="">Select</option>
														@foreach($units as $row)
														<option value="{{ $row->id}}" {{ $product->unit_id == $row->id ? 'selected' : '' }}>{{ $row->unit_name}}</option>
														@endforeach
													</select>
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Roll Size</label>
													<input type="text"  name="roll_size" id="roll_size" class="form-control" value="{{ $product->roll_size}}">
												</div>
											</div>
											
											

										<div class="add-product-new">
											<div class="row">
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Thickness</label>
														<input type="text"  name="thickness" class="form-control" value="{{ $product->thickness}}" >
													</div>
												</div>
<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">HSN Code</label>
														<input type="text"  name="hsn_code" value="{{ $product->hsn_code}}" class="form-control" onkeypress="return event.charCode >= 48 && event.charCode <= 57" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 8);">
													</div>
												</div>
												<div class="col-lg-3 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Quantity/Roll</label>
														<input type="text"  name="quantityroll"  value="{{ $product->quantityroll}}" class="form-control" >
													</div>
												</div>
												<div class="col-lg-4 col-sm-6 col-12">
													<div class="mb-3 add-product">
														<label class="form-label">Product Display Image</label>
														<input type="file" id="product_image"  accept=".png,.jpg,.jpeg" name="product_image" class="form-control" >
													  <img id="product_image_preview" 
             src="{{ $product->product_image ? url('uploads/products/'.$product->product_image) : '' }}" 
             alt="Preview" 
             style="margin-top:10px; max-width:150px; border:1px solid #ddd; padding:5px; border-radius:5px; 
                    {{ $product->product_image ? '' : 'display:none;' }}">
													</div>
												</div>
												
											</div>
										</div>			
										
										<!-- Editor -->
										<div class="row">
                                        <div class="col-lg-6">
                                            <div class="input-blocks summer-description-box transfer mb-3">
                                                <label>Description</label>
                                                <textarea class="form-control h-100" rows="5" name="description">{{ $product->description}}</textarea>
                                               
                                            </div>
                                        </div>

										<div class="col-lg-6">
                                            <div class="input-blocks summer-description-box transfer mb-3">
                                                <label>Product Technical Detail</label>
                                                <textarea class="form-control h-100" rows="5" name="technical_details">{{ $product->technical_details}}</textarea>
                                               
                                            </div>
                                        </div>
									</div>
                                        <!-- /Editor -->
									</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
				
					
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="pricing">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"  aria-controls="collapseTwo">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Pricing Details</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
								<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#pricing">
									<div class="accordion-body">
										<div class="row">
										
											
                                            <div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">Basic Cost</label>
													<input type="text"  name="basic_cost" id="basic_cost" class="form-control" required value="{{$pricing->basic_cost}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
												</div>
											</div>  
											<div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">% GST </label>
													<input type="text"  name="gst_rate" id="gst_rate"  class="form-control" required value="{{$pricing->gst_rate}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
												</div>
											</div>  
										
											<div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">Purchase Cost (Including GST)</label>
													<input type="text"  name="purchase_cost" id="purchase_cost"  class="form-control" required value="{{$pricing->purchase_cost}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" readonly>
												</div>
											</div> 
											
											
										</div>
										<div class="row">
											<div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">% Retail Profit Margin</label>
													<input type="text"  name="profit_margin"  class="form-control" id="profit_margin" required value="{{$pricing->profit_margin}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" >
												</div>
											</div> 
											<div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">Retail Price</label>
													<input type="text"  name="retail_price"  class="form-control" id="retail_price" required value="{{$pricing->retail_price}}" readonly onkeypress="return event.charCode >= 48 && event.charCode <= 57" >
												</div>
											</div>  
											
											<div class=" col-lg-4 col-sm-6">
												<div class="mb-3 add-product">
													<label class="form-label">Effective Date</label>
													<input type="date"  name="effective_date"  class="form-control" required value="{{$pricing->effective_date}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" >
												</div>
											</div>  
										</div>	
											
										
                                        <!-- /Editor -->
									</div>
								</div>
								</div>
							</div>
						</div>
					</div>	

					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="warehouse">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-controls="collapseTwo">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Warehouse Details</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#warehouse">
										<div class="accordion-body">
											<div class="row"></div>
											<div class="row">
												<div class="card">

													<div class="card-body">
														<div class="productdetails">
														<div class="row mb-2" style="font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 5px;">
														<div class="col-md-2">Action</div>
														<div class="col-md-2">Warehouse</div>
														<div class="col-md-2">Pack Margin %</div>
														<div class="col-md-2">Pack Margin Amt</div>
														<div class="col-md-2">Cut Margin %</div>
														<div class="col-md-2">Cut Margin Amt</div>
													</div>
														@foreach($warehouse_products as $key => $product)
															<div class="input-group mb-3 datas" id="subcategory-{{ $key }}">
															<div class="add-icon">
																<a href="#" class="remove-subcategory" title="Remove" data-id="subcategory-{{ $key }}" style="color:white;background:red">
																	<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus">
																		<circle cx="12" cy="12" r="10"></circle>
																		<line x1="8" y1="12" x2="16" y2="12"></line>
																	</svg>
																</a>
															</div>
																<select class="form-control" name="warehouse[]" required style="margin-right: 10px">
																	<option value="">Select Warehouse</option>
																	@foreach($warehouses as $row)
																	<option value="{{ $row->id }}" @if($row->id == $product->warehouse) selected @endif>
																		{{ $row->warehouse_name }}
																	</option>
																	@endforeach
																</select>
																<input type="text" class="form-control pack_margin_percentage" placeholder="Enter Pack Margin in %"  
																	onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
																	name="pack_margin[]" value="{{ $product->pack_margin }}" 
																	style="margin-right: 10px" required />
																<input type="text" class="form-control pack_margin_amt"  
																	onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
																	name="pack_margin_amt[]" value="{{ $product->pack_amt }}" 
																	style="margin-right: 10px" readonly />
																<input type="text" class="form-control cut_margin_percentage" placeholder="Enter Cut Margin in %"  
																	onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
																	name="cut_margin[]" value="{{ $product->cut_margin }}" 
																	style="margin-right: 10px" required />
																<input type="text" class="form-control cut_margin_amt"  
																	onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
																	name="cut_margin_amt[]" value="{{ $product->cut_amt }}" 
																	style="margin-right: 10px" readonly />
																
																<div class="add-icon" style="display: flex; align-items: center;">
																	<!-- Add button for the last row -->
																	{{--@if($key == count($warehouse_products) - 1)
																	<a href="#" title="Add" class="choose-add" id="add-subcategory" style="color:white;background:green;">
																		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
																			<circle cx="12" cy="12" r="10"></circle>
																			<line x1="12" y1="8" x2="12" y2="16"></line>
																			<line x1="8" y1="12" x2="16" y2="12"></line>
																		</svg>
																	</a>
																	@endif
																	
																	<!-- Remove button for every row -->
																	@if($key != count($warehouse_products) - 1)
																	<a href="#" class="remove-subcategory" title="Remove" data-id="subcategory-{{ $key }}" style="color:white;background:red">
																		<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus">
																			<circle cx="12" cy="12" r="10"></circle>
																			<line x1="8" y1="12" x2="16" y2="12"></line>
																		</svg>
																	</a>
																	@endif--}}
																</div>
															</div>
															@endforeach
														</div>
														<div id="additional-subcategories"></div>
														<div class="add-icon">
															<a href="#" title="Add" class="choose-add" id="add-subcategory" style="color:white;background:green;">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
																	<circle cx="12" cy="12" r="10"></circle>
																	<line x1="12" y1="8" x2="12" y2="16"></line>
																	<line x1="8" y1="12" x2="16" y2="12"></line>
																</svg>
															</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
						

					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<a href="{{ url('products')}}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" class="btn btn-submit">Update Product</button>
						</div>
					</div>
				</form>
			<!-- /add -->

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

	<!-- Add Adjustment -->
	<div class="modal fade" id="add-units">
		<div class="modal-dialog modal-dialog-centered stock-adjust-modal">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Add Variation Attribute</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<div class="row">
								<div class="col-lg-12">
									<div class="input-blocks">
										<label>Attribute Name</label>
										<input type="text" class="form-control">
									</div>
								</div>
								<div class="col-lg-12">
									<div class="input-blocks">
										<label>Add Value</label>
										<input type="text" class="form-control">
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-6">
									<ul class="nav user-menu">
									<li class="nav-item nav-searchinputs">
										<div class="top-nav-search">
											<form action="#" class="dropdown">
												<div class="searchinputs list dropdown-toggle" id="dropdownMenuClickable2" data-bs-toggle="dropdown" data-bs-auto-close="false" >
													<input type="text" placeholder="Search">
													<i data-feather="search" class="feather-16 icon"></i>
													<div class="search-addon d-none">
														<span><i data-feather="x-circle" class="feather-14"></i></span>
													</div>
												</div>
												<div class="dropdown-menu search-dropdown idea" aria-labelledby="dropdownMenuClickable2">
													<div class="search-info">
														<p>Black </p>
														<p>Red</p>
														<p>Green</p>
														<p>S</p>
														<p>M</p>
													</div>
												</div>
											</form>
										</div>
									</li>
									</ul>
								</div>
								<div class="col-lg-6">
								<div class="modal-footer-btn popup">
									<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
									<a href="javascript:void(0);" class="btn btn-submit" data-bs-dismiss="modal">Create Attribute</a>
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Add Adjustment -->

	<!-- Add Category -->
	<div class="modal fade" id="add-units-category">
		<div class="modal-dialog modal-dialog-centered custom-modal-two">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Add New Category</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<form method="post" action="{{ route('add_category')}}">
								@csrf
							<div class="mb-3">
								<label class="form-label">Name</label>
								<input type="text" name="name" class="form-control" required>
							</div>
							<div class="modal-footer-btn">
								<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
								<input type="submit" class="btn btn-submit" name="submit" value="Submit">
							</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Add Category -->

	<!-- Add Brand -->
	<div class="modal fade" id="add-units-brand">
		<div class="modal-dialog modal-dialog-centered custom-modal-two">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Add New Brand</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<form id="addBrandForm">
							@csrf
							<div class="mb-3">
								<label class="form-label">Brand</label>
								<input type="text" name="name" id="brand_name" class="form-control" required> 
							</div>
							<div class="modal-footer-btn">
								<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
								<input type="submit" class="btn btn-submit" name="submit" value="Submit">
							</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Add Brand -->

	<!-- Add Unit -->
	<div class="modal fade" id="add-unit">
		<div class="modal-dialog modal-dialog-centered custom-modal-two">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Add Unit</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<form id="addUnitForm">
							@csrf
							<div class="mb-3">
								<label class="form-label">Unit</label>
								<input type="text" name="name" id="unit_name" class="form-control" required>
							</div>
							<div class="modal-footer-btn">
								<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
								<input type="submit" class="btn btn-submit" name="submit" value="Submit">
							</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /Add Unit -->


	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> 
	<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.css" rel="stylesheet">
    
   <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#category').on('change', function() {
            var category_id = $(this).val();
			
            if (category_id) {
                $.ajax({
                    url: '/get-subcategories/' + category_id,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#subcategory').empty();
                        $('#subcategory').append('<option value="">Select Subcategory</option>');
                        $.each(data, function(key, value) {
                            $('#subcategory').append('<option value="' + value.id + '">' + value.sub_category_name + '</option>');
                        });
                    }
                });
            } else {
                $('#subcategory').empty();
                $('#subcategory').append('<option value="">Select Subcategory</option>');
            }
        });

		let selectedWarehouses = new Set();	

		let subcategoryCount = 0;


function addSubcategoryRow() {
    const lastSubcategoryName = $('input[name="pack_margin[]"]').last().val();
    const lastSubcategoryStatus = $('select[name="warehouse[]"]').last().val();

    if (!lastSubcategoryName || !lastSubcategoryStatus) {
        Swal.fire({
            title: 'Validation Error',
            text: 'Please fill in the current pack margin and warehouse before adding another.',
            icon: 'warning',
            confirmButtonText: 'Okay',
        });
        return;
    }

    subcategoryCount++;

    $('#additional-subcategories').append(`
        <div class="input-group mb-3 datas" id="subcategory-${subcategoryCount}">
        <div class="add-icon">
                <a href="#" title="Add" class="choose-add" style="color:white;background:green;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="16"></line>
                        <line x1="8" y1="12" x2="16" y2="12"></line>
                    </svg>
                </a>
            </div>
            <select class="form-control warehouse-select" name="warehouse[]" required style="margin-right: 10px">
                <option value="">Select Warehouse</option>
                @foreach($warehouses as $row)
                <option value="{{ $row->id }}">{{ $row->warehouse_name }}</option>
                @endforeach
            </select>
            <input type="text" class="form-control pack_margin_percentage" placeholder="Enter Pack Margin in %" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="pack_margin[]" style="margin-right: 10px" required />
            <input type="text" class="form-control pack_margin_amt" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="pack_margin_amt[]" style="margin-right: 10px" readonly />
            <input type="text" class="form-control cut_margin_percentage" placeholder="Enter Cut Margin in %" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="cut_margin[]" style="margin-right: 10px" required />
            <input type="text" class="form-control cut_margin_amt" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="cut_margin_amt[]" style="margin-right: 10px" readonly />

            
        </div>
    `);

    $('.add-icon a').not(':last').replaceWith(`
        <a href="#" class="remove-subcategory" title="Remove" style="color:white;background:red">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
        </a>
    `);
}

$(document).on('click', '#add-subcategory, .choose-add', function (e) {
    e.preventDefault();
    addSubcategoryRow();
    	updateWarehouseMargins();
});

$(document).on('click', '.remove-subcategory', function (e) {
    e.preventDefault();
    
	$(this).closest('.input-group').remove();

	$('.choose-add').show(); 
	$('.remove-subcategory').not(':last').show(); 

});

$('#company_id').change(function () {
    const companyId = $(this).val();
    if (companyId) {
        fetchWarehouses(companyId, $('.warehouse-select:first'));
    } else {
        $('.warehouse-select').html('<option value="">Select Warehouse</option>');
        selectedWarehouses.clear();
    }
});

function fetchWarehouses(companyId, warehouseSelectElement) {
    $.ajax({
        url: '/get-warehouse/' + companyId,
        type: 'GET',
        success: function (data) {
            warehouseSelectElement.empty();
            warehouseSelectElement.append('<option value="">Select Warehouse</option>');
            $.each(data, function (key, value) {
                warehouseSelectElement.append('<option value="' + value.id + '">' + value.warehouse_name + '</option>');
            });
            updateWarehouseDropdowns();
        },
        error: function (xhr) {
            console.log(xhr.responseText);
        },
    });
}

$(document).on('change', '.warehouse-select', function () {
    const selectedValue = $(this).val();
    if (selectedValue) {
        selectedWarehouses.add(selectedValue);
    } else {
        selectedWarehouses.delete($(this).data('prevValue'));
    }
    $(this).data('prevValue', selectedValue);
    updateWarehouseDropdowns();
});

function updateWarehouseDropdowns() {
    $('.warehouse-select').each(function () {
        const currentSelect = $(this);
        const currentValue = currentSelect.val();
        currentSelect.find('option').each(function () {
            const optionValue = $(this).val();
            if (optionValue && selectedWarehouses.has(optionValue) && optionValue !== currentValue) {
                $(this).hide();
            } else {
                $(this).show();
            }
        });
    });
}





		$('#addBrandForm').submit(function(e) {
			e.preventDefault(); 

			
			var brandName = $('#brand_name').val();
			

			
			$.ajax({
				url: "{{ route('add_brand_dynamic') }}", 
				method: 'POST',
				data: {
					_token: '{{ csrf_token() }}', 
					name: brandName
				},
				success: function(response) {
					if (response.success) {
						
						$('#add-units-brand').modal('hide');

					
						$('#addBrandForm')[0].reset();

					
						$('select[name="brand_id"]').append('<option value="' + response.brand.id + '" selected>' + response.brand.brand_name + '</option>');

						
						alert('Brand added successfully!');
					} else {
						alert('Failed to add brand!');
					}
				},
				error: function() {
					alert('An error occurred while adding the brand.');
				}
			});
		});

		


		$('#addUnitForm').submit(function(e) {
			e.preventDefault(); 

			
			var unitName = $('#unit_name').val();
			

			$.ajax({
				url: "{{ route('add_unit_dynamic') }}", 
				method: 'POST',
				data: {
					_token: '{{ csrf_token() }}', 
					name: unitName
				},
				success: function(response) {
					if (response.success) {
					
						$('#add-unit').modal('hide');

					
						$('#addUnitForm')[0].reset();

						
						$('select[name="unit_id"]').append('<option value="' + response.unit.id + '" selected>' + response.unit.unit_name + '</option>');

						
						alert('Unit added successfully!');
					} else {
						alert('Failed to add brand!');
					}
				},
				error: function() {
					alert('An error occurred while adding the brand.');
				}
			});
		});

		$('textarea[name="description"]').summernote({
            height: 300, 
            placeholder: 'Enter Description', 
            tabsize: 2
        });

		$('textarea[name="technical_details"]').summernote({
            height: 300, 
            placeholder: 'Enter Technical Description', 
            tabsize: 2
        });
		
    });

//price calculation
		function calculatePackMarginAmount($row) {
		    const packMarginPercentage = parseFloat($row.find('.pack_margin_percentage').val()) || 0;
		    const purchaseCost = parseFloat($('#purchase_cost').val()) || 0;

		    const retailAmount = (packMarginPercentage / 100) * purchaseCost;
		    const packMarginAmount = purchaseCost + retailAmount;
		    $row.find('.pack_margin_amt').val(packMarginAmount.toFixed(2));
		}


		function calculateCutMarginAmount($row) {
		    const cutMarginPercentage = parseFloat($row.find('.cut_margin_percentage').val()) || 0;
		    const purchaseCost = parseFloat($('#purchase_cost').val()) || 0;

		    const retailAmount = (cutMarginPercentage / 100) * purchaseCost;
		    const cutMarginAmount = purchaseCost + retailAmount;
		    $row.find('.cut_margin_amt').val(cutMarginAmount.toFixed(2));
		}


		// Event delegation for pack margin percentage calculation
		$(document).on('input', '.pack_margin_percentage', function () {
		    const $row = $(this).closest('.input-group'); // Corrected row selector

		    calculatePackMarginAmount($row);
		});

		// Event delegation for cut margin percentage calculation

		$(document).on('input', '.cut_margin_percentage', function () {
		    const $row = $(this).closest('.input-group'); // Corrected row selector
		    calculateCutMarginAmount($row);
		});




		function calculatePurchaseCost() {
			var landingCost = parseFloat($('#basic_cost').val()) || 0;
			var gstRate = parseFloat($('#gst_rate').val()) || 0;

		
			var gstAmount = (gstRate / 100) * landingCost;
			var purchaseCost = landingCost + gstAmount;

			
			$('#purchase_cost').val(purchaseCost.toFixed(2));
		  }
		  
		  
		  $('#basic_cost').on('input', function() {
			calculatePurchaseCost();
			calculateRetailprice();
			updateWarehouseMargins();
		});

   
		$('#gst_rate').on('input', function() {
			calculatePurchaseCost();
			calculateRetailprice();
			updateWarehouseMargins()
		});


		function calculateRetailprice() {
			var profit_margin = parseFloat($('#profit_margin').val()) || 0;
			var purchase_cost = parseFloat($('#purchase_cost').val()) || 0;
			var retailAmount = (profit_margin / 100) * purchase_cost;
			var retailprice = purchase_cost + retailAmount;
			$('#retail_price').val(retailprice.toFixed(2));
		}

   
		$('#profit_margin').on('input', function() {
			calculateRetailprice();
			//updateWarehouseMargins()
		});
		
		
		
		function updateWarehouseMargins() {
		let retailPrice = parseFloat($('#retail_price').val()) || 0;
			let purchaseCost = parseFloat($('#purchase_cost').val()) || 0;

		$('.datas').each(function () {
		    let packMargin = parseFloat($(this).find('.pack_margin_percentage').val()) || 0;
		    let cutMargin = parseFloat($(this).find('.cut_margin_percentage').val()) || 0;

		    let packAmt = (purchaseCost * packMargin / 100) + purchaseCost;
		    let cutAmt = (purchaseCost * cutMargin / 100) + purchaseCost;

		    $(this).find('.pack_margin_amt').val(packAmt.toFixed(2));
		    $(this).find('.cut_margin_amt').val(cutAmt.toFixed(2));
		});
	    }


	    $(document).on('input', '.pack_margin_percentage, .cut_margin_percentage', function () {
		updateWarehouseMargins();
	    });
    
		
		
		
		
		//end


	
        $('#company_id').select2({
        placeholder: "Select Company",   
        allowClear: true,
		search:true,
		          
    });

	$('#brand').select2({
        placeholder: "Select Brand",   
        allowClear: true,
		search:true,
		          
    });

	$('#unit_id').select2({
        placeholder: "Select Unit",   
        allowClear: true,
		search:true,
		          
    });

	$('#category').select2({
        placeholder: "Select Category",   
        allowClear: true,
		search:true,
		          
    });
	
	$('#subcategory').select2({
        placeholder: "Select Sub Category",   
        allowClear: true,
		search:true,
		          
    });
	
 // Add button functionality
 /*document.getElementById('add-subcategory')?.addEventListener('click', function(event) {
        event.preventDefault();

        // Clone the first row and append it to the form
        let firstRow = document.querySelector('.datas');
        let newRow = firstRow.cloneNode(true);

        // Reset values for the cloned row
        newRow.querySelectorAll('input').forEach(input => {
            input.value = '';
            input.readOnly = false; // Make sure the cloned row is editable
        });

        // Increment the ID for the new row
        let lastIndex = document.querySelectorAll('.datas').length;
        newRow.id = "subcategory-" + lastIndex;

        // Append the new row to the form
        document.getElementById('additional-subcategories').appendChild(newRow);
    });*/

    // Remove button functionality
    document.querySelectorAll('.remove-subcategory').forEach((button) => {
        button.addEventListener('click', (event) => {
            const rowId = event.target.closest('.datas').id;
            document.getElementById(rowId).remove(); // Remove the selected row
        });
    });


	document.getElementById('product_image').addEventListener('change', function (event) {
    const file = event.target.files[0];
    const preview = document.getElementById('product_image_preview');

    if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.src = '';
        preview.style.display = 'none';
    }
});


</script>

	@include('layouts.footer')