@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.update', $product->id) }}" method="post" enctype="multipart/form-data">
          @csrf
          @method('PATCH')
          <div class="row">
            <div class="col-sm-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="{{ $product->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="{{ $product->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="{{ $product->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 ($product->seller_id === $seller->id) selected @endif value="{{ $seller->id }}">
                                    {{ $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 ($product->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 ($productData['categories'] as $category)
                                  <option @if (isset($product->mappedCategories[0])) @if ($product->mappedCategories[0]->id === $category->id) selected @endif @endif value="{{ $category->id }}">
                                    {{ $category->category_name }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                          <div class="sub-categories col-md-3">
                            @if (isset($product->mappedCategories[1]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Product sub-category</label>
                                  <select data-type='sub-sub-category' class="form-select"
                                    data-placeholder="Type to search cities" name="category[]" required
                                    onchange="getMoreCategories(this)">
                                    <option value="">Product sub-category</option>
                                    @foreach ($productData['pSubCategories'] as $category)
                                      <option @if ($product->mappedCategories[1]->id === $category->id) selected @endif value="{{ $category->id }}">
                                        {{ $category->category_name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            @endif
                          </div>
                          <div class="sub-sub-categories col-md-3">
                            @if (isset($product->mappedCategories[2]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Product sub-sub-category</label>
                                  <select data-type='sub-sub-sub-category' class="form-select"
                                    data-placeholder="Type to search cities" name="category[]" required
                                    onchange="getMoreCategories(this)">
                                    <option value="">Product sub-sub-category</option>
                                    @foreach ($productData['pSubSubCategories'] as $category)
                                      <option @if ($product->mappedCategories[2]->id === $category->id) selected @endif value="{{ $category->id }}">
                                        {{ $category->category_name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            @endif
                          </div>
                          <div class="sub-sub-sub-categories col-md-3">
                            @if (isset($product->mappedCategories[3]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Product sub-sub-sub-category</label>
                                  <select data-type='sub-sub-sub-sub-category' class="form-select"
                                    data-placeholder="Type to search cities" name="category[]" required
                                    onchange="getMoreCategories(this)">
                                    <option value="">Product sub-sub-sub-category</option>
                                    @foreach ($productData['pSubSubCategories'] as $category)
                                      <option @if ($product->mappedCategories[3]->id === $category->id) selected @endif value="{{ $category->id }}">
                                        {{ $category->category_name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            @endif
                          </div>
                          <div class="sub-sub-sub-sub-categories col-md-3">
                            @if (isset($product->mappedCategories[4]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Product sub-sub-sub-sub-category</label>
                                  <select data-type='sub-sub-sub-sub-sub-category' class="form-select"
                                    data-placeholder="Type to search cities" name="category[]" required
                                    onchange="getMoreCategories(this)">
                                    <option value="">Product sub-sub-sub-sub-category</option>
                                    @foreach ($productData['pSubSubCategories'] as $category)
                                      <option @if ($product->mappedCategories[4]->id === $category->id) selected @endif value="{{ $category->id }}">
                                        {{ $category->category_name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div>
                            @endif
                          </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 class="col-md-4">
                                <div class="form-group">
                                  <label class="form-label">Product Brand</label>
                                  <select class="selectpicker" data-actions-box="false"
                                    aria-label="size 3 select example" name="brand_id">
                                    @if(!empty($productData['brands']))
                                    @foreach ($productData['brands']->mappedBrands as $brand)
                                      <option @if ($brand->id === $product->brand_id) selected @endif value="{{ $brand->id }}">
                                        {{ $brand->brand_name }}</option>
                                    @endforeach
                                    @endif
                                  </select>
                                </div>
                              </div>
                              @if (!empty($productData['productFilters']))
                                @foreach ($productData['productFilters'] as $filter)
                                  <div class="col-md-4">
                                    <div class="form-group">
                                      <label class="form-label">{{ $filter->filter_name }}</label>
                                      <select class="selectpicker" data-actions-box="false" multiple
                                        aria-label="size 3 select example" name="filters[]">
                                        @foreach ($filter->mappedFilterValues as $filterValue)
                                          <option @foreach ($product->mappedFilterValues as $filterValueOfProduct)
                                            @if ($filterValueOfProduct->id === $filterValue->id)
                                              selected
                                            @endif
                                        @endforeach
                                        value="{{ $filterValue->id }}">{{ $filterValue->filter_value }}
                                        </option>
                                @endforeach
                                </select>
                            </div>
                          </div>
                          @endforeach
                          @endif
                        </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 ($product->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 ($product->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 single product</label>
                      </div>
                      <div class="col-md-4 @if ($product->have_options != 1) d-none @endif variant-checkbox-div">
                        <input @if ($product->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>
                      <div class="more-pricing">
                        @foreach ($productData['pricing'] as $key => $price)
                          {{-- @if ($key > 0) --}}
                          <div class="row border-bottom mb-2">
                            <input type="hidden" name="price_id[]" value="{{ $price->id }}">
                            @if ($product->variant_type === 'wholesale')
                              <div class="col-md-3">
                                <div class="row">
                                  <div class="col">
                                    <div class="form-group">
                                      <label class="form-label">Slot Range Qty *</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="{{ $price->min_qty }}"
                                          required placeholder="Min Qty">
                                        <input type="number" min="0" onKeyPress="if(this.value.length===7) return false;"
                                          class="form-control" name="max_qty[]" value="{{ $price->max_qty }}"
                                          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</option>
                                          @foreach (getDropdowns('Slot Unit')->dropdownValues as $dropdown)
                                            <option @if ($price->unit === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                              {{ $dropdown->dropdown_value }}</option>
                                          @endforeach
                                        </select>
                                      </div>
                                    </div>
                                  @endif
                                </div>
                              </div>
                            @endif

                            @if ($product->have_options === 1 && !$productData['productTypes']->isEmpty())

                              @foreach ($productData['productTypes'] as $typeKey => $type)

                                @if ($typeKey <= 1)
                                  @php
                                    if ($typeKey % 2 === 0):
                                        $typeId = $price->type_value_id_1;
                                    else:
                                        $typeId = $price->type_value_id_2;
                                    endif;
                                  @endphp
                                  <div class="col">
                                    <div class="form-group">
                                      <label class="form-label">{{ $type->type }}</label>
                                      <div class="input-group mb-3">
                                        <select class="form-control" name="type_value_id{{ $typeKey }}[]">
                                          <option value="" selected disabled>Select</option>

                                          @foreach ($type->mappedProductTypeValues as $productTypeValue)

                                            <option @if ($productTypeValue->id == $typeId) selected @endif value="{{ $productTypeValue->id }}">
                                              {{ $productTypeValue->type_value }}</option>
                                          @endforeach

                                        </select>
                                      </div>
                                    </div>
                                  </div>
                                @endif

                              @endforeach

                            @endif

                            <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[]"
                                    value="{{ $price->sku }}" 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="{{ $price->barcode }}" 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="{{ $price->rrp }}" 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" step="0.01"
                                    onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                    name="discount[]" value="{{ $price->discount }}" 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" min="0" step="0.01"
                                    onKeyPress="if(this.value.length===10) return false;" readonly class="form-control"
                                    name="price_unit[]" value="{{ $price->price_unit }}" 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="{{ $price->stock }}"
                                    placeholder="Stock">
                                </div>
                              </div>
                            </div>
                            <div class="col d-flex align-items-center">
                              <div class="form-group">
                                <label class="form-label">&nbsp;</label>
                              </div>
                              <a href="{{ route('admin.product-pricing.edit', [$price->id, $product->variant_type]) }}"
                                class="btn btn-primary rounded-0 btn-sm mt-3"> <i class="fa fa-pencil"></i> Edit</a>
                            </div>
                            <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>
                          {{-- @endif --}}
                        @endforeach
                        {{-- single product no variant starts --}}
                        @if ($product->variant_type === 'single' && $product->have_options === 0)
                          <div class="row border-bottom mb-2">

                            <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[]"
                                    value="{{ $product->sku }}" 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="{{ $product->barcode }}" 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="{{ $product->rrp }}" 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" step="0.01"
                                    onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                    name="discount[]" value="{{ $product->discount }}" 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" min="0" step="0.01"
                                    onKeyPress="if(this.value.length===10) return false;" readonly class="form-control"
                                    name="price_unit[]" value="{{ $product->price_unit }}" 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="{{ $product->stock }}"
                                    placeholder="Stock">
                                </div>
                              </div>
                            </div>
                          </div>
                        @endif
                        {{-- single product no vairant end --}}
                      </div>
                      <div class="col-12 my-2 text-right @if ($product->have_options != 1 && $product->variant_type === 'single') d-none @endif 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 5
                              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 class="row" id='myImg2'>
                        @foreach ($product->images as $image)
                          <div class='col-md-3 my-2'>
                            <img src='{{ asset('copro/public/uploads/products') . '/' . $image->image }}' />
                          </div>
                        @endforeach
                      </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">{{ $product->description }}</textarea>
                      </div>
                      <div class="col-md-12 mt-4">
                        <label class="form-label">State warranty terms</label>
                        <textarea name="warranty_terms" id="summernote2">{{ $product->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">{{ $product->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 ($product->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="{{ $product->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="{{ $product->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="{{ $product->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="{{ $product->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="{{ $product->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="{{ $product->height }}" placeholder="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="{{ $product->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 (in_array('Price includes delivery', $productData['deliveryOptions'])) checked @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 (in_array('Specify own shipping cost', $productData['deliveryOptions'])) checked @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 (in_array('Requires legal clearance before shipment', $productData['deliveryOptions'])) checked @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 (in_array('Free shipping within Singapore', $productData['deliveryOptions'])) checked @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 (in_array('Specify order preparation & delivery time for pre-order', $productData['deliveryOptions'])) checked @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 (in_array('Has limited ready stock due to its high value', $productData['deliveryOptions'])) checked @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 (in_array('Calculate courier costs and select courier', $productData['deliveryOptions'])) checked @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 (in_array('Requires special logistics arrangements', $productData['deliveryOptions'])) checked @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 (in_array('Is customised, made-to-order, or handmade', $productData['deliveryOptions'])) checked @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 ($product->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 ($product->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 ($product->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 ($product->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>
  </form>
  </section>
  <!-- /.content -->
  </div>
  </div>

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

    // setting options template for selected category 
    let productOptions = {!! json_encode($productData['productTypes']->toArray()) !!};
    let temporaryOptionsTemplate = '';
    console.log(productOptions);
    productOptions.forEach((productTypeOption, index) => {
      console.log(productTypeOption.mapped_product_type_values);
      if (index <= 1) {
        let typeValueTemplate = '';
        productTypeOption.mapped_product_type_values.forEach((type_value) => {
          typeValueTemplate += `<option value="${type_value.id}">${type_value.type_value}</option>`;
        });
        temporaryOptionsTemplate += `
        <div class="col">
          <div class="form-group">
            <label class="form-label">${productTypeOption.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>
      `;
      }
    });

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

    /* this function generates pricing template */
    function pricingTemplateFun() {
      let pricingTemplate = '';
      let variantTypes = document.querySelector('.variant-type').value.split(',');
      return pricingTemplate = `
        <div class="row border-bottom mb-2">
          ${  variantTypes.includes('wholesale') ? 
          `
                <div class="col-md-3">
                  <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[]" 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" step="0.01"
                  onKeyPress="if(this.value.length===10) 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" min="0" step="0.01"
                  onKeyPress="if(this.value.length===10) return false;" readonly 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('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']]
      ]
    });


    function morePricingTemplate() {
      document.querySelector('.more-pricing').insertAdjacentHTML('beforeend', pricingTemplateFun());
    }

    function getMoreCategories(e) {
      let category_id = +e.value;
      let type = e.dataset.type;
      let setType;
      let mappedBrandTemplate = '';
      let brandTemplate = '';
      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
        },
        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