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

// @codingStandardsIgnoreFile
/**
 * @var \Magento\Payment\Block\Transparent\Form $block
 */
$code = $block->escapeHtml($block->getMethodCode());
$ccType = $block->getInfoData('cc_type');
$ccExpMonth = $block->getInfoData('cc_exp_month');
$ccExpYear = $block->getInfoData('cc_exp_year');
?>
<fieldset class="fieldset payment items ccard <?= /* @noEscape */ $code ?>"
          id="payment_form_<?= /* @noEscape */ $code ?>" style="display: none;">
    <div class="field type required">
        <label for="<?= /* @noEscape */ $code ?>_cc_type" class="label">
            <span><?= $block->escapeHtml(__('Credit Card Type')) ?></span>
        </label>
        <div class="control">
            <select id="<?= /* @noEscape */ $code ?>_cc_type"
                    data-mage-init='{
                        "creditCardType":{"creditCardTypeContainer":"#<?= /* @noEscape */ $code ?>_cc_type_ss_div"}
                    }'
                    name="payment[cc_type]" data-validate='{
                        required:true,
                        "validate-cc-type-select":"#<?= /* @noEscape */ $code ?>_cc_number"
                    }'
                    class="select">
                <option value=""><?= $block->escapeHtml(__('--Please Select--')) ?></option>
            <?php foreach ($block->getCcAvailableTypes() as $typeCode => $typeName): ?>
                <option value="<?= $block->escapeHtml($typeCode) ?>"
                    <?php if ($typeCode == $ccType): ?> selected="selected"<?php endif; ?>>
                    <?= $block->escapeHtml($typeName) ?>
                </option>
            <?php endforeach; ?>
            </select>
        </div>
    </div>
    <div class="field number required">
        <label for="<?= /* @noEscape */ $code ?>_cc_number" class="label">
            <span><?= $block->escapeHtml(__('Credit Card Number')) ?></span>
        </label>
        <div class="control">
            <input type="number" id="<?= /* @noEscape */ $code ?>_cc_number" name="payment[cc_number]"
                   title="<?= $block->escapeHtml(__('Credit Card Number')) ?>" class="input-text" value=""
                   data-validate='{
                       "required-number":true,
                       "validate-cc-number":"#<?= /* @noEscape */ $code ?>_cc_type",
                       "validate-cc-type":"#<?= /* @noEscape */ $code ?>_cc_type"
                   }'/>
        </div>
    </div>
    <div class="field date required" id="<?= /* @noEscape */ $code ?>_cc_type_exp_div">
        <label for="<?= /* @noEscape */ $code ?>_expiration" class="label">
            <span><?= $block->escapeHtml(__('Expiration Date')) ?></span>
        </label>
        <div class="control">
            <div class="fields group group-2">
                <div class="field no-label month">
                    <div class="control">
                        <select id="<?= /* @noEscape */ $code ?>_expiration" name="payment[cc_exp_month]" class="select month"
                                data-validate='{required:true, "validate-cc-exp":"#<?= /* @noEscape */ $code ?>_expiration_yr"}'>
                            <?php foreach ($block->getCcMonths() as $k => $v): ?>
                                <option value="<?= /* @noEscape */ $k ? $block->escapeHtml($k) : '' ?>"
                                    <?php if ($k == $ccExpMonth): ?> selected="selected"<?php endif; ?>>
                                    <?= $block->escapeHtml($v) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="field no-label year">
                    <div class="control">
                        <select id="<?= /* @noEscape */ $code ?>_expiration_yr" name="payment[cc_exp_year]"
                                class="select year" data-validate='{required:true}'>
                            <?php foreach ($block->getCcYears() as $k => $v): ?>
                                <option value="<?= /* @noEscape */ $k ? $block->escapeHtml($k) : '' ?>
                                "<?php if ($k == $ccExpYear): ?> selected="selected"<?php endif; ?>>
                                    <?= $block->escapeHtml($v) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php if ($block->hasVerification()): ?>
    <div class="field cvv required" id="<?= /* @noEscape */ $code ?>_cc_type_cvv_div">
        <label for="<?= /* @noEscape */ $code ?>_cc_cid" class="label">
            <span><?= $block->escapeHtml(__('Card Verification Number')) ?></span>
        </label>
        <div class="control">
            <input type="number" title="<?= $block->escapeHtml(__('Card Verification Number')) ?>"
                   class="input-text cvv" id="<?= /* @noEscape */ $code ?>_cc_cid" name="payment[cc_cid]" value=""
                   data-validate='{"required-number":true, "validate-cc-cvn":"#<?= /* @noEscape */ $code ?>_cc_type"}' />
            <?php $content = '<img src=\"' . $block->getViewFileUrl('Magento_Checkout::cvv.png') . '\" alt=\"' .
                $block->escapeHtml(__('Card Verification Number Visual Reference')) .
                '\" title=\"' . $block->escapeHtml(__('Card Verification Number Visual Reference')) . '\" />'; ?>
            <div class="note">
                <a href="#" class="action cvv" title="<?= $block->escapeHtml(__('What is this?')) ?>"
                   data-mage-init='{"tooltip": {"content": "<?= /* @noEscape */ $content ?>"}}'>
                    <span><?= $block->escapeHtml(__('What is this?')) ?></span>
                </a>
            </div>
        </div>
    </div>
    <?php endif; ?>
    <?= $block->getChildHtml() ?>
</fieldset>
