@extends('layout.master')
@section('body-class', 'page-product')
@section('title', $product['meta_title'] ?: $product['name'])
@section('keywords', $product['meta_keywords'] ?: system_setting('base.meta_keyword'))
@section('description', $product['meta_description'] ?: system_setting('base.meta_description'))

@push('header')
  <script src="{{ asset('vendor/vue/2.7/vue' . (!config('app.debug') ? '.min' : '') . '.js') }}"></script>
  <script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
  <script src="{{ asset('vendor/zoom/jquery.zoom.min.js') }}"></script>
  <link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">

  <script src="{{ asset('vendor/element-ui/index.js') }}"></script>
  <link rel="stylesheet" href="{{ asset('vendor/element-ui/index.css') }}">
  @if ($product['video'])
    <script src="{{ asset('vendor/video/video.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('vendor/video/video-js.min.css') }}">
  @endif
@endpush

@php
  $iframeClass = request('iframe') ? 'd-none' : '';
@endphp

@section('content')
  @if (!request('iframe'))
    <x-shop-breadcrumb type="product" :value="$product['id']"/>
  @endif

  <div class="container {{ request('iframe') ? 'pt-4' : '' }}" id="product-app" v-cloak>
    <div class="row mb-5 mt-3 mt-md-0" id="product-top">
      <div class="col-12 col-lg-6 mb-3">
        <div class="product-image d-flex align-items-start">
          @if(!is_mobile())
            <div class="left {{ $iframeClass }}" v-if="images.length">
              <div class="swiper" id="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" :class="!index ? 'active' : ''" v-for="image, index in images">
                    <a href="javascript:;" :data-image="image.preview" :data-zoom-image="image.popup">
                      <img :src="image.thumb" class="img-fluid">
                    </a>
                  </div>
                </div>
                <div class="swiper-pager">
                  <div class="swiper-button-next new-feature-slideshow-next"></div>
                  <div class="swiper-button-prev new-feature-slideshow-prev"></div>
                </div>
              </div>
            </div>
            <div class="right" id="zoom">
              @include('product.product-video')
              <img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
            </div>
          @else
            @include('product.product-video')
            <div class="swiper" id="swiper-mobile">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="image, index in images">
                  <img :src="image.preview" class="img-fluid">
                </div>
              </div>
              <div class="swiper-pagination mobile-pagination"></div>
            </div>
          @endif
        </div>
      </div>

      <div class="col-12 col-lg-6">
        <div class="peoduct-info">
          @hookwrapper('product.detail.name')
          <h1 class="mb-4 product-name">{{ $product['name'] }}</h1>
          @endhookwrapper
          @hookwrapper('product.detail.price')
          <div class="price-wrap d-flex align-items-end" v-if="price_setting === 'sku'">
            <div class="new-price fs-1 lh-1 fw-bold me-2">@{{ product.price_format }}</div>
            <div class="old-price text-muted text-decoration-line-through" v-if="product.price != product.origin_price && product.origin_price !== 0">
              @{{ product.origin_price_format }}
            </div>
          </div>
          <div class="price-wrap d-flex align-items-end" v-if="price_setting === 'num'" style="
              border-top: 1px solid #aaaaaa;
              border-bottom: 1px solid #aaaaaa;
              padding: 10px;">
            <div class="item" v-for="(item,index) in numPrices" style="flex: 1">
              <div class="num" v-if="index < numPrices.length - 1" style="
                  white-space: nowrap;
                  color: #777777;
                  font-size: 18px;
                  margin-bottom: 5px;
              ">@{{ item.num }} - @{{ numPrices[index + 1].num - 1 }} sets
              </div>

              <div class="num" v-else-if="item.num" style="
                  white-space: nowrap;
                  color: #777777;
                  font-size: 18px;
                  margin-bottom: 5px;
              ">>= @{{ item.num }} sets
              </div>
              <div class="price">
                <div class="new-price fs-3 lh-1 fw-bold me-2">@{{ item.price_format }}</div>
              </div>
            </div>
          </div>
          @endhookwrapper
          <div class="stock-and-sku mb-4">
            @hookwrapper('product.detail.quantity')
            <div class="d-flex">
              <span class="title text-muted">{{ __('product.quantity') }}:</span>
              <div :class="product.quantity > 0 ? 'text-success' : 'text-secondary'">
                <template v-if="product.quantity > 0">{{ __('shop/products.in_stock') }}</template>
                <template v-else>{{ __('shop/products.out_stock') }}</template>
              </div>
            </div>
            @endhookwrapper

            @if ($product['brand_id'])
              @hookwrapper('product.detail.brand')
              <div class="d-flex">
                <span class="title text-muted">{{ __('product.brand') }}:</span>
                <a href="{{ shop_route('brands.show', $product['brand_id']) }}">{{ $product['brand_name'] }}</a>
              </div>
              @endhookwrapper
            @endif

            @hookwrapper('product.detail.sku')
            <div class="d-flex"><span class="title text-muted">SKU:</span>@{{ product.sku }}</div>
            @endhookwrapper

            @hookwrapper('product.detail.model')
            <div class="d-flex" v-if="product.model"><span class="title text-muted">{{ __('shop/products.model') }}:</span> @{{ product.model }}</div>
            @endhookwrapper
          </div>
          @if (0)
            <div class="rating-wrap d-flex">
              <div class="rating">
                @for ($i = 0; $i < 5; $i++)
                  <i class="iconfont">&#xe628;</i>
                @endfor
              </div>
              <span class="text-muted">132 reviews</span>
            </div>
          @endif


          <div class="variables-wrap mb-4" v-if="source.variables.length">
            <div class="variable-group mb-2" v-for="variable, variable_index in source.variables" :key="variable_index">
              <p class="mb-2">@{{ variable.name }}</p>
              <div class="variable-info" v-if="!variable.isNumSelect">
                <div
                  v-for="value, value_index in variable.values"
                  @click="checkedVariableValue(variable_index, value_index, value)"
                  :key="value_index"
                  :class="[value.selected ? 'selected' : '', value.disabled ? 'disabled' : '']">
                  <span class="image" v-if="value.image"><img :src="value.image" class="img-fluid"></span>
                  @{{ value.name }}
                </div>
              </div>
              <div class="variable-info-select" v-if="variable.isNumSelect">
                <div class="variable-info-select-num" v-for="value, value_index in variable.values" style="display: flex;
    align-items: center;
    justify-content: space-between;
    width: 500px;">
                  <div class="variable-info-select-num-show">
                    <div
                      @click="checkedVariableValue(variable_index, value_index, value)"
                      :key="value_index">
                      <span class="image" v-if="value.image"><img :src="value.image" class="img-fluid"></span>
                      @{{ value.name }}
                    </div>
                  </div>
                  <div class="quantity-wrap">
                    <input type="text" @change="quantityChange"
                           class="form-control"
                           :disabled="!product.quantity"
                           onkeyup="this.value=this.value.replace(/\D/g,'')"
                           v-model="value.quantity"
                           value="0"
                           :name="'variables['+ variable_index +'].value['+value_index+'].quantity'">
                    <div class="right">
                      <i class="bi bi-chevron-up" @click="quantityChange"></i>
                      <i class="bi bi-chevron-down" @click="quantityChange"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          @if ($product['active'])
            <div class="quantity-btns">
              @hook('product.detail.buy.before')
              @hookwrapper('product.detail.quantity.input')
              <div class="quantity-wrap">
                <input type="text" readonly class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
                <div class="right" v-if="!isNumSelect">
                  <i class="bi bi-chevron-up"></i>
                  <i class="bi bi-chevron-down"></i>
                </div>
              </div>
              @endhookwrapper
              @hookwrapper('product.detail.add_to_cart')
              <button
                class="btn btn-outline-dark ms-md-3 add-cart fw-bold"
                :product-id="product.id"
                :product-price="product.price"
                :disabled="!product.quantity"
                @click="addCart(false, this)"
              ><i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}
              </button>
              @endhookwrapper
              @hookwrapper('product.detail.buy_now')
              <button
                class="btn btn-dark ms-3 fw-bold"
                :disabled="!product.quantity"
                :product-id="product.id"
                :product-price="product.price"
                @click="addCart(true, this)"
              ><i class="bi bi-bag-fill me-1"></i>{{ __('shop/products.buy_now') }}
              </button>
              @endhookwrapper
              @hook('product.detail.buy.after')
            </div>

            @if (current_customer() || !request('iframe'))
              @hookwrapper('product.detail.wishlist')
              <div class="add-wishlist">
                <button class="btn btn-link ps-0 text-secondary" data-in-wishlist="{{ $product['in_wishlist'] }}" onclick="bk.addWishlist('{{ $product['id'] }}', this)">
                  <i class="bi bi-heart{{ $product['in_wishlist'] ? '-fill' : '' }} me-1"></i> {{ __('shop/products.add_to_favorites') }}
                </button>
              </div>
              @endhookwrapper
            @endif
          @else
            {{--            <div class="text-danger"><i class="bi bi-exclamation-circle-fill"></i> {{ __('product.has_been_inactive') }}</div>--}}
            <div class="quantity-btns">
              @hook('product.detail.buy.before')
              @hookwrapper('product.detail.quantity.input')
              <div class="quantity-wrap">
                <input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
                <div class="right" v-if="!isNumSelect">
                  <i class="bi bi-chevron-up"></i>
                  <i class="bi bi-chevron-down"></i>
                </div>
              </div>
              @endhookwrapper
              @hookwrapper('product.detail.add_to_cart')
              <button
                class="btn btn-outline-dark ms-md-3 add-cart fw-bold"
                :product-id="product.id"
                :product-price="product.price"
                :disabled="!product.quantity"
                @click="addCart(false, this)"
              ><i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}
              </button>
              @endhookwrapper
            </div>
          @endif
          <ul class="totals">
            <li><span>Product Total</span><span>@{{ product_total }}</span></li>
            <li><span>Shipping Fee</span><span>@{{ shipping_fee }}</span></li>
            <li><span>Order Total</span><span>@{{ order_tota }}</span></li>
          </ul>
          <button
            style="width: 16em;"
            class="btn btn-outline-dark my-lg-2 add-cart fw-bold"
            :disabled="!product.quantity"
            @click="centerDialogVisable = true"
          ><i class="bi bi-globe me-1"></i>{{ __('shop/products.inquiry') }}
          </button>
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <el-dialog title="Inquiry" :visible.sync="centerDialogVisable" width="700px" center>
      <div class="root" style="
    display: flex;">
        <div class="left" style="
    flex: 4;">
          <el-form :model="registerForm" ref="registerForm" label-width="90px" :rules="rules">
            <!-- 弹出层歌手名列 -->
            <el-form-item prop="contacts" label="Contacts" size="mini">
              <el-input v-model="registerForm.contacts" placeholder="Contacts"></el-input>
            </el-form-item>
            <!-- 弹出层歌手性别列 -->
          {{--        <el-form-item prop="sex" label="歌手性别" size="mini">--}}
          {{--          <el-radio-group v-model="registerForm.sex">--}}
          {{--            <el-radio :label="0">女</el-radio>--}}
          {{--            <el-radio :label="1">男</el-radio>--}}
          {{--            <el-radio :label="2">组合</el-radio>--}}
          {{--            <el-radio :label="3">不明</el-radio>--}}
          {{--          </el-radio-group>--}}
          {{--        </el-form-item>--}}
          <!--  <el-form-item prop="pic" label="歌手头像" size="mini">
             <el-input v-model="registerForm.pic" placeholder="歌手头像"></el-input>
          </el-form-item> -->
            <!-- 弹出层歌手生日列 -->
            {{--        <el-form-item prop="birth" label="生日" size="mini">--}}
            {{--          <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width: 100%;"></el-date-picker>--}}
            {{--        </el-form-item>--}}
            <el-form-item prop="email" label="E-mail" size="mini">
              <el-input v-model="registerForm.email" placeholder="E-mail"></el-input>
            </el-form-item>
            <el-form-item prop="content" label="Content" size="mini">
              <el-input v-model="registerForm.content" placeholder="Content" type="textarea" :rows="10"></el-input>
            </el-form-item>
          </el-form>


          @hook('product.detail.after')
        </div>
        <div class="right" style="
    flex: 2;
    display: flex;
    align-items: center;
}">
          <div class="product" style="
    margin: -35px 10px 0 10px;">
            <div class="product-image">
              <img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
            </div>
            <div class="product-info" style="
    margin: 5px 5px 0 5px;">
              <div class="product-name">{{ $product['name'] }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 取消，确定按钮点击事件 -->
      <span slot="footer">
{{--          <el-button size="mini" @click="centerDialogVisable = false">Cancel</el-button>--}}
          <el-button size="mini" @click="addSinger('registerForm')">Submit</el-button>
        </span>
    </el-dialog>
    <div class="product-description {{ $iframeClass }}">
      <div class="nav nav-tabs nav-overflow justify-content-start justify-content-md-center border-bottom mb-3">
        <a class="nav-link fw-bold active fs-5" data-bs-toggle="tab" href="#product-description">
          {{ __('shop/products.product_details') }}
        </a>
        @if ($product['attributes'])
          <a class="nav-link fw-bold fs-5" data-bs-toggle="tab" href="#product-attributes">
            {{ __('admin/attribute.index') }}
          </a>
        @endif
        @hook('product.tab.after.link')
      </div>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="product-description" role="tabpanel">
          {!! $product['description'] !!}
        </div>
        <div class="tab-pane fade" id="product-attributes" role="tabpanel">
          <table class="table table-bordered attribute-table">
            @foreach ($product['attributes'] as $group)
              <thead class="table-light">
              <tr>
                <td colspan="2"><strong>{{ $group['attribute_group_name'] }}</strong></td>
              </tr>
              </thead>
              <tbody>
              @foreach ($group['attributes'] as $item)
                <tr>
                  <td>{{ $item['attribute'] }}</td>
                  <td>{{ $item['attribute_value'] }}</td>
                </tr>
              @endforeach
              </tbody>
            @endforeach
          </table>
        </div>
        @hook('product.tab.after.pane')
      </div>
    </div>
  </div>

  @if ($relations && !request('iframe'))
    <div class="relations-wrap mt-5">
      <div class="container position-relative">
        <div class="title text-center fs-1 mb-4">{{ __('admin/product.product_relations') }}</div>
        <div class="product swiper-style-plus">
          <div class="swiper relations-swiper">
            <div class="swiper-wrapper">
              @foreach ($relations as $item)
                <div class="swiper-slide">
                  @include('shared.product', ['product' => $item])
                </div>
              @endforeach
            </div>
          </div>
          <div class="swiper-pagination relations-pagination"></div>
          <div class="swiper-button-prev relations-swiper-prev"></div>
          <div class="swiper-button-next relations-swiper-next"></div>
        </div>
      </div>
    </div>
  @endif

  @hook('product.detail.footer')
@endsection

@push('add-scripts')
  <script>
    let swiperMobile = null;
    const isIframe = bk.getQueryString('iframe', false);

    let app = new Vue({
      el: '#product-app',

      data: {
        product_total: 0,
        shipping_fee: 0,
        order_tota: 0,
        isNumSelect: false,
        selectedVariantsIndex: [], // 选中的变量索引
        images: [],
        product: {
          id: 0,
          images: "",
          model: "",
          origin_price: 0,
          origin_price_format: "",
          position: 0,
          price: 0,
          price_format: "",
          quantity: 0,
          sku: "",
        },
        quantity: 0,
        source: {
          skus: @json($product['skus']),
          variables: @json($product['variables'] ?? []),
        },
        price_setting: @json($product['price_setting'] ?? 'sku'),
        numPrices: @json($product['numPrices'] ?? []),
        centerDialogVisable: false, // 设置显示框的状态
        registerForm: {         // 添加的信息
          contacts: '',
          email: '',
          content: '',
          product_sku_id: '',
        },
        rules: {
          contacts: [{
            required: true,
            message: '{{ __('shop/products.enter_contacts') }}',
            trigger: 'blur'
          },],
          email: [{
            required: true,
            type: 'email',
            message: '{{ __('shop/products.enter_email') }}',
            trigger: 'blur'
          },],
          content: [{
            required: true,
            message: '{{ __('shop/products.enter_content') }}',
            trigger: 'blur'
          },],
        },
      },

      watch: {
        quantity: function (newval, oldval) {

          console.log("数量改变");

          let price = 0;
          if (this.numPrices.light == 0) {
            price = this.product.price
          } else {
            price = this.numPrices[0].price
            this.numPrices.forEach(v => {
              if (this.quantity > v.num) {
              }
              price = v.price
            })
          }

          this.product_total = (price * this.quantity).toFixed(2)
          this.shipping_fee = (this.product_total * 0.1).toFixed(2)
          this.order_tota = (this.product_total * 1 + this.shipping_fee * 1).toFixed(2)
        }
      },

      created() {
        if (this.price_setting === 'num') {
          // this.quantity = this.numPrices[0].num;
        }
        this.source.variables.forEach(variable => {
          if (variable.isNumSelect == true) {
            this.isNumSelect = true;
          }
          variable.values.forEach(value => {
            value.quantity = 0
          })
        })
      },

      beforeMount() {
        const skus = JSON.parse(JSON.stringify(this.source.skus));
        const skuDefault = skus.find(e => e.is_default)
        this.selectedVariantsIndex = skuDefault.variants

        // 为 variables 里面每一个 values 的值添加 selected、disabled 字段
        if (this.source.variables.length) {
          this.source.variables.forEach(variable => {
            variable.values.forEach(value => {
              this.$set(value, 'selected', false)
              this.$set(value, 'disabled', false)
            })
          })

          this.checkedVariants()
          this.getSelectedSku(false);
          this.updateSelectedVariantsStatus()
        } else {
          // 如果没有默认的sku，则取第一个sku的第一个变量的第一个值
          this.product = skus[0];
          this.images = @json($product['images'] ?? []);
        }
      },

      methods: {
        quantityChange() {
          setTimeout(() => {

            let num = 0;
            this.source.variables.forEach(variable => {
              variable.values.forEach(value => {
                num += parseInt(value.quantity);
              })
            })
            this.quantity = num;
            console.log(this.quantity, num)
          }, 200);
        },
        addSinger(form) {  // 点击确定按钮添加方法

          this.$refs[form].validate((valid) => {
            if (!valid) {
              this.$message.error('{{ __('shop/checkout.check_form') }}');
              return;
            }
            this.registerForm.product_sku_id = this.product.id
            $http.post(`/inquiry`, this.registerForm).then((res) => {
              layer.msg('Success')
              this.registerForm = {
                contacts: '',
                email: '',
                content: '',
                product_sku_id: '',
              }
            })

            this.centerDialogVisable = false
          });
        },
        checkedVariableValue(variable_index, value_index, value) {
          $('.product-image .swiper .swiper-slide').eq(0).addClass('active').siblings().removeClass('active');
          this.source.variables[variable_index].values.forEach((v, i) => {
            v.selected = i == value_index
          })

          this.updateSelectedVariantsIndex();
          this.getSelectedSku();
          this.updateSelectedVariantsStatus()
        },

        // 把对应 selectedVariantsIndex 下标选中 variables -> values 的 selected 字段为 true
        checkedVariants() {
          this.source.variables.forEach((variable, index) => {
            variable.values[this.selectedVariantsIndex[index]].selected = true
          })
        },

        getSelectedSku(reload = true) {
          // 通过 selectedVariantsIndex 的值比对 skus 的 variables
          const sku = this.source.skus.find(sku => sku.variants.toString() == this.selectedVariantsIndex.toString())
          this.images =
          @json($product['images'] ?? [])

          if (reload) {
            this.images.unshift(...sku.images)
          }

          this.product = sku;

          if (swiperMobile) {
            swiperMobile.slideTo(0, 0, false)
          }

          this.$nextTick(() => {
            $('#zoom img').attr('src', $('#swiper a').attr('data-image'));
            $('#zoom').trigger('zoom.destroy');
            $('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')});
          })

          closeVideo()
        },

        addCart(isBuyNow = false) {
          if (this.price_setting === 'num' && this.quantity < this.numPrices[0].num) {
            layer.msg('{{ __('shop/products.quantity_error') }}');
            return;
          }

          bk.addCart({sku_id: this.product.id, quantity: this.quantity, isBuyNow}, null, () => {
            if (isIframe) {
              let index = parent.layer.getFrameIndex(window.name); //当前iframe层的索引
              parent.bk.getCarts();

              setTimeout(() => {
                parent.layer.close(index);

                if (isBuyNow) {
                  parent.location.href = 'checkout'
                } else {
                  parent.$('.btn-right-cart')[0].click()
                }
              }, 400);
            } else {
              if (isBuyNow) {
                location.href = 'checkout'
              }
            }
          });
        },

        updateSelectedVariantsIndex() {
          // 获取选中的 variables 内 value的 下标 index 填充到 selectedVariantsIndex 中
          this.source.variables.forEach((variable, index) => {
            variable.values.forEach((value, value_index) => {
              if (value.selected) {
                this.selectedVariantsIndex[index] = value_index
              }
            })
          })
        },

        updateSelectedVariantsStatus() {
          // skus 里面 quantity 不为 0 的 sku.variants
          const skus = this.source.skus.filter(sku => sku.quantity > 0).map(sku => sku.variants);
          this.source.variables.forEach((variable, index) => {
            variable.values.forEach((value, value_index) => {
              const selectedVariantsIndex = this.selectedVariantsIndex.slice(0);

              selectedVariantsIndex[index] = value_index;
              const selectedSku = skus.find(sku => sku.toString() == selectedVariantsIndex.toString());
              if (selectedSku) {
                value.disabled = false;
              } else {
                value.disabled = true;
              }
            })
          });
        },
      }
    });

    $(document).on("mouseover", ".product-image #swiper .swiper-slide a", function () {
      $(this).parent().addClass('active').siblings().removeClass('active');
      $('#zoom').trigger('zoom.destroy');
      $('#zoom img').attr('src', $(this).attr('data-image'));
      $('#zoom').zoom({url: $(this).attr('data-zoom-image')});
      closeVideo()
    });

    var swiper = new Swiper("#swiper", {
      direction: "vertical",
      slidesPerView: 1,
      spaceBetween: 3,
      breakpoints: {
        375: {
          slidesPerView: 3,
          spaceBetween: 3,
        },
        480: {
          slidesPerView: 4,
          spaceBetween: 27,
        },
        768: {
          slidesPerView: 6,
          spaceBetween: 3,
        },
      },
      navigation: {
        nextEl: '.new-feature-slideshow-next',
        prevEl: '.new-feature-slideshow-prev',
      },
      observer: true,
      observeParents: true
    });

    var relationsSwiper = new Swiper('.relations-swiper', {
      watchSlidesProgress: true,
      breakpoints: {
        320: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 30,
        },
      },
      spaceBetween: 30,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.relations-swiper-next',
        prevEl: '.relations-swiper-prev',
      },

      // 如果需要分页器
      pagination: {
        el: '.relations-pagination',
        clickable: true,
      },
    })

    @if (is_mobile())
      swiperMobile = new Swiper("#swiper-mobile", {
      slidesPerView: 1,
      pagination: {
        el: ".mobile-pagination",
      },
      observer: true,
      observeParents: true
    });
    @endif

    $(document).ready(function () {
      $('#zoom').trigger('zoom.destroy');
      $('#zoom').zoom({url: $('#swiper a').attr('data-zoom-image')});
    });

    const selectedVariantsIndex = app.selectedVariantsIndex;
    const variables = app.source.variables;

    const selectedVariants = variables.map((variable, index) => {
      return variable.values[selectedVariantsIndex[index]]
    });
  </script>
@endpush