<?php
/* Smarty version 3.1.36, created on 2020-10-24 19:15:05
  from '/home/superior/public_html/myprofbay.com/prox-templates/payment/payment.status.tpl' */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '3.1.36',
  'unifunc' => 'content_5f947d3958a526_11551803',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    '00324cef942cfe80041d406d7ca0091c3798c6d6' => 
    array (
      0 => '/home/superior/public_html/myprofbay.com/prox-templates/payment/payment.status.tpl',
      1 => 1597836354,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
),false)) {
function content_5f947d3958a526_11551803 (Smarty_Internal_Template $_smarty_tpl) {
?><!doctype html>
<html lang="en">
    <head>
        <?php if ($_smarty_tpl->tpl_vars['status']->value == "success") {?>
            <title>Payment successful</title>
        <?php } else { ?>
            <title>Payment failed</title>
        <?php }?>
        <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,600,600i,400i,700,700i,900&display=swap" rel="stylesheet">
    </head>
<body> 


<style type="text/css">
    *, :after, :before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        height: 100%;
        font-family: 'Lato','Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
    }

    body{
        color: #888;
        margin: 0;
        font-family: 'Lato','Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
    }
    #main{
        display: table;
        width: 100%;
        height: 100vh;
        text-align: center;
    }

    .redirect-box {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        background-color: white;
        border: 1px solid #d6dcde;
        width: 580px;
        max-width: 90%;
        padding: 80px 30px;
        margin: 100px auto;
        text-align: center;
    }

    @media screen and (max-width: 800px) {
        .redirect-box {
            margin: 40px auto;
            padding: 30px 5%;
        }
    }

    .successful,
    .failed {
        margin-bottom: 20px;
    }

    .successful {
        color: #8ab45f;
    }

    .failed {
        color: #b45f5f;
    }

    .redirect-box .loading-animation {
        width: 40px;
        height: 40px;
        opacity: 0;
        visibility: hidden;
        margin: 30px auto;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
    }

    .redirect-box .loading-animation.show {
        opacity: 1;
        visibility: visible;
    }

    .redirect-box .loading-animation .count {
        display: inline-block;
        width: 100%;
        line-height: 39px;
        text-align: center;
        position: absolute;
        z-index: 1;
        font-size: 16px;
        left: 0;
        top: 0;
        color: #6dbad3;
    }

    .redirect-info {
        overflow: hidden;
        font-size: 15px;
        color: #586051;
    }

    .redirect-info-p {
        line-height: 18px;
        margin-bottom: 5px;
    }

    .redirect-info-p a {
        text-decoration: underline;
        white-space: nowrap;
    }


    /* Loading animation ↓↓↓ */

    .loading-animation {
        margin: 0;
        height: 40px;
        width: 40px;
        position: relative;
        border-radius: 999px;
        -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
    }

    .loading-animation:after {
        content: "";
        position: absolute;
        width: 36px;
        height: 36px;
        left: 0px;
        top: 0px;
        margin: 2px;
        background: #ffffff;
        opacity: 1;
        border-radius: 999px;
        -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
    }

    .ie8 .loading-animation {
        display: none;
    }

    .loading-animation .side {
        height: 40px;
        width: 20px;
        position: absolute;
        overflow: hidden;
        top: 0;
    }

    .loading-animation .side > .fill {
        position: absolute;
        width: 20px;
        height: 40px;
        background: #0099cc;
        border-radius: 999px;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
        -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
        -webkit-animation: cssSpinnerRight 2s infinite linear;
        -moz-animation: cssSpinnerRight 2s infinite linear;
        animation: cssSpinnerRight 2s infinite linear;
    }

    .loading-animation .side.sp_right {
        left: 20px;
        border-radius: 0px 999px 999px 0px;
        -webkit-border-radius: 0px 999px 999px 0px;
        -moz-border-radius: 0px 999px 999px 0px;
    }

    .loading-animation .side.sp_right > .fill {
        right: 0;
        border-right: 20px solid #ffffff;
    }

    .loading-animation .side.sp_left {
        left: 0;
        border-radius: 999px 0px 0px 999px;
        -webkit-border-radius: 999px 0px 0px 999px;
        -moz-border-radius: 999px 0px 0px 999px;
    }

    .loading-animation .side.sp_left > .fill {
        left: 0;
        border-left: 20px solid #ffffff;
        -webkit-animation: cssSpinnerLeft 2s infinite linear;
        -moz-animation: cssSpinnerLeft 2s infinite linear;
        animation: cssSpinnerLeft 2s infinite linear;
    }

    @-webkit-keyframes cssSpinnerRight {
        0% {
            -webkit-transform: rotate(0deg);
        }
        20% {
            -webkit-transform: rotate(90deg);
        }
        25% {
            -webkit-transform: rotate(180deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        70% {
            -webkit-transform: rotate(270deg);
        }
        75% {
            -webkit-transform: rotate(360deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes cssSpinnerLeft {
        0% {
            -webkit-transform: rotate(0deg);
        }
        25% {
            -webkit-transform: rotate(0deg);
        }
        35% {
            -webkit-transform: rotate(90deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        75% {
            -webkit-transform: rotate(180deg);
        }
        80% {
            -webkit-transform: rotate(270deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @-moz-keyframes cssSpinnerRight {
        0% {
            -moz-transform: rotate(0deg);
        }
        20% {
            -moz-transform: rotate(90deg);
        }
        25% {
            -moz-transform: rotate(180deg);
        }
        50% {
            -moz-transform: rotate(180deg);
        }
        70% {
            -moz-transform: rotate(270deg);
        }
        75% {
            -moz-transform: rotate(360deg);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-moz-keyframes cssSpinnerLeft {
        0% {
            -moz-transform: rotate(0deg);
        }
        25% {
            -moz-transform: rotate(0deg);
        }
        35% {
            -moz-transform: rotate(90deg);
        }
        50% {
            -moz-transform: rotate(180deg);
        }
        75% {
            -moz-transform: rotate(180deg);
        }
        80% {
            -moz-transform: rotate(270deg);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @keyframes cssSpinnerRight {
        0% {
            transform: rotate(0deg);
        }
        20% {
            transform: rotate(90deg);
        }
        25% {
            transform: rotate(180deg);
        }
        50% {
            transform: rotate(180deg);
        }
        70% {
            transform: rotate(270deg);
        }
        75% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes cssSpinnerLeft {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(0deg);
        }
        35% {
            transform: rotate(90deg);
        }
        50% {
            transform: rotate(180deg);
        }
        75% {
            transform: rotate(180deg);
        }
        80% {
            transform: rotate(270deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /* End Loading animation ↑↑↑ */
</style>


<?php echo '<script'; ?>
 type="text/javascript">
    var seconds = Math.round(10);

    <?php if ($_smarty_tpl->tpl_vars['status']->value == "success") {?>
        var redirectUrl = '<?php echo htmlspecialchars($_smarty_tpl->tpl_vars['order_url']->value, ENT_QUOTES, 'UTF-8');?>
';
    <?php } else { ?>
        var redirectUrl = '<?php echo htmlspecialchars($_smarty_tpl->tpl_vars['base_uri']->value, ENT_QUOTES, 'UTF-8');?>
/dashboard/orders';
    <?php }?>
    
    if (seconds) {
        document.addEventListener('DOMContentLoaded', function () {
            var countEl = document.querySelector('.count');
            countEl.innerText = seconds;
            document.querySelector('.redirect-box .loading-animation').classList.add('show');
            var interval = setInterval(function () {
                countEl.innerText = Math.max(0, --seconds);
                if (seconds === 0) {
                window.location = redirectUrl;
                    clearInterval(interval);
                }
            }, 1000);
        });
    } else {
        window.location = redirectUrl;
    }
<?php echo '</script'; ?>
>

<div id="main">
    <div class="redirect-box">

        <?php if ($_smarty_tpl->tpl_vars['status']->value == "success") {?>
            <h1 class="successful">Payment successful!</h1>
            <div class="loading-animation show">
                <span class="count">2</span>
                <span class="side sp_left">
                    <span class="fill"></span>
                </span>
                <span class="side sp_right">
                    <span class="fill"></span>
                </span>
            </div>
            <div class="redirect-info">
                <div class="redirect-info-p">Thank you for using our service.</div>
                <div class="redirect-info-p">Redirecting to <a href="<?php echo htmlspecialchars($_smarty_tpl->tpl_vars['order_url']->value, ENT_QUOTES, 'UTF-8');?>
">your order page</a>…</div>
            </div>
        <?php } else { ?>
            <h1 class="failed">Payment failed!</h1>
            <div class="loading-animation show">
                <span class="count">2</span>
                <span class="side sp_left">
                    <span class="fill"></span>
                </span>
                <span class="side sp_right">
                    <span class="fill"></span>
                </span>
            </div>
            <div class="redirect-info">
                <div class="redirect-info-p">We were not able to process your payment. If you encounter this message more than once please contact support for further assistance.</div>
                <div class="redirect-info-p">Redirecting to <a href="<?php echo htmlspecialchars($_smarty_tpl->tpl_vars['base_uri']->value, ENT_QUOTES, 'UTF-8');?>
/dashboard/orders">your order page</a>…</div>
            </div>
        <?php }?>
    </div>
</div>

</body>
</html><?php }
}
