<?php
/**
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the GNU General Public License (GPL 3)
 * that is bundled with this package in the file LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Payone_Core to newer
 * versions in the future. If you wish to customize Payone_Core for your
 * needs please refer to http://www.payone.de for more information.
 *
 * @category        Payone
 * @package         Payone_Core_Block
 * @subpackage      Payment
 * @copyright       Copyright (c) 2015 <kontakt@fatchip.de> - www.fatchip.com
 * @author          Robert Müller <robert.mueller@fatchip.de>
 * @license         <http://www.gnu.org/licenses/> GNU General Public License (GPL 3)
 * @link            http://www.fatchip.com
 */
?>

<script type="text/javascript">
    
    function _groupExp(oElement) {
        var _cur = oElement.parentNode;

        if (_cur.className == "exp") {
            _cur.className = "";
        } else {
            _cur.className = "exp";
        }
    }
    
    function toggleHostedTemplate() {
        if(document.getElementById('fcpoHostedCCTemplate').style.display != "") {
            document.getElementById('fcpoHostedCCTemplate').style.display = "";
        } else {
            document.getElementById('fcpoHostedCCTemplate').style.display = "none";
        }
    }
    
    function togglePreview() {
        if(document.getElementById('fcpoHostedCCPreview').style.display != "") {
            document.getElementById('fcpoHostedCCPreview').style.display = "";
        } else {
            document.getElementById('fcpoHostedCCPreview').style.display = "none";
        }
    }
    
    function inputEnable(sInputId) {
        document.getElementById(sInputId).disabled = false;
    }
    function inputDisable(sInputId) {
        document.getElementById(sInputId).disabled = true;
    }
    
    function handleSizeFields(oSelect, sRowName) {
        if(oSelect.options[oSelect.selectedIndex].value == 'custom') {
            inputEnable('input_height_' + sRowName);
            inputEnable('input_width_' + sRowName);
        } else {
            inputDisable('input_height_' + sRowName);
            inputDisable('input_width_' + sRowName);            
        }
    }
    
    function handleCss(oSelect, sRowName) {
        if(oSelect.options[oSelect.selectedIndex].value == 'custom') {
            inputEnable('input_css_' + sRowName);
        } else {
            inputDisable('input_css_' + sRowName);
        }
    }
    
</script>

<a href="#" onclick="toggleHostedTemplate();return false;" style="text-decoration: underline;"><?php echo Mage::helper('payone_core')->__('Custom styling hosted-Iframe') ?></a>
<div id="fcpoHostedCCTemplate" style="display:none;padding-top:10px;">
    <table>
        <tr>
            <th style="text-align:left;width:120px;"><?php echo Mage::helper('payone_core')->__('Field') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Type') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Digit-<br>count') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Max-<br>digits') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Iframe') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Width') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Height') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('Style') ?></th>
            <th><?php echo Mage::helper('payone_core')->__('CSS') ?></th>
        </tr>
        <?php foreach ($this->getCCFields() as $sField) { ?>
            <tr>
                <td>
                    <?php echo Mage::helper('payone_core')->__('FCPO_CC_ROW_CC_'.$sField) ?>
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_type'; ?>
                    <select name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" style="width:inherit;">
                        <?php foreach ($this->getCCTypes($sField) as $sType => $sTitle) { ?>
                            <option value="<?php echo $sType; ?>" <?php if($sType == $this->fcpoGetValue($sFieldIdent)) echo 'selected'; ?>><?php echo $sTitle; ?></option>
                        <?php } ?>
                    </select>
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_count'; ?>
                    <input type="text" class="txt" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>">
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_max'; ?>
                    <input type="text" class="txt" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>">
                </td>
                <td>
                    <?php $sFieldIdentIframe = $sField.'_iframe'; ?>
                    <select name="<?php echo $this->getElement()->getName().'['.$sFieldIdentIframe.']'; ?>" onchange="handleSizeFields(this, '<?php echo $sField; ?>')" style="width:inherit;">
                        <?php foreach ($this->getCCStyles() as $sType => $sTitle) { ?>
                            <option value="<?php echo $sType; ?>" <?php if($sType == $this->fcpoGetValue($sFieldIdentIframe)) echo 'selected'; ?>><?php echo $sTitle; ?></option>
                        <?php } ?>
                    </select>
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_width'; ?>
                    <input id="input_width_<?php echo $sField; ?>" type="text" class="txt" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>" <?php if($this->fcpoGetValue($sFieldIdentIframe) != "custom") echo 'disabled'; ?>>
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_height'; ?>
                    <input id="input_height_<?php echo $sField; ?>" type="text" class="txt" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>" <?php if($this->fcpoGetValue($sFieldIdentIframe) != "custom") echo 'disabled'; ?>>
                </td>
                <td>
                    <?php $sFieldIdentCSS = $sField.'_style';# = "sFCPOCC".$sField."Style"; ?>
                    <select name="<?php echo $this->getElement()->getName().'['.$sFieldIdentCSS.']'; ?>" onchange="handleCss(this, '<?php echo $sField; ?>')" style="width:inherit;">
                        <?php foreach ($this->getCCStyles() as $sType => $sTitle) { ?>
                            <option value="<?php echo $sType; ?>" <?php if($sType == $this->fcpoGetValue($sFieldIdentCSS)) echo 'selected'; ?>><?php echo $sTitle; ?></option>
                        <?php } ?>
                    </select>
                </td>
                <td>
                    <?php $sFieldIdent = $sField.'_css';# = "sFCPOCC".$sField."CSS"; ?>
                    <input id="input_css_<?php echo $sField; ?>" type="text" class="txt" size="50" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>" <?php if($this->fcpoGetValue($sFieldIdentCSS) != "custom") echo 'disabled'; ?>>
                </td>
            </tr>
        <?php } ?>
    </table>    
    <br>
    <table>
        <tr>
            <th style="text-align:left;width:120px;"><?php echo Mage::helper('payone_core')->__('Standard-style'); ?></th>
            <td><?php echo Mage::helper('payone_core')->__('Input'); ?></td>
            <td><?php echo Mage::helper('payone_core')->__('Selection'); ?></td>
        </tr>
        <tr>
            <td><?php echo Mage::helper('payone_core')->__('Input-fields'); ?></td>
            <?php $sFieldIdent = 'Standard_input'; ?>
            <td><input type="text" size="50" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>"></td>
            <?php $sFieldIdent = 'Standard_selection'; ?>
            <td><input type="text" size="50" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>"></td>
        </tr>
        <tr>
            <td><?php echo Mage::helper('payone_core')->__('Iframe'); ?></td>
            <td colspan="2">
                <table>
                    <tr>
                        <td><?php echo Mage::helper('payone_core')->__('Width'); ?></td>
                        <td><?php echo Mage::helper('payone_core')->__('Height'); ?></td>
                    </tr>
                    <tr>
                        <?php $sFieldIdent = 'Iframe_width'; ?>
                        <td><input type="text" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>"></td>
                        <?php $sFieldIdent = 'Iframe_height'; ?>
                        <td><input type="text" size="4" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="<?php echo $this->fcpoGetValue($sFieldIdent); ?>"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <th style="text-align:left;width:120px;"><?php echo Mage::helper('payone_core')->__('Error-output'); ?></th>
            <td></td>
        </tr>
        <tr>
            <td><?php echo Mage::helper('payone_core')->__('Active'); ?></td>
            <td>
                <?php $sFieldIdent = 'Errors_active'; ?>
                <input type="hidden" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="false">
                <input type="checkbox" name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>" value="true" <?php if ($this->fcpoGetValue($sFieldIdent) == "true") echo 'checked'; ?>>
            </td>
        </tr>
        <tr>
            <td><?php echo Mage::helper('payone_core')->__('Language'); ?></td>
            <td>
                <?php $sFieldIdent = 'Errors_lang'; ?>
                <select name="<?php echo $this->getElement()->getName().'['.$sFieldIdent.']'; ?>">
                    <option value="de" <?php if ($this->fcpoGetValue($sFieldIdent) == 'de') echo 'selected'; ?>><?php echo Mage::helper('payone_core')->__('German'); ?></option>
                    <option value="en" <?php if ($this->fcpoGetValue($sFieldIdent) == 'en') echo 'selected'; ?>><?php echo Mage::helper('payone_core')->__('English'); ?></option>
                </select>
            </td>
        </tr>
    </table>
    <br>
    <a href="#" onclick="togglePreview();return false;" style="text-decoration: underline;"><?php echo Mage::helper('payone_core')->__('Preview'); ?></a>
    <div id="fcpoHostedCCPreview" style="display:none;padding-top:10px;">

        <?php echo Mage::helper('payone_core')->__('You need to save before the changes are visible in the preview!'); ?>
        <div style="border:1px solid #000;padding:10px;background-color: #fff;">
            <script type="text/javascript" src="https://secure.pay1.de/client-api/js/v1/payone_hosted_min.js"></script>
            <table>
                <tr>
                    <td><label for="cardpanInput"><?php echo Mage::helper('payone_core')->__('Number:'); ?></label></td>
                    <td><span class="inputIframe" id="cardpan"></span></td>
                </tr>
                <tr>
                    <td><label for="cvcInput"><?php echo Mage::helper('payone_core')->__('CVV2 or CVC2 security code:'); ?></label></td>
                    <td><span id="cardcvc2" class="inputIframe"></span></td>
                </tr>
                <tr>
                    <td><label for="expireInput"><?php echo Mage::helper('payone_core')->__('Valid until:'); ?></label></td>
                    <td>
                        <span id="expireInput" class="inputIframe">
                            <span id="cardexpiremonth"></span>
                            <span id="cardexpireyear"></span>
                        </span>
                    </td>
                </tr>
            </table>
            <script>
                var request, config;
                config = {
                    fields: {
                        cardpan: {
                            selector: "cardpan", // put name of your div-container here
                            type: "<?php echo $this->fcpoGetValue('Number_type'); ?>", // text (default), password, tel
                            size: "<?php echo $this->fcpoGetValue('Number_count'); ?>",
                            maxlength: "<?php echo $this->fcpoGetValue('Number_max'); ?>",
                            <?php if($this->fcpoGetValue('Number_style') == "custom") { ?>
                                style: "<?php echo $this->fcpoGetValue('Number_css'); ?>",
                            <?php } ?>
                            <?php if($this->fcpoGetValue('Number_iframe') == "custom") { ?>
                                iframe: {
                                    width: "<?php echo $this->fcpoGetValue('Number_width'); ?>",
                                    height: "<?php echo $this->fcpoGetValue('Number_height'); ?>"
                                }
                            <?php } ?>
                        },
                        cardcvc2: {
                            selector: "cardcvc2", // put name of your div-container here
                            type: "<?php echo $this->fcpoGetValue('CVC_type'); ?>", // text (default), password, tel
                            size: "<?php echo $this->fcpoGetValue('CVC_count'); ?>",
                            maxlength: "<?php echo $this->fcpoGetValue('CVC_max'); ?>",
                            <?php if($this->fcpoGetValue('CVC_style') == "custom") { ?>
                                style: "<?php echo $this->fcpoGetValue('CVC_css'); ?>",
                            <?php } ?>
                            <?php if($this->fcpoGetValue('CVC_iframe') == "custom") { ?>
                                iframe: {
                                    width: "<?php echo $this->fcpoGetValue('CVC_width'); ?>",
                                    height: "<?php echo $this->fcpoGetValue('CVC_height'); ?>"
                                }
                            <?php } ?>
                        },
                        cardexpiremonth: {
                            selector: "cardexpiremonth", // put name of your div-container here
                            type: "<?php echo $this->fcpoGetValue('Month_type'); ?>",
                            size: "<?php echo $this->fcpoGetValue('Month_count'); ?>",
                            maxlength: "<?php echo $this->fcpoGetValue('Month_max'); ?>",
                            <?php if($this->fcpoGetValue('Month_style') == "custom") { ?>
                                style: "<?php echo $this->fcpoGetValue('Month_css'); ?>",
                            <?php } ?>
                            <?php if($this->fcpoGetValue('Month_iframe') == "custom") { ?>
                                iframe: {
                                    width: "<?php echo $this->fcpoGetValue('Month_width'); ?>",
                                    height: "<?php echo $this->fcpoGetValue('Month_height'); ?>"
                                }
                            <?php } ?>
                        },
                        cardexpireyear: {
                            selector: "cardexpireyear", // put name of your div-container here
                            type: "<?php echo $this->fcpoGetValue('Year_type'); ?>",
                            size: "<?php echo $this->fcpoGetValue('Year_count'); ?>",
                            maxlength: "<?php echo $this->fcpoGetValue('Year_max'); ?>",
                            <?php if($this->fcpoGetValue('Year_style') == "custom") { ?>
                                style: "<?php echo $this->fcpoGetValue('Year_css'); ?>",
                            <?php } ?>
                            <?php if($this->fcpoGetValue('Year_iframe') == "custom") { ?>
                                iframe: {
                                    width: "<?php echo $this->fcpoGetValue('Year_width'); ?>",
                                    height: "<?php echo $this->fcpoGetValue('Year_height'); ?>"
                                }
                            <?php } ?>
                        }
                    },
                    defaultStyle: {
                        input: "<?php echo $this->fcpoGetValue('Standard_input'); ?>",
                        select: "<?php echo $this->fcpoGetValue('Standard_selection'); ?>",
                        iframe: {
                            width: "<?php echo $this->fcpoGetValue('Iframe_width'); ?>",
                            height: "<?php echo $this->fcpoGetValue('Iframe_height'); ?>"
                        }
                    },

                    <?php if($this->fcpoGetValue('Errors_active') == "true") { ?>
                        error: "errorOutput", // area to display error-messages (optional)
                    <?php } ?>
                        
                    <?php if($this->getTranslationLanguage()) { ?> 
                        language: Payone.ClientApi.Language.<?php echo $this->getTranslationLanguage(); ?> 
                    <?php } else { ?>
                        <?php if($this->fcpoGetValue('Errors_lang') == "de") { ?>
                            language: Payone.ClientApi.Language.de // Language to display error-messages
                        <?php } else { ?>
                            language: Payone.ClientApi.Language.en 
                        <?php } ?>
                    <?php } ?>
                };
                
                <?php 
                $aTranslations = $this->getTranslations();
                foreach ($aTranslations as $sVarname => $sValue) {
                    echo $sVarname." = '".$sValue."';";
                }
                ?>
                var iframes = new Payone.ClientApi.HostedIFrames(config, request);
            </script>
        </div>
        
    </div>
</div>