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

{% block title %} {% trans %} Create your event! {% 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 %}

    {% if canPostFreeAdvert == false %}
        <div class="col-12">
            <div class="alert alert-warning">
                <strong><i class="fas fa-exclamation-triangle"></i> Let op:</strong> U hebt het maximum aantal gratis advertenties bereikt. Voor slechts 1 credit (0,65 ct) kunt u deze advertentie activeren.
            </div>
        </div>
    {% endif %}
    {% 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 %}
    <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">
                {% if canPostFreeAdvert == false 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>1,65€</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>3,30€</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>4,15€</strong>
                                    <p class="text-uppercase">Kies optie</p>
                                </div>
                            </label>
                        </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,30€)</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 (2,60€)</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 (3,90€)</strong>
                                                    <p class="text-uppercase">Kies optie</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="row mt-5">
                    <div class="col-6">
                        <a href="{{ url('dashboard_index') }}" class="skip-button">Stap overslaan</a>
                    </div>
                    <div class="col-6">
                        <button type="submit" class="btn btn-lg p-2 btn-pink btn-block mb-5">Betalen</button>
                    </div>
                </div>
            </div>
        </div>


    </form>

{% endblock %}