@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.store') }}" method="post" enctype="multipart/form-data">
          @csrf
          <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="{{ old('name') }}"
                                  placeholder="Service 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 (old('seller_id') === $seller->id) selected @endif value="{{ $seller->id }}">
                                    {{ ucwords($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="{{ old('sku') }}"
                                  placeholder="Product SKU" required>
                              </div>
                            </div>
                          </div> --}}
                          {{-- <div class="col-md-2">
                            <div class="form-group">
                              <label class="form-label">Product Barcode</label>
                              <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-angle-double-right"></i></span>
                                <input type="text" class="form-control" name="barcode" value="{{ old('barcode') }}"
                                  placeholder="Product Barcode" maxlength="100">
                              </div>
                            </div>
                          </div> --}}
                          {{-- @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 ($categories as $category)
                                  <option @if (old('category') != null) @if (in_array($category->id, old('category'))) selected @endif @endif value="{{ $category->id }}">
                                    {{ $category->category_name }}</option>
                                @endforeach
                              </select>
                            </div>
                          </div>
                          <div class="sub-categories col-md-3"></div>
                          <div class="sub-sub-categories col-md-3"></div>
                          <div class="sub-sub-sub-categories col-md-3"></div>
                          <div class="sub-sub-sub-sub-categories col-md-3"></div>
                        </div>
                        <div 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>
                          </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="" 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() }} (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="" 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: not-allowed;" class='text-danger' title='Remove'><i
                                    class='fa fa-times'></i></span>
                              </div>
                            </div>
                          </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 (old('pay') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                      {{ $dropdown->dropdown_value }}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          @endif
                          @if (getDropdowns('Select Partial')->displayflag === 1)
                            <div class="col-md-3">
                              <div class="form-group">
                                <label for="intType3"
                                  class="form-label">{{ getDropdowns('Select Partial')->dropdown_name }}</label>
                                <select class="form-select" name="partial" @if (getDropdowns('Select Partial')->dropdown_type === 'multiple') multiple @endif>
                                  <option value="">Select</option>
                                  @foreach (getDropdowns('Select Partial')->dropdownValues as $dropdown)
                                    <option @if (old('partial') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                      {{ $dropdown->dropdown_value }}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          @endif
                          @if (getDropdowns('Select Payment Method')->displayflag === 1)
                            <div class="col-md-3">
                              <div class="form-group">
                                <label for="intType3"
                                  class="form-label">{{ getDropdowns('Select Payment Method')->dropdown_name }}</label>
                                <select class="form-select" name="payment_method" @if (getDropdowns('Select Payment Method')->dropdown_type === 'multiple') multiple @endif>
                                  <option value="">Select</option>
                                  @foreach (getDropdowns('Select Payment Method')->dropdownValues as $dropdown)
                                    <option @if (old('payment_method') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                      {{ $dropdown->dropdown_value }}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          @endif
                          @if (getDropdowns('Payment instruction for bank deposit')->displayflag === 1)
                            <div class="col-md-3">
                              <div class="form-group">
                                <label for="intType3"
                                  class="form-label">{{ getDropdowns('Payment instruction for bank deposit')->dropdown_name }}</label>
                                <select class="form-select" name="payment_instruction_for_bank"
                                  @if (getDropdowns('Payment instruction for bank deposit')->dropdown_type === 'multiple') multiple @endif>
                                  <option value="">Select</option>
                                  @foreach (getDropdowns('Payment instruction for bank deposit')->dropdownValues as $dropdown)
                                    <option @if (old('payment_instruction_for_bank') === $dropdown->dropdown_value) selected @endif value="{{ $dropdown->dropdown_value }}">
                                      {{ $dropdown->dropdown_value }}</option>
                                  @endforeach
                                </select>
                              </div>
                            </div>
                          @endif
                        </div>

                        <div 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>

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

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

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

                        </div>

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

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

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

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

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

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

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

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

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


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

                                </div>

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


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

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


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

                                </div>

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

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

                      </div>
                      <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 service 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">Service ${ 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