<?php
declare(strict_types=1);
/**
 * Copyright © MageWorx. All rights reserved.
 * See https://www.mageworx.com/terms-and-conditions for license details.
 */
?>

<?php
use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;

/** @var Template $block */
/** @var Escaper $escaper */
?>

<template x-if="option.__typename === 'CustomizableMultipleOption' && option.isShow">
    <div class="flex flex-col  border-t border-gray-300 py-2 last:mb-6 last:border-b w-full items-center" :class="option.div_class">
        <?= $block->getChildHtml('mageworx.apo.product.form.multi_option.label') ?>
        <template x-if="option.is_swatch === TOGGLE.TRUE">
            <div class="mw-apo-control">
                <div class="flex space-x-4 gap-y-2">
                    <template x-for="value in option.multiple_value">
                        <div>
                            <div x-show="value.isShow" class="flex-col items-center relative cursor-pointer"
                                @click="!isLoading && !value.htmlDisabled && chooseMultiSwatch(value.option_type_id)"
                                @mouseover.prevent.stop="value.isVisibleTooltip = true"
                                @mouseleave.prevent.stop="value.isVisibleTooltip = false">
                                <div x-show="value.isVisibleTooltip && (value.description || value.images_data?.tooltip_image || value.qtyText.length > 0 || (!config.is_show_swatch_price && value.priceText))">
                                    <div class="shadow-lg">
                                        <div class="absolute left-0 z-10 max-w-64 p-2 transform-translate-x-full bg-white rounded-lg shadow-lg p-4"
                                            style="bottom: calc(100% + 10px)">
                                            <template x-if="value.images_data?.tooltip_image">
                                                <div class="text-center mb-4">
                                                    <img :src="value.images_data?.tooltip_image?.url" class="w-full h-auto"
                                                        :style="'width:' + config.tooltip_image_thumbnail_size + 'px; height: auto;'"
                                                        :alt="value.images_data?.tooltip_image?.label"/>
                                                </div>
                                            </template>
                                            <p class="text-md font-medium text-center" x-show="value.title" x-text="value.title"></p>
                                            <template x-if="!config.is_show_swatch_price && value.priceText">
                                                <p x-text="'+' + value.priceText"></p>
                                            </template>
                                            <p class="text-center mb-2" x-show="value.qtyText.length > 0" x-text="value.qtyText"></p>
                                            <div class="text-center text-sm" x-show="value.description" x-html="value.description"></div>
                                        </div>
                                    </div>
                                </div>
                                <template x-if="value.images_data?.base_image?.url">
                                    <div class="mx-auto flex justify-center items-center relative"
                                        :class="{'border-2 border-gray-900': (option.value.includes(value.option_type_id))}"
                                        :style="'width:' + config.swatch_width + 'px;height:' + config.swatch_height + 'px;' + 'background-image: url(' + value.images_data?.base_image?.url + ');background-size: contain;background-repeat: no-repeat;background-position: center;'">
                                        <div class="text-center" x-show="!value.images_data?.base_image?.url">
                                            <span :class="{'font-bold': option.value.includes(value.option_type_id)}"
                                                x-text="value.title"></span>
                                        </div>
                                        <?= $block->getChildHtml('mageworx.apo.product.form.multi_option.disabled_swatch') ?>
                                    </div>
                                </template>
                                <template x-if="!value.images_data?.base_image?.url">
                                    <div class="mx-auto py-2 px-2 flex justify-center items-center relative"
                                        :style="'max-width:' + config.text_swatch_max_width + 'px;'"
                                        :class="{'border-2 border-gray-900': (option.value.includes(value.option_type_id)),
                                            'border-2': !value.images_data?.base_image?.url,
                                            'hover:underline': value.url}">
                                        <div class="text-center" x-show="!value.images_data?.base_image?.url">
                                            <span :class="{'font-bold': option.value.includes(value.option_type_id)}"
                                                x-text="value.title"></span>
                                        </div>
                                        <?= $block->getChildHtml('mageworx.apo.product.form.multi_option.disabled_swatch') ?>
                                    </div>
                                </template>
                                <div class="text-center mt-2">
                                    <template x-if="config.is_show_swatch_title">
                                        <p :class="{'font-bold': option.value.includes(value.option_type_id)}"
                                        :style="'max-width:' + (value.images_data?.base_image?.url ? config.swatch_width : config.text_swatch_max_width) + 'px'"
                                        x-show="value.images_data?.base_image?.url" x-text="value.title">
                                        </p>
                                    </template>
                                    <template x-if="config.is_show_swatch_price">
                                        <span x-text="value.priceText ? '+' + value.priceText : ''"></span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template x-if="option.value.length > 0">
                        <input type="hidden" x-model="option.value" form="product_addtocart_form" :name="'options[' + option.option_id + '][]'" />
                    </template>
                </div>
                <template x-for="value in option.multiple_value">
                    <div>
                        <template x-if="option.value.includes(value.option_type_id)">
                            <div>
                                <template x-if="value.specialPriceTitle">
                                    <div class="mt-4" x-text="value.specialPriceTitle"></div>
                                </template>
                                <template x-if="value.tierPricesTable.length > 0">
                                    <div>
                                        <template x-for="tier in value.tierPricesTable">
                                            <div class="mt-4" x-html="tier"></div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </template>
        <template x-if="option.is_swatch === TOGGLE.FALSE">
            <div class="sm:ml-2 text-gray-900 text-left w-full mw-apo-control">
                <select class="rounded-none product-custom-option form-select w-full" multiple="multiple"
                        x-model="option.value" @change="onChangeField(option.option_id)" :disabled="isLoading"
                        :id="'select_' + option.option_id" :required="option.required"
                        form="product_addtocart_form" :name="'options[' + option.option_id + '][]'">
                    <template x-for="multipleOption in option.multiple_value">
                        <option x-show="multipleOption.isShow" :value="multipleOption.option_type_id" :disabled="multipleOption.htmlDisabled"
                                x-text="multipleOption.specialPriceTitle
                                    ? multipleOption.specialPriceTitle
                                    : multipleOption.title
                                        + (multipleOption.priceText ? ' +' + multipleOption.priceText : '')
                                        + multipleOption.qtyText"></option>
                    </template>
                </select>
                <template x-if="option.gallery_type === 'beside_option'">
                    <div class="flex flex-wrap gap-x-2 gap-y-2 mt-2">
                        <template x-for="value in option.multiple_value">
                            <div>
                                <template x-for="img in value.images_data.images_gallery">
                                    <img :src="img.url"/>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-if="option.gallery_type === 'once_selected'">
                    <div class="flex flex-wrap gap-x-2 gap-y-2 mt-2">
                        <template x-for="multipleOption in option.multiple_value">
                            <div>
                                <template x-if="option.value.includes(multipleOption.option_type_id)">
                                    <div>
                                        <template x-for="img in getValue(multipleOption.option_type_id)?.images_data.images_gallery">
                                            <img :src="img.url"/>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
                <template x-for="value in option.multiple_value">
                    <div>
                        <template x-if="option.value.includes(value.option_type_id)">
                            <div>
                                <template x-if="value.tierPricesTable.length > 0">
                                    <div>
                                        <template x-for="tier in value.tierPricesTable">
                                            <div class="mt-4" x-html="tier"></div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>
