<?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;
use Hyva\Theme\ViewModel\HeroiconsOutline;

/** @var Template $block */
/** @var Escaper $escaper */
/** @var HeroiconsOutline $heroicons */

$heroicons = $viewModels->require(HeroiconsOutline::class);
?>

<template x-if="option.__typename === 'CustomizableDropDownOption' && option.isShow">
    <div class="flex flex-col   py-2 last:mb-6 last:border-b w-full items-center" :class="option.div_class">
        <?= $block->getChildHtml('mageworx.apo.product.form.dropdown_option.label') ?>
        <template x-if="option.is_swatch === TOGGLE.TRUE">
            <div class="mw-apo-control text-left w-full relative ml-2">
                <div class="flex flex-wrap flex-1  gap-y-2">
                    <template x-for="value in option.dropdown_value">
                        <div>
                            <div x-show="value.isShow" class="flex-col items-center relative cursor-pointer"
                                @click="!isLoading && !value.htmlDisabled && changeSwatch(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 mb-2" 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 === 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 === value.option_type_id)}"
                                                x-text="value.title"></span>
                                        </div>
                                        <?= $block->getChildHtml('mageworx.apo.product.form.dropdown_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="{' bg-gray-100': (option.value === value.option_type_id),
                                            '': !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 === value.option_type_id)}"
                                                x-html="value.title"></span>
                                        </div>
                                        <?= $block->getChildHtml('mageworx.apo.product.form.dropdown_option.disabled_swatch') ?>
                                    </div>
                                </template>
                                <div class="text-center mt-2"
                                    :style="'max-width:' + (value.images_data?.base_image?.url ? config.swatch_width : config.text_swatch_max_width) + 'px'">
                                    <template x-if="config.is_show_swatch_title">
                                        <p :class="{'font-bold': (option.value === value.option_type_id)}"
                                        x-show="value.images_data?.base_image?.url" x-text="value.title">
                                        </p>
                                    </template>
                                    <template x-if="config.is_show_swatch_price && value.priceText">
                                        <span x-text="value.priceText"></span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                    <input type="hidden" x-model="option.value" form="product_addtocart_form" :name="'options[' + option.option_id + ']'" />
                </div>
                <template x-for="value in option.dropdown_value">
                    <div>
                        <template x-if="option.value === 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>
                <template x-if="config.is_qty_input_enabled && option.qty_input === TOGGLE.TRUE">
                    <div class="mt-2">
                        <span x-text="config.default_qty_label"></span>
                        <input :placeholder="qty" :readonly="isLoading" :disabled="isEmpty(option.value)" type="number"
                            @change="onChangeQty(option.option_id)"
                            class="product-custom-option form-input px-2 py-2 w-20 text-center invalid:ring-2 invalid:ring-red-500"
                            :id="'options_' + option.option_id + '_qty'" :required="option.required" x-model="option.qtyInput"
                            :min="0" :step="1" form="product_addtocart_form" :name="'options_qty[' + option.option_id + ']'">
                    </div>
                </template>
            </div>
        </template>
        <template x-if="option.is_swatch === TOGGLE.FALSE">
            <div class="sm:ml-2 text-gray-900 text-left w-full  flex items-center gap-x-4 flex-wrap mw-apo-control">
                <select x-model="option.value" @change="onChangeField(option.option_id)" :disabled="isLoading"
                        class="rounded-none product-custom-option form-select w-full"
                        :id="'select_' + option.option_id" :required="option.required && +option.is_swatch !== 1"
                        form="product_addtocart_form" :name="'options[' + option.option_id + ']'">
                    <option value=""><?= $escaper->escapeHtml(__('-- Please select --')); ?></option>
                    <template x-for="value in option.valuesForAlpineLoop">
                        <option :value="value.option_type_id" :selected="value.option_type_id === option.value"
                            :disabled="value.htmlDisabled" x-text="value.specialPriceTitle
                                ? value.specialPriceTitle
                                : value.title + (value.priceText ? ' +' + value.priceText : '')
                                    + value.qtyText">
                        </option>
                    </template>
                </select>
                <template x-for="value in option.dropdown_value">
                    <div class="relative my-2" x-show="option.value && (value.option_type_id === option.value) && (value.images_data?.tooltip_image || value.description)">
                        <div @mouseover.prevent.stop="option.isVisibleTooltip = true"
                             @mouseleave.prevent.stop="option.isVisibleTooltip = false">
                            <?= $heroicons->informationCircleHtml("w-4 h-4") ?>
                        </div>
                        <div>
                            <template x-if="option.isVisibleTooltip && (value.option_type_id === option.value) && (value.images_data?.tooltip_image || value.description)">
                                <div class="shadow-lg">
                                    <div class="absolute top-full right-0 z-10 w-48 p-2 transform-translate-x-full md:-translate-x-1/3 -translate-y-full bg-white rounded-lg shadow-lg p-4">
                                        <div class="text-center mb-4" x-show="value.images_data?.tooltip_image">
                                            <img :src="value.images_data?.tooltip_image?.url" class="w-full h-auto"
                                                 :alt="value.images_data?.tooltip_image?.label"/>
                                        </div>
                                        <div class="text-center" x-show="value.description" x-html="value.description"></div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
                <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.dropdown_value">
                            <template x-for="img in value.images_data.images_gallery">
                                <img :src="img.url"/>
                            </template>
                        </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="img in getValue(option.value)?.images_data.images_gallery">
                            <img :src="img.url"/>
                        </template>
                    </div>
                </template>
                <template x-for="value in option.dropdown_value">
                    <div>
                        <template x-if="option.value && (value.option_type_id === option.value)">
                            <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>
                <template x-if="config.is_qty_input_enabled && option.qty_input === TOGGLE.TRUE">
                    <div  class="mt-2">
                    <span x-text="config.default_qty_label"></span>
                    <input :placeholder="qty" :readonly="isLoading" :disabled="isEmpty(option.value)" type="number"
                        @change="onChangeQty(option.option_id)"
                        class="product-custom-option form-input px-2 py-2 w-20 text-center invalid:ring-2 invalid:ring-red-500"
                        :id="'options_' + option.option_id + '_qty'" :required="option.required" x-model="option.qtyInput"
                        :min="0" :step="1" form="product_addtocart_form" :name="'options_qty[' + option.option_id + ']'">
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>
