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

{% block title %}
    {% trans %}Maak uw Big Premium advertentie{% 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 %}
    <div class="container">
        <div class="row overview-dashboard-index">
            <div class="col-12">
                <blockquote class="modernBlockquote">
                    <strong>Creëer een aantrekkelijke premium advertentie om uw boodschap in het oog te laten springen.</strong>
                    <p>Maak gebruik van onze premium advertentie-opties om uw zichtbaarheid te vergroten en uw doelpubliek te bereiken:</p>
                    <ul>
                        <li><strong>1 week:</strong> €5,25</li>
                        <li><strong>2 weken:</strong> €10,50</li>
                        <li><strong>1 maand:</strong> €21,00</li>
                    </ul>
                </blockquote>
            </div>
        </div>

        <div class="row p-3 mb-2 overview-dashboard-index">
            <div class="col-12 col-md-6 mb-4">
                <div class="row photo-container" style="margin-top: 20px;">
                    {% if premiumEventadvertPhotos is defined %}
                        {% for photo in premiumEventadvertPhotos %}
                            {% include 'dashboard/eventadvert/big-premium-photo.html.twig' %}
                        {% endfor %}
                    {% endif %}
                </div>
                <form action="{{ oneup_uploader_endpoint('events_premium') }}" class="dropzone bg-light border" id="dropzone"
                      data-ph="{{ url('dashboard_premium_eventadvert_photo_template') }}">
                    <div class="dz-message" data-dz-message>
                        <i class="fa fa-camera fa-3x"></i><br>
                        <span class="mt-2">{% trans %}Sleep uw foto's hier om te uploaden{% endtrans %}</span><br>
                        <small>{% trans %}of{% endtrans %}</small><br>
                        <span class="btn btn-outline-dark">{% trans %}Bestanden bladeren{% endtrans %}</span>
                        <input type="hidden" name="type" value="premium_eventadvert">
                    </div>
                </form>
            </div>

            <div class="col-12 col-md-6">
                <div class="col-12">
                    {{ form_start(form, {'attr': {'class': 'form', 'novalidate': 'novalidate'}}) }}

                    <div class="form-group" style="margin-top: 20px;">
                        {{ form_widget(form.title, { 'value': eventAdvertPremium.title, 'attr': {'placeholder': 'Titel'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.title) }}
                    </div>

                    <small class="form-text text-muted">Deze premium doorlinken naar...</small>
                    <div class="form-group">
                        {{ form_widget(form.redirection_type, { 'attr': {'placeholder': 'Redirection type'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.redirection_type) }}
                    </div>

                    <div class="form-group d-none" id="eventadvert_field">
                        <select id="premium_eventadvert" class="form-control form-control-lg form-control">
                            {% for advert in adverts %}
                                <option value="{{ advert.id }}">{{ advert.title }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group d-block" id="premium_website_link">
                        {{ form_widget(form.redirection_link, { 'attr': {'placeholder': 'Redirection link'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_label(form.redirection_link, 'Begin uw website met "https://'|trans, { 'class': 'form-label' }) }}
                        {{ form_errors(form.redirection_link) }}
                    </div>

                    <button type="submit" class="btn btn-lg btn-pink btn-block mb-5">{% trans %}Opslaan{% endtrans %}</button>

                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row overview-dashboard-index">
            <div class="col-12 p-5" style="margin-bottom: 70px; background-color: #eff2f7">
                <h3 class="fw-800 display-5 text-uppercase">
                    Tips voor een effectieve Big Premium advertentie
                </h3>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Kies een aantrekkelijke afbeelding</h5>
                        <p class="card-text">Gebruik een heldere, aantrekkelijke afbeelding die de aandacht trekt en relevant is voor je advertentie.</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Focus op eenvoud</h5>
                        <p class="card-text">Houd je tekst kort en krachtig. Maximaal 30 zichtbare karakters zorgen ervoor dat je boodschap direct en duidelijk overkomt.</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Contrast en leesbaarheid</h5>
                        <p class="card-text">Zorg voor voldoende contrast tussen de tekst en de achtergrond van je afbeelding om de leesbaarheid te verbeteren.</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Mobiele optimalisatie</h5>
                        <p class="card-text">Houd rekening met het feit dat je afbeelding op mobiele apparaten enigszins kan worden bijgesneden. Test je advertentie op verschillende apparaten om ervoor te zorgen dat de belangrijkste elementen behouden blijven.</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Call-to-Action</h5>
                        <p class="card-text">Gebruik een sterke call-to-action (CTA) die gebruikers aanspoort tot actie, zoals "Koop nu", "Ontdek meer", of "Registreer vandaag nog".</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Logo en branding</h5>
                        <p class="card-text">Integreer je logo en branding op een natuurlijke manier om je merk te versterken en herkenbaarheid te vergroten.</p>
                    </div>
                </div>
                <div class="card text-center mt-4">
                    <div class="card-body">
                        <h5 class="card-title">Test en optimaliseer</h5>
                        <p class="card-text">Experimenteer met verschillende afbeeldingen en teksten om te zien wat het beste werkt voor je doelgroep. Analyseer de resultaten en optimaliseer waar nodig.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}