<?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 === 'CustomizableDateOption' && option.isShow && option.dateType === 'date'">
    <div class="flex flex-col sm:flex-row 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.date_option.label') ?>
        <div class="sm:ml-2 text-gray-900 text-left w-full sm:w-1/2 mw-apo-control">
            <input type="date" x-model="option.value" @change="onChangeDateInput(option.option_id)" :required="option.required" />
            <input type="text" :name="'options[' + option.option_id + '][day]'" form="product_addtocart_form" hidden :value="option.dayValue" />
            <input type="text" :name="'options[' + option.option_id + '][month]'" form="product_addtocart_form" hidden :value="option.monthValue" />
            <input type="text" :name="'options[' + option.option_id + '][year]'" form="product_addtocart_form" hidden :value="option.yearValue" />
        </div>
    </div>
</template>

<template x-if="option.__typename === 'CustomizableDateOption' && option.isShow && option.dateType === 'date_time' && option.disabled === TOGGLE.FALSE">
    <div class="flex flex-col sm:flex-row border-t border-gray-300 py-2 last:mb-6 last:border-b w-full items-center" :class="option.div_class">
        <label class="label text-gray-700 text-left w-full sm:w-1/2" for="options_1_text">
            <span x-text="option.title"></span>
            <span x-text="option.priceText ? '+' + option.priceText : ''"></span>
            <span x-show="option.required" class="text-red-500">*</span>
        </label>
        <div class="sm:ml-2 text-gray-900 text-left w-full sm:w-1/2 mw-apo-control">
            <input type="datetime-local" x-model="option.value" @change="onChangeDateInput(option.option_id)" :required="option.required" />
            <input type="text" :name="'options[' + option.option_id + '][day]'" form="product_addtocart_form" hidden :value="option.dayValue" />
            <input type="text" :name="'options[' + option.option_id + '][month]'" form="product_addtocart_form" hidden :value="option.monthValue" />
            <input type="text" :name="'options[' + option.option_id + '][year]'" form="product_addtocart_form" hidden :value="option.yearValue" />
            <input type="text" :name="'options[' + option.option_id + '][hour]'" form="product_addtocart_form" hidden :value="option.hourValue" />
            <input type="text" :name="'options[' + option.option_id + '][minute]'" form="product_addtocart_form" hidden :value="option.minuteValue" />
            <input type="text" :name="'options[' + option.option_id + '][day_part]'" form="product_addtocart_form" hidden :value="option.dayPartValue" />
        </div>
    </div>
</template>

<template x-if="option.__typename === 'CustomizableDateOption' && option.isShow && option.dateType === 'time' && option.disabled === TOGGLE.FALSE">
    <div class="flex flex-col sm:flex-row border-t border-gray-300 py-2 last:mb-6 last:border-b w-full items-center" :class="option.div_class">
        <label class="label text-gray-700 text-left w-full sm:w-1/2" for="options_1_text">
            <span x-text="option.title"></span>
            <span x-text="option.priceText ? '+' + option.priceText : ''"></span>
            <span x-show="option.required" class="text-red-500">*</span>
        </label>
        <div class="sm:ml-2 text-gray-900 text-left w-full sm:w-1/2 mw-apo-control">
            <input type="time" x-model="option.value" @change="onChangeDateInput(option.option_id)" :required="option.required" />
            <input type="text" :name="'options[' + option.option_id + '][hour]'" form="product_addtocart_form" hidden :value="option.hourValue" />
            <input type="text" :name="'options[' + option.option_id + '][minute]'" form="product_addtocart_form" hidden :value="option.minuteValue" />
            <input type="text" :name="'options[' + option.option_id + '][day_part]'" form="product_addtocart_form" hidden :value="option.dayPartValue" />
        </div>
    </div>
</template>
