{% 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') }}
    <link rel="stylesheet" href="{{ asset('build/css/upsale.css') }}">
{% 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 class="modernBlockquote overview-dashboard-index">
        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 overview-dashboard-index">
    {{ 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 }}">
    <input type="hidden" id="advert_type" name="advert_type" value="{{ advert_type }}">

    <div class="row overview-dashboard-index">
        {% if userCredit <= 1 %}
            <div class="col-12">
                <div class="alert alert-warning mt-3 overview-dashboard-index" role="alert">
                U heeft momenteel niet genoeg credits voor de activatie met credits.
                Indien gewenst kunt u uw saldo **<strong><a target="_blank" href="{{ url('dashboard_credit') }}"> hier</a></strong>**opwaarderen.
                </div>
            </div>
        {% endif %}
        <div class="col-12 ml-auto">
            {% if eventAdvert.status == 0 and advert_type != "premium" and userCredit >= 1 %}
             <div class="row mt-4">
                    <div class="col col-sm-6 col-lg-4 mb-4 mx-auto">
                        <div class="pop-option bg-transparent">&nbsp;</div>
                        <div class="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="CREDIT_ONE_MONTH_FREE_ADVERT" id="CREDIT_ONE_MONTH_FREE_ADVERT">
                            <label for="CREDIT_ONE_MONTH_FREE_ADVERT">
                                <div class="box-upsale-item">
                                    <h3>Activatie extra advertentie</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">Activatie 30 dagen</p>
                                    <strong>1 credit</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            {% endif %}
            <h3 class="upsale-title">Extra opvallen? Kies dan een premium advertentie!</h3>
            <div class="row mt-4">
                    <div class="col col-sm-6 col-lg-4 mb-4 b-left-box-1px">
                        <div class="pop-option bg-transparent">&nbsp;</div>
                        <div class="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="ONE_DAY" id="payment_during_one_day">
                            <label for="payment_during_one_day">
                                <div class="box-upsale-item">
                                    <h3>Een dag</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">24u in de kijker</p>
                                    <strong>2,00€</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </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="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="FOUR_DAY" id="payment_during_four_days">
                            <label for="payment_during_four_days">
                                <div class="box-upsale-item">
                                    <h3>Vier dagen</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">4 dagen in de kijker</p>
                                    <strong>4,00€</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="col col-sm-6 col-lg-4 mb-4 b-right-box-1px">
                        <div class="pop-option bg-transparent">&nbsp;</div>
                        <div class="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="SEVEN_DAY" id="payment_during_seven_days">
                            <label for="payment_during_seven_days">
                                <div class="box-upsale-item">
                                    <h3>Zeven dagen</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">7 dagen in de kijker</p>
                                    <strong>5,00€</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
        </div>
    </div>

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

           

            

            <div class="row overview-dashboard-index">
                <div class="col-12 ml-auto">
                <div class="row mt-4">
                {% if userCredit >= minimumBalance * 2 %}
                    <div class="col col-sm-6 col-lg-4 mb-4 b-left-box-1px">
                        <div class="pop-option bg-transparent">&nbsp;</div>
                        <div class="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="CREDIT_ONE_DAY" id="payment_during_credit_one_day">
                            <label for="payment_during_credit_one_day">
                                <div class="box-upsale-item">
                                    <h3>Een dag</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">24u in de kijker</p>
                                    <strong>2 credits (1,50€)</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </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="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="CREDIT_FOUR_DAY" id="payment_during_credit_four_days">
                            <label for="payment_during_credit_four_days">
                                <div class="box-upsale-item">
                                    <h3>Vier dagen</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">4 dagen in de kijker</p>
                                    <strong>4 credits (3,00€)</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </div>
                    </div>
                {% endif %}
                {% if userCredit >= minimumBalance * 6 %}   
                    <div class="col col-sm-6 col-lg-4 mb-4 b-right-box-1px">
                        <div class="pop-option">Meest gekozen</div>
                        <div class="text-center">
                            <input type="radio" class="upsale_radio_button" name="payment_duration" value="CREDIT_SEVEN_DAY" id="payment_during_credit_seven_days">
                            <label for="payment_during_credit_seven_days">
                                <div class="box-upsale-item">
                                    <h3>Zeven dagen</h3>
                                    <hr class="d-block d-xs-none"/>
                                    <p class="mt-4 mb-2">7 dagen in de kijker</p>
                                    <strong>6 credits (4,50€)</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
            </div>
        {% endif %}
        <button type="submit" class="btn btn-lg p-2 btn-pink btn-block mb-5 overview-dashboard-index">Doorgaan naar betalen</button>
    </form>

    {% endblock %}