{% 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 companyprofile %}
        <div class="container p-0 ">
            <div class="alert alert-success">
                Uw bedrijfsprofiel werd succesvol aangemaakt. <br>{{ helper.getFirstname }}, bent u klaar om uw eerste
                gratis advertentie te publiceren? Maak hieronder uw advertentie aan.
            </div>
        </div>
    {% endif %}

    <div class="row overview-dashboard-index">
        <div class="col-12">
            <blockquote>
                <strong><i class="fas fa-lightbulb"></i> Tip:</strong> Uw advertentie verkrijgt meer visibiliteit
                wanneer er een afbeelding en duidelijk beschrijvende tekst wordt gebruikt.
            </blockquote>
        </div>

        {% if canPostFreeAdvert is same as(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,75 ct) kunt u deze advertentie activeren.
                </div>
            </div>
        {% endif %}
    </div>



    <div class="row p-3 mb-2 overview-dashboard-index">
        <div class="col-sm-6 col-md-5 col-lg-6">
            <div class="row photo-container" style="margin-top: 20px;">
                {% if eventadvertPhotos is defined %}
                    {% for photo in eventadvertPhotos %}
                        {% include 'dashboard/eventadvert/photo.html.twig' %}
                    {% endfor %}
                {% endif %}
            </div>
            <form action="{{ oneup_uploader_endpoint('events') }}" class="dropzone bg-light border" id="dropzone"
                  data-ph="{{ url('dashboard_eventadvert_photo_template') }}">
                <div class="dz-message" data-dz-message>
                    <i class="fa fa-camera fa-3x"></i><br>
                    <span class="mt-2">{% trans %}Drag & drop your photos here{% endtrans %}</span><br>
                    <small>{% trans %}or{% endtrans %}</small><br>
                    <span class="btn btn-outline-dark">{% trans %}Browse files{% endtrans %}</span>
                    <input type="hidden" name="type" value="eventadvert">
                </div>
            </form>
        </div>

        <div class="col-sm-6 col-md-5 col-lg-6" style="margin-bottom: 75px;">
            <div class="col-12">
                {{ form_start(form, {'attr': {'class': 'form', 'novalidate': 'novalidate'}}) }}


                <div class="form-label-group row">
                    <div class="col" style="margin-top: 20px;">
                        {{ form_widget(form.channel, { 'attr': {'placeholder': 'Channel'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.channel) }}
                    </div>
                </div>

                <div class="form-label-group row">
                    <div class="col">
                        {{ form_widget(form.category, { 'attr': {'placeholder': 'Category'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.category) }}
                    </div>
                </div>


                <div class="form-label-group row">
                    <div class="col">
                        {{ form_widget(form.subCategory, { 'attr': {'placeholder': 'Sub Category'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.subCategory) }}
                    </div>
                </div>

                <div class="form-label-group row">
                    <div class="col">
                        {{ form_widget(form.title, { 'attr': {'placeholder': 'Title'|trans, 'class': 'form-control form-control-lg'} }) }}
                        {{ form_label(form.title, 'Title'|trans) }}
                        {{ form_errors(form.title) }}
                    </div>
                </div>

                <div class="form-label-group row">
                    <div class="col">
                        {{ form_widget(form.price, { 'attr': {'placeholder': 'Price'|trans, 'class': 'form-control form-control-lg'} }) }}
                    </div>
                </div>

                <div class="form-label-group row">
                    <div class="col">
                        {{ form_label(form.description, 'Description'|trans, {'label_attr': {'style' : 'position: relative; left: 0;'}}) }}
                        {{ form_widget(form.description, { 'attr': {'placeholder': '', 'class': 'form-control form-control-lg'} }) }}
                        {{ form_errors(form.description) }}
                    </div>
                </div>

                <div class="form-label-group row">
                    <div class="col">
                        <small class="form-text text-muted">Voeg enkele beschrijvende tags over uw advertentie
                            toe</small>
                        <select name="tags[]" class="select2-tags form-control" multiple="multiple"
                                style="margin-right: 85px;">
                            {% for tag in tags %}
                                <option value="{{ tag.tag.name }}" selected="selected">{{ tag.tag.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div id="date_hour_bloc">
                    <div class="form-label-group row">
                        <div class="col-6">
                            {{ form_label(form.eventStartDate, 'Start date'|trans) }}
                            {{ form_widget(form.eventStartDate, { 'attr': {'placeholder': 'Start date'|trans, 'class': 'form-control-xlg p-0'} }) }}
                            {{ form_errors(form.eventStartDate) }}
                        </div>
                        <div class="col-6">
                            {{ form_label(form.eventEndDate, 'End date'|trans) }}
                            {{ form_widget(form.eventEndDate, { 'attr': {'placeholder': 'End date'|trans, 'class': 'form-control-xlg p-0'} }) }}
                            {{ form_errors(form.eventEndDate) }}
                        </div>
                    </div>

                    <div class="form-label-group row">
                        <div class="col-6">
                            {{ form_label(form.startHour, 'Start hour'|trans) }}
                            {{ form_widget(form.startHour, { 'attr': {'placeholder': 'Start hour'|trans, 'class': 'form-control-xlg p-0'} }) }}
                            {{ form_errors(form.startHour) }}
                        </div>
                        <div class="col-6">
                            {{ form_label(form.endHour, 'End hour'|trans) }}
                            {{ form_widget(form.endHour, { 'attr': {'placeholder': 'End hour'|trans, 'class': 'form-control-xlg p-0'} }) }}
                            {{ form_errors(form.endHour) }}
                        </div>
                    </div>
                </div>

                <div class="bg-light p-3 mb-2">
                    <small class="form-text text-muted mb-3"> Heeft je evenement een andere locatie dan je bedrijf?<br>Voeg
                        hier het adres van het evenement toe.</small>
                    <div class="form-check form-check-inline">
                        {{ form_row(form.userOtherLocation, {
                            'attr': {
                                'class': 'form-check-input other_address',
                                'id': 'other_address'
                            },
                            'label': company.companyName is defined ? 'Other location than ' ~ company.companyName : 'Other location'
                        }) }}
                    </div>

                    <div class="d-none address mt-2">
                        <div class="form-label-group row">
                            <div class="col-12">
                                {{ form_widget(form.address, { 'attr': {'placeholder': 'Address'|trans, 'class': 'form-control form-control-lg'} }) }}
                                {{ form_label(form.address, 'Address'|trans) }}
                                {{ form_errors(form.address) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.housenumber, { 'attr': {'placeholder': 'Housenumber'|trans, 'class': 'form-control form-control-lg'} }) }}
                                {{ form_label(form.housenumber, 'Number'|trans) }}
                                {{ form_errors(form.housenumber) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.box, { 'attr': {'placeholder': 'Box'|trans, 'class': 'form-control form-control-lg'} }) }}
                                {{ form_label(form.box, 'Box'|trans) }}
                                {{ form_errors(form.box) }}
                            </div>
                        </div>

                        <div class="form-label-group row">
                            <div class="col">
                                <select name="location" class="select2-location form-control"></select>
                                {{ form_errors(form.geoPlacesId) }}
                                {{ form_widget(form.geoPlacesId, { 'attr': {'placeholder': 'Zipcode & City'|trans, 'class': 'form-control form-control-lg'} }) }}
                            </div>
                            {% if geoplaceerror is defined and geoplaceerror is not empty %}
                                <div class="invalid-feedback d-block"><p class="d-block">
                                        <span class="form-error-icon badge badge-danger text-uppercase"><font
                                                    style="vertical-align: inherit;"><font
                                                        style="vertical-align: inherit;">Wrong</font></font></span>
                                        <span class="form-error-message"><font style="vertical-align: inherit;"><font
                                                        style="vertical-align: inherit;">This value cannot be empty.</font></font></span>
                                    </p></div>
                            {% endif %}
                        </div>

                        <div class="form-label-group row">
                            <small class="form-text text-muted mb-3 ml-3">Vind uw GPS-coördinaten op <a href>
                                    https://www.latlong.net/</a></small>
                            <div class="col-6">
                                {{ form_widget(form.latitude, {attr: {placeholder: 'Latitude'|trans, 'class': "form-control form-control-lg"}}) }}
                                {{ form_label(form.latitude, 'Latitude'|trans) }}
                                {{ form_errors(form.latitude) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.longitude, {attr: {placeholder: 'Longitude'|trans, 'class': "form-control form-control-lg"}}) }}
                                {{ form_label(form.longitude, 'Longitude'|trans) }}
                                {{ form_errors(form.longitude) }}
                            </div>
                        </div>
                    </div>
                </div>
                <button type="submit"
                        class="btn btn-lg p-2 btn-pink btn-block mb-5">{% trans %}Save{% endtrans %}</button>

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

    <div class="container-fluid bg-event3">
        <div class="row">
            <div class="col-12 col-md-7 offset-md-5 mb-5 mt-lg-5">
                <h3 class="fw-800 display-5 text-uppercase">
                    {% trans %}Tips om uw <span class="text-pink">aankomende evenement</span> te promoten{% endtrans %}
                </h3>
                <div class="row mt-5 pt-2">
                    <div class="col-12 col-md-10">
                        <p>Zorg ervoor dat uw evenementfiche zo volledig mogelijk is ingevuld om maximale zichtbaarheid
                            te bereiken. Controleer of alle essentiële informatie voor uw bezoekers is opgenomen,
                            zoals:</p>
                        <ul>
                            <li><strong>Locatie:</strong> Vermeld de exacte locatie van het evenement.</li>
                            <li><strong>Tijdsaanduiding:</strong> Geef de precieze start- en eindtijden aan.</li>
                        </ul>
                        <p>Wij raden u ook aan om sfeerfoto's toe te voegen aan uw advertentie. Uitnodigende en
                            aantrekkelijke foto's trekken de aandacht van onze bezoekers en verhogen de kans op succes
                            voor uw evenement.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}