{% extends '@yuuno/master.twig' %}

{% set title %}Support {{ config('general.name') }}{% endset %}

{% block content %}
    <div class="content support">
        <div class="content__header">Support {{ config('general.name') }}</div>
        <h1>redo this entirely</h1>
        {% if user.isPremium %}
            <div class="sectionHeader">
                Your current Tenshi tag
            </div>
            <div style="margin-bottom: 10px;">
                <h3>Your Tenshi tag is valid till {{ user.premiumInfo.expire|date(config('general.date_format')) }}.</h3>
                {# the progress bar is completely broken, not fixing it until i completely reviewed the premium system #}
                {#<progress value="{{ 100 - (((date().timestamp - user.premiumInfo.start) / (user.premiumInfo.expire - user.premiumInfo.start)) * 100) }}" max="100" style="width: 100%"></progress>#}
            </div>
        {% endif %}
        <div class="sectionHeader">
            Payment Options
            <div style="float: right; font-size: 10px; text-align: right;">
                Our transactions are handled through PayPal.
            </div>
        </div>
        {% if user.isActive %}
            <div class="slider">
                <input class="input__range" type="range" min="1" max="{{ amountLimit }}" value="1" onchange="document.getElementById('monthsNo').value = this.value; document.getElementById('monthNoBtn').innerText = this.value; document.getElementById('monthsTrailingS').innerText = (this.value == 1 ? '' : 's'); document.getElementById('totalAmount').innerText = (this.value * {{ price }});">
            </div>
            <div class="checkout" style="line-height: 28px;">
                <div style="float: left;">
                    <h1>Total: &#8364;<span id="totalAmount"></span></h1>
                </div>
                <div style="float: right;">
                    <button class="input__button" onclick="document.getElementById('purchaseForm').submit();">Get <span id="monthNoBtn">1</span> month<span id="monthsTrailingS"></span> of Tenshi</button>
                </div>
                <div class="clear"></div>
            </div>
        {% elseif user.isActive %}
            <h1 style="text-align: center; margin: 1em auto;">You can't get Tenshi at the current moment!</h1>
        {% else %}
            <h1 style="text-align: center; margin: 1em auto;">You need to be logged in to get Tenshi!</h1>
        {% endif %}
    </div>
    {% if user.isActive %}
        <form action="{{ route('premium.purchase') }}" method="post" id="purchaseForm" class="hidden">
            <input type="hidden" name="mode" value="purchase">
            <input type="hidden" name="time" value="{{ date().timestamp }}">
            <input type="hidden" name="session" value="{{ session_id() }}">
            <input type="hidden" name="months" id="monthsNo" value="1">
        </form>
        <script type="text/javascript">
            window.onload = function() { document.getElementById('totalAmount').innerText = {{ price }}; };
        </script>
    {% endif %}
{% endblock %}