<?php $_code = $this->getMethodCode() ?>
<?php if (Mage::getSingleton('customer/session')->isLoggedIn()): ?>
    <style>
        #msp-token-select {
            display: flex;
        }

        #msp-token-select > span {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <ul class="form-list" id="payment_form_<?php echo $_code ?>" style="display:none">
        <?php $_recurrings = $this->getRecurrings($_code); ?>
        <li>
            <?php if (in_array(
                $_code, ['msp_visa', 'msp_mastercard', 'msp_amex']
            )) { ?>
            <?php if (!empty($_recurrings)): ?><?php endif; ?>
            <div id="msp-token-select"
                 style="display: <?= (!empty($_recurrings)) ? 'flex'
                     : 'none' ?>">
                <select id="tokenization_<?= $_code ?>"
                        name="payment[recurring_hash]"
                        class="input-select validate-text">
                    <option value=""><?php echo $this->__(
                            'Select your creditcard...'
                        ); ?></option>
                    <?php foreach ($_recurrings as $_recurring): ?>
                        <option value="<?= $_recurring['value'] ?>"><?= $_recurring['label'] ?></option>
                    <?php endforeach; ?>
                </select>
                <span id="deleteToken_<?= $_code ?>" style="display: none"
                      class="btn-remove btn-remove2"></span>

            </div>

        <li id="tokenizationSelected_<?= $_code ?>">
            <input type="checkbox" name="payment[cc_save]"
                   id="saveCreditCard_<?= $_code ?>"
                   value="true">&nbsp;<label
                    for="saveCreditCard_<?= $_code ?>">
            <span><b>Save your card payment details for a next purchase. </b>
        </li>

    <input name='payment[cc_name]' value="" id="cc_name_<?= $_code ?>"
           placeholder='name' style="display:none"/>

        <div id="accordion_<?= $_code ?>" style="display: none">
            <ol>
                <li><i class="fa fa-lock"></i> <strong><?= $this->__(
                            'Guarantees from MultiSafepay') ?></strong><br>
                    <?= $this->__('Your creditcard credentials will be saved in our secure bankserver. The webshop has for your safety no access to this information and will not be saved in any way') ?>
                <li><i class="fa fa-check-square-o"></i> <strong>
                        <?= $this->__('Fast and easy') ?>
                        </strong><br>
                    <?= $this->__("By registering your credentials, You can speed up your purchases. Because you don't need to fill in your credentials again")?>
                <li><i class="fa fa-check-square-o"></i> <strong>
                        <?= $this->__('Free of charge')?></strong><br>
    <?= $this->__('Activating and using this function is free of charge, and you can disable it any time') ?>
            </ol>
        </div>
    <?php } ?>
        </li>
    </ul>
    <script type="text/javascript">
        //<![CDATA[
        function toggleCCNameForm(event) {
            $('cc_name_<?= $_code ?>').toggle();
        }

        $("deleteToken_<?= $_code ?>").on("click", function () {
            if (confirm('Are you sure you want to delete this creditcard?')) {
                var target = $("tokenization_<?= $_code ?>");
                var value = target.value;
                jQuery.post("<?= Mage::getBaseUrl(
                    ) ?>msp/tokenization/deletedata",
                    {hash: value},
                    function (response) {
                        jQuery(target).find(":selected").remove();
                        $("deleteToken_<?= $_code ?>").hide();
                    });
            }
        });
        $("tokenization_<?= $_code ?>").on("change", function () {
            if ($("tokenization_<?= $_code ?>").value) {
                $("deleteToken_<?= $_code ?>").show();
                $('tokenizationSelected_<?= $_code ?>').style.display = 'none';
                if ($('cc_name_<?= $_code ?>').style.display != 'none') {
                    $('cc_name_<?= $_code ?>').toggle();
                    $('saveCreditCard_<?= $_code ?>').checked = false;
                }
            } else {
                $('tokenizationSelected_<?= $_code ?>').style.display = 'block';
                $("deleteToken_<?= $_code ?>").hide();
            }

        });

        if ($('saveCreditCard_<?= $_code ?>')) {
            Event.observe($('saveCreditCard_<?= $_code ?>'), 'click', toggleCCNameForm);
        }

        //]]>
    </script>
<?php endif; ?>
