<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/* @var $block \Magento\Catalog\Block\Product\View\Options\Type\Date */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
?>

<?php $_option = $block->getOption(); ?>
<?php $_optionId = (int)$_option->getId(); ?>
<?php $optionId = /* @noEscape */ $_optionId ?>
<div class="admin__field field<?= $_option->getIsRequire() ? ' required' : '' ?>">
    <label class="label admin__field-label">
        <?= $block->escapeHtml($_option->getTitle()) ?>
        <?= /* @noEscape */ $block->getFormattedPrice() ?>
    </label>
    <div class="admin__field-control control">

        <?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_DATE_TIME
            || $_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_DATE):?>

            <?= $block->getDateHtml() ?>

            <?php if (!$block->useCalendar()):?>
                <?php $scriptString = <<<script
                    require([
                        "prototype",
                        "Magento_Catalog/catalog/product/composite/configure"
                    ], function(){

                        window.dateOption = productConfigure.opConfig.dateOption;
                        Event.observe('options_{$optionId}_month', 'change', dateOption.reloadMonth.bind(dateOption));
                        Event.observe('options_{$optionId}_year', 'change', dateOption.reloadMonth.bind(dateOption));
                    });
script;
                ?>
                <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
            <?php endif; ?>

        <?php endif; ?>

        <?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_DATE_TIME
            || $_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_TIME):?>
            <span class="time-picker"><?= $block->getTimeHtml() ?></span>
        <?php endif; ?>

        <input type="hidden"
               name="validate_datetime_<?= /* @noEscape */ $_optionId ?>"
               class="validate-datetime-<?= /* @noEscape */ $_optionId ?>"
               value="" />
        <?php $scriptString = <<<script
            require([
                "jquery",
                "mage/backend/validation"
            ], function(jQuery){

                //<![CDATA[
script;
        if ($_option->getIsRequire()):
            $scriptString .= <<<script
                jQuery.validator.addMethod('validate-datetime-{$optionId}', function(v) {
                    var dateTimeParts = jQuery('.datetime-picker[id^="options_{$optionId}"]');
                    for (var i=0; i < dateTimeParts.length; i++) {
                        if (dateTimeParts[i].value == "") return false;
                    }
                    return true;
                }, '{$block->escapeJs(__('This is a required option.'))}');
script;
        else:
            $scriptString .= <<<script
                jQuery.validator.addMethod('validate-datetime-{$optionId}', function(v) {
                    var dateTimeParts = jQuery('.datetime-picker[id^="options_{$optionId}"]');
                    var hasWithValue = false, hasWithNoValue = false;
                    var pattern = /day_part$/i;
                    for (var i=0; i < dateTimeParts.length; i++) {
                        if (! pattern.test(dateTimeParts[i].id)) {
                            if (dateTimeParts[i].value === "") {
                                hasWithValue = true;
                            } else {
                                hasWithNoValue = true;
                            }
                        }
                    }
                    return hasWithValue ^ hasWithNoValue;
                }, '{$block->escapeJs(__('The field isn\'t complete.'))}');
script;
        endif;
        $scriptString .= <<<script
                //]]>

            });
script;
        ?>
        <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
    </div>
</div>
