<?php
$path = $this->pluginUrl;
?>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<p><?php echo $this->description; ?></p>
<div class="tpay-insidebg">
    <div class="tpay-header-wrapper">
        <div class="tpay-header-logo">
            <img class="tpay-logo" src="https://tpay.com/img/banners/tpay_logo_white.svg" style="float: left; padding: 35px 0 0 15px; max-height: 100%"/>
        </div>
        <div class="tpay-header-belt"></div>
    </div>
    <p id="tpayRSA" style="display: none"><?php echo $this->keyRSA; ?></p>
    <div class="tpay-panel-inside-content">
        <input name="tpay-cards-regulations-input" id="tpay-cards-regulations-input" type="hidden">
        <div id="card_payment_form" class="tpay-cards-choice">
            <?php if (!empty($data['userCards'])) { ?>
                <div id="saved_card_payment" style="visibility: visible">
                <?php
                foreach ($data['userCards'] as $card) { ?>
                    <div>
                        <input type="radio" name="savedId"
                               id="cardN<?php echo $card['cardId'] ?>"
                               value="<?php echo $card['cardId'] ?>"/>
                        <label for="cardN<?php echo $card['cardId'] ?>"><?php $lang->l('saved_card_label');
                            echo $card['shortCode'];
                            if (isset($card['vendor'])) { ?>
                                <div id="saved_icon" class="tpay-<?php echo $card['vendor'] ?>-icon"></div>
                            <?php } ?>
                        </label>
                    </div>
                <?php } ?>
                </div>
            <div class="tpay-new-card-section">
                <input type="radio" name="savedId" id="newCard" value="new"/>
                <label for="newCard"> <?php $lang->l('new_card_label'); ?></label>
            </div>
            <div id="card_form" style="display: none">
                <?php } ?>
                <input type="hidden" name="card_data" id="card_data" value=""/>
                <input type="hidden" name="card_vendor" id="card_vendor" value=""/>
                <div class="tpay-channel-form-wrapper tpay-content-wrapper-class">
                    <div id="card_payment" class="tpay-input-wrapper">
                        <div class="tpay-col">
                            <div class="tpay-row">
                                <div class="tpay-input-wrapper">
                                    <div class="tpay-input-credit-card-number">
                                        <div class="tpay-input-label"><?php $lang->l('card_number') ?></div>
                                        <input id="card_number"
                                               pattern="\d*"
                                               autocompletetype="cc-number"
                                               size="30"
                                               type="tel"
                                               autocomplete="off"
                                               maxlength="23"
                                               placeholder="XXXX XXXX XXXX XXXX"
                                               tabindex="1"
                                               value=""
                                               class="tpay-input-value"
                                        />
                                        <div class="tpay-card-icon "></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tpay-col">
                            <div class="tpay-row">
                                <div class="tpay-expiration-date-input tpay-input-wrapper">
                                    <div class="tpay-input-label"><?php $lang->l('expiration_date') ?></div>
                                    <input id="expiry_date"
                                           maxlength="9"
                                           type="tel"
                                           placeholder="01 / 2020"
                                           autocomplete="off"
                                           autocompletetype="cc-exp"
                                           tabindex="2"
                                           value=""
                                           class="tpay-input-value"
                                    />
                                </div>
                                <div class="tpay-cvv-input tpay-input-wrapper">
                                    <div class="tpay-input-label tpay-input-cvc" title="<?php $lang->l('signature') ?>">
                                        CVC
                                    </div>
                                    <input id="cvc"
                                           maxlength="4"
                                           type="tel"
                                           autocomplete="off"
                                           autocompletetype="cc-cvc"
                                           placeholder="XXX"
                                           tabindex="3"
                                           value=""
                                           class="tpay-input-value"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tpay-row" style="width: 10px; height: 10px;"></div>
                <div class="tpay-row">
                    <div class="tpay-amPmCheckbox">
                        <input type="checkbox" id="card_save" name="card_save"/>
                        <label for="card_save"
                               class="tpay-info-label"
                               title="<?php $lang->l('save_card_info') ?>"><?php $lang->l('save_card') ?>
                        </label>
                    </div>
                </div>
                <p id="info_msg_not_supported" style="display: none"><?php $lang->l('not_supported_card') ?></p>
                <p id="info_msg_not_valid" style="display: none"><?php $lang->l('not_valid_card') ?></p>
                <div id="loading_scr" style="display:none">
                    <img src="<?php echo $path ?>/lib/src/common/_img/loading.gif"
                         style="vertical-align: middle;"/><?php $lang->l('processing') ?>
                </div>
                <input type="hidden" name="tpayID" value="<?php echo $this->midId; ?>">
                <?php if (!empty($data['userCards'])) { ?>
            </div>
        <?php } ?>
        </div>
    </div>
</div>
<div class="tpay-row">
    <div class="tpay-amPmCheckbox">
        <input id="tpay-cards-accept-regulations-checkbox" type="checkbox" value="0">
        <label for="tpay-cards-accept-regulations-checkbox" class="tpay-info-label">
            <?php $lang->l('accept') ?> <a href="<?php echo $data['regulation_url'] ?>"
                                           target="_blank"><?php $lang->l('regulations_url') ?></a>
            <?php $lang->l('regulations'); ?>
            <?php $lang->l('privacy_policy');?>
            <a href="<?php echo $data['policy_privacy_url']?>" target="_blank"><?php $lang->l('privacy_policy_href')?></a>

        </label>
    </div>
</div>
