@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.services.update', $service->id) }}" method="post" enctype="multipart/form-data">
          @csrf
          @method('PATCH')
          <div class="row">
            <div class="col-sm-10">
              <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> SERVICE BASIC INFO</h4>
                        </div>
                        <div class="col-md-6 text-right">
                          <div class="d-grid gap-2 d-md-block">
                            <a href="{{ route('admin.services.index') }}"
                              class="btn btn-primary rounded-0 btn-sm btn-block">All Service</a>
                            <a href="javascript:;" class="btn btn-primary rounded-0 btn-sm btn-block">Edit Service</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">Service 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="{{ $service->name }}"
                                  placeholder="Product Title" required maxlength="200">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <div class="form-group">
                              <label for="intType3" class="form-label">Service Provider (Seller) *</label>
                              <select class="form-select" name="seller_id" required>
                                <option value="">Select
                                </option>
                                @foreach ($sellers as $seller)
                                  <option @if ($service->seller_id === $seller->id) selected @endif value="{{ $seller->id }}">
                                    {{ $seller->biz_name }}</option>
                                @endforeach
                              </select>
                            </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="{{ $service->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="{{ $service->barcode }}"
                                  placeholder="Product Barcode" maxlength="100">
                              </div>
                            </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">Service 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 ($serviceData['categories'] as $category)
                                  <option @if (isset($service->mappedCategories[0])) @if ($service->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($service->mappedCategories[1]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Service 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="">Service sub-category</option>
                                    @foreach ($serviceData['sSubCategories'] as $category)
                                      <option @if ($service->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($service->mappedCategories[2]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Service 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="">Service sub-sub-category</option>
                                    @foreach ($serviceData['sSubSubCategories'] as $category)
                                      <option @if ($service->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($service->mappedCategories[3]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Service 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="">Service sub-sub-sub-category</option>
                                    @foreach ($serviceData['sSubSubCategories'] as $category)
                                      <option @if ($service->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($service->mappedCategories[4]))
                              <div class="col-md-12">
                                <div class="form-group">
                                  <label class="form-label">Service 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="">Service sub-sub-sub-sub-category</option>
                                    @foreach ($serviceData['sSubSubCategories'] as $category)
                                      <option @if ($service->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> SERVICE 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" aria-label="size 3 select example" name="brand_id">
                                    @foreach ($serviceData['brands']->mappedBrands as $brand)
                                      <option @if ($brand->id === $service->brand_id) selected @endif value="{{ $brand->id }}">
                                        {{ $brand->brand_name }}</option>
                                    @endforeach
                                  </select>
                                </div>
                              </div> --}}
                              @if (!empty($serviceData['serviceFilters']))
                                @foreach ($serviceData['serviceFilters'] as $filter)
                                  <div class="col-md-4">
                                    <div class="form-group">
                                      <label class="form-label">{{ $filter->filter_name }}</label>
                                      <select class="selectpicker" multiple aria-label="size 3 select example"
                                        name="filters[]">
                                        @foreach ($filter->mappedFilterValues as $filterValue)
                                          <option @foreach ($service->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 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">
                        <div class="row border-bottom mb-2">
                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Service 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="service_qty[]"
                                  value="{{ $service->prices[0]->service_qty }}" required placeholder="Service Qty">
                              </div>
                            </div>
                          </div>
                          @if (getDropdowns('Service Duration')->displayflag === 1)
                            <div class="col-md-2">
                              <div class="form-group">
                                <label for="intType3"
                                  class="form-label">{{ getDropdowns('Service Duration')->dropdown_name }}</label>
                                <select class="form-select" name="duration[]" @if (getDropdowns('Service Duration')->dropdown_type === 'multiple') multiple @endif>
                                  <option value="">Select</option>
                                  @foreach (getDropdowns('Service Duration')->dropdownValues as $dropdown)
                                    <option @if ($service->prices[0]->duration === $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">{{ moneyName() }} (Starting Price)</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="number" min="0" step="0.01"
                                  onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                  name="rrp[]" value="{{ $service->prices[0]->rrp }}"
                                  placeholder="{{ moneyName() }} (Starting Price)">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Discount (%)</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="number" min="0" step="0.01"
                                  onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                  name="discount[]" value="{{ $service->prices[0]->discount }}"
                                  placeholder="Discount (%)">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Service Price</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="number" min="0" step="0.01"
                                  onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                  name="service_price[]" value="{{ $service->prices[0]->service_price }}"
                                  placeholder="Service Price">
                              </div>
                            </div>
                          </div>
                          <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Availability</label>
                              <div class="input-group mb-3">
                                <select class="form-control" name="availability[]">
                                  <option value="">Select</option>
                                  <option @if ($service->prices[0]->availability === 'yes') selected @endif value="yes">Yes</option>
                                  <option @if ($service->prices[0]->availability === 'no') selected @endif value="no">No</option>
                                </select>
                              </div>
                            </div>
                          </div>
                          <div class="col-12 text-right mb-1">
                            <span style="cursor: not-allowed;" class='text-danger' title='Remove'><i
                                class='fa fa-times'></i></span>
                          </div>
                        </div>
                        @foreach ($service->prices as $key => $price)
                          @if ($key > 0)
                            <div class="row border-bottom mb-2">
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label class="form-label">Service 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="service_qty[]" value="{{ $price->service_qty }}"
                                      required placeholder="Service Qty">
                                  </div>
                                </div>
                              </div>
                              @if (getDropdowns('Service Duration')->displayflag === 1)
                                <div class="col-md-2">
                                  <div class="form-group">
                                    <label for="intType3"
                                      class="form-label">{{ getDropdowns('Service Duration')->dropdown_name }}</label>
                                    <select class="form-select" name="service_duration[]" @if (getDropdowns('Service Duration')->dropdown_type === 'multiple') multiple @endif>
                                      <option value="">Select {{ getDropdowns('Service Duration')->dropdown_name }}
                                      </option>
                                      @foreach (getDropdowns('Service Duration')->dropdownValues as $dropdown)
                                        <option @if ($price->service_duration === $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">{{ moneyName() }}</label>
                                  <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                    <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() }}">
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label class="form-label">Discount</label>
                                  <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                    <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">
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label class="form-label">Service Price</label>
                                  <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                    <input type="number" min="0" step="0.01"
                                      onKeyPress="if(this.value.length===10) return false;" class="form-control"
                                      name="price_unit[]" value="{{ $price->price_unit }}" placeholder="Service Price">
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label class="form-label">Availability</label>
                                  <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                    <input type="number" min="0" onKeyPress="if(this.value.length===10) return false;"
                                      class="form-control" name="availability[]" value="{{ $price->availability }}"
                                      placeholder="Availability">
                                  </div>
                                </div>
                              </div>
                              <div class="col-12 text-right mb-1">
                                <span style="cursor: not-allowed;" class='text-danger' title='Remove'><i
                                    class='fa fa-times'></i></span>
                              </div>
                            </div>
                          @endif
                        @endforeach
                      </div>
                      <div class="col-12 my-2 text-right">
                        <span class='text-dark' style="cursor: pointer;" onclick="morePricingTemplate(this)"
                          title="Add more"><i class="fa fa-plus"></i></span>
                      </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 ($service->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 ($service->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 ($service->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 ($service->payment_instruction_for_bank === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                  {{ $dropdown->dropdown_value }}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                      @endif
                    </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="service_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 ($service->images as $image)
                          <div class='col-md-3 my-2'>
                            <img src='{{ asset('copro/public/uploads/services') . '/' . $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">{{ $service->description }}</textarea>
                      </div>
                      <div class="col-md-12 mt-4">
                        <label class="form-label">State warranty terms</label>
                        <textarea name="warranty_terms" id="summernote2">{{ $service->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">{{ $service->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 ($service->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="{{ $service->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="{{ $service->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="{{ $service->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="{{ $service->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="{{ $service->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="{{ $service->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="{{ $service->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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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', $serviceData['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>
                  <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-header">
                  <h4 class="box-title">PRODUCT ATTRIBUTES</h4>
                </div> --}}

        <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>
  @routes
  <script>
    $(document).ready(function() {
      $('#multiple-checkboxes, #multiple-checkboxes1').multiselect({
        includeSelectAllOption: true,
      });
    });
  </script>
  <script>
    $(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>`);
    };

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

    $('#summernote2').summernote({
      placeholder: 'Please enter your state warranty terms here',
      tabsize: 2,
      height: 250,
      toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['view', ['codeview', 'help']]
      ]
    });

    $('#summernote3').summernote({
      placeholder: 'Please enter your state return and exchange policy 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(e) {
      template = `
        <div class="row border-bottom mb-2">
          <div class="col-md-2">
            <div class="form-group">
              <label class="form-label">Service 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="service_qty[]" value="" required placeholder="Service Qty">
              </div>
            </div>
          </div>
          @if (getDropdowns('Service Duration')->displayflag === 1)
            <div class="col-md-2">
              <div class="form-group">
                <label for="intType3" class="form-label">{{ getDropdowns('Service Duration')->dropdown_name }}</label>
                <select class="form-select" name="duration[]" @if (getDropdowns('Service Duration')->dropdown_type === 'multiple') multiple @endif>
                  <option value="">Select</option>
                  @foreach (getDropdowns('Service Duration')->dropdownValues as $dropdown)
                    <option 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">{{ moneyName() }} (Starting Price)</label>
          <div class="input-group mb-3">
            <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
            <input type="number" min="0" step="0.01"
              onKeyPress="if(this.value.length===10) return false;" class="form-control"
              name="rrp[]" value="" placeholder="{{ moneyName() }}">
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group">
          <label class="form-label">Discount (%)</label>
          <div class="input-group mb-3">
            <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
            <input type="number" min="0" step="0.01"
              onKeyPress="if(this.value.length===10) return false;" class="form-control"
              name="discount[]" value="" placeholder="Discount (%)">
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group">
          <label class="form-label">Service Price</label>
          <div class="input-group mb-3">
            <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
            <input type="number" min="0" step="0.01"
              onKeyPress="if(this.value.length===10) return false;" class="form-control"
              name="service_price[]" value="" placeholder="Service Price">
          </div>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group">
          <label class="form-label">Availability</label>
          <div class="input-group mb-3">
            <select class="form-control" name="availability[]">
              <option value="">Select</option>
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </div>
        </div>
      </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>                      
      `;
      document.querySelector('.more-pricing').insertAdjacentHTML('beforeend', template);
    }

    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-service-categories-and-filter'),
        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" ${filter.type === 'multiple' ? 'multiple' : '' }  aria-label="size 3 select example"  name="filters[]">
                    ${filtersValueTemplate}
                  </select>
                </div>
              </div>
            `;
            filtersValueTemplate = '';
          });

          document.querySelector('.more-filters').innerHTML = filtersTemplate;
          $('.selectpicker').selectpicker('refresh');
        }
      });

    }
  </script>
@endsection