<?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 === 'CustomizableCheckboxOption' && option.isShow">
    <div class="flex flex-col  py-2 last:mb-6 last:border-b w-full items-center"
        :class="option.div_class" x-show="+option.is_hidden === 0">
        <?= $block->getChildHtml('mageworx.apo.product.form.checkbox_option.label') ?>
        <div class="sm:ml-2 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-for="checkboxOption in option.checkbox_value">
                    <div class="w-full" :class="{'mb-2': (config.is_qty_input_enabled && option.qty_input === TOGGLE.TRUE && checkboxOption.isShow)}">
                        <div x-show="checkboxOption.isShow" class="flex flex-col gap-x-2 gap-y-2">
                            <div class="flex justify-between">
                                <div class="flex items-center gap-x-2">
                                    <input type="checkbox" :id="checkboxOption.option_type_id"
                                        @change="onChangeField(option.option_id)" :disabled="isLoading || checkboxOption.htmlDisabled"
                                        form="product_addtocart_form" :name="'options[' + option.option_id + '][]'"
                                        x-model="option.value" :value="checkboxOption.option_type_id">
                                    <label class="font-sen" :for="checkboxOption.option_type_id"
                                        x-text="checkboxOption.specialPriceTitle
                                            ? checkboxOption.specialPriceTitle
                                            : checkboxOption.title +
                                                (checkboxOption.priceText ? ' +' + checkboxOption.priceText : '')
                                                + checkboxOption.qtyText"></label>
                                </div>
                                <template x-if="config.is_qty_input_enabled && option.qty_input === TOGGLE.TRUE">
                                    <div class="flex flex-col">
                                        <span x-text="config.default_qty_label"></span>
                                        <input :placeholder="qty" :readonly="isLoading" type="number" @change="onChangeQty(option.option_id)"
                                            :disabled="isLoading || checkboxOption.htmlDisabled || !option.value.includes(checkboxOption.option_type_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 + '_' + checkboxOption.option_type_id + '_qty'" :required="option.required" x-model="checkboxOption.qtyInput"
                                            :min="0" :step="1" form="product_addtocart_form" :name="'options_qty[' + option.option_id + '][' + checkboxOption.option_type_id + ']'">
                                    </div>
                                </template>
                            </div>
                            <div class="relative" x-show="checkboxOption.description"
                                 @mouseover.prevent.stop="checkboxOption.isVisibleTooltip = true"
                                 @mouseleave.prevent.stop="checkboxOption.isVisibleTooltip = false">
                                <?= $heroicons->informationCircleHtml("w-4 h-4") ?>
                                <div x-show="checkboxOption.isVisibleTooltip && checkboxOption.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" x-html="checkboxOption.description"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <template x-if="
                                    (option.gallery_type === 'beside_option'
                                    || (option.gallery_type === 'once_selected' && option.value.includes(checkboxOption.option_type_id)))
                                    && checkboxOption.images_data.images_gallery.length > 0">
                                <div class="flex flex-wrap gap-y-2 gap-x-2 mb-4">
                                    <template x-for="img in checkboxOption.images_data.images_gallery">
                                        <img :src="img.url"/>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
                <template x-for="value in option.checkbox_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>
        </div>
    </div>
</template>
