{% extends 'base.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 body %}

    <div class="container">
        <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">
                            <input class="form-check-input other_address" type="checkbox" name="other_address"
                                   id="other_address">
                            <label class="form-check-label" for="other_address">
                                {% if company.companyName is defined %}
                                    {% trans %}Other location than{% endtrans %} {{ company.companyName }}
                                {% else %}
                                    {% trans %}Other location{% endtrans %}
                                {% endif %}
                            </label>
                        </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>
                            </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>
    </div>
{% endblock %}