@extends('user.header')
@section('userContent')
  @include('extensions.alerts')

  <div class="content-wrapper" style="min-height: 1019px;">
    <div class="container-full">
      <section class="content">
        <form action="{{ route('admin.products.store') }}" method="post" enctype="multipart/form-data">
          @csrf
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="row">
                  <div class="col-md-12">
                    <div class="box-header with-border">
                      <div class="row">
                        <div class="col-md-6">
                          <h4 class="box-title"><i data-feather='package'></i> PRODUCT BASIC INFO</h4>
                        </div>
                        <div class="col-md-6 text-right">
                          <div class="d-grid gap-2 d-md-block">
                            <a href="{{ route('admin.products.index', 'wholesale') }}"
                              class="btn btn-primary rounded-0 btn-sm btn-block">All Product</a>
                            <a href="javascript:;" class="btn btn-primary rounded-0 btn-sm btn-block">Edit Product</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="box-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="home4" role="tabpanel">
                      <div class="col-sm-12">
                        <div class="row grey-bg-clr">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label">Product Title *</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="name" value="{{ old('name') }}"
                                  placeholder="Product Title" required maxlength="200">
                              </div>
                            </div>
                          </div>

                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Product SKU *</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="sku" value="{{ old('sku') }}"
                                  placeholder="Product SKU" required>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Product Barcode</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="barcode" value="{{ old('barcode') }}"
                                  placeholder="Product Barcode" maxlength="100">
                              </div>
                            </div>
                          </div>

                          <div class="col-md-2">
                            <div class="form-group">
                              <label for="intType3" class="form-label">Product Seller</label>
                              <select class="form-select" name="seller_id">
                                <option value="">Select
                                </option>
                                @foreach ($sellers as $seller)
                                  <option @if (old('seller_id') === $seller->id) selected @endif value="{{ $seller->id }}">
                                    {{ ucwords($seller->biz_name) }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>

                          @if (getDropdowns('Product Condition')->displayflag === 1)
                            <div class="col-md-2">
                              <div class="form-group">
                                <label for="intType3"
                                  class="form-label">{{ getDropdowns('Product Condition')->dropdown_name }}</label>
                                <select class="form-select" name="product_condition" @if (getDropdowns('Product Condition')->dropdown_type === 'multiple') multiple @endif>
                                  <option value="">Select
                                  </option>
                                  @foreach (getDropdowns('Product Condition')->dropdownValues as $dropdown)
                                    <option @if (old('product_condition') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                      {{ $dropdown->dropdown_value }}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          @endif
                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Product Category *</label>
                              <select data-type='sub-category' class="form-select category"
                                data-placeholder="Type to search cities" name="category[]" required
                                onchange="getMoreCategories(this)">
                                <option value="">Select *</option>
                                @foreach ($categories as $category)
                                  <option @if (old('category') != null) @if (in_array($category->id, old('category'))) selected @endif @endif value="{{ $category->id }}">
                                    {{ $category->category_name }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                          <div class="sub-categories col-md-3"></div>
                          <div class="sub-sub-categories col-md-3"></div>
                          <div class="sub-sub-sub-categories col-md-3"></div>
                          <div class="sub-sub-sub-sub-categories col-md-3"></div>

                        </div>
                      </div>

                      <div class='row  grey-bg-clr'>
                        <h5 class="mb-0"><i data-feather="git-commit"></i> PRODUCT ATTRIBUTES</h5>
                        <div class="col-md-12">
                          <hr>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-12">
                          <div class="row">
                          </div>
                          <div class="row more-filters">
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box">
              <div class="box-header with-border">
                <h4 class="box-title"><i data-feather='at-sign'></i> PRICING & IMAGES</h4>
              </div>

              <div class="box-body">
                <div class="tab-content">
                  <div class="tab-pane active" id="home4" role="tabpanel">
                    <div class="col-sm-12">
                      <div class="row mb-20 mt-2">
                        <div class="col-md-4">
                          <input @if (old('variant_type') === 'wholesale') checked @endif type="radio" id="variant_type1" name="variant_type"
                            value="wholesale" class="variant-checkbox" required onchange="getVariantType()">
                          <label for="variant_type1" style="margin-bottom:0">This is a whole sale product</label>
                        </div>
                        <div class="col-md-4">
                          <input @if (old('variant_type') === 'single') checked @endif type="radio" id="variant_type2" name="variant_type"
                            value="single" class="variant-checkbox" required onchange="getVariantType()">
                          <label for="variant_type2" style="margin-bottom:0">This is a retail product</label>
                        </div>
                        <div class="col-md-4 d-none variant-checkbox-div">
                          <input @if (old('have_options') === '1') checked @endif type="checkbox" id="have_options1" name="have_options" value="1"
                            class="variant-checkbox have-options" onchange="getVariantType()">
                          <label for="have_options1" style="margin-bottom:0">This product has options, like size or
                            color</label>
                        </div>
                      </div>
                      <div class="row grey-bg-clr">
                        <h5 class="mb-0"> <i data-feather="dollar-sign"></i>PRICING & STOCK</h5>
                        <div class="col-md-12">
                          <hr>
                        </div>
                        <div class="clearfix"></div>

                        {{-- js will generate template for pricing here --}}
                        <div class="more-pricing">
                        </div>
                        <div class="col-12 my-2 text-right d-none more-pricing-btn">
                          <span class='text-dark' style="cursor: pointer;" onclick="morePricingTemplate()"
                            title="Add more"><i class="fa fa-plus"></i></span>
                        </div>

                      </div>

                      <div class="row mt-30">
                        <h5 class="mb-0"><i data-feather='image'></i> IMAGES</h5>
                      </div>
                      <div class="row mt-30 grey-bg-clr">
                        <div class="col-md-6">
                          <div class=" img-upload-form">
                            <p style="margin:0">
                              <label for="upload_imgs" class="button hollow text-center">
                                <img style="cursor:pointer;" onclick="document.querySelector('.product-images').click()"
                                  src="{{ asset('allUsers/img-upload-thumbnail.png') }}"> <br>Upload up to 6
                                photos</label>
                              <input class="product-images d-none" type="file" name="product_images[]"
                                accept="image/png, image/gif, image/jpeg, image/jpg, image/webp, image/svg" multiple>
                            </p>
                          </div>
                        </div>
                        <div class="row" id='myImg'>

                        </div>
                      </div>

                      <div class="row mt-30 grey-bg-clr">
                        <h5 class="mb-0"><i data-feather='edit-3'></i> DESCRIPTION & TERMS</h5>
                        <div class="col-md-12">
                          <hr />
                        </div>
                      </div>
                      <div class="row grey-bg-clr">
                        <div class="col-md-12">
                          <label class="form-label">Description (2500 Character)</label>
                          <textarea name="description" id="summernote">{{ old('description') }}</textarea>
                        </div>
                        <div class="col-md-12 mt-4">
                          <label class="form-label">State warranty terms</label>
                          <textarea name="warranty_terms" id="summernote2">{{ old('warranty_terms') }}</textarea>
                        </div>
                        <div class="col-md-12 mt-4">
                          <label class="form-label">State Return and exchange policy</label>
                          <textarea name="return_and_exchange_policy"
                            id="summernote3">{{ old('return_and_exchange_policy') }}</textarea>
                        </div>
                        <div class="col-md-12 mt-3"></div>
                        @if (getDropdowns('Warranty Period & Site')->displayflag === 1)
                          <div class="col-md-12">
                            <div class="form-group">
                              <label for="intType3"
                                class="form-label">{{ getDropdowns('Warranty Period & Site')->dropdown_name }}</label>
                              <select class="form-select" name="warranty_period" @if (getDropdowns('Warranty Period & Site')->dropdown_type === 'multiple') multiple @endif>
                                <option value="">Select {{ getDropdowns('Warranty Period & Site')->dropdown_name }}
                                </option>
                                @foreach (getDropdowns('Warranty Period & Site')->dropdownValues as $dropdown)
                                  <option @if (old('warranty_period') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                    {{ $dropdown->dropdown_value }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        @endif

                        {{-- <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label"> Select Closing Date</label>
                              <input type="date" class="form-control" name="closing_date"
                                value="{{ old('closing_date') }}" />
                            </div>
                          </div>

                          <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label"> Select Closing Time</label>
                              <input type="time" class="form-control" name="closing_time"
                                value="{{ old('closing_time') }}" />
                            </div>
                          </div> --}}

                      </div>

                      <div class="box mt-4">
                        {{-- <div class="box-header">
                            <h4 class="box-title">SHIPPING GROUP</h4>
                          </div> --}}
                        {{-- <div class="box-body"> --}}
                        <h5 class="mb-0"><i data-feather='truck'></i> SHIPPING & DELIVERY</h5>
                        <div class="col-md-12">
                          <hr>
                        </div>
                        <div class="clearfix"></div>

                        <div class="row grey-bg-clr">
                          <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label">Product Weight(Gm/Kg)</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" maxlength="100" name="weight"
                                  value="{{ old('weight') }}" placeholder="Product Weight(Gm/Kg)">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label">L X B X H</label>
                              <div class="input-group mb-3">
                                <input type="number" min="0" steps='0.01'
                                  onKeyPress="if(this.value.length===7) return false;" class="form-control"
                                  name="length" value="{{ old('length') }}" placeholder="L">
                                <input type="number" min="0" steps='0.01'
                                  onKeyPress="if(this.value.length===7) return false;" class="form-control"
                                  name="breadth" value="{{ old('breadth') }}" placeholder="B">
                                <input type="number" min="0" steps='0.01'
                                  onKeyPress="if(this.value.length===7) return false;" class="form-control"
                                  name="height" value="{{ old('height') }}" placeholder="H">
                              </div>
                            </div>
                          </div>
                          {{-- <div class="col-md-4">
                              <div class="form-group">
                                <label class="form-label">L X B X H</label>
                                <div class="input-group mb-3">
                                  <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                  <input type="text" class="form-control" maxlength="100" name="lbh"
                                    value="{{ old('lbh') }}" placeholder="L X B X H">
                                </div>
                              </div>
                            </div> --}}
                          <div class="col-md-4">
                            <div class="form-group">
                              <label class="form-label">Pickup Available</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" maxlength="100" name="pickup_availability"
                                  value="{{ old('pickup_availability') }}" placeholder="Pickup Available">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="form-group row">
                              <label class="form-label">Delivery Options</label>
                              <br />
                              <div class='col-md-4'>
                                <input @if (old('delivery_options') != null) @if (in_array('Price includes delivery', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option1"
                                  name="delivery_option[]" value="Price includes delivery" class=" ">
                                <label for="delivery_option1" style="margin-bottom:0">Price includes delivery</label>
                              </div>
                              <div class='col-md-4'>
                                <input @if (old('delivery_options') != null) @if (in_array('Specify own shipping cost', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option2"
                                  name="delivery_option[]" value="Specify own shipping cost" class=" ">
                                <label for="delivery_option2" style="margin-bottom:0">Specify own shipping cost</label>
                              </div>

                              <div class='col-md-4'>

                                <input @if (old('delivery_options') != null)
                                @if (in_array('Requires legal clearance before shipment', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option3" name="delivery_option[]"
                                value="Requires legal
                                clearance before
                                shipment" class=" ">
                                <label for="delivery_option3" style="margin-bottom:0">Requires legal clearance before
                                  shipment</label>
                              </div>

                              <div class='col-md-4'>

                                <input @if (old('delivery_options') != null) @if (in_array('Free shipping within Singapore', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option4"
                                  name="delivery_option[]" value="Free shipping within Singapore" class=" ">
                                <label for="delivery_option4" style="margin-bottom:0">Free shipping within
                                  Singapore</label>
                              </div>
                              <div class='col-md-4'>

                                <input @if (old('delivery_options') != null) @if (in_array('Specify order preparation & delivery time for pre-order', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option5"
                                  name="delivery_option[]" value="Specify order preparation & delivery time for pre-order"
                                  class=" ">
                                <label for="delivery_option5" style="margin-bottom:0">Specify order preparation &
                                  delivery
                                  time
                                  for pre-order</label>
                              </div>
                              <div class='col-md-4'>

                                <input @if (old('delivery_options') != null) @if (in_array('Has limited ready stock due to its high value', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option6"
                                  name="delivery_option[]" value="Has limited ready stock due to its high value"
                                  class=" ">
                                <label for="delivery_option6" style="margin-bottom:0">Has limited ready stock due to its
                                  high
                                  value</label>
                              </div>

                              <div class='col-md-4'>


                                <input @if (old('delivery_options') != null) @if (in_array('Calculate courier costs and select courier', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option7"
                                  name="delivery_option[]" value="Calculate courier costs and select courier"
                                  class=" ">
                                <label for="delivery_option7" style="margin-bottom:0">Calculate courier costs and select
                                  courier</label>

                              </div>

                              <div class='col-md-4'>


                                <input @if (old('delivery_options') != null) @if (in_array('Requires special logistics arrangements', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option8"
                                  name="delivery_option[]" value="Requires special logistics arrangements"
                                  class=" ">
                                <label for="delivery_option8" style="margin-bottom:0">Requires special logistics
                                  arrangements</label>
                              </div>

                              <div class='col-md-4'>


                                <input @if (old('delivery_options') != null) @if (in_array('Is customised, made-to-order, or handmade', old('delivery_option'))) checked @endif @endif type="checkbox" id="delivery_option9"
                                  name="delivery_option[]" value="Is customised, made-to-order, or handmade"
                                  class="">
                                <label for="delivery_option9" style="margin-bottom:0">Is customised, made-to-order, or
                                  handmade</label>

                              </div>

                            </div>
                          </div>
                        </div>

                        {{-- </div> --}}
                      </div>

                      <div class="row grey-bg-clr">
                        <div class="clearfix"></div>

                        <h5 class="mb-0"><i data-feather='credit-card'></i> PAYMENT OPTIONS</h5>
                        <div class="col-md-12">
                          <hr>
                        </div>
                        <div class="clearfix"></div>
                        @if (getDropdowns('Select Pay')->displayflag === 1)
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="intType3"
                                class="form-label">{{ getDropdowns('Select Pay')->dropdown_name }}</label>
                              <select class="form-select" name="pay" @if (getDropdowns('Select Pay')->dropdown_type === 'multiple') multiple @endif>
                                <option value="">Select</option>
                                @foreach (getDropdowns('Select Pay')->dropdownValues as $dropdown)
                                  <option @if (old('pay') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                    {{ $dropdown->dropdown_value }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        @endif
                        @if (getDropdowns('Select Partial')->displayflag === 1)
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="intType3"
                                class="form-label">{{ getDropdowns('Select Partial')->dropdown_name }}</label>
                              <select class="form-select" name="partial" @if (getDropdowns('Select Partial')->dropdown_type === 'multiple') multiple @endif>
                                <option value="">Select</option>
                                @foreach (getDropdowns('Select Partial')->dropdownValues as $dropdown)
                                  <option @if (old('partial') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                    {{ $dropdown->dropdown_value }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        @endif
                        @if (getDropdowns('Select Payment Method')->displayflag === 1)
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="intType3"
                                class="form-label">{{ getDropdowns('Select Payment Method')->dropdown_name }}</label>
                              <select class="form-select" name="payment_method" @if (getDropdowns('Select Payment Method')->dropdown_type === 'multiple') multiple @endif>
                                <option value="">Select</option>
                                @foreach (getDropdowns('Select Payment Method')->dropdownValues as $dropdown)
                                  <option @if (old('payment_method') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                    {{ $dropdown->dropdown_value }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        @endif
                        @if (getDropdowns('Payment instruction for bank deposit')->displayflag === 1)
                          <div class="col-md-3">
                            <div class="form-group">
                              <label for="intType3"
                                class="form-label">{{ getDropdowns('Payment instruction for bank deposit')->dropdown_name }}</label>
                              <select class="form-select" name="payment_instruction_for_bank"
                                @if (getDropdowns('Payment instruction for bank deposit')->dropdown_type === 'multiple') multiple @endif>
                                <option value="">Select</option>
                                @foreach (getDropdowns('Payment instruction for bank deposit')->dropdownValues as $dropdown)
                                  <option @if (old('payment_instruction_for_bank') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                    {{ $dropdown->dropdown_value }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                        @endif
                      </div>

                    </div>
                    <div class="row mt-20">
                      <hr>
                      <div class="col-md-12 pull-right">
                        <div class="clearfix">
                          <button type="submit" class="waves-effect waves-light btn btn-dark mb-5"><i
                              class="fa fa-check"></i> Save</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {{-- <div class="col-xl-2 col-12">
              <div class="box">
                <div class="box-body">
                  <div class="row grey-bg-clr">
                    <div class="col-md-12 text-center mb-3">
                      <img src="{{ asset('allUsers/best-seller.png') }}" />
                    </div>
                    <p class="mb-0 fw-normal">Seller Details</p>
                    <div class="col-md-12 mt-2 fs-6">
                      <small>Name: Dorbby India Private Limited</small>
                      <small>Country/City: India, Noida</small>
                      <small>UAC: UAC00001</small>
                      <button class="btn btn-block btn-sm btn-primary rounded-0 text-nowrap my-3" type="button"><i class='fa fa-phone'></i> Contact Supplier</button>
                    </div>
                  </div>
                </div>
              </div>
            </div> --}}

    </div>
    </form>
    </section>
    <!-- /.content -->
  </div>
  </div>

  <input type="hidden" class="variant-type" value="" />
  @routes
  <script>
    /* removing any previous stored option template. */
    localStorage.removeItem("types-template");

    let pricingTemplate = '';
    /* this function generates pricing template */
    function pricingTemplateFun() {
      let variantTypes = document.querySelector('.variant-type').value.split(',');
      return pricingTemplate = `
        <div class="row border-bottom mb-2">
          ${  variantTypes.includes('wholesale') ? 
          `
                          <div class="col-md-4">
                            <div class="row">
                              <div class="col">
                                <div class="form-group">
                                  <label class="form-label">No of Unit *</label>
                                  <div class="input-group mb-3">
                                    <input type="number" min="0" onKeyPress="if(this.value.length===7) return false;"
                                      class="form-control" name="min_qty[]" value="" required placeholder="Min Qty">
                                    <input type="number" min="0" onKeyPress="if(this.value.length===7) return false;"
                                      class="form-control" name="max_qty[]" value="" placeholder="Max Qty">
                                  </div>
                                </div>
                              </div>
                              @if (getDropdowns('Slot Unit')->displayflag === 1)
                                <div class="col">
                                  <div class="form-group">
                                    <label for="intType3" class="form-label">{{ getDropdowns('Slot Unit')->dropdown_name }}</label>
                                    <select class="form-select" name="unit[]" @if (getDropdowns('Slot Unit')->dropdown_type === 'multiple') multiple @endif>
                                      <option value="">Select {{ getDropdowns('Slot Unit')->dropdown_name }}</option>
                                      @foreach (getDropdowns('Slot Unit')->dropdownValues as $dropdown)
                                        <option value="{{ $dropdown->dropdown_value }}">
                                          {{ $dropdown->dropdown_value }}</option>
                                      @endforeach
                                    </select>
                                  </div>
                                </div>
                              @endif
                            </div>
                          </div>
                        ` : ''}

          ${  variantTypes.includes('1') && localStorage.getItem('types-template') != null ?` ${localStorage.getItem('types-template')}  ` : '' }
          
          <div class="col">
            <div class="form-group">
              <label class="form-label">SKU *</label>
              <div class="input-group mb-3">
                <input type="text" maxlength="100" class="form-control"
                  name="variant_sku[]" required value="" placeholder="SKU">
              </div>
            </div>
          </div>

          <div class="col">
            <div class="form-group">
              <label class="form-label">Barcode</label>
              <div class="input-group mb-3">
                <input type="text" maxlength="100" class="form-control"
                  name="variant_barcode[]" value="" placeholder="Barcode">
              </div>
            </div>
          </div>

          <div class="col">
            <div class="form-group">
              <label class="form-label">{{ moneyName() }}</label>
              <div class="input-group mb-3">
                <input type="number" min="0" step="0.01"
                  onKeyPress="if(this.value.length===10) return false;" class="form-control"
                  name="rrp[]" value="" placeholder="{{ moneyName() }}" onkeyup="disptachDiscountFunction(this)">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <label class="form-label">Discount</label>
              <div class="input-group mb-3">
                <input type="number" min="0" max="100" step="0.01"
                   return false;" class="form-control"
                  name="discount[]" value="" placeholder="Discount" onkeyup="calculateDiscount(this)">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <label class="form-label">Price/Unit</label>
              <div class="input-group mb-3">
                <input type="number" readonly min="0" step="0.01"
                  onKeyPress="if(this.value.length===10) return false;" class="form-control"
                  name="price_unit[]" value="" placeholder="Price/Unit">
              </div>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <label class="form-label">Stock</label>
              <div class="input-group mb-3">
                <input type="number" min="0" onKeyPress="if(this.value.length===10) return false;"
                  class="form-control" name="stock[]" value="" placeholder="Stock">
              </div>
            </div>
          </div>
          ${  !variantTypes.includes('1') && !variantTypes.includes('single') ? 
          `
                        <div class="col-12 text-right mb-1">
                          <span style="cursor:pointer;" onclick="this.parentElement.parentElement.remove()" class='text-danger' title='Remove'><i class='fa fa-times'></i></span>
                        </div>
                      </div>
                      `: '' }
      `;
    }

    // this function generates images thumbnail which are selected by the user.

    $(function() {
      $(".product-images").change(function() {
        if (this.files && this.files[0]) {
          for (var i = 0; i < this.files.length; i++) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[i]);
          }
        }
      });
    });

    function imageIsLoaded(e) {
      $('#myImg').append(`<div class='col-md-3 my-2'><img src='${e.target.result}'></div>`);
    };


    // this function generates text editors 
    $('#summernote, #summernote2, #summernote3').summernote({
      placeholder: 'Please enter your description here',
      tabsize: 2,
      height: 250,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['view', ['codeview', 'help']]
      ]
    });

    // this function applies pricing template to the front end.
    function morePricingTemplate() {
      document.querySelector('.more-pricing').insertAdjacentHTML('beforeend', pricingTemplateFun());
    }

    // this function gets and sets categories, brands, filters and options dynamically to the front end.
    function getMoreCategories(e) {
      let category_id = +e.value;
      let type = e.dataset.type;
      let setType;
      let mappedBrandTemplate = '';
      let brandTemplate = '';
      let parent_category_id = document.querySelector('.category').value;
      if (type === 'sub-category') {
        document.querySelector('.sub-sub-categories').innerHTML = '';
        document.querySelector('.sub-sub-sub-categories').innerHTML = '';
        document.querySelector('.sub-sub-sub-sub-categories').innerHTML = '';
        setType = 'sub-sub-category';
      }
      if (type === 'sub-sub-category') {
        document.querySelector('.sub-sub-sub-categories').innerHTML = '';
        document.querySelector('.sub-sub-sub-sub-categories').innerHTML = '';
        setType = 'sub-sub-sub-category';
      }
      if (type === 'sub-sub-sub-category') {
        document.querySelector('.sub-sub-sub-sub-categories').innerHTML = '';
        setType = 'sub-sub-sub-sub-category';
      }
      $.ajax({
        async: false,
        method: "get",
        url: route('get-categories-filters-and-product-types'),
        data: {
          category_id,
          parent_category_id
        },
        dataType: 'json',
        success: function(data) {
          let optionsTemplate = ``;

          data.data.categories.forEach(category => {
            optionsTemplate += `
                <option value="${ category.id }">${ category.category_name }</option>
              `;
          });

          let categoryTemplate = ``;
          if (data.data.categories.length > 0) {
            categoryTemplate = `
          <div class="form-group">
            <label class="form-label">Product ${ type }</label>
            <select data-type="${ setType }" class="form-select" id="intType3" name="category[]"
              onchange="getMoreCategories(this)">
              <option value="">Select</option>
              ${optionsTemplate}
            </select>
          </div>
          `;
          }
          if (type === 'sub-category') {
            document.querySelector('.sub-categories').innerHTML = categoryTemplate;
          }
          if (type === 'sub-sub-category') {
            document.querySelector('.sub-sub-categories').innerHTML = categoryTemplate;
          }
          if (type === 'sub-sub-sub-category') {
            document.querySelector('.sub-sub-sub-categories').innerHTML = categoryTemplate;
          }
          if (type === 'sub-sub-sub-sub-category') {
            document.querySelector('.sub-sub-sub-sub-categories').innerHTML = categoryTemplate;
          }

          let filtersTemplate = ``;
          let filtersValueTemplate = ``;

          let filters = [];
          data.data.filters.forEach(filter => {
            filters.push(filter.filter)
          })
          filters.forEach(filter => {
            console.log('inside-loop', filter, filter.mapped_filter_values);
            filter.mapped_filter_values.forEach(filterValues => {
              console.log(filterValues);
              filtersValueTemplate +=
                `<option value="${filterValues.id}">${filterValues.filter_value}</option>`;
            });
            filtersTemplate += `
              <div class="col-md-3">
                <div class="form-group">
                  <label class="form-label">${filter.filter_name}</label>
                  <select class="selectpicker" data-actions-box="false" ${filter.type === 'multiple' ? 'multiple' : '' }  aria-label="size 3 select example"  name="filters[]">
                    ${filtersValueTemplate}
                  </select>
                </div>
              </div>
            `;
            filtersValueTemplate = '';
          });

          let productTypesTemplate = ``;

          data.data.productTypes.forEach((productType, index) => {
            if (index <= 1) {
              let typeValueTemplate = '';
              productType.mapped_product_type_values.forEach((type_value) => {
                typeValueTemplate += `<option value="${type_value.id}">${type_value.type_value}</option>`;
              });
              productTypesTemplate += `
              <div class="col-md-2">
                <div class="form-group">
                  <label class="form-label">${productType.type}</label>
                  <div class="input-group mb-3">
                    <select class="form-control" required name="type_value_id${index}[]">
                      <option value="" selected disabled>Select</option>
                      ${typeValueTemplate}
                    </select>
                  </div>
                </div>
              </div>
              `;
              typeValueTemplate = '';
            }
          });

          localStorage.setItem("types-template", productTypesTemplate);

          let catId = document.querySelector('.category').value;

          $.ajax({
            async: false,
            method: "get",
            url: route('get-brands'),
            data: {
              category_id: catId
            },
            dataType: 'json',
            success: function(data) {
              console.log('mappedbrands', data);
              data.data.brands.mapped_brands.forEach(brand => {
                mappedBrandTemplate += `<option value='${brand.id}'>${brand.brand_name}</option>`;
                console.log('each', mappedBrandTemplate);
              });
            }
          });

          brandTemplate = `
          <div class="col-md-3">
            <div class="form-group">
              <label class="form-label">Select Brand</label>
              <select class="selectpicker" data-actions-box="false" aria-label="size 3 select example"  name="brand_id">
                ${mappedBrandTemplate}
              </select>
            </div>
          </div>
          `;
          filtersTemplate = brandTemplate + filtersTemplate;
          document.querySelector('.more-filters').innerHTML = filtersTemplate;
          $('.selectpicker').selectpicker('refresh');
          getVariantType();
        }
      });

    }

    // this function gets and sets the variant type of the product and changes pricing template accordingly
    function getVariantType() {
      let variantValues = [];
      document.querySelectorAll('.variant-checkbox').forEach((box) => {
        if (box.checked) {
          if (box.value === 'wholesale') {
            document.querySelector('.have-options').checked = false;
          }
          variantValues.push(box.value)
        }

      })

      if (variantValues.includes('single')) {
        document.querySelector('.variant-checkbox-div').classList.remove('d-none');
        document.querySelector('.more-pricing-btn').classList.add('d-none');
      }

      if (variantValues.includes('wholesale')) {
        document.querySelector('.variant-checkbox-div').classList.add('d-none');
        document.querySelector('.more-pricing-btn').classList.remove('d-none');
      }

      if (variantValues.includes('1')) {
        document.querySelector('.more-pricing-btn').classList.remove('d-none');
      }

      document.querySelector('.variant-type').value = variantValues;
      console.log(document.querySelector('.variant-type').value, 'yo');
      document.querySelector('.more-pricing').innerHTML = pricingTemplateFun();
    }

    function calculateDiscount(e) {
      let price = +e.parentElement.parentElement.parentElement.previousSibling.previousElementSibling.querySelector(
        'input').value;
      let discountedPriceInput = e.parentElement.parentElement.parentElement.nextElementSibling.querySelector('input');
      let discount = +e.value;
      let discountedAmount = 0;

      if (discount > 100) {
        e.value = 100;
        discount = 100;
      }

      discountedAmount = (discount / 100) * price;
      discountedAmount = price - discountedAmount;
      discountedPriceInput.value = discountedAmount.toFixed(2);

    }

    function disptachDiscountFunction(e) {
      let element = e.parentElement.parentElement.parentElement.nextElementSibling.querySelector('input');
      var event = new Event('keyup', {
        bubbles: true,
        cancelable: true,
      });

      element.dispatchEvent(event);

    }
  </script>
@endsection