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

{% block title %}{% trans %} My dashboard | Promotip {% endtrans %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('dashboard') }}
    {{ encore_entry_link_tags('dropzone') }}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('dropzone') }}
    {{ encore_entry_script_tags('dashboard_events') }}
{% endblock %}

{% block dashboard %}

    {% set beforeMsgPay = 'Wilt u de advertentie "' %}
    {% set endMsgPay = '" activeren als premium advertentie?' %}
    <div><blockquote>
            Premium advertenties zijn advertenties die op de sliderbalken van de homepagina staan en in de subrubrieken waar u uw advertentie geplaatst heeft. <p>Op die manier heeft uw advertentie nog <strong>meer visibiliteit en bereik</strong>!

        </blockquote>
    </div>

    <div class="bg-beige mt-4 pb-2 pt-2 pl-2">
        {{ beforeMsgPay ~ eventAdvert.title ~ endMsgPay }} <br>(Betalen via Bancontact, Ideal of Paypal)</div>


    <form method="POST" id="paymentForm">
    <input type="hidden" name="token" value="{{ csrf_token('event-pay') }}"/>
    <input type="hidden" id="entity" name="entity" value="{{ eventAdvert.id }}">
    <input type="hidden" id="entity_name" name="entity_name" value="{{ eventAdvert.title }}">

    <div class="row">
        <div class="col-12 ml-auto">
            <div class="row mt-4">
                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option bg-transparent">&nbsp</div>
                    <div class="box-upsale-item">
                        <h3>Een dag</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">24u in de kijker</p>
                        <label class="btn btn-pink" for="btn-check1">2 euro <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="ONE_DAY"</label>
                    </div>
                </div>

                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option">Meest gekozen</div>
                    <div class="box-upsale-item">
                        <h3>Vier dagen</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">4 dagen in de kijker</p>
                        <label class="btn btn-pink" for="btn-check2">4 euro <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="FOUR_DAY"</label>
                    </div>
                </div>

                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option bg-transparent">&nbsp;</div>
                    <div class="box-upsale-item">
                        <h3>Zeven dagen</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">7 dagen in de kijker</p>
                        <label class="btn btn-pink" for="btn-check3">5 euro <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="SEVEN_DAY"</label>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <form method="POST" id="paymentForm">
        <input type="hidden" name="token" value="{{ csrf_token('event-pay') }}"/>
        <input type="hidden" id="entity" name="entity" value="{{ eventAdvert.id }}">
        <input type="hidden" id="entity_name" name="entity_name" value="{{ eventAdvert.title }}">

        {% if userCredit is defined and userCredit is not null and userCredit >= minimumBalance %}
            <div class="bg-beige mt-4 pb-2 pt-2 pl-2">
                Wilt u uw premium advertentie met <strong>credits</strong> activeren?
            </div>

            {% if userCredit <= 1 %}
                <div class="alert alert-warning mt-3" role="alert">
                    U heeft momenteel niet genoeg credits voor de activatie met credits. <br>Indien gewenst kunt u uw saldo opwaarderen via het tabblad "credits" in het menu.
                </div>
            {% endif %}

            {% if userCredit >= minimumBalance * 2 %}

                <div class="row">
                <div class="col-12 ml-auto">
                <div class="row mt-4">
                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option bg-transparent">&nbsp</div>
                    <div class="box-upsale-item">
                        <h3>Een dag</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">24u in de kijker</p>
                        <label class="btn btn-pink" for="btn-check4">2 credits <span>(1,50€)</span> <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="CREDIT_ONE_DAY"</label>
                    </div>
                </div>
            {% endif %}

            {% if userCredit >= minimumBalance * 4 %}
                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option bg-transparent">&nbsp</div>
                    <div class="box-upsale-item">
                        <h3>Vier dagen</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">4 dagen in de kijker</p>
                        <label class="btn btn-pink" for="btn-check5">4 credits (3,00€) <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="CREDIT_FOUR_DAY"</label>
                    </div>
                </div>
            {% endif %}
            {% if userCredit >= minimumBalance * 6 %}
                <div class="col col-sm-6 col-lg-4 mb-4 b-left-right-1px">
                    <div class="pop-option">Meest gekozen</div>
                    <div class="box-upsale-item">
                        <h3>Zeven dagen</h3>
                        <hr class="d-block d-xs-none" style="width: 50px; background-color: #bfbfbf;"/>
                        <p class="mt-4 mb-2">7 dagen in de kijker</p>
                        <label class="btn btn-pink" for="btn-check6">6 credits (4,50€) <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off" name="payment_duration" value="CREDIT_SEVEN_DAY"</label>
                    </div>
                </div>
            {% endif %}
            </div>
            </div>
            </div>
        {% endif %}
        <button type="submit" class="btn btn-lg p-2 btn-pink btn-block mb-5">Doorgaan naar betalen</button>
    </form>

{% endblock %}