{% extends 'base.html.twig' %}
{% block title %}#Blissisthenewevent{% endblock %}
{% block stylesheets %}
    <style>
        .event-show .col-event event-div{display: flex;align-items: center;justify-content: center;border-radius: 5px;}
        .title-event {height: 120px;bottom: 0; background-color: #FFF; opacity: 0.5; padding-top: 45px !important;}
        .title-event h1{padding-top: 10px;}
        .event-show, 
        .event-category{text-align: center;border-radius: 5px;padding: 10px;margin: 10px;cursor: pointer;height: fit-content;}
        .event-category{min-height: 200px;position: relative;}
        .event-category div{height: 50px;position: absolute;bottom: 0;background-color: #FFF;opacity: 0.6;left: 0;padding-top: 10px;display: none;}
        .container .event-show h2::after {border-bottom: none !important;}
        .col-event .card-img-overlay{top: auto !important;background-color: white;opacity: 0.75;margin: 4%;min-height: 4em;}
        .col-event .card{border: none !important;}
        .event-show a{color: #5a2f7f !important;}
    </style>
{% endblock %}
{% block javascripts %}
    
{% endblock %}
{% block body %}
        <div class="">
            <p></p>
            <p></p>
            <h2>Bliss Box</h2>
            <div class="row row-cols-1 row-cols-lg-2 g-2 g-lg-1 categories">
                {% for cat in categories %}
                <div class="col">
                    <div class="event-category align-middle p-3 border" id="{{ cat.name }}" style="background: url('{{ cat.image }}') center  no-repeat; background-size: cover;">
                        <div class="w-100">
                            <h3>{{ cat.label }}</h3>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="event-show">
                {% for cat in categories %}
                <div class="col-event">
                    <div class="{{ cat.name }} event-div" style="background: url('{{ cat.image }}') center no-repeat;background-size: cover;margin-bottom: 20px;">
                        <div class="title-event">
                            <h1>{{ cat.label }}</h1>
                        </div>
                    </div>
                    <div class="row row-cols-1 row-cols-lg-3 g-2 g-lg-1">
                        {% for event in events %}
                            {% if event.categoryid == cat.id %}
                        <div class="col card text-white">
                            <a href="/blissevent/{{ event.id }}/{{ event.name }}" >
                                <img src="{{ event.image }}" class="card-img" alt="...">
                                <div class="card-img-overlay">
                                    <h3 class="card-title text-capitalize">{{ event.title }}</h3>
{#                                    <p class="card-text">Last updated 3 mins ago</p>#}
                                </div>
                            </a>
                        </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            <input type="hidden" id="active-event" value="" />
        </div>
        <script>
            $('.event-show .col-event').hide();
            $(document).ready(function() {
                function show_event(idEvent){
                    $('.event-category').hide();
                    $('.event-show .'+idEvent).parent().fadeIn();
                    $('#active-event').val(idEvent);
                }
                $('.event-category').on('mouseover', function(){
                    $(this).children().fadeIn(10);
                });
                $('.event-category').on('mouseout', function(){
                    $('.event-category').children().fadeOut(15);
                });
                $('.event-show .title-event').on('click', function(){
                    idEvent = $('#active-event').val();
                    $('.event-show .'+idEvent).parent().hide()
                    $('.event-category').fadeIn(); 
                });
                $('.event-category').on('click', function(){
                    show_event(this.id);
                });
                {% if categories|length == 1 %}
                var id = '{{ categories[0].name }}';
                show_event(id);
                {% endif %}
            });
        </script>
{% endblock %}