{% extends 'tbudddy/tbudddy.html.twig' %}

{% block body %}
    <div class="site-section site-section-sm pb-0 ">
        <div id="image_slide_para_si">
            <div class="container">
                <div class="row align-items-lg-start justify-content-center text-center">
                    <div class="col-md-10">
                        <h1 class="mb-2 title_slider">{% trans %}foryou_slide_text{% endtrans %}</h1>
                        <p class="mb-5 second_title_slider">{% trans %}foryou_slide_text_2{% endtrans %}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% include 'tbudddy/search_event/search_event.html.twig' %}

    <div class="site-section site-section-sm bg-light">
        <div class="container">
            <h2 class="custom_font">{% trans %}for_you{% endtrans %}</h2>
            <div class="row mb-5" id="product_list">

                    {% for products in get_products %}
                        <div class="col-md-4 products_one" style="display: none">
                            <div class="property-entry h-100">
                                <a href="{{ path('product', {'id':  products.id  , 'title':urlNormalize(products.title)}) }}" class="property-thumbnail">
                                    <img class="img-fluid product_img_{{ products.id }}" src="/uploads/products/{{products.id}}-6x5.jpg"  alt="Image">
                                </a>
                                <div class="">
                                    <h2 class="property-title custom_font"><a href=""> {{ products.title }}</a></h2>
                                    <span class="property-location d-block custom_font">{{products.shortDescription}}</span>
                                    {% set minvalue = 99999999999 %}
                                    {% for ticket in tickets %}
                                        {% if products.id == ticket.product.id %}
                                            {% set minvalue = min(ticket.amount.amount, minvalue) %}
                                        {% endif %}
                                    {% endfor %}

                                    <strong class="custom_font" style="color: #000;"><span class="product_price_{{ products.id }}"></span> €/{% trans %}person{% endtrans %}</strong>
                                    <script>
                                        $(".product_img_{{ products.id }}").error(function () {
                                            $(this).unbind("error").attr("src", "/assets/tbudddy/images/no-image.png");
                                        });


                                        var valor_xxx = {{ minvalue }};
                                        var resutado =  (valor_xxx / 100).toFixed(2);
                                        $('.product_price_{{ products.id }}').html(resutado);
                                    </script>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

            </div>
            <div class="row">
                <div class="col-md-12 ">
                    <a href="javascript:void(0)" class="custom_font" id="show_more_products" style="text-decoration: underline; color: #000;">Ver Mais</a>
                </div>
            </div>
        </div>
    </div>


    <div class="site-section site-section-sm pb-0 " style="padding: 0">
        <div class="parasi_middle_cover_image" >
            <div class="container">
                <div class="row align-items-lg-start justify-content-center text-center" style="text-align: center !important;" >
                    <div class="col-md-12">
                        <h1 class="mb-2 title_slider desti_title_slide" >Sua melhor experiencia</h1>
                        <p class="mb-5 second_title_slider_destin" >Vem ter conosco</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="site-section experience_section">
        <div class="container">
            <b class="custom_font" style="font-size: 28px;">{% trans %}popular_expericence{% endtrans %}  </b><b class="custom_font" style="font-size: 18px">({{ BaseIncludes.session_location(app.request) }}), </b><b class="custom_font" style="font-size: 12px;"><a style=" color: #AAAAAA" href="javascript:void(0)" data-toggle="modal" data-target="#locations">{% trans %}change_location{% endtrans %}</a> </b>


            {% for experience in experience | slice(0)%}
                {% if loop.first %}
                    <div class="row experience_spacing">
                        <div class="col-md-8 col-lg-8">
                            <a href="{{ path('product', {'id':  experience.id  , 'title': experience.title}) }}" class="service ">
                                <img src="/uploads/products/{{experience.id}}-16x7.jpg" class=" product_activ_img_{{ experience.id }}" style="width: 100%; height: 350px;">
                            </a>
                        </div>
                        <div class="col-md-4 col-lg-4">
                            <span class="custom_font experience_title">{{experience.title}}</span>
                            <p class="custom_font experience_desc">{{ experience.shortDescription }}</p>
                            {#                            <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i>#}
                            {#                            <p class="custom_font experience_comment">(1203 Comentários)</p>#}
                            <button class="custom-button experience_button" onclick="window.location.href='product/{{ experience.id }}/{{ experience.title }}'">{% trans %}know_more{% endtrans %}</button>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
            {% for experience in experience | slice(1)%}
                {% if loop.first %}
                    <div class="row experience_spacing">
                        <div class="col-md-4 col-lg-4">
                            <span class="custom_font experience_title">{{experience.title}}</span>
                            <p class="custom_font experience_desc">{{ experience.shortDescription }}</p>
                            {#                        <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i> <i class="fas fa-star star_color"></i>#}
                            {#                        <p class="custom_font experience_comment">(537 Comentários)</p>#}
                            <button class="custom-button experience_button" onclick="window.location.href='product/{{ experience.id }}/{{ experience.title }}'">{% trans %}know_more{% endtrans %}</button>
                        </div>
                        <div class="col-md-8 col-lg-8 order-first order-md-last">
                             <a href="{{ path('product', {'id':  experience.id  , 'title': experience.title}) }}" class="service ">
                                <img src="/uploads/products/{{experience.id}}-16x7.jpg" class=" product_activ_img_{{ experience.id }}" style="width: 100%; height: 350px;">
                            </a>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}


{#            <div class="row">#}
{#                <div class="col-md-12 ">#}
{#                    <a href="#" class="custom_font" style="text-decoration: underline; color: #000;">{% trans %}view_experiences{% endtrans %}</a>#}
{#                </div>#}
{#            </div>#}

        </div>
    </div>

    <div class="site-section site-section-sm bg-light" style="padding: 0;">
        <div class="container">
            <b class="custom_font" style="font-size: 28px;">{% trans %}activities{% endtrans %}  </b><b class="custom_font" style="font-size: 18px">({{ BaseIncludes.session_location(app.request) }}), </b><b class="custom_font" style="font-size: 12px;"><a style=" color: #AAAAAA" href="javascript:void(0)" data-toggle="modal" data-target="#locations">{% trans %}change_location{% endtrans %}</a> </b>
            <div class="row mb-5">
                <section class="actividate_slide" style=" width: 100%;">


                    {% for activities in activities %}
                        <div>
                            <div class="property-entry h-100">
                                <a href="{{ path('product', {'id':  activities.id  , 'title': urlNormalize(activities.title)}) }}" class="actividade_thumbail">
                                    <img class="img-fluid product_activ_img_{{ activities.id }}" src="/uploads/products/{{activities.id}}-10x12.jpg"  alt="Image">
                                </a>
                                <div class="">
                                    <h2 class="property-title custom_font"><a href="{{ path('product', {'id':  activities.id  , 'title': urlNormalize(activities.title)}) }}">{{ activities.title }}</a></h2>
                                    <span class="property-location d-block custom_font">{{activities.shortDescription}}</span>
                                </div>
                            </div>
                            <script>
                                $(".product_activ_img_{{ activities.id }}").error(function () {
                                    $(this).unbind("error").attr("src", "/assets/tbudddy/images/no-image.png");
                                });
                            </script>
                        </div>
                    {% endfor %}
                </section>
            </div>
{#            <div class="row">#}
{#                <div class="col-md-12 ">#}
{#                    <a href="#" class="custom_font" style="text-decoration: underline; color: #000;">{% trans %}view_experiences{% endtrans %}</a>#}
{#                </div>#}
{#            </div>#}
        </div>
    </div>

    <div class="modal fade" id="locations" role="dialog">
        <div class="modal-dialog  modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style=" background-color: #2c536e; color: #fff;">
                    <h4 class="modal-title" style="margin: 0px 0px 0px 45%;">Localização</h4>
                    <button type="button" class="close" data-dismiss="modal" style="color: #ffffff; opacity: 1;"><i class="fas fa-times-circle"></i></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="modal_labels">Localização Atual: </label>
                        <input type="text" class="form-control" value=" {{ BaseIncludes.session_location(app.request) }}" disabled>
                    </div>
                    <div class="form-group">

                        <label class="modal_labels">Mudar Localização</label>

                        <select class="form-control" id="location_to_change">
                            <option value="Portugal">Portugal</option>
                            {% for locations in list_locations  %}
                                <option value="{{ locations.locality }}">{{ locations.locality }}</option>
                            {% endfor %}
                        </select>

                    </div>

                    <div class="form-group">
                        <button class="custom-button modal_button " id="change_location">Guardar</button>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <script>
        $(document).ready(function () {
            size_li = $("#product_list .products_one").size();
            x=9;
            $('#product_list .products_one:lt('+x+')').show();

            $('#show_more_products').click(function () {
                x= (x+6 <= size_li) ? x+6 : size_li;
                $('#product_list .products_one:lt('+x+')').show();
            });
        });
    </script>



    <script>

        $('#change_location').click(function () {

            var location_to_change = $('#location_to_change').val();

            $.ajax({
                url:'{{ path('location_change') }}',
                type: "POST",
                data: {location_to_change: location_to_change},
                success:function (data_response) {
                    location.reload();

                }
            })
        })



    </script>

{% endblock %}