@extends('admin.layouts.dashboard')
@php
$title = empty($item) ? 'Add Item' : 'Edit Item';
$button_text = empty($item) ? 'Submit' : 'Update';
@endphp
@section('title', $title)
@section('content')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<style>
.close-img {
    position: absolute;
    right: 12px;
    color: #3a3b45;
    background-color: #dee2e6;
    font-size: 20px;
    padding: 5px;
    border-radius: 50%;
}
.steps {

    color: black;
}
.select2-container--default .select2-search--inline .select2-search__field {
    padding: 6px;
}

</style>
@if(!empty($item))
<form method="POST" action="{{ route('admin.items.update', $item) }}" enctype="multipart/form-data"
    onsubmit="loader(true)">
    @method('put')
    @else
    <form method="POST" action="{{ route('admin.items.store') }}" enctype="multipart/form-data" onsubmit="loader(true)">
        @endif
        @csrf
        <div class="container-fluid">
            <div class="row">
                @if (Session::has('failure'))
                <div class="alert alert-dismissable alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span> </button>
                    {{ Session::get('failure') }}
                </div>
                @endif
                <div class="col-lg-2 col-md-4 p-3 bg-active text-center a" id="general_click">
                    <h4 class="steps  bg-shad">01</h4>
                    <h5 class="pinkit">General Info.</h5>
                    <p class="psmall" style="color:white;">Setup Basic Product Details</p>
                </div>
                <div class="col-lg-2 col-md-4 p-3 text-center a" id="inventory_click">
                    <h4 class="steps bg-shad">02</h4>
                    <h5>Inventory Details</h5>
                    <p class="psmall">Stock & Pricing Options</p>
                </div>
                <div class="col-lg-2 col-md-4 p-3 text-center a" id="variant_click">
                    <h4 class="steps bg-shad">03</h4>
                    <h5>Options & Variants</h5>
                    <p class="psmall">Add Option details</p>
                </div>
                <div class="col-lg-2 col-md-4 p-3 text-center a" id="attribute_click">
                    <h4 class="steps bg-shad">04</h4>
                    <h5>Product Attribute</h5>
                    <p class="psmall">Product Specifications</p>
                </div>
                <div class="col-lg-2 col-md-4 p-3 text-center" id="media_click">
                    <h4 class="steps bg-shad">05</h4>
                    <h5>Product Media</h5>
                    <p class="psmall">Add Option Based Product Media</p>
                </div>
            </div>
            <div class="mt-5 mb-4 row border-0 rounded-4 bg-white px-2 py-3" id="general_div">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-3 pb-3">
                        <label>Category<span style="color:red;">*</span></label>
                        <select class="selectpicker form-control1 rounded-2" id="category" name="category"
                            onchange="get_subcategory()"
                            value="{{ !empty($item->category_id) ? $item->category_id : "" }}" required="">
                            <option value="" disabled="" hidden="" selected>Category</option>
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}" @if(!empty($item->category_id)) @if($item->category_id
                                == $category->id) selected @endif @endif>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-3 pb-3">
                        <label>Sub Category</label>
                        <select class="selectpicker form-control1 rounded-2" id="subcategory" name="subcategory"
                            value="{{ !empty($item->subcategory_id) ? $item->subcategory_id : "" }}">
                            <option value="" disabled="" hidden="" selected>Select SubCategory</option>
                            @foreach($subcategories as $cat)
                            <option value="{{ $cat->id }}" @if(!empty($item->subcategory_id)) @if($item->subcategory_id
                                == $cat->id) selected @endif @endif>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-6 pb-3">
                        <label>Product Code<span style="color:red;">*</span></label>
                        <input type="text" name="product_code" id="product_code" class="form-control" required=""
                            placeholder="Product Code" value="{{ !empty($item->code) ? $item->code : "" }}"
                            oninput="checkCode(this.value)" />
                        <span style="display:none" id="code_msg"></span>
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline pb-3">
                        <label>Product Title<span style="color:red;">*</span></label>
                        <input type="text" name="product_title" id="" placeholder="Product title" class="form-control"
                            value="{{ !empty($item->name) ? $item->name : "" }}" required="">
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-3 pb-3">
                        <label>Selling Type</label>
                        <select class="selectpicker form-control1 rounded-2" id="selling_type" name="selling_type"
                            value="{{ !empty($item->selling_type) ? $item->selling_type : "" }}">
                            <option value="" disabled="" hidden="" selected>Select Selling Type</option>
                            <option value="buy" @if(!empty($item->selling_type)) @if($item->selling_type == 'buy')
                                selected @endif @endif >Buy</option>
                            <option value="rent" @if(!empty($item->selling_type)) @if($item->selling_type == 'rent')
                                selected @endif @endif >Rent</option>
                                {{-- <option value="both" @if(!empty($item->selling_type)) @if($item->selling_type == 'both')
                                selected @endif @endif >Both</option> --}}

                        </select>
                    </div>
                    <div class=" col-md-12 col-lg-3 form-outlin pb-3">
                        <label>Brand</label>
                        <select class="selectpicker form-control" id="brand" name="brand"
                            value="{{ !empty($item->brand_id) ? $item->brand_id : '' }}" required="">
                            <option value="5" disabled="" hidden="" selected>Brand</option>
                            @foreach($brands as $brand)
                            <option value="{{ $brand->id }}" @if(!empty($item->brand_id)) @if($item->brand_id ==
                                $brand->id) selected @endif @endif>{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline pb-3">
                        <label>No. of seats<span style="color:red;">*</span></label>
                        <input type="text" name="seats" id="" placeholder="No. of seats" class="form-control"
                            value="{{ !empty($item->seats) ? $item->seats : '' }}" required="">
                    </div>

                    <div class="col-sm-12 col-md-12 col-lg-12 pb-3">
                        <label>Description</label>
                        <textarea  id="description" name="description" class="form-control2"
                            value="">{{ !empty($item->description) ? $item->description : "" }}</textarea>
                    </div>
                {{--<div class="col-sm-12 col-md-12 col-lg-3 pb-3">
                        <label for="material">Material
                            <!-- <span style="color:red;">*</span> -->
                        </label>
                        <select class="selectpicker form-control1 rounded-2" id="material" name="material">
                            <option value="" disabled="" hidden="" selected>Select Material</option>
                            @foreach($materials as $material)
                            <option value="{{ $material->id }}"
                                {{ !empty($item->material_id) ? $item->material_id == $material->id ? 'selected' : '' : '' }}>
                                {{ $material->name }}
                            </option>
                            @endforeach
                        </select>
                    </div> --}}
                    <!--              
            <div class="col-sm-12 col-md-12 col-lg-3 p-2">
               <label>Product Type<span style="color:red;">*</span></label>
               <select class="selectpicker form-control1" id="product_type" name="product_type"
               value="{{ !empty($item->type) ? $item->type : "" }}" required="">
               <option value="" disabled="" hidden="" selected>Product Type</option>
               <option value="physical"
               @if(!empty($item->type)) @if($item->type == 'physical') selected @endif  @endif>
               Physical
               </option>
               <option value="digital"
               @if(!empty($item->type)) @if($item->type == 'digital') selected @endif  @endif>
               Digital
               </option>
               </select>
            </div> -->
                    <div class="col-md-12 col-lg-3 form-outline pb-3">
                        <label>Model No.</label>
                        <input type="text" name="model" id="model" placeholder="Model No." class="form-control"
                            value="{{ !empty($item->model) ? $item->model : "" }}">
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline pb-3">
                        <label>Tags (separated by comma)</label>
                        <input type="text" name="tags" id="tags" placeholder="foo, bar" class="form-control"
                            value="{{ !empty($item->model) ? implode(',', $item->tags->pluck('name')->toArray()) : "" }}">
                    </div>
                    <!-- <div class="col-sm-12 col-md-12 col-lg-3 p-2">
               <label>Tax Category<span style="color:red;">*</span></label>
               <select class="selectpicker form-control1" id="tax_category" name="tax_category"
               value="{{ !empty($item->tax_category) ? $item->tax_category : "" }}">
               <option value="" disabled="" hidden="" selected>Tax Category</option>
               <option value="5"
               @if(!empty($item->tax_category)) @if($item->tax_category == '5') selected @endif  @endif>
               5
               </option>
               <option value="7"
               @if(!empty($item->tax_category)) @if($item->tax_category == '7') selected @endif  @endif>
               7
               </option>
               <option value="10"
               @if(!empty($item->tax_category)) @if($item->tax_category == '10') selected @endif  @endif>
               10
               </option>
               <option value="12"
               @if(!empty($item->tax_category)) @if($item->tax_category == '12') selected @endif  @endif>
               12
               </option>
               <option value="18"
               @if(!empty($item->tax_category)) @if($item->tax_category == '18') selected @endif  @endif>
               18
               </option>
               <option value="40"
               @if(!empty($item->tax_category)) @if($item->tax_category == '40') selected @endif  @endif>
               40
               </option>
               </select>
            </div> -->
                    <!-- <div class="col-sm-12 col-md-12 col-lg-3 p-2">
               <label>Product Condition<span style="color:red;">*</span></label>
               <select class="selectpicker form-control1" id="product_condition"
               name="product_condition"
               value="{{ !empty($item->condition) ? $item->condition : "" }}" required="">
               <option value="" disabled="" hidden="" selected>Product Condition</option>
               <option value="old"
               @if(!empty($item->condition)) @if($item->condition == 'old') selected @endif  @endif>
               Old
               </option>
               <option value="new"
               @if(!empty($item->condition)) @if($item->condition == 'new') selected @endif  @endif>
               New
               </option>
               <option value="refurbished"
               @if(!empty($item->condition)) @if($item->condition == 'refurbished') selected @endif  @endif>
               Refurbished
               </option>
               </select>
            </div> -->
                    <!-- <div class="col-md-12 col-lg-3 form-outline p-2">
               <label>Warranty(Days)<span style="color:red;">*</span></label>
               <input type="number" name="warranty" id="warranty" placeholder="Warranty"
               class="form-control2 "
               value="{{ !empty($item->warranty) ? $item->warranty : "" }}">
            </div> -->
                    <div class="col-md-12 col-lg-3 form-outline pb-3" id="return_days_container">
                        <label>Return(Days)</label>
                        <input type="number" name="return" id="return" placeholder="Return (Days)" class="form-control"
                            min="1" value="{{ !empty($item->return) ? $item->return : "" }}">
                    </div>
                    <!-- <div class="col-md-12 col-lg-3 form-outline p-2">
               <label>Expiry Date<span style="color:red;">*</span></label>
               <input type="date" name="expiry_date" id="expiry" placeholder="Expiry"
               class="form-control2 "
               value="{{ !empty($item->expiry_date) ? $item->expiry_date : "" }}">
            </div> -->


                     <div class="col-md-12 col-lg-3 form-outline pb-3">
               <label>Related Items<span style="color:red;">*</span></label>
               <select class="form-control" id="related_item" name="related_item[]" multiple>
               

                  @foreach($items as $data)
                     @if(!empty($item->related_items))
                                                   @if(in_array($data->id, $related_items))
                              <option value="{{ $data->id }}"  selected class="active">{{ $data->name }}</option>
                           @else
                              <option value="{{ $data->id }}" >{{ $data->name }}</option>
                           @endif
                     @else
                        <option value="{{ $data->id }}" >{{ $data->name }}</option>
                     @endif
                  @endforeach
               </select>
            </div>
                </div>
                <div class="row mt-5">
                    <div class="d-flex justify-content-end">
                        
                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <button class="ml-3 p-0" id="general_next" style="border: none;"> <a href="#"
                                class="btn-yellow-all">NEXT <i class="fas text-black fa-arrow-right"></i> </a></button>
                    </div>
                </div>
            </div>
            <!-- --------------------------------Section 2--------------------------- -->
            <div class="mt-5 mb-4 row border-0 rounded-4 bg-white px-2 py-3 d-none " id="inventory_div">

            <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Backsplash</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="gift_wrap" value="1" {{ isset($item->gift_wrap) && $item->gift_wrap == 1 ? 'checked' : '' }}>
                            <label class="form-check-label clabel" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="gift_wrap" value="0" {{ isset($item->gift_wrap) && $item->gift_wrap == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Do you want to track inventory for this product?</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="track_inventory" value="1" {{ isset($item->track_inventory) && $item->track_inventory == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="track_inventory" value="0" {{ isset($item->track_inventory) && $item->track_inventory == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> You want to sell this product as?</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="selling_at" value="shipping" {{ isset($item->selling_at) && $item->selling_at == 'shipping' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Shipping
                            </label>
                        </span>
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="selling_at" value="pickup" {{ isset($item->selling_at) && $item->selling_at == 'pickup' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Pick Up
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="selling_at" value="both" {{ isset($item->selling_at) && $item->selling_at == 'both' ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Both
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Continue selling when out of stock</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="continue_selling" value="1" {{ isset($item->continue_selling_when_stock_out) && $item->continue_selling_when_stock_out == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="continue_selling" value="0" {{ isset($item->continue_selling_when_stock_out) && $item->continue_selling_when_stock_out == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 col-lg-8">
                        <p class="ptext"> Available for Cash on Delivery</p>
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" name="cash_on_delivery" value="1" {{ isset($item->cash_on_delivery) && $item->cash_on_delivery == 1 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" name="cash_on_delivery" value="0" {{ isset($item->cash_on_delivery) && $item->cash_on_delivery == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="flexRadioDefault1">
                                No
                            </label>
                        </span>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-md-12 col-lg-4 form-outline pb-3">
                        <label>Minimum Purchase Quantity<span style="color:red;">*</span></label>
                        <input type="number" name="min_purchase" id="" placeholder="Minimum Purchase Quantity *"
                            class="form-control" min="1"
                            value="{{ !empty($item->min_purchase_qty) ? $item->min_purchase_qty : "" }}">
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline pb-3">
                        <label>Maximum Purchase Quantity<span style="color:red;">*</span></label>
                        <input type="number" name="max_purchase" id="" placeholder="Maximum Purchase Quantity *"
                            class="form-control"
                            value="{{ !empty($item->max_purchase_qty) ? $item->max_purchase_qty : "" }}" min="1">
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline pb-3">
                        <label>Stock Alert Quantity<span style="color:red;">*</span></label>
                        <input type="number" name="stock_alert" id="" placeholder="Stock Alert Quantity *"
                            class="form-control"
                            value="{{ !empty($item->stock_alert_qty) ? $item->stock_alert_qty : "" }}" min="1">
                    </div>
                    <!-- Form for Buy -->
                    <div id="buy_form" class="row mt-3" style="{{ (!empty($item->type) && $item->type == 'buy') ? '' : 'display:none;' }}">
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>M.R.P. <span style="color:red;">*</span></label>
                            <input type="text" name="cost_price" id="cost_price" placeholder="M.R.P Price *" class="form-control"
                                value="{{ !empty($item->price) ? $item->price : '' }}" onkeypress="return isNumberKey(event,this)">
                        </div>
                   

                 
                    <div class="col-md-12 col-lg-4 form-outline pb-3">
                        <label>Sale Price <span style="color:red;">*</span></label>
                        <input type="text" name="sale_price" id="sale_price" placeholder="Sale Price *"
                            onkeypress="return isNumberKey(event,this)" oninput="checkValidPrice()"
                            class="form-control2" value="{{ !empty($item->sale_price) ? $item->sale_price : '' }}">
                        <!-- <span class="col-md-12 text-danger" id="sale_price_Required_error" style="display: none">
                    must be greater than sale price
                    MRP can not be less than sale price
                    Sale price can not be less than unit price
                </span> -->
                    </div>
                    <div class="col-md-12 col-lg-4 form-outline pb-3">
                        <label>Unit Price</label>
                        <input type="text" name="unit_price" id="unit_price" placeholder="Unit Price"
                            onkeypress="return isNumberKey(event,this)" oninput="checkValidPrice1()"
                            class="form-control" value="{{ !empty($item->unit_price) ? $item->unit_price : "" }}">
                        <!-- <span class="col-md-12 text-danger" id="unit_price_Required_error" style="display: none">
                  Sale price must be greater than unit price
               </span> -->
            </div>
                </div>
                </div>
                   <!-- Form for Rent -->
                   <div id="rent_form" class="row mt-3" style="{{ (!empty($item->type) && $item->type == 'rent') ? '' : 'display:none;' }}">
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>Rental Rate (Weekend)<span style="color:red;">*</span></label>
                            <input type="text" name="rental_weekend" onkeypress="return isNumberKey(event,this)"  placeholder="Weekend Rate *" class="form-control"
                                value="{{ !empty($item->rental_weekend) ? $item->rental_weekend : '' }}">
                        </div>
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>Rental Rate (7 Days)<span style="color:red;">*</span></label>
                            <input type="text" name="rental_7days" onkeypress="return isNumberKey(event,this)"  placeholder="7 Days Rate *" class="form-control"
                                value="{{ !empty($item->rental_7_days) ? $item->rental_7_days : '' }}">
                        </div>
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>Rental Rate (14 Days)<span style="color:red;">*</span></label>
                            <input type="text" name="rental_14days" onkeypress="return isNumberKey(event,this)"  placeholder="14 Days Rate *" class="form-control"
                                value="{{ !empty($item->rental_14_days) ? $item->rental_14_days : '' }}">
                        </div>
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>Rental Rate (21 Days)<span style="color:red;">*</span></label>
                            <input type="text" name="rental_21days" onkeypress="return isNumberKey(event,this)"  placeholder="21 Days Rate *" class="form-control"
                                value="{{ !empty($item->rental_21_days) ? $item->rental_21_days : '' }}">
                        </div>
                        <div class="col-md-12 col-lg-4 form-outline pb-3">
                            <label>Rental Rate (1 Month)<span style="color:red;">*</span></label>
                            <input type="text" name="rental_month"  onkeypress="return isNumberKey(event,this)"  placeholder="1 Month Rate *" class="form-control"
                                value="{{ !empty($item->rental_1_month) ? $item->rental_1_month : '' }}">
                        </div>
                    </div>
                <div class="row  mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all" data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="inventory_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <span class="ml-1 mr-1" id="inventory_next"> <a href="#" class="btn-yellow-all">NEXT <i
                                    class="fas text-black fa-arrow-right"></i> </a></span>
                    </div>
                </div>
            </div>
            <!-- --------------------------------Section 3--------------------------- -->
            <div class="bg-white px-2 py-3 mt-5 row mb-4 border-0 rounded-4 d-none" id="variant_div">
                <div class="row ">
                    <div class="col-md-12 col-lg-9">
                        <p class="ptext">
                        </p>
                    </div>
                    <div class="col-md-12 col-lg-3 form-outline">
                        <span class="ml-3 mr-4">
                            <input class="form-check-input" type="radio" id="is_variant_yes" name="is_variant" value="1" {{ isset($item->is_variant) && $item->is_variant == 1 ? 'checked' : '' }} {{ !isset($item->is_variant) ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="is_variant_yes">
                                Yes
                            </label>
                        </span>
                        <span class="ml-3">
                            <input class="form-check-input" type="radio" id="is_variant_no" name="is_variant" value="0" {{ isset($item->is_variant) && $item->is_variant == 0 ? 'checked' : '' }}>
                            <label class="form-check-label ptext" for="is_variant_no">
                                No
                            </label>
                        </span>
                    </div>
                </div>
                <div>
                    <div id="error-container"
                        style=" padding: 10px; background-color: #f8d7da; border-radius: 5px; display:none;">
                    </div>
                    <table class="table mt-3 table-responsive">
                        <thead>
                            <tr>
                                <!-- <th>Width </th> -->
                                <!-- <th>Name </th> -->
                                <th>Color Number</th>
                                <th>Color Name</th>
                                <th>QTY</th>
                                <!-- <th>Finish</th> -->
                                <th class="price-field" style="display: none;">Price</th>
                                <th class="rent-fields" style="display: none;">Weekend Rate</th>
                                <th class="rent-fields" style="display: none;">7-Day Rate</th>
                                <th class="rent-fields" style="display: none;">14-Day Rate</th>
                                <th class="rent-fields" style="display: none;">21-Day Rate</th>
                                <th class="rent-fields" style="display: none;">Monthly Rate</th>
                                <th>SKU</th>
                                <th>Image</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                            @if($variants->count() > 0) @foreach($variants as $variant)
                            <tr>
                                {{-- <td class="variant">
                                    <input
                                    type="text"
                                    name="type[]"
                                    class="form-control"
                                    value="{{ $variant->type }}"
                                    placeholder="Enter Size"
                                    />
                                </td>
                                 --}}
                                <td>
                                    <input type="color" name="color[]" class="form-control"
                                        value="{{ $variant->color ?? '' }}" placeholder="Enter color" onchange="updateColorName(this)">
                                    <!-- Display Selected Color Code -->
                                    <div style="display: flex; align-items: center;">
                                    <span id="colorName">{{ $variant->color ?? '' }}  &nbsp;&nbsp;</span>
                                    <div class="box-color" style="background-color: {{ $variant->color }}; width: 20px; height: 20px;"></div>
                                </div>
                                </td>
                                <td>
                                    <input type="text" name="variant[]" class="form-control"
                                        value="{{ $variant->variant_name }}" placeholder="Enter Color Name" />
                                </td>
                                <td>
                                    <input type="text" name="qty[]" class="form-control"
                                        value="{{ $variant->qty == 0 ? ''  : $variant->qty}}" min ="0"placeholder="QTY" />
                                </td>
                                @if($item->selling_type === 'buy')
                                    <td class="price-field">
                                        <input type="text"  onkeypress="return isNumberKey(event,this)" name="price[]" class="form-control" value="{{ $variant->price }}" placeholder="Enter Price" />
                                    </td>
                                @elseif($item->selling_type === 'rent')
                                <td class="rent-fields">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_weekend[]" class="form-control" placeholder="Weekend Rate" value="{{ $variant->rental_rate_weekend ?? '' }}">
                                </td>
                                <td class="rent-fields">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_7days[]" class="form-control" placeholder="7-Day Rate" value="{{ $variant->rental_rate_7days ?? '' }}">
                                </td>
                                <td class="rent-fields">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_14days[]" class="form-control" placeholder="14-Day Rate" value="{{ $variant->rental_rate_14days ?? '' }}">
                                </td>
                                <td class="rent-fields">
                                    <input type="text"  onkeypress="return isNumberKey(event,this)" name="rental_rate_21days[]" class="form-control" placeholder="21-Day Rate" value="{{ $variant->rental_rate_21days ?? '' }}">
                                </td>
                                <td class="rent-fields">
                                    <input type="text"  onkeypress="return isNumberKey(event,this)" name="rental_rate_month[]" class="form-control" placeholder="Monthly Rate" value="{{ $variant->rental_rate_month ?? '' }}">
                                </td>
                                @endif
                                <td>
                                    <input type="text" name="sku[]" class="form-control" value="{{ $variant->sku }}"
                                        placeholder="Enter sku" />
                                </td>
                                <td>
                                    <div style="display:flex;">
                                    <input type="file" name="images[]" class="form-control"
                                        value="{{ $variant->image }}" placeholder="Select Image" />
                                        <div class="image-preview" style="margin-top: 10px; margin-left:15px;">
                                            <!-- Image preview will be shown here -->
                                        </div>
                                </div>
                                </td>
                                <td>
                                    @if($variant->image)
                                    <img src="{{ asset('storage/' . $variant->image) }}" alt="Uploaded Image"
                                        width="100" height="100" style="margin-bottom: 10px; display: block;" />

                                    @endif
                                </td>

                                <td>
                                    <button type="button" class="btn btn-danger btn-sm btn-remove-row">
                                        x
                                    </button>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-info btn-sm btn-add-row">+</button>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                {{-- <td class="variant">
        <input
          type="text"
          name="type[]"
          class="form-control"
          placeholder="Enter Width of the Laminate"
        />
      </td>
       --}}
                                <td>
                                    <input type="color" name="color[]" value="" class="form-control"
                                        placeholder="Enter Color Number" onchange="updateColorName(this)">
                                    <!-- Display Selected Color Code -->
                                    <div style="display: flex; align-items: center;">
                                    <span id="colorName">  &nbsp;&nbsp;</span>
                                    <div class="box-color" style=" width: 20px; height: 20px;"></div>
                                </div>
                                </td>
                                <td><input type="text" name="variant[]"   class="form-control"  placeholder="Enter Color Name"  />
                                </td>
                                <td>
                                    <input type="text" name="qty[]" class="form-control" placeholder="Enter Quantity" min="0"/>
                                </td>
                               <!-- Buy Price Field -->
                                <td class="price-field" style="display: none;">
                                    <input type="text" name="price[]" onkeypress="return isNumberKey(event,this)"  class="form-control" placeholder="Enter Price" />
                                </td>
                                
                                <!-- Rental Fields -->
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_weekend[]" class="form-control" placeholder="Weekend Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_7days[]" class="form-control" placeholder="7-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text"onkeypress="return isNumberKey(event,this)"  name="rental_rate_14days[]" class="form-control" placeholder="14-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_21days[]" class="form-control" placeholder="21-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_month[]" class="form-control" placeholder="Monthly Rate" />
                                </td>

                                <td>
                                    <input type="text" name="sku[]" class="form-control" placeholder="Enter sku" />
                                </td>
                                <td>
                                <div style="display:flex;"><input type="file" name="images[]" class="form-control" placeholder="Select Image" />
                  <div class="image-preview" style="margin-top: 10px; margin-left:15px;">
            <!-- Image preview will be shown here -->
         </div></div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger btn-sm btn-remove-row">
                                        x
                                    </button>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-info btn-sm btn-add-row">+</button>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>

                </div>
                {{--
         <div class="row mt-3">
            <div class="col-md-12 col-lg-8">
               <p class="ptext">  Select Default Product Variant  </p>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-3 p-2">
               <select class="selectpicker form-control1" id="type" name="type">
                  <option value="" disabled="" >Select Option</option>
               </select>
            </div>
         </div>
         --}}
                <div class="row  mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="variant_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <span class="ml-1 mr-1" id="variant_next"> <a href="#" class="btn-yellow-all">NEXT <i
                                    class="fas text-black fa-arrow-right"></i> </a></span>
                    </div>
                </div>
            </div>
            <!-- ---------------------------------------------section4-------------------------- -->
            <div class="bg-white px-2 py-3 mt-5 mb-4 border-0 row rounded-4 d-none" id="attribute_div">
                <div class="row ">
                    <h5>Attributes</h5>
                </div>
                <div class="row ">
                    <!-- <div class="col-md-12 col-lg-4">
               <p class="ptext mt-3">Country of origin<span style="color: red">*</span></p>
            </div> -->
                    <!-- <div class="col-md-12 col-lg-8">
               <select class="selectpicker form-control1" id="country" name="country"
               value="{{ !empty($item->country_of_origin) ? $item->country_of_origin : "" }}"
               required="">
               <option value="" disabled hidden>Select Option</option>
               <option value="india">India</option>
               </select>
            </div> -->
                    <div class="col-md-12 col-lg-4">
                        <p class="ptext mt-3">Weight<span style="color: red">*</span></p>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-4 pb-3">
                    <select class="selectpicker form-control1 rounded-2" id="weight_type" name="weight_type" required="">
                        <option value="" disabled="" hidden>Select Weight</option>
                        <option value="1" {{ !empty($item->weight_unit) && $item->weight_unit == 1 ? 'selected' : '' }}>gm</option>
                        <option value="2" {{ !empty($item->weight_unit) && $item->weight_unit == 2 ? 'selected' : '' }}>Kg</option>
                        <option value="3" {{ !empty($item->weight_unit) && $item->weight_unit == 3 ? 'selected' : '' }}>Lbs</option>
                    </select>
                    </div>
                    <div class="col-sm-12 col-md-12 col-lg-4 pb-3">
                        <input type="number" name="weight" id="weight" placeholder="Weight " class="form-control"
                            value="{{ !empty($item->weight) ? $item->weight : '' }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 col-lg-6 form-outline pb-3">
                        <label>Manufactured By<span style="color:red;">*</span></label>
                        <input type="text" name="manufactured_by" id="manufactured_by" placeholder="Manufactured By"
                            class="form-control"
                            value="{{ !empty($item->manufactured_by) ? $item->manufactured_by : '' }}">
                    </div>
                    <div class="col-md-12 col-lg-6 form-outline pb-3">
                        <label>Features & Uses<span style="color:red;">*</span></label>
                        <input type="text" name="features" id="features" placeholder="Features" class="form-control "
                            value="{{ !empty($item->features) ? $item->features : '' }}">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 pb-3">
                        <label>Key Features</label>
                        <textarea id="key_features" name="key_features" class="form-control2"
                            value="">{{ !empty($item->key_features	) ? $item->key_features	 : "" }}</textarea>
                    </div>

                    <!-- <div class="bg-light p-3">
               <div class="row ">
                  <div class="col-lg-6 col-md-12 pb-3">
                     <label class="txt-styel">ISBN </label>
                     <input type="text" name="isbn" id="" placeholder="ISBN "
                     class="form-control"
                     value="{{ !empty($item->isbn) ? $item->isbn : "" }}">
                  </div>
                  <div class="col-lg-6 col-md-12 pb-3">
                     <label class="txt-styel">HSN </label>
                     <input type="text" name="hsn" id="" placeholder="HSN " class="form-control"
                     value="{{ !empty($item->hsn) ? $item->hsn : "" }}">
                  </div>
                  <div class="col-lg-6 col-md-12 pb-3">
                     <label class="txt-styel">SAC </label>
                     <input type="text" name="sac" id="" placeholder="SAC " class="form-control"
                     value="{{ !empty($item->sac) ? $item->sac : "" }}">
                  </div>
                  <div class="col-lg-6 col-md-12 pb-3">
                     <label class="txt-styel">UPC </label>
                     <input type="text" name="upc" id="" placeholder="UPC " class="form-control"
                     value="{{ !empty($item->upc) ? $item->upc : "" }}">
                  </div>
                  <div class="col-lg-6 col-md-12 pb-3">
                     <label class="txt-styel">File: </label>
                     <input type="text" name="file_size" id="" placeholder="File: "
                        class="form-control">
                  </div>
                  <div class="col-md-12 col-lg-6 form-outline  position-relative">
                     <label class="txt-styel">UPLOAD</label>
                     <input type="file" id="attribute_image" name="attribute_image"
                        class="file-box">
                     <p>Max file size is 1MB and max number of file is 1.</p>
                  </div>
               </div>
            </div> -->
                </div>
                <div class="mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="attribute_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <span class="ml-1 mr-1" id="attribute_next"> <a href="#" class="btn-yellow-all">NEXT <i
                                    class="fas text-black fa-arrow-right"></i> </a></span>
                    </div>
                </div>
            </div>
            <!-- ---------------------------------------------section5-------------------------- -->
            <div class="d-none bg-white mt-5 rounded-4 px-2 py-3 row mb-4" id="media_div">
                @if(empty($item))
                <div class="col-lg-3 col-md-12 col-sm-12">
                    <p class="ptext"> Images <span style="color:red;">*</span></p>
                </div>
                <div class="col-lg-9">
                    <input type="file" name="product_image[]" id="imgInp" accept="image/*" class="file-box"
                        {{-- onchange="image_upload()" --}}multiple onchange="imageUpload()"  />
                    <p class="text-secondary mt-2"><b> Image Disclaimer: </b>File type must be a .jpg,
                        .gif or .png smaller than 2MB and at least 800x1067 in 3:4 aspect ratio
                    </p>
                </div>
                <div id="productImagePreview" class="mt-3"></div>
                <!-- <div class="row">
                    <div class="col-md-12 col-lg-12 form-outline mb-2">
                        <div class="position-relative d-inline p-1">
                            <img class="d-none" id="blah0" src="#" alt="your image12" width="20%" height="100%" />
                        </div>
                        <div class="position-relative d-inline p-1">
                            <img class="d-none" id="blah1" src="#" alt="your image12" width="20%" height="100%" />
                        </div>
                        <div class="position-relative d-inline p-1">
                            <img class="d-none" id="blah2" src="#" alt="your image12" width="20%" height="100%" />
                        </div>
                        <div class="position-relative d-inline p-1">
                            <img class="d-none" id="blah3" src="#" alt="your image12" width="20%" height="100%" />
                        </div>
                    </div>
                </div> -->
                @else
                <div class="col-lg-3 col-md-12 col-sm-12">
                    <p class="ptext"> Image</p>
                    <input type="file" name="image" id="image" accept="image/*" onchange="image_upload1()"
                        class="file-box" value="{{ !empty($item->image) ? $item->image : '#' }}" />

                    <input type="hidden" name="delete_image" id="delete_image"
                        value="{{ !empty($item->image) ? $item->image : '#' }}">
                </div>
                <div class="col-lg-3 col-md-12 col-sm-12">
                    <p class="ptext"> Image1 / Video</p>
                    <input type="file" name="image1" id="image1" accept="image/*,video/*" onchange="image_upload2()"
                        class="file-box" value="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}" />
                    <input type="hidden" name="delete_image1" id="delete_image1"
                        value="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}">

                </div>
                <div class="col-lg-3 col-md-12 col-sm-12">
                    <p class="ptext"> Image2 / Video</p>
                    <input type="file" name="image2" id="image2" accept="image/*,video/*" onchange="image_upload3()"
                        class="file-box" value="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}" />
                    <input type="hidden" name="delete_image2" id="delete_image2"
                        value="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}">
                </div>
                <div class="col-lg-3 col-md-12 col-sm-12">
                    <p class="ptext"> Image3 / Video</p>
                    <input type="file" name="image3" id="image3" accept="image/*,video/*" onchange="image_upload4()"
                        class="file-box" value="{{ !empty($item->image3) ? asset('storage/'.$item->image3) : '#' }}" />
                    <input type="hidden" name="delete_image3" id="delete_image3"
                        value="{{ !empty($item->image3) ? asset('storage/'.$item->image3) : '#' }}">
                </div>
                <div class="row mt-2">
                    <div class="col-md-12 col-lg-12 form-outline mb-2 p-1">
                        @if(!empty($item->image))
                        <div class="position-relative d-inline-block p-2">

                                                        @if($ext == "mp4")
                            <video width="20%" height="100" id="blah0" controls
                                src="{{ !empty($item->image) ? asset('storage/'.$item->image) : '#' }}" class="vedio1">
                            </video>
                            <img class="image1 d-none" id="blah1"
                                src="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            @else
                            <img class="image1" id="blah0"
                                src="{{ !empty($item->image) ? asset('storage/'.$item->image) : '#' }}" alt="your image"
                                width="20%" height="100%" />
                            <video width="20%" height="100" id="blah0" controls class="vedio1 d-none"
                                src="{{ !empty($item->image) ? asset('storage/'.$item->image) : '#' }}" class="d-none">
                            </video>
                            @endif
                            <i id="icon1" onclick="icon_click1()" class="fa fa-times close-img "></i>

                        </div>
                        @else
                        <div class="position-relative d-inline-block p-2">

                            <video width="20%" height="100" id="blah0_v" class="vedio1 d-none" controls src="#"
                                class="d-none">
                            </video>
                            <img class="image1 d-none" id="blah0" src="#" alt="your image" width="20%" height="100%" />
                            <i id="icon1" onclick="icon_click1()" class="fa fa-times close-img d-none"></i>

                        </div>
                        @endif
                        @if(!empty($item->image1))
                        <div class="position-relative d-inline-block p-2">
                                                        @if($ext == "mp4")
                            <video width="20%" height="100" id="blah1" controls class="vedio2"
                                src="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}">
                            </video>

                            <img class="image2 d-none" id="blah1"
                                src="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            @else
                            <img class="image2" id="blah1"
                                src="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            <video width="20%" height="100" id="blah1" class="vedio2 d-none" controls
                                src="{{ !empty($item->image1) ? asset('storage/'.$item->image1) : '#' }}">
                            </video>
                            @endif
                            <i id="icon2" onclick="icon_click2()" class="fa fa-times close-img "></i>

                        </div>
                        @else
                        <div class="position-relative d-inline-block p-2">
                            <img class="image2 d-none" id="blah1" src="#" alt="your image" width="20%" height="100%" />
                            <video width="20%" height="100" id="blah1_v" class="vedio2 d-none" controls src="#">
                            </video>
                            <i id="icon2" onclick="icon_click2()" class="fa fa-times close-img d-none"></i>

                        </div>
                        @endif
                        @if(!empty($item->image2))
                        <div class="position-relative d-inline-block p-2">

                                                        @if($ext == "mp4")
                            <video width="20%" height="100" id="blah2" class="vedio3 " controls
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}">
                            </video>
                            <img class="image3 d-none" id="blah2"
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            @else
                            <img class="image3 " id="blah2"
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            <video width="20%" height="100" id="blah2" class="vedio3 d-none" controls
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image1) : '#' }}">
                            </video>
                            @endif
                            <i id="icon3" onclick="icon_click3()" class="fa fa-times close-img "></i>
                        </div>
                        @else
                        <div class="position-relative d-inline-block  p-2">
                            <img class="image3 d-none" id="blah2" src="#" alt="your image" width="20%" height="100%" />
                            <video width="20%" height="100" id="blah2_v" controls class="vedio3 d-none" src="#">
                            </video>
                            <i id="icon3" onclick="icon_click3()" class="fa fa-times close-img d-none"></i>

                        </div>
                        @endif
                        @if(!empty($item->image3))
                        <div class="position-relative d-inline-block  p-2">

                                                        @if($ext == "mp4")
                            <video width="20%" height="100" id="blah2" class="vedio4 " controls
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}">
                            </video>
                            <img class="image4 d-none" id="blah3"
                                src="{{ !empty($item->image3) ? asset('storage/'.$item->image3) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            @else
                            <img class="image4" id="blah3"
                                src="{{ !empty($item->image3) ? asset('storage/'.$item->image3) : '#' }}"
                                alt="your image" width="20%" height="100%" />
                            <video width="20%" height="100" id="blah3" class="vedio4 d-none" controls
                                src="{{ !empty($item->image2) ? asset('storage/'.$item->image2) : '#' }}">
                            </video>
                            @endif
                            <i id="icon4" onclick="icon_click4()" class="fa fa-times close-img "></i>

                        </div>
                    </div>
                    @else
                    <div class="position-relative d-inline-block  p-2">
                        <img class="image4 d-none" id="blah3" src="#" alt="your image" width="20%" height="100%" />
                        <video width="20%" height="100" id="blah3_v" class="vedio4 d-none" controls src="#">
                        </video>
                        <i id="icon4" onclick="icon_click4()" class="fa fa-times close-img d-none"></i>

                    </div>
                    @endif
                </div>
                @endif
                <div class="col-md-12 col-lg-3 form-outline p-2">
                    <p class="ptext"> Video</p>
                </div>
                <div class="col-md-12 col-lg-9 form-outline p-2">
                    <input type="text" name="video_url" id="video_url" placeholder="Video Url" class="form-control"
                        value="{{ !empty($item->video) ? $item->video : "" }}">
                </div>
                <div class="col-md-12 col-lg-3 form-outline p-2">
                    <p class="ptext"> Product Published</p>
                </div>
                <div class="col-md-12 col-lg-9 form-outline p-2">
                    <select class="selectpicker form-control1 rounded-2" id="publish" name="publish" required=""
                        value="{{ !empty($item->is_active) ? $item->is_active : "" }}">
                        <option value="" disabled="">Product Published</option>
                        <option value="1" selected="">Yes</option>
                        <option value="0">No</option>
                    </select>
                </div>
                <div class="col-md-12 col-lg-3 form-outline p-2">
                    <p class="ptext">Product Published From</p>
                </div> 
                <div class="col-md-12 col-lg-9 form-outline p-2">
                    <input type="date" name="publish_date" value="{{ !empty($item->publish_date) ? $item->publish_date : '' }}" id="" class="form-control">
                </div>
                <div class="mt-5">
                    <div class="d-flex justify-content-end">
                        <!-- <a href="/admin/items/create" class="btn-yellow-all " data-bs-toggle="modal"
                            data-bs-target="">DISCARD</a> -->
                        <span class="ml-1 mr-1" id="media_previous"> <a href="#" class="btn-yellow-all"><i
                                    class="fas text-black fa-arrow-left"></i> PREVIOUS</a></span>
                        <button class="btn-yellow-all" id="lastSubmit">{{ $button_text }} </button>
                    </div>
                </div>
            </div>
            <button class="buttonload d-none" id="loading">
                <i class="fa fa-spinner fa-spin"></i>
            </button>
        </div>
    </form>
    </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>- -->
    <!-- <script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script> -->
    <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
         $('#related_item').select2({
                placeholder: "Select products",
                allowClear: true
            });
        $(document).ready(function() {
          
           
            // Handle form display based on product type selection
            $('#selling_type').on('change', function() {
                var productType = $(this).val();

                if (productType === 'buy') {
                    $('#buy_form').show();
                    $('#rent_form').hide();
                    $('.price-field').show();
                    $('.rent-fields').hide();
                    $('#return_days_container').show();
                } else if (productType === 'rent') {
                    $('#buy_form').hide();
                    $('#rent_form').show();
                    $('.price-field').hide();
                    $('.rent-fields').show();
                    $('#return_days_container').hide(); // Hide the container
                    $('#return').val('');
                }
            });
            // Trigger change event on page load to display the correct form
            $('#selling_type').trigger('change');
        });
    </script>
    <script>
        ClassicEditor
        .create( document.querySelector( '#key_features' ) )
        .catch( error => {
        console.error( error );
        });
        ClassicEditor
        .create( document.querySelector( '#description' ) )
        .catch( error => {
        console.error( error );
        });
    </script>
    <script>

let fileArray = [];

function imageUpload() {
    const input = document.getElementById('imgInp');
    const previewContainer = document.getElementById('productImagePreview');

    // Update the fileArray with the selected files
    fileArray = Array.from(input.files);

    // Clear previous previews
    previewContainer.innerHTML = '';

    // Loop through the files
    for (let i = 0; i < fileArray.length; i++) {
        const file = fileArray[i];
        
        // Check if file is an image
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();

            reader.onload = function(e) {
                // Create a new container for the image and delete button
                const imageContainer = document.createElement('div');
                imageContainer.style.position = 'relative';
                imageContainer.style.display = 'inline-block';
                imageContainer.style.marginRight = '10px';
                
                // Create a new image element
                const img = document.createElement('img');
                img.src = e.target.result;
                img.classList.add('img-thumbnail');
                img.style.width = '150px'; // Set width as desired
                
                // Create a delete button
                const deleteButton = document.createElement('button');
                deleteButton.textContent = 'X';
                deleteButton.classList.add('btn', 'btn-danger');
                deleteButton.style.position = 'absolute';
                deleteButton.style.top = '5px';
                deleteButton.style.right = '5px';
                deleteButton.style.border = 'none';
                deleteButton.style.backgroundColor = 'rgba(255, 0, 0, 0.7)';
                deleteButton.style.color = 'white';
                deleteButton.style.borderRadius = '50%';
                deleteButton.style.width = '25px';
                deleteButton.style.height = '25px';
                deleteButton.style.display = 'flex';
                deleteButton.style.alignItems = 'center';
                deleteButton.style.justifyContent = 'center';
                deleteButton.style.cursor = 'pointer';

                // Append image and delete button to the container
                imageContainer.appendChild(img);
                imageContainer.appendChild(deleteButton);
                
                // Append the container to the preview container
                previewContainer.appendChild(imageContainer);

                // Add click event to delete button
                deleteButton.addEventListener('click', function() {
                    // Remove image from the preview
                    previewContainer.removeChild(imageContainer);

                    // Remove file from fileArray
                    const index = fileArray.indexOf(file);
                    if (index > -1) {
                        fileArray.splice(index, 1);
                        updateFileInput();
                    }
                });
            }

            // Read the file
            reader.readAsDataURL(file);
        }
    }
}

function updateFileInput() {
    const dataTransfer = new DataTransfer();
    fileArray.forEach(file => dataTransfer.items.add(file));
    document.getElementById('imgInp').files = dataTransfer.files;
}    document.getElementById('general_next').addEventListener('click', function(event) {
        let isValid = true;

        // Select the form fields
        const category = document.getElementById('category');
        const subcategory = document.getElementById('subcategory');
        const productCode = document.getElementById('product_code');
        const productTitle = document.querySelector('input[name="product_title"]');
        const material = document.getElementById('material');
        const selling_type = document.getElementById('selling_type');
        const seats = document.querySelector('input[name="seats"]');
    //    const returnDays = document.querySelector('input[name="return"]');

        // Clear previous validation errors
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(function(errorMessage) {
            errorMessage.remove();
        });

        // Function to display error message
        const showError = (element, message) => {
            const error = document.createElement('span');
            error.classList.add('error-message');
            error.style.color = 'red';
            error.innerHTML = message;
            element.parentElement.appendChild(error);
            isValid = false;
        };

        // Validate Category
        if (category.value === '') {
            showError(category, 'Please select a category');
        }
        if (selling_type.value === '') {
            showError(selling_type, 'Please select a Selling Type');
        }
        // Validate Sub Category
        //  if (subcategory.value === '') {
        //      showError(subcategory, 'Please select a subcategory');
        //  }

        // Validate Product Code
        if (productCode.value.trim() === '') {
            showError(productCode, 'Product code is required');
        }
        // Validate Product Title
        if (productTitle.value.trim() === '') {
            showError(productTitle, 'Product title is required');
        }
        //  // Validate Material
        //  if (material.value === '') {
        //      showError(material, 'Please select a material');
        //  }
        // Validate Seats
        if (seats.value.trim() === '' || isNaN(seats.value)) {
            showError(seats, 'Please enter a valid number for seats');
        }
        // Validate Return Days
        // if (returnDays.value.trim() === '' || isNaN(returnDays.value)) {
        //     showError(returnDays, 'Please enter a valid number of return days');
        // }
        // If the form is valid, execute the section toggle logic
        if (isValid) {
            // Hide the general section and show the inventory section
            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.remove('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            // Toggle the active state on the buttons
            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.add('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = 'white';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';
        } else {
            // If form is not valid, prevent submission
            event.preventDefault();
        }
    });

    // document.getElementById('inventory_next').addEventListener('click', function(event) {
    //     let isValid = true;

    //     // Clear previous validation errors
    //     const errorMessages = document.querySelectorAll('.error-message');
    //     errorMessages.forEach(function(errorMessage) {
    //         errorMessage.remove();
    //     });

    //     // Function to display error message
    //     const showError = (element, message) => {
    //         const error = document.createElement('span');
    //         error.classList.add('error-message');
    //         error.style.color = 'red';
    //         error.innerHTML = message;
    //         element.parentElement.appendChild(error);
    //         isValid = false;
    //     };

    //     // Select form fields
    //     const minPurchase = document.querySelector('input[name="min_purchase"]');
    //     const maxPurchase = document.querySelector('input[name="max_purchase"]');
    //     const stockAlert = document.querySelector('input[name="stock_alert"]');
    //     const mrp = document.querySelector('input[name="cost_price"]');
    //     const salePrice = document.querySelector('input[name="sale_price"]');
    //     const unitPrice = document.querySelector('input[name="unit_price"]');

    //     // Validate Minimum Purchase Quantity
    //     if (minPurchase.value.trim() === '' || isNaN(minPurchase.value) || parseInt(minPurchase.value) <= 0) {
    //         showError(minPurchase, 'Please enter a valid minimum purchase quantity');
    //     }
    //     // Validate Maximum Purchase Quantity
    //     if (maxPurchase.value.trim() === '' || isNaN(maxPurchase.value) || parseInt(maxPurchase.value) <= 0) {
    //         showError(maxPurchase, 'Please enter a valid maximum purchase quantity');
    //     }
    //     // Validate Stock Alert Quantity
    //     if (stockAlert.value.trim() === '' || isNaN(stockAlert.value) || parseInt(stockAlert.value) <= 0) {
    //         showError(stockAlert, 'Please enter a valid stock alert quantity');
    //     }
    //     // Validate MRP (Cost Price)
    //     if (mrp.value.trim() === '' || isNaN(mrp.value) || parseFloat(mrp.value) <= 0) {
    //         showError(mrp, 'Please enter a valid MRP price');
    //     }
    //     // Validate Sale Price
    //     if (salePrice.value.trim() === '' || isNaN(salePrice.value) || parseFloat(salePrice.value) <= 0) {
    //         showError(salePrice, 'Please enter a valid sale price');
    //     }
    //     // Ensure Sale Price is less than or equal to MRP
    //     if (parseFloat(salePrice.value) > parseFloat(mrp.value)) {
    //         showError(salePrice, 'Sale price cannot be greater than MRP');
    //     }
    //     // Validate Unit Price (optional but must be valid if entered)
    //     if (unitPrice.value.trim() !== '' && (isNaN(unitPrice.value) || parseFloat(unitPrice.value) <= 0)) {
    //         showError(unitPrice, 'Please enter a valid unit price');
    //     }
    //     // Ensure Sale Price is greater than or equal to Unit Price
    //     if (unitPrice.value.trim() !== '' && parseFloat(salePrice.value) < parseFloat(unitPrice.value)) {
    //         showError(salePrice, 'Sale price must be greater than or equal to unit price');
    //     }
    //     // If form is not valid, prevent submission
    //     if (!isValid) {
    //         event.preventDefault();
    //     } else {
    //         // Move to the next tab if form is valid
    //         document.getElementById('general_div').classList.add('d-none');
    //         document.getElementById('inventory_div').classList.add('d-none');
    //         document.getElementById('variant_div').classList.remove('d-none');
    //         document.getElementById('attribute_div').classList.add('d-none');
    //         document.getElementById('media_div').classList.add('d-none');

    //         document.getElementById('general_click').classList.remove('bg-active');
    //         document.getElementById('inventory_click').classList.remove('bg-active');
    //         document.getElementById('variant_click').classList.add('bg-active');
    //         document.getElementById('attribute_click').classList.remove('bg-active');
    //         document.getElementById('media_click').classList.remove('bg-active');
    //     }
    // });
    document.getElementById('inventory_next').addEventListener('click', function(event) {
    let isValid = true;

    // Clear previous validation errors
    const errorMessages = document.querySelectorAll('.error-message');
    errorMessages.forEach(function(errorMessage) {
        errorMessage.remove();
    });

    // Function to display error message
    const showError = (element, message) => {
        const error = document.createElement('span');
        error.classList.add('error-message');
        error.style.color = 'red';
        error.innerHTML = message;
        element.parentElement.appendChild(error);
        isValid = false;
    };

    const sellingType = document.getElementById('selling_type'); // Assuming 'selling_type' is the ID of the radio button
    const productType = sellingType ? sellingType.value : '';
    //alert(productType);
    // Select form fields common to both types
    const minPurchase = document.querySelector('input[name="min_purchase"]');
    const maxPurchase = document.querySelector('input[name="max_purchase"]');
    const stockAlert = document.querySelector('input[name="stock_alert"]');

    // Validate fields common to both types
    if (minPurchase.value.trim() === '' || isNaN(minPurchase.value) || parseInt(minPurchase.value) <= 0) {
        showError(minPurchase, 'Please enter a valid minimum purchase quantity');
    }
    if (maxPurchase.value.trim() === '' || isNaN(maxPurchase.value) || parseInt(maxPurchase.value) <= 0) {
        showError(maxPurchase, 'Please enter a valid maximum purchase quantity');
    }
    if (stockAlert.value.trim() === '' || isNaN(stockAlert.value) || parseInt(stockAlert.value) <= 0) {
        showError(stockAlert, 'Please enter a valid stock alert quantity');
    }

    if (productType === 'buy') {
        // Fields specific to "buy" type
        const mrp = document.querySelector('input[name="cost_price"]');
        const salePrice = document.querySelector('input[name="sale_price"]');
        const unitPrice = document.querySelector('input[name="unit_price"]');

        // Validate MRP (Cost Price)
        if (mrp.value.trim() === '' || isNaN(mrp.value) || parseFloat(mrp.value) <= 0) {
            showError(mrp, 'Please enter a valid MRP price');
        }
        if (salePrice.value.trim() === '' || isNaN(salePrice.value) || parseFloat(salePrice.value) <= 0) {
            showError(salePrice, 'Please enter a valid sale price');
        }
        if (parseFloat(salePrice.value) > parseFloat(mrp.value)) {
            showError(salePrice, 'Sale price cannot be greater than MRP');
        }
        if (unitPrice.value.trim() !== '' && (isNaN(unitPrice.value) || parseFloat(unitPrice.value) <= 0)) {
            showError(unitPrice, 'Please enter a valid unit price');
        }
        if (unitPrice.value.trim() !== '' && parseFloat(salePrice.value) < parseFloat(unitPrice.value)) {
            showError(salePrice, 'Sale price must be greater than or equal to unit price');
        }
    } else if (productType === 'rent') {
        // Fields specific to "rent" type
        const rentalWeekend = document.querySelector('input[name="rental_weekend"]');
        const rental7Days = document.querySelector('input[name="rental_7days"]');
        const rental14Days = document.querySelector('input[name="rental_14days"]');
        const rental21Days = document.querySelector('input[name="rental_21days"]');
        const rentalMonth = document.querySelector('input[name="rental_month"]');

        // Validate rental rates
        if (rentalWeekend.value.trim() === '' || isNaN(rentalWeekend.value) || parseFloat(rentalWeekend.value) <= 0) {
            showError(rentalWeekend, 'Please enter a valid weekend rental rate');
        }
        if (rental7Days.value.trim() === '' || isNaN(rental7Days.value) || parseFloat(rental7Days.value) <= 0) {
            showError(rental7Days, 'Please enter a valid 7-day rental rate');
        }
        if (rental14Days.value.trim() === '' || isNaN(rental14Days.value) || parseFloat(rental14Days.value) <= 0) {
            showError(rental14Days, 'Please enter a valid 14-day rental rate');
        }
        if (rental21Days.value.trim() === '' || isNaN(rental21Days.value) || parseFloat(rental21Days.value) <= 0) {
            showError(rental21Days, 'Please enter a valid 21-day rental rate');
        }
        if (rentalMonth.value.trim() === '' || isNaN(rentalMonth.value) || parseFloat(rentalMonth.value) <= 0) {
            showError(rentalMonth, 'Please enter a valid 1-month rental rate');
        }
    }
    // If form is not valid, prevent submission
    if (!isValid) {
       
        event.preventDefault();
    } else 
    {
        document.getElementById('general_div').classList.add('d-none');
        document.getElementById('inventory_div').classList.add('d-none');
        document.getElementById('variant_div').classList.remove('d-none');
        document.getElementById('attribute_div').classList.add('d-none');
        document.getElementById('media_div').classList.add('d-none');

        document.getElementById('general_click').classList.remove('bg-active');
        document.getElementById('inventory_click').classList.remove('bg-active');
        document.getElementById('variant_click').classList.add('bg-active');
        document.getElementById('attribute_click').classList.remove('bg-active');
        document.getElementById('media_click').classList.remove('bg-active');

        document.querySelector('#general_click .psmall').style.color = '#797474';
        document.querySelector('#inventory_click .psmall').style.color = '#797474';
        document.querySelector('#variant_click .psmall').style.color = 'white';
        document.querySelector('#attribute_click .psmall').style.color = '#797474';
        document.querySelector('#media_click .psmall').style.color = '#797474';
    }
});

    document.getElementById('attribute_next').addEventListener('click', function(event) {
        let isValid = true;

        // Clear previous validation errors
        const errorMessages = document.querySelectorAll('.error-message');
        errorMessages.forEach(function(errorMessage) {
            errorMessage.remove();
        });
        // Function to display error message
        const showError = (element, message) => {
            const error = document.createElement('span');
            error.classList.add('error-message');
            error.style.color = 'red';
            error.innerHTML = message;
            element.parentElement.appendChild(error);
            isValid = false;
        };
        // Select form fields
        const weightType = document.getElementById('weight_type');
        const weight = document.getElementById('weight');
        const manufacturedBy = document.getElementById('manufactured_by');
        const features = document.getElementById('features');
        const keyFeatures = document.getElementById('key_features');

        // Validate Weight Type
        if (weightType.value.trim() === '') {
            showError(weightType, 'Please select a weight type');
        }

        // Validate Weight
        if (weight.value.trim() === '' || isNaN(weight.value) || parseFloat(weight.value) <= 0) {
            showError(weight, 'Please enter a valid weight');
        }

        // Validate Manufactured By
        if (manufacturedBy.value.trim() === '') {
            showError(manufacturedBy, 'Please enter the manufacturer name');
        }

        // Validate Features
        if (features.value.trim() === '') {
            showError(features, 'Please enter the features');
        }

        //   // Validate Key Features
        //   if (keyFeatures.value.trim() === '') {
        //       showError(keyFeatures, 'Please enter the key features');
        //   }

        // If form is not valid, prevent submission
        if (!isValid) {
            event.preventDefault();
        } else {
            // Move to the next tab if form is valid
            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.remove('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.add('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = '#797474';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = 'white';
         }
    });

    // Click event for the "NEXT" button

    document.getElementById('variant_next').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent default action
    var isValid = true;

    var isVariantNoSelected = document.getElementById('is_variant_yes').checked;
    
    if (isVariantNoSelected) {
   
        // alert('mkm');
        // Clear previous error messages and hide the container
        const errorContainer = document.getElementById('error-container');
        errorContainer.innerHTML = '';
        errorContainer.style.display = 'none';

        // Initialize validation flag
        

        // Flags to track if each error type has already been displayed
        var colorErrorShown = false;
        var skuErrorShown = false;
        var qtyErrorShown = false;
        var priceErrorShown = false;
        var variantErrorShown = false;
        var imageErrorShown = false;

        // Collect all color values and check if they are unique
        var colors = [];
        $('input[name="color[]"]').each(function() {
            var colorVal = $(this).val().trim();
        // alert($(this).val());

            // Check if color value is empty
            if (colorVal === "" && !colorErrorShown) {
                errorContainer.innerHTML += '<p>Color cannot be empty.</p>';
                colorErrorShown = true;
                isValid = false;
            }
        });

        // Collect all SKU values and check if they are unique
        var skus = [];
        $('input[name="sku[]"]').each(function() {
            var skuVal = $(this).val().trim();

            // Check if SKU value is empty
            if (skuVal === "" && !skuErrorShown) {
                errorContainer.innerHTML += '<p>SKU cannot be empty.</p>';
                skuErrorShown = true;
                isValid = false;
            }

            // Check if SKU value is unique
            if (skus.includes(skuVal) && !skuErrorShown) {
                errorContainer.innerHTML += '<p>Duplicate SKU found. Each SKU must be unique.</p>';
                skuErrorShown = true;
                isValid = false;
            }
            skus.push(skuVal);
        });

        // Collect all quantity values and check if any are empty
        $('input[name="qty[]"]').each(function() {
            var qtyVal = $(this).val().trim();

            // Check if quantity value is empty
            if (qtyVal === "" && !qtyErrorShown) {
                errorContainer.innerHTML += '<p>Quantity cannot be empty.</p>';
                qtyErrorShown = true;
                isValid = false;
            }
        });

        // Collect all color name values and check if any are empty
        $('input[name="variant[]"]').each(function() {
            var variantVal = $(this).val().trim();

            // Check if quantity value is empty
            if (variantVal === "" && !variantErrorShown) {
                errorContainer.innerHTML += '<p>Color Name cannot be empty.</p>';
                variantErrorShown = true;
                isValid = false;
            }
        });

        // Check if the selling type is rent or buy and validate accordingly
        var sellingType =  $('#selling_type').val();
        
            // Validate rental fields if selling type is rent
            if (sellingType === 'rent') {
                $('input[name="rental_rate_weekend[]"]').each(function() {
                    var rentalVal = $(this).val().trim();
                    if (rentalVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>Weekend rental rate cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
                $('input[name="rental_rate_7days[]"]').each(function() {
                    var rentalVal = $(this).val().trim();
                    if (rentalVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>7-Day rental rate cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
                $('input[name="rental_rate_14days[]"]').each(function() {
                    var rentalVal = $(this).val().trim();
                    if (rentalVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>14-Day rental rate cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
                $('input[name="rental_rate_21days[]"]').each(function() {
                    var rentalVal = $(this).val().trim();
                    if (rentalVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>21-Day rental rate cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
                $('input[name="rental_rate_month[]"]').each(function() {
                    var rentalVal = $(this).val().trim();
                    if (rentalVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>Monthly rental rate cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
            } else if(sellingType === 'buy'){ // If selling type is not rent, validate price fields
                $('input[name="price[]"]').each(function() {
                    var priceVal = $(this).val().trim();

                    // Check if price value is empty
                    if (priceVal === "" && !priceErrorShown) {
                        errorContainer.innerHTML += '<p>Price cannot be empty.</p>';
                        priceErrorShown = true;
                        isValid = false;
                    }
                });
            }
    

        // Check if image is selected for new variants only
        $('input[name="images[]"]').each(function() {
            var $input = $(this);
            var hasImage = $input.val() !== ""; // Check if there's a file selected
            // If the input is for a new row and has no image selected
            if (!$input.closest('tr').find('img').length && !hasImage && !imageErrorShown) {
                errorContainer.innerHTML += '<p>Image is required for all new variants.</p>';
                imageErrorShown = true;
                isValid = false;
            }
        });
  
    // alert(!isValid);
        // If there are errors, show the error container
        if (!isValid) {
            errorContainer.style.display = 'block';
            return; // Stop further processing if there are errors
        }
    }
    // If all validations pass, proceed to the next action
    document.getElementById('general_div').classList.add('d-none');
    document.getElementById('inventory_div').classList.add('d-none');
    document.getElementById('variant_div').classList.add('d-none');
    document.getElementById('attribute_div').classList.remove('d-none');
    document.getElementById('media_div').classList.add('d-none');

    // Update navigation highlights
    document.getElementById('general_click').classList.remove('bg-active');
    document.getElementById('inventory_click').classList.remove('bg-active');
    document.getElementById('variant_click').classList.remove('bg-active');
    document.getElementById('attribute_click').classList.add('bg-active');
    document.getElementById('media_click').classList.remove('bg-active');

    document.querySelector('#general_click .psmall').style.color = '#797474';
    document.querySelector('#inventory_click .psmall').style.color = '#797474';
    document.querySelector('#variant_click .psmall').style.color = '#797474';
    document.querySelector('#attribute_click .psmall').style.color = 'white';
    document.querySelector('#media_click .psmall').style.color = '#797474';

    // Optionally redirect to another page
    // window.location.href = '/next-page'; // Example of redirect
});

    document.addEventListener('DOMContentLoaded', function() {
        // Get the button and image input element
        const lastSubmitButton = document.getElementById('lastSubmit');
        const imageInput = document.getElementById('imgInp');

        // Function to check if the image input has a file selected
        function checkImageField() {
            return imageInput.files.length > 0;
        }

        // Event listener for the lastSubmit button
        lastSubmitButton.addEventListener('click', function(event) {
            if (!checkImageField()) {
                event.preventDefault(); // Prevent form submission
                alert('Please upload an image before submitting.');
            }
        });
    });





    function checkCode(code) {

        $.ajax({
            type: "GET",
            url: '{{route('checkProductCode')}}',
            datatype: 'json',
            data: {
                'code': code,
            },
            success: function(data) {
                const obj = JSON.parse(data);
                if (obj.new.code == 1) {
                    document.getElementById('code_msg').style.display = "none";
                    document.getElementById("code_msg").innerHTML = "Product Code is Unique";
                    document.getElementById("code_msg").style.color = "green";
                    document.getElementById('general_next').disabled = false;
                    return true;
                } else {
                    document.getElementById('code_msg').style.display = "block";
                    document.getElementById("code_msg").innerHTML = "Please Enter Unique Product Code";
                    document.getElementById("code_msg").style.color = "red";
                    document.getElementById('general_next').disabled = true;
                    //   document.getElementById("product_code").focus();

                    // return false;
                }
            },
            complete: function() {},
            error: function() {}
        });

    }

    function isNumberKey(evt, obj) {

        // Only ASCII character in that range allowed
        // var ASCIICode = (evt.which) ? evt.which : evt.keyCode
        // if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
        //     return false;
        // return true;
        var charCode = (evt.which) ? evt.which : event.keyCode
        var value = obj.value;
        var dotcontains = value.indexOf(".") != -1;
        if (dotcontains)
            if (charCode == 46) return false;
        if (charCode == 46) return true;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }


    function checkValidPrice() {
        var cost_price = $('#cost_price').val();
        var sale_price = $('#sale_price').val();

        if (cost_price < sale_price) {
            $('#sale_price_Required_error').css('display', 'block');
        }
    }

    function checkValidPrice1() {
        var unit_price = $('#unit_price').val();
        var sale_price = $('#sale_price').val();

        if (sale_price < unit_price) {

            $('#sale_price_Required_error').css('display', 'block');
        }
    }

    function image_upload() {
        const fileInput = document.getElementById('imgInp');
        var files = [...fileInput.files];
        var i = 0;
        for (const f of files) {
            document.getElementById('blah' + i).classList.remove('d-none');
            document.getElementById('icon' + i).classList.remove('d-none');
            document.getElementById('blah' + i).src = URL.createObjectURL(f);

            i++;
        }

    }



    function image_upload1() {
        const fileInput = document.getElementById('image');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah0_v').removeClass('d-none');
            document.querySelector('.vedio1').classList.remove('d-none');
            document.querySelector('.image1').classList.add('d-none');
            document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah0').tagName == "VIDEO") {
                document.querySelector('.image1').classList.remove('d-none');
                document.querySelector('.vedio1').classList.add('d-none');
                document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio1').classList.add('d-none');
                document.querySelector('.image1').classList.remove('d-none');
                document.getElementById('blah0').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        //  document.getElementById('blah0').classList.remove('d-none');
        document.getElementById('icon1').classList.remove('d-none');

        document.getElementById('delete_image').value = 1;

    }

    function icon_click1() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];

        files.splice(1, 1);
        if (document.querySelector('.vedio2').classList.contains('vedio2')) {
            document.querySelector('.vedio2').classList.add('d-none');
        } else {
            document.querySelector('.image2').classList.add('d-none');
        }
        document.getElementById('blah0').classList.add('d-none');
        document.getElementById('delete_image').value = null;
        document.getElementById('icon1').classList.add('d-none')
    }


    function image_upload2() {
        const fileInput = document.getElementById('image1');
        var file = fileInput.files;

        if (fileInput.files[0].type == "video/mp4") {
            $('#blah1_v').removeClass('d-none');
            document.querySelector('.vedio2').classList.remove('d-none');
            document.querySelector('.image2').classList.add('d-none');
            document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah2').tagName == "VIDEO") {
                document.querySelector('.image2').classList.remove('d-none');
                document.querySelector('.vedio2').classList.add('d-none');
                document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio2').classList.add('d-none');
                document.querySelector('.image2').classList.remove('d-none');
                document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
            }

        }
        document.getElementById('icon2').classList.remove('d-none');
        document.getElementById('blah1').src = URL.createObjectURL(fileInput.files[0]);
        document.getElementById('delete_image1').value = 1;
    }

    function icon_click2() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];

        files.splice(1, 1);

        if (document.querySelector('.vedio2').classList.contains('vedio2')) {
            document.querySelector('.vedio2').classList.add('d-none');
        } else {
            document.querySelector('.image2').classList.add('d-none');
        }
        document.getElementById('blah1').classList.add('d-none');
        document.getElementById('delete_image1').value = null;
        document.getElementById('icon2').classList.add('d-none')
    }

    function image_upload3() {
        const fileInput = document.getElementById('image2');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah2_v').removeClass('d-none');
            document.querySelector('.vedio3').classList.remove('d-none');
            document.querySelector('.image3').classList.add('d-none');
            document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah3').tagName == "VIDEO") {
                document.querySelector('.image3').classList.remove('d-none');
                document.querySelector('.vedio3').classList.add('d-none');
                document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio3').classList.add('d-none');
                document.querySelector('.image3').classList.remove('d-none');
                document.getElementById('blah2').src = URL.createObjectURL(fileInput.files[0]);
            }
        }
        document.getElementById('icon3').classList.remove('d-none');
        document.getElementById('delete_image2').value = 1;
    }

    function icon_click3() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];

        files.splice(1, 1);
        if (document.querySelector('.vedio3').classList.contains('vedio3')) {
            document.querySelector('.vedio3').classList.add('d-none');
        } else {
            document.querySelector('.image3').classList.add('d-none');
        }
        document.getElementById('blah2').classList.add('d-none');
        document.getElementById('delete_image2').value = null;
        document.getElementById('icon3').classList.add('d-none')
    }

    function image_upload4() {
        const fileInput = document.getElementById('image3');
        var file = fileInput.files;
        if (fileInput.files[0].type == "video/mp4") {
            $('#blah3_v').removeClass('d-none');
            document.querySelector('.vedio4').classList.remove('d-none');
            document.querySelector('.image4').classList.add('d-none');
            document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
        } else {
            if (document.getElementById('blah3').tagName == "VIDEO") {
                document.querySelector('.image4').classList.remove('d-none');
                document.querySelector('.vedio4').classList.add('d-none');
                document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
            } else {
                document.querySelector('.vedio4').classList.add('d-none');
                document.querySelector('.image4').classList.remove('d-none');
                document.getElementById('blah3').src = URL.createObjectURL(fileInput.files[0]);
            }
        }

        document.getElementById('icon4').classList.remove('d-none');
        document.getElementById('delete_image3').value = 1;
    }

    function icon_click4() {
        const fileInput = document.getElementById('image');
        var files = [...fileInput.files];

        files.splice(1, 1);
        if (document.querySelector('.vedio4').classList.contains('vedio4')) {
            document.querySelector('.vedio4').classList.add('d-none');
        } else {
            document.querySelector('.image4').classList.add('d-none');
        }
        document.getElementById('blah3').classList.add('d-none');
        document.getElementById('delete_image3').value = null;
        document.getElementById('icon4').classList.add('d-none')
    }

    function loader(iRun) {
        var loader = document.getElementById('loading').classList;

        if (iRun) {
            loader.remove('d-none');
        } else {
            loader.add('d-none');
        }
    }

    function get_subcategory() {
        loader(true);
        var category = document.getElementById('category').value;

        $.ajax({
            type: 'GET',
            url: '{{route('admin.get_subcategory')}}',
            datatype: 'json',
            data: {
                'id': category,
            },
            success: function(data) {
                loader(false);
                const obj = JSON.parse(data);
                var subcategories = obj.new.subcategories;
                if (obj.new.code == 1) {
                    var select = $('select[name=subcategory]');
                    select.empty();
                    select.append(
                        '<option value="" selected disabled hidden>Select Sub Category</option>');
                    $.each(subcategories, function(key, value) {
                        select.append('<option value=' + value.id + '>' + value.name + '</option>');
                    });
                }
            },
            complete: function() {},
            error: function() {},
        });

    }

    $(document).ready(function() {
        loader(false);

        $('#icon0').click(function() {
            const fileInput = document.getElementById('imgInp');
            var files = [...fileInput.files];
            files.splice(0, 1);
            document.getElementById('blah0').classList.add('d-none');
            document.getElementById('icon0').classList.add('d-none');
        });

        $('#icon1').click(function() {
            const fileInput = document.getElementById('imgInp');
            var files = [...fileInput.files];

            files.splice(1, 1);
            document.getElementById('blah1').classList.add('d-none');
            document.getElementById('icon1').classList.add('d-none');
        });

        $('#icon2').click(function() {
            const fileInput = document.getElementById('imgInp');

            var files = [...fileInput.files];

            files.splice(2, 1);
            document.getElementById('blah2').classList.add('d-none');
            document.getElementById('icon2').classList.add('d-none');

        });

        $('#icon3').click(function() {
            const fileInput = document.getElementById('imgInp');

            var files = [...fileInput.files];

            files.splice(2, 1);
            document.getElementById('blah3').classList.add('d-none');
            document.getElementById('icon3').classList.add('d-none');

        });

        $('#general_click').click(function() {

            document.getElementById('general_div').classList.remove('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = 'white';
            document.querySelector('#inventory_click .psmall').style.color = '#797474';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';
        });

        $('#inventory_click').click(function() {
            //   alert('gjggm');
            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.remove('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.add('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = 'white';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';
            
            

        });

        $('#variant_click').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.remove('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.add('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = '#797474';
            document.querySelector('#variant_click .psmall').style.color = 'white';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = '#797474';

        });

        $('#attribute_click').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.remove('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.add('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = '#797474';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = 'white';
            document.querySelector('#media_click .psmall').style.color = '#797474';

        });

        $('#media_click').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.remove('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.add('bg-active');

            document.querySelector('#general_click .psmall').style.color = '#797474';
            document.querySelector('#inventory_click .psmall').style.color = '#797474';
            document.querySelector('#variant_click .psmall').style.color = '#797474';
            document.querySelector('#attribute_click .psmall').style.color = '#797474';
            document.querySelector('#media_click .psmall').style.color = 'white';

        });

        // for next button

        $('#general_next').click(function() {

            //   document.getElementById('general_div').classList.add('d-none');
            //   document.getElementById('inventory_div').classList.remove('d-none');
            //   document.getElementById('variant_div').classList.add('d-none');
            //   document.getElementById('attribute_div').classList.add('d-none');
            //   document.getElementById('media_div').classList.add('d-none');

            //   document.getElementById('general_click').classList.remove('bg-active');
            //   document.getElementById('inventory_click').classList.add('bg-active');
            //   document.getElementById('variant_click').classList.remove('bg-active');
            //   document.getElementById('attribute_click').classList.remove('bg-active');
            //   document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#inventory_next').click(function() {

            //   document.getElementById('general_div').classList.add('d-none');
            //   document.getElementById('inventory_div').classList.add('d-none');
            //   document.getElementById('variant_div').classList.remove('d-none');
            //   document.getElementById('attribute_div').classList.add('d-none');
            //   document.getElementById('media_div').classList.add('d-none');

            //   document.getElementById('general_click').classList.remove('bg-active');
            //   document.getElementById('inventory_click').classList.remove('bg-active');
            //   document.getElementById('variant_click').classList.add('bg-active');
            //   document.getElementById('attribute_click').classList.remove('bg-active');
            //   document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#variant_next').click(function() {

            //   document.getElementById('general_div').classList.add('d-none');
            //   document.getElementById('inventory_div').classList.add('d-none');
            //   document.getElementById('variant_div').classList.add('d-none');
            //   document.getElementById('attribute_div').classList.remove('d-none');
            //   document.getElementById('media_div').classList.add('d-none');

            //   document.getElementById('general_click').classList.remove('bg-active');
            //   document.getElementById('inventory_click').classList.remove('bg-active');
            //   document.getElementById('variant_click').classList.remove('bg-active');
            //   document.getElementById('attribute_click').classList.add('bg-active');
            //   document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#attribute_next').click(function() {

            //   document.getElementById('general_div').classList.add('d-none');
            //   document.getElementById('inventory_div').classList.add('d-none');
            //   document.getElementById('variant_div').classList.add('d-none');
            //   document.getElementById('attribute_div').classList.add('d-none');
            //   document.getElementById('media_div').classList.remove('d-none');

            //   document.getElementById('general_click').classList.remove('bg-active');
            //   document.getElementById('inventory_click').classList.remove('bg-active');
            //   document.getElementById('variant_click').classList.remove('bg-active');
            //   document.getElementById('attribute_click').classList.remove('bg-active');
            //   document.getElementById('media_click').classList.add('bg-active');

        });

        // for previous button

        $('#inventory_previous').click(function() {

            document.getElementById('general_div').classList.remove('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.add('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#variant_previous').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.remove('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.add('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#attribute_previous').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.remove('d-none');
            document.getElementById('attribute_div').classList.add('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.add('bg-active');
            document.getElementById('attribute_click').classList.remove('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

        });

        $('#media_previous').click(function() {

            document.getElementById('general_div').classList.add('d-none');
            document.getElementById('inventory_div').classList.add('d-none');
            document.getElementById('variant_div').classList.add('d-none');
            document.getElementById('attribute_div').classList.remove('d-none');
            document.getElementById('media_div').classList.add('d-none');

            document.getElementById('general_click').classList.remove('bg-active');
            document.getElementById('inventory_click').classList.remove('bg-active');
            document.getElementById('variant_click').classList.remove('bg-active');
            document.getElementById('attribute_click').classList.add('bg-active');
            document.getElementById('media_click').classList.remove('bg-active');

        });

    });
    </script>
    <script>
       
       function updateColorName(colorPicker) {
        const parentDiv = colorPicker.nextElementSibling; // Get the wrapper div
        const colorNameElement = parentDiv.querySelector('#colorName'); // Get the <span> inside the wrapper
        const boxColorElement = parentDiv.querySelector('.box-color'); // Get the <div> with class 'box-color'
        
        // Update the <span> with the selected color code
        colorNameElement.textContent = colorPicker.value;

        // Update the <div> background color to the selected color
        boxColorElement.style.backgroundColor = colorPicker.value;
    }
    $(document).ready(function() {

        let optionsLen = 1;
        $(document).on('click', '.btn-add', function() {
            // alert('jhvhj');
            $(this).hide();
            optionsLen++;
            $('#more-options').append(`<div class="row mb-2">
   <div class="col-4">
   <select class="form-control" style="width: 120%;">
   <option value="size">Size</option>
   <option value="color">Color</option>
   </select>
   </div>
   <div class="col-6">
   <input class="form-control tags-input" type="text" />
   </div>
   <div class="col-2">
   <button type="button" class="btn btn-danger btn-sm btn-remove">x</button>
   <button type="button" class="btn btn-info btn-sm btn-add">+</button>
   </div>
   </div>`);
        });
        $(document).on('click', '.btn-remove', function() {
            optionsLen--;
            $(this).parent().parent().remove();
        });

        
        function generateVariants() {
            let variants = '';
            const selects = $('#more-options').find('select');
            for (let i = 0; i < selects.length; i++) {
                // fetching selects and setting select for each option
                const optionsValue = $(selects[i]).find(':selected').val();
                const input = $(selects[i]).closest('.row').find('input[type="text"]');
                variants += `<select name="type[]" class="form-control ${optionsValue}"></select>`;
                generateOption(input);
            }

            return variants;
        }

        $(document).ready(function() {
            function previewImage(input) {
                const fileInput = input;
                const file = fileInput.files[0];
                const previewContainer = fileInput.closest('td').querySelector('.image-preview');

                // Clear any existing preview
                previewContainer.innerHTML = '';

                if (file) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        // Create an image element
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px'; // Set the width for the preview
                        img.style.height = '100px'; // Set the height for the preview
                        img.style.objectFit = 'cover'; // Maintain aspect ratio

                        // Append the image to the preview container
                        previewContainer.appendChild(img);
                    };

                    // Read the file as a data URL
                    reader.readAsDataURL(file);
                }
            }

            $(document).on('change', 'input[type="file"]', function() {
                previewImage(this);
            });
            $(document).on('click', '.btn-add-row', function() {
                // $(this).hide();
                $('#tbody').append(`<tr>
            
            <td><input type="color" name="color[]" class="form-control" placeholder="Enter color" value="" onchange="updateColorName(this)"/>
            <div style="display: flex; align-items: center;">
                                    <span id="colorName">  &nbsp;&nbsp;</span>
                                    <div class="box-color" style=" width: 20px; height: 20px;"></div>
                                </div></td>
            <td><input type="text" name="variant[]"   class="form-control"  placeholder="Enter Color Name"  />
            </td>
            <td><input type="text" name="qty[]" class="form-control" placeholder="Enter qty" min="1"/></td>   
             
                                <td class="price-field" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="price[]" class="form-control" placeholder="Enter Price" />
                                </td>
                                
                               
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_weekend[]" class="form-control" placeholder="Weekend Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_7days[]" class="form-control" placeholder="7-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_14days[]" class="form-control" placeholder="14-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_21days[]" class="form-control" placeholder="21-Day Rate" />
                                </td>
                                <td class="rent-fields" style="display: none;">
                                    <input type="text" onkeypress="return isNumberKey(event,this)"  name="rental_rate_month[]" class="form-control" placeholder="Monthly Rate" />
                                </td>
            <td><input type="text" name="sku[]" class="form-control" placeholder="Enter sku" /></td>
            <td><div style="display:flex;"><input type="file" name="images[]" class="form-control" placeholder="Select Image" />
                  <div class="image-preview" style="margin-top: 10px; margin-left:15px;">
            <!-- Image preview will be shown here -->
         </div></div></td>
   <td>
       <button type="button" class="btn btn-danger btn-sm btn-remove-row">x</button>
       
       <button type="button" class="btn btn-info btn-sm btn-add-row">+</button>
       </td>
   </tr>`);
   var productType =  $('#selling_type').val();
        if (productType === 'buy') {
            $('.price-field').show();
            $('.rent-fields').hide();
        } else if (productType === 'rent') {
            $('.price-field').hide();
            $('.rent-fields').show();
        }
            });
           // Handle selling_type change to toggle fields
    

        });

        $(document).on('click', '.btn-remove-row', function() {
            console.log('Clicked');
            $(this).parent().parent().remove();
        });

        // $(".tags-input").keypress(function(e) {
        //   console.log('pressed')
        //   var code = e.keyCode || e.which;
        //   if(code == 32) {
        //     //Enter keycode
        //     generateOption($(this));

        //   }
        // });

        function generateOption(ele) {
            const values = ele.val();
            const arr = values.split(' ');
            const selectedOption = $(ele).closest('.row').find('select option:selected').val();
            // const foundValues = $(`select option[value="${selectedOption}"]`).closest('.row').find('input[type="text"]').val();
            // console.log(foundValues);
            let options = '';
            for (let i = 0; i < arr.length; i++) {
                options += `<option value="${arr[i]}">${arr[i]}</option>`;
            }

            $('.size').append(options);
            // console.log($(document).find("select .size"))
            // $(document).find("."+selectedOption).append(options);
        }

    });
    </script>
    <script>
    document.addEventListener('click', () => {
        const costPrice = document.querySelector('[name="cost_price"]');
        const salePrice = document.querySelector('[name="sale_price"]');
        const unitPrice = document.querySelector('[name="unit_price"]');

        costPrice.addEventListener('change', validatePrice);
        salePrice.addEventListener('change', validatePrice);
        unitPrice.addEventListener('change', validatePrice);

        function validatePrice() {
            const costPrice = document.querySelector('[name="cost_price"]');
            const salePrice = document.querySelector('[name="sale_price"]');
            const unitPrice = document.querySelector('[name="unit_price"]');

            if (costPrice.valueAsNumber && costPrice.valueAsNumber < salePrice.valueAsNumber) {
                alert('MRP can nt be less than sale price');
            }
            if (salePrice.valueAsNumber && costPrice.valueAsNumber < unitPrice.valueAsNumber) {
                alert('Sale price can nt be less than unit price');
            }
        }
    });
    </script>
    @endsection