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

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('sliders') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('sliders') }}
    <script>
        $(function () {
            initDatepickerFilters()
        })
    </script>
{% endblock %}

{% block title %}Actieve events en promoties!{% endblock %}

{% block body %}

    <section class="container-fluid hp-header {% if hasSearchQuery %}d-block d-xs-none{% endif %}">
        <form action="{{ url('search') }}" method="get" class="text-center">
            <div class="row">
                <div class="col-12 col-sm-10 offset-sm-1 col-lg-6 offset-lg-3">
                    <div class="d-block d-sm-none top_logo">
                        <img src="{{ asset('assets/images/logo-colored.png') }}" alt="Promotip" class="img-fluid"
                             style="width: 300px; margin-left: 20%;">
                    </div>
                    <h2 class="text-white text-uppercase fw-500 pt-4 pt-sm-5 pt-sm-10 h2-big xs-top-margin-tb">{% trans %}Searching for happenings?{% endtrans %}</h2>
                    <div class="input-group xs-direction-column">
                        <input type="text" name="q"
                               class="col form-control-lg rounded-left border-0 p-4 xs-search xs-box-border-radius"
                               placeholder="{% trans %}What are you looking for...{% endtrans %}">
                        <div class="input-group-append">
                            <button class="btn btn-purple rounded-right px-4 xs-top-bottom xs-button-padding xs-box-border-radius"
                                    type="submit"><i
                                        class="fa fa-search"></i> {% trans %}Search{% endtrans %}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>

    <div style="position: relative; top: -100px; margin-bottom: -100px;"
         {% if hasSearchQuery %}class="d-block d-xs-none"{% endif %}>
        <div class="container">
            <div class="row mt-4">
                <div class="col-sm-12 bg-white p-3 shadow xs-show-none">
                    <div class="row">
                        {% for channel in channels %}
                            <div class="col-12 col-sm-4 d-block {% if ( channelShowed != channel.getId) %} d-xs-none {% endif %}">
                                <div class="row xs-category-box xs-mt100">
                                    <div class="xs-full-width d-block d-sm-none custom-category-icon">
                                        <img src="{{ asset('assets/images/category-top-icon.png') }}"
                                             style="max-width: 215px;">
                                    </div>
                                    <div class="xs-full-width col-4 col-md-12 col-lg-4 border-right text-center text-md-left text-lg-center">
                                        <a href="{{ url(channel.getRoute|replace({'_category' : ''})) }}"
                                           class="xs-category-title text-purple"><strong>{{ channel.getName }}</strong></a>
                                    </div>
                                    <div class="xs-full-width col-8">
                                        <ul class="list-unstyled xs-row xs-margin-top-35">
                                            {% for category in categories %}
                                                {% if (category.getChannel == channel.getId) %}
                                                    {% set route = "sales_category" %}
                                                    <li class="xs-half xs-category-item">
                                                        <a href="{{ url(channel.getRoute, {category : category.getTitleSlug}) }}"
                                                           class="text-dark">{{ category.getTitle }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                    <img src="{{ asset('assets/images/category-' ~ channel.getName|lower ~ '.jpg') }}"
                                         class="img-fluid category-img-bottom d-block d-sm-none">
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# <div style="position: relative; top: -100px; margin-bottom: -50px;">
        <div class="container">
            <div class="row mt-4">
                <div class="col-sm-12 bg-white p-3 shadow">
                    <div class="row">
                        {% for channel in channels %}
                            <div class="col-12 col-sm-4">
                                <div class="row">
                                    <div class="col-4 col-md-12 col-lg-4 border-right text-center text-md-left text-lg-center">
                                        <a href="{{ url(channel.getRoute|replace({'_category' : ''})) }}"
                                           class="text-purple"><strong>{{ channel.getName }}</strong></a>
                                    </div>
                                    <div class="col-8">
                                        <ul class="list-unstyled">
                                            {% for category in categories %}
                                                {% if (category.getChannel == channel.getId) %}
                                                    {% set route = "sales_category" %}
                                                    <li>
                                                        <a href="{{ url(channel.getRoute, {category : category.getTitleSlug}) }}"
                                                           class="text-dark">{{ category.getTitle }}</a></li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div> #}

    {#  <div class="container">
        <div class="row" style="margin-bottom: 25px;">
                    <nav class="navbar navbar-expand-sm navbar-light">
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
                            <ul class="navbar-nav">

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                        {% trans %}Promotions{% endtrans %}
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <div class="p-3 text-pink">{% trans %}Promotions{% endtrans %}</div>
                                        <a class="dropdown-item"
                                           href="/promoties/dagactie/">{% trans %}Day sale {% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/happy-hour/">{% trans %}Happy hour {% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/week-actie/">{% trans %}Week Sale {% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/kortingen-tot-40/">{% trans %}Discounts up to 40%{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/kortingen-vanaf-50/">{% trans %}Discounts from 50%{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/stock-verkoop/">{% trans %}Stock sale{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/promoties/kick-off-sales/">{% trans %}Kick-off sales{% endtrans %}</a>

                                    </div>
                                </li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                        {% trans %}Events{% endtrans %}
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                                        <div class="p-3 text-pink">{% trans %}Events{% endtrans %}</div>
                                        <a class="dropdown-item"
                                           href="/evenementen/nieuwe-opening/">{% trans %}New opening{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/opendeurdagen/">{% trans %}Open day{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/jaarmarkt/">{% trans %}Annual fair{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/kermis/">{% trans %}Carnivals{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/dorpsfeesten/">{% trans %}Village festivals{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/festivals/">{% trans %}Festivals{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/evenementen/speciale-evementen/">{% trans %}Special events{% endtrans %}</a>

                                    </div>
                                </li>

                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                        {% trans %}Traders{% endtrans %}
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <div class="p-3 text-pink">{% trans %}Traders{% endtrans %}</div>
                                        <a class="dropdown-item"
                                           href="/handelaars/horeca/">{% trans %}Horeca{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/handelaars/restaurant/">{% trans %}Restaurant{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/handelaars/culinair/">{% trans %}Culinary{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/handelaars/ambulante-handel/">{% trans %}Itinerant trade{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/handelaars/landbouw/">{% trans %}Agriculture{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href="/handelaars/winkelen/">{% trans %}Shopping{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href=="/handelaars/feestgelegenheden/">{% trans %}Party occasions{% endtrans %}</a>
                                        <a class="dropdown-item"
                                           href=="/handelaars/entertainment-animatie/">{% trans %}Entertainment & animation{% endtrans %}</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
    #}

    <div class="container mb-5">
        <div class="row">
            <div class="col-12 mt-5">
                <div class="form-order-selects">
                    <form method="post">
                        <div class="filters-field row">
                            <div class="col-12 col-lg-3 mb-3 filter-item">
                                <strong>Postcode:</strong>
                                <input type="text" class="form-control" name="postcode" placeholder="Postcode" value="{{ postcode }}">
                            </div>
                            <div class="col-12 col-lg-3 mb-3 filter-item">
                                <strong>Filter op afstand:</strong>
                                <select name="radius" class="form-control">
                                    {% for radius in radius_options_in_KM %}
                                        <option value="{{ radius }}" {% if radius_sel == radius %} selected {% endif %}>{{radius}} {{ 'KM'|trans }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-lg-3 mb-3 filter-item">
                                <strong>Begin datum:</strong>
                                <input type="text" class="form-control" name="start_date" placeholder="Begin datum" value="{{ start_date }}">
                            </div>
                            <div class="col-12 col-lg-3 mb-3 filter-item">
                                <strong>Einddatum:</strong>
                                <input type="text" class="form-control" name="end_date" placeholder="Einddatum" value="{{ end_date }}">
                            </div>
                        </div>
                        <div class="filter-item lg-center-button">
                            <button type="submit" class="btn btn-purple rounded-right px-4">Filter</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% if events is defined and events is not empty %}
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mt-5 xs-row-margin">
                        {% for event in events %}
                            {% set eventChannel = '' %}
                            {% set eventChannelTitle = '' %}
                            {% for channel in channels %}
                                {% if (channel.id == event.channel) %}
                                    {% set eventChannel = channel.getRoute|replace({'_category' : '_advert'}) %}
                                    {% set eventChannelTitle = channel.getName %}
                                {% endif %}
                            {% endfor %}
                            {% set eventCategory = '' %}
                            {% for category in categories %}
                                {% if (category.id == event.category) %}
                                    {% set eventCategory = category.getTitleSlug %}
                                {% endif %}
                            {% endfor %}
                            {% set eventChannel = '' %}
                            {% set eventChannelTitle = '' %}
                            {% for channel in channels %}
                                {% if (channel.id == event.channel) %}
                                    {% set eventChannel = channel.getRoute|replace({'_category' : '_advert'}) %}
                                    {% set eventChannelTitle = channel.getName %}
                                {% endif %}
                            {% endfor %}
                            {% set eventCategory = '' %}
                            {% for category in categories %}
                                {% if (category.id == event.category) %}
                                    {% set eventCategory = category.getTitleSlug %}
                                {% endif %}
                            {% endfor %}
                            <div class="col-12 col-sm-6 col-lg-4 mb-4" style="padding-left: 5px;padding-right: 5px;">
                                <div class="card h-100 border-radius-20 xs-wrapper-item xs-advert-item xs-box-gradborder xs-custom-{{ eventChannelTitle|lower }} md-wrapper-item md-advert-item md-box-gradborder md-custom-{{ eventChannelTitle|lower }}">
                                    <span class="badge badge-active xs-badge xs-box-border-radius">{{ eventChannelTitle }}</span>
                                    {% if event.photos|first.imageName is defined %}
                                        <a href="{{ url(eventChannel, {category : eventCategory, slug : event.titleSlug }) }}"
                                           class="a-block-fixed-height xs-item-link xs-box-border-radius"><img
                                                    class="img-fluid text-center img-contain-vertical-align xs-box-border-radius"
                                                    src="{{ asset('/media/events/' ~ event.photos|first.imageName) | imagine_filter('event_fixed') }}"
                                                    alt=""/></a>
                                    {% else %}
                                        <a href="{{ url(eventChannel, {category : eventCategory, slug : event.titleSlug }) }}"
                                           class="a-block-fixed-height xs-item-link xs-box-border-radius">
                                            <img class="img-fluid img-contain-vertical-align xs-box-border-radius"
                                                 src="/assets/images/no-image.png" alt=""></a>
                                    {% endif %}
                                    <div class="card-body xs-card-info">
                                        <small class="fw-300 text-blue xs-fw-400">{{ event.company.companyname }}</small>
                                        <h5 class="card-title text-uppercase text-gray fw-300 m-0 p-0 xs-fw-600">
                                            <a href="{{ url(eventChannel, {category : eventCategory, slug : event.titleSlug }) }}"
                                               class="text-gray">{{ event.title }}</a>
                                        </h5>
                                        {% for geo in geoPlaces %}
                                            {% if event.geoPlacesId > 0 and geo.id == event.geoPlacesId %}
                                                <small class="font-italic text-blue">{{ geo.locality }}</small>
                                            {% elseif event.geoPlacesId == null and event.company.geoPlacesId > 0 and geo.id == event.company.geoPlacesId %}
                                                <small class="font-italic text-blue">{{ geo.locality }}</small>
                                            {% endif %}
                                        {% endfor %}

                                        <div class="row mt-3 d-none d-sm-block">
                                            <div class="col-sm">
                                                <i class="fa fa-calendar-alt text-pink"></i>
                                                Van {{ event.eventStartDate|displayDate }}
                                            </div>
                                            <div class="col-sm">
                                                <i class="fa fa-calendar-alt text-pink"></i>
                                                Tot {{ event.eventEndDate|displayDate }}
                                            </div>
                                        </div>
                                        <div class="row mt-3 d-none d-sm-block">
                                            <div class="col-sm">
                                                <i class="fa fa-clock text-pink"></i> {{ event.startHour|date('H:i') }}
                                                - {{ event.endHour|date('H:i') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                       {#  <script async
                                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4589234506239744"
                                crossorigin="anonymous"></script>
                        <!-- advertentieblok index -->
                        <ins class="adsbygoogle"
                             style="display:inline-block;width:348px;height:450px"
                             data-ad-client="ca-pub-4589234506239744"
                             data-ad-slot="3688780912"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>#}
                    </div>
                </div>
            </div>
        </div>
        <div>
            {{ knp_pagination_render(events) }}
        </div>
    {% else %}
        <div class="container">
            <div class="row mt-5">
                <div class="col-12">
                    {% if start_date is empty and end_date is empty and postcode is empty and radius_sel is empty %}
                        Er zijn geen advertenties gevonden
                    {% else %}
                        Helaas, geen advertenties gevonden met deze filters. Probeer een andere zoekopdracht.
                    {% endif %}
                </div>
            </div>
        </div>

       {# <script async
                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4589234506239744"
                crossorigin="anonymous"></script>
        <ins class="adsbygoogle"
             style="display:block; text-align:center;"
             data-ad-layout="in-article"
             data-ad-format="fluid"
             data-ad-client="ca-pub-4589234506239744"
             data-ad-slot="7332474469"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>#}

    {% endif %}

    {% if eventsPaid is not empty %}
        <div class="container-fluid premium-bg">
            <div class="splide my-5">
                <div class="text-center splide__track">
                    <ul class="splide__list">
                        {% for item in eventsPaid %}
                            {% if item.type == 'event' %}
                                {% set eventChannel = '' %}
                                {% set eventChannelTitle = '' %}
                                {% for channel in channels %}
                                    {% if (channel.id == item.data.channel) %}
                                        {% set eventChannel = channel.getRoute|replace({'_category' : '_advert'}) %}
                                        {% set eventChannelTitle = channel.getName %}
                                    {% endif %}
                                {% endfor %}
                                {% set eventCategory = '' %}
                                {% for category in categories %}
                                    {% if (category.id == item.data.category) %}
                                        {% set eventCategory = category.getTitleSlug %}
                                    {% endif %}
                                {% endfor %}
                                <li class="splide__slide xs-box-gradborder xs-box-border-radius md-box-border-radius md-box-gradborder">
                                    <span class="badge badge-featured m-0 xs-badge xs-box-border-radius">AANBEVOLEN{# {{ eventChannelTitle }} #}</span>
                                    <a href="{{ url(eventChannel, {category : eventCategory, slug : item.data.titleSlug }) }}"
                                       class="splide_txt">
                                        <div class="splide__slide_txt">
                                            <small class="text-sand">{{ item.data.company.companyname }}</small>
                                            <h6>{{ item.data.title|u.truncate(30, '...') }}</h6>
                                        </div>
                                    </a>
                                    <a href="{{ url(eventChannel, {category : eventCategory, slug : item.data.titleSlug }) }}">
                                        {% if item.data.photos|first.imageName is defined %}
                                        {% for photo in item.data.photos %}
                                            <img src="{{ asset('/media/events/' ~ photo.imageName) | imagine_filter('event_slider') }}"
                                                 alt=""
                                                 class="img-fluid {% if loop.first %} d-block {% else %} d-none {% endif %}">
                                        {% endfor %}
                                        {# <img src="{{ asset('/media/events/' ~ item.data.photos|first.imageName) | imagine_filter('event_slider') }}"
                                            alt="" class="img-fluid"> #}
                                        {% else %}
                                        <img src="assets/images/no-image.png" alt="" class="img-fluid"></a>
                                    {% endif %}
                                    </a>
                                </li>

                            {% elseif item.type == 'company' %}
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    {% endif %}

    {#  <div class="container">
        <div class="row hp-bg mt-3 xs-row-margin">
            <div class="col-12 col-md-7 offset-md-5 mb-5 mt-lg-5 xs-box-gradborder xs-box-border-radius xs-box-padding homepage-bottom">
                <h3 class="fw-800 display-5 display-sm-4 xs-mb-1-half">
                     {% trans %}Need help promoting your<span class="text-pink"> upcoming event?</span>{% endtrans %}
                    <span class="title-in">Hulp nodig bij de promotie</span> <br/><span class="text-uppercase"> van uw </span> <span class="text-uppercase text-pink"> komend event?</span>
                </h3>
                {% trans %}
                    <strong>Promotip</strong> is the advertising platform for small businesses and local traders.
                    <br>Bring your company, sales action or event to the attention of new potential customers!<br>
                    <br>Would you like to put your company, event or special promotion in the spotlight?<br>

                    <p><strong>Sign up for free and start promoting right away!</strong></p>{% endtrans %}
                {% if app.user %}
                    <a href="{{ url ('dashboard_event') }}"
                       class="btn btn-lg px-5 btn-pink">{% trans %}Publish an advert{% endtrans %}</a>
                {% else %}
                    <a href="{{ url ('home_register') }}"
                       class="btn btn-lg px-5 btn-pink">{% trans %}Publish an advert{% endtrans %}</a>
                {% endif %}
            </div>
        </div>
    </div> #}

    <div class="container">
        <div class="row hp-bg mt-3 xs-row-margin">
            <div class="col-12 col-md-7 offset-md-5 mb-5 mt-lg-5 xs-box-gradborder xs-box-border-radius xs-box-padding homepage-bottom">
                {% if app.user %}
                    <h3 class="fw-800 display-5 display-sm-4 xs-mb-1-half">
                        {# {% trans %}Need help promoting your<span class="text-pink"> upcoming event?</span>{% endtrans %} #}
                        <span class="title-in">Hulp nodig bij de promotie</span> <br/><span class="text-uppercase"> van uw </span>
                        <span class="text-uppercase text-pink"> komend event?</span>
                    </h3>
                    <strong>Promotip</strong> is een gratis advertentieplatform voor lokale handelaren, organisatoren, vakmannen en dienstverleners.
                    <br>Breng uw bedrijf, evenement of kortingsactie gratis onder de aandacht van onze bezoekers en bereik zo nog méér potentiële klanten.
                    <br>
                    <br>Bent u klaar om uw bedrijf, diensten of producten in de kijker te zetten?<br>
                    <p><strong>Publiceer dan vandaag nog uw evenement of kortingsactie!</strong></p>
                    <a href="{{ url ('dashboard_event') }}"
                       class="btn btn-lg px-5 btn-pink">{% trans %}Publish an advert{% endtrans %}</a>
                {% else %}
                    <h3 class="fw-800 display-5 display-sm-4 xs-mb-1-half text-pink">Alle koopjes van lokale handelaren,
                        evenementen, special deals van vakmannen en dienstverleners in uw buurt!</h3>
                    <br>Op <strong>Promotip</strong> kunt u actieve advertenties terugvinden van alle
                    <strong>handelaren</strong> dat een leuke <strong>kortingsactie of koopje aanbieden</strong>.
                    <p><br>Zin in een dagje uit? Lokale <strong>festivals en evenementen</strong> kunt u terugvinden in
                        de evenementen rubrieken.
                    <p>Eerder op zoek naar een lokale <strong>dienstverlener voor renovaties of herstellingen</strong>?
                        Check dan zeker de handelaars rubrieken.
                        Mogelijk kunt u in deze rubriek een vakman in uw buurt vinden!</p></h3>

                {% endif %}
            </div>
        </div>
    </div>
    {#  <div class="container" style="margin-bottom: 2rem;">
        <div class="row">
            <div class="col-sm-8"></div>
            <div class="col-sm-4"><a href="#top" class="text-purple">{% trans %}Back on top of page{% endtrans %}</a></div>
        </div>
    </div> #}
{% endblock %}