<?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 === 'CustomizableRadioOption' && 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.radio_option.label') ?>
        <div class=" text-gray-900 text-left w-full mw-apo-control">
            <div class="flex items-start space-x-2 swatch-attribute-options flex-col">
                <template x-if="!option.required">
                    <div>
                        <input type="radio" value="" x-model="option.value"
                            @change="onChangeField(option.option_id)"
                            :id="'options_' + option.option_id + '_none'"
                            form="product_addtocart_form" :name="'options[' + option.option_id + ']'">
                        <label :for="'options_' + option.option_id + '_none'">
                            <?= $escaper->escapeHtml(__('None')); ?>
                        </label>
                    </div>
                </template>

                <template x-for="radioOption in option.radio_value">
                    <div>
                        <div x-show="radioOption.isShow" class="flex flex-col gap-x-2 gap-y-2">
                            <div>
                                <input type="radio" :disabled="isLoading || radioOption.htmlDisabled"
                                       :required="option.required || radioOption.disabled === TOGGLE.TRUE"
                                       :value="radioOption.option_type_id" x-model="option.value"
                                       @change="onChangeField(option.option_id)"
                                       :id="'options_' + option.option_id + '_' + radioOption.option_type_id"
                                       form="product_addtocart_form" :name="'options[' + option.option_id + ']'">
                                <label :for="'options_' + option.option_id + '_' + radioOption.option_type_id"
                                       x-text="radioOption.specialPriceTitle
                                        ? radioOption.specialPriceTitle
                                        : radioOption.title +
                                            (radioOption.priceText ? ' +' + radioOption.priceText : '')
                                            + radioOption.qtyText"></label>
                            </div>
                            <div class="relative"
                                 x-show="radioOption.description || radioOption.images_data?.tooltip_image"
                                 @mouseover.prevent.stop="radioOption.isVisibleTooltip = true"
                                 @mouseleave.prevent.stop="radioOption.isVisibleTooltip = false">
                                <?= $heroicons->informationCircleHtml("w-4 h-4") ?>
                                <div
                                    x-show="radioOption.isVisibleTooltip && (radioOption.description || radioOption.images_data?.tooltip_image)">
                                    <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">
                                            <img :src="radioOption.images_data?.tooltip_image?.url"
                                                 class="w-full h-auto"
                                                 :alt="radioOption.images_data?.tooltip_image?.label"/>
                                            <div class="text-center" x-html="radioOption.description"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <template x-if="
                                    (option.gallery_type === 'beside_option'
                                    || (option.gallery_type === 'once_selected' && (option.value === radioOption.option_type_id)))
                                    && radioOption.images_data.images_gallery.length > 0">
                                <div class="flex flex-wrap gap-y-2 gap-x-2 mb-4">
                                    <template x-for="img in radioOption.images_data.images_gallery">
                                        <img :src="img.url"/>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
                <template x-for="value in option.radio_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>
        </div>
    </div>
</template>
