{% extends 'dashboard.html.twig' %}

{% block title %}Credits | Promotip {% endblock %}

{% block dashboard %}
    <div class="container py-5">
        <div class="row overview-dashboard-index">
            <div class="col-12 text-center">
                <h1 class="display-4">Credits</h1>
                <p class="lead">Uw huidige saldo: <span class="text-pink"><strong>{{ balance }}</strong></span></p>
            </div>
        </div>

{#<blockquote>
                <strong>Eindejaarsactie: </strong> tot en met 15 januari 2025 krijgt u <u>credits aan 0,37€</u>.<br/>
                Uw credits blijven ook na de eindejaarsactie onbeperkt geldig!
            </blockquote> #}
 
        <div class="row mt-5 overview-dashboard-index">
            <div class="col-12">
                <div class="card shadow decorative-border">
                    <div class="card-body">
                        <h5 class="card-title">Met credits kunt u snel en eenvoudig uw advertenties als <strong>PREMIUM</strong> activeren.</h5>
                        <p class="card-text">Premium advertenties zijn advertenties die op de sliderbalken van de homepagina staan en in de door u gekozen subrubrieken.</p>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><strong><span class="text-purple">Dag formule</span> </strong> Hiermee staat uw advertentie 24u lang in de kijker - 2 credits</li>
                            <li class="list-group-item"><strong><span class="text-purple">4 dagen</span> </strong> Hiermee staat uw advertentie 4 dagen lang in de kijker - 4 credits</li>
                            <li class="list-group-item"><strong><span class="text-purple">7 dagen</span> </strong> Hiermee staat uw advertentie 7 dagen lang in de kijker - 6 credits</li>
                        </ul>
                        <p class="card-text mt-3">Credits kunt u online kopen met Bancontact, Paypal, of iDeal.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5 overview-dashboard-index">
            <div class="col-12">
                <form action="{{ url('dashboard_store_credit') }}" method="post">
                    <input type="hidden" name="token" value="{{ csrf_token('credit_pay') }}"/>
                    <div class="mb-3">
                        <label for="credit_package" class="form-label">Kies aantal credits</label>
                        <select name="credit_package" class="form-select" id="credit_package" required>
                            <option value="">Kies aantal credits</option>
                            {% for credit in credits %}
                                <option value="{{ credit }}">{{credit}} credits</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <label class="form-label">Totaal: €<span id="credit_amount"></span></label>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-pink">Betaal online</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger mt-4">
                {{ message }}
            </div>
        {% endfor %}
    </div>

    <script>
        const selectPackage = document.getElementById('credit_package');
        const creditAmount = document.getElementById('credit_amount');

        document.addEventListener("readystatechange", (event) => {
            let totalVal = (selectPackage.value != '' ? selectPackage.value : 0 );
            creditAmount.textContent = {{ creditUnit }} * totalVal;
        });

        selectPackage.addEventListener('change', (event) => {
            creditAmount.textContent = {{ creditUnit }} * event.target.value;
        });
    </script>
{% endblock %}