{% extends 'base.html.twig' %}
{% block title %}{% if Product.titleTag is not empty %}{{ Product.titleTag }}{% endif %}{% endblock %}

{% block meta %}{% if Product.metaDescription is not empty %}{{ Product.metaDescription }}{% endif %}{% endblock %}

{% block body %}

    {% include('elements/_navigation.html.twig') %}

<section class="rental-product-page text-center">
    <div class="container-fluid">
        <div class="row">
            <h3 class="text-white">Screenz <span class="blue-text-color">rentals</span></h3>
        </div>
    </div>
</section>

    <section class="rental-light-blue">
        <div class="container-fluid">
            <div class="container">
                <div class="row">
                    <div class="col-3"><span class="event mb-2">{{ 'translate.category'|trans }}</span><br/>
                        <a href="{{ path('rentals_page') }}" class="all mr-5">{{ 'translate.see_all'|trans }}</a>
                        <span class="pl-4"><i aria-hidden="true" class="fas fa-arrow-right blue-text-color"></i></span>
                        <a href="{{ path('rentals_page') }}" class="industry"><span>Indoor, Outdoor</span></a>
                    </div>
                    <div class="col-9"><span class="event mb-2">{{ 'translate.events'|trans }}</span><br>
                        {% for ind in Product.industry %}
                            <a href="{{ path('rentals_type_page', {'slug': ind.slug  }) }}" class="industry"><span>{{ ind.name }}</span></a> {% if loop.last == false  %},{% else %}{% endif %}
                        {%  endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-5 rental-product-details mb-5 pb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="main-image mb-3 text-center" style="background-color: rgb({{ Product.color }});">
                        <img src="{{ asset('uploads/images/' ~ Product.image) }}" alt="{{ Product.title }}" class="img-fluid w-75">
                    </div>
                    <p class="product-gallery">{{ 'translate.product_gallery'|trans }}</p>
                    <div class="container thumbnails">
                        <div class="row">
                        {% for photo in Photos %}
                            <div class="thumb"><a href="{{ asset('uploads/images/' ~ photo.path) }}" data-fancybox="gallery"><img src="{{ asset('uploads/images/' ~ photo.path) }}" class="img-fluid w-100"></a></div>
                        {%  endfor %}
                        </div>
                    </div>
                    {% if ProductItems is not empty %}
                    <p class="product-highlights mt-3">{{ 'translate.highlights'|trans }}</p>
                    <ul>
                        {% for item in ProductItems %}
                        <li><i aria-hidden="true" class="fas fa-check mr-5" style="color: rgb({{ Product.color }});"></i>
                            <span class="main-highlights text-bold">{{ item.name }}</span><br/>
                            <span class="description-highlights">{{ item.shortDescription|raw }}</span></li>
                        {% endfor %}

                    </ul>
                    {%  endif %}

                    {%  if Specs is not empty %}
                    <p class="product-highlights mt-3">{{ 'translate.specification'|trans }}</p>

                    <table class="table">
                        <thead>
                        </thead>
                        <tbody>
                        {% for item in Specs %}
                        <tr>
                            <td class="text-bold">{{ item.title }}</td>
                            <td>{{ item.description|raw }}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {%  endif %}

                </div>

                <div class="col-md-6 product-rental-description">
                    <h1 class="mb-3">{{ Product.h1 }}</h1>
                    {%  if Product.downloadLink is not empty %}
                    <div class="main-download">
                        <a class="btn btn-block download-button" href="{{ Product.downloadLink }}" role="button" target="_blank" style="background-color: rgb({{ Product.color }});">Download additional information 👈</a>
                    </div>
                    {% endif %}
                    <div class="text">
                        {{ Product.text|raw }}
                    </div>
                    <p class="rent-this-product mt-3">{{ 'translate.rent_this_product'|trans }}</p>
                    <div class="product-color-inquiry" style="background-image: linear-gradient(to left, rgba(255,0,0,0), rgb({{ Product.color }}, 1));">
                            <div class="container">
                                <div class="row">
                                    <div class="col-3"><img src="{{ asset('uploads/images/' ~ Product.image) }}" alt="{{ Product.title }}" class="img-fluid w-75"></div>
                                    <div class="col-9"><span class="title">Order your {{ Product.title }} today!</span><br/>
                                        <span class="description">Fill-in the contact form with as much details on your project requirements, and our sales representative will contact you soon.</span></div>
                                </div>
                            </div>
                    </div>
                    <p class="rent-this-product mt-3">{{ 'translate.contact_us'|trans }}</p>

                    <div class="product-contact-form-wrapper">
                        <p class="contact-details">{{ 'translate.contact_us'|trans }}</p>
                        {% if not form.vars.valid %}
                            <div class="alert alert-danger alert-dismissible">
                                <h5 style="color: white"><i class="icon fa fa-ban"></i> Greška!</h5>
                                <ul class="list-unstyled">
                                    {# Loop through every form item #}
                                    {% for child in form.children %}
                                        {# Display the errors of the form item #}
                                        {%for error in child.vars.errors%}
                                            <li>{{error.message}}</li>
                                        {%endfor%}
                                    {%endfor%}
                                </ul>
                            </div>
                        {% endif %}
                        {{ form_start(form) }}
                        <div class="row">
                            <div class="col-6">
                                {{ form_widget(form.first, {"attr": {"class": "polje", "placeholder": 'translate.first_name'|trans }}) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.last, {"attr": {"class": "polje", "placeholder": 'translate.last_name'|trans }}) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.email, {"attr": {"class": "polje", "placeholder": 'translate.email'|trans }}) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.phone, {"attr": {"class": "polje", "placeholder": 'translate.phone'|trans }}) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.company, {"attr": {"class": "polje", "placeholder": 'translate.companyName'|trans }}) }}
                            </div>
                            <div class="col-6">
                                {{ form_widget(form.city, {"attr": {"class": "polje", "placeholder": 'translate.city'|trans }}) }}
                            </div>
                            <div class="col-12">
                                {{ form_widget(form.country, {"attr": {"class": "polje", "placeholder": 'translate.country'|trans }}) }}
                            </div>
                            <div class="col-12" id="box">
                                <div class="col-12 mt-3">
                                    <p class="font-weight-bold"><strong>{{ 'translate.choose_service_contact_form'|trans }}</strong></p>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="row">
                                        <div class="col-auto">
                                            <div class="form-check">
                                                {{form_widget(form.buyservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                                <input class="form-check-input oznaci" type="checkbox" id="checkbox1">
                                                <label class="form-check-label" for="contact_buyservice">{{ 'translate.buy_screenz_product'|trans }}</label>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="form-check">
                                                {{form_widget(form.rentservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                                <label class="form-check-label" for="contact_rentservice">{{ 'translate.rent_screenz_product'|trans }}</label>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="form-check">
                                                {{form_widget(form.supportservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                                <label class="form-check-label" for="contact_supportservice">{{ 'translate.support_screenz_product'|trans }}</label>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="form-check">
                                                {{form_widget(form.otherservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                                <label class="form-check-label" for="contact_otherservice">{{ 'translate.other_screenz_product'|trans }}</label>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="col-12 mt-3">
                                    <p class="font-weight-bold"><strong>{{ 'translate.choose_product_contact_form'|trans }}</strong></p>
                                </div>

                                <div class="col-12">

                                    {{ form_widget(form.pages, {"attr": {"class": "form-control select2bs4" }}) }}
                                </div>

                                <div class="col-12 mt-3">
                                    <p class="font-weight-bold"><strong>{{ 'translate.message'|trans }}</strong></p>
                                    {{ form_widget(form.message, {"attr": {"class": "polje", "placeholder": 'translate.message'|trans }}) }}
                                </div>
                            </div>
                            <div class="col-12 text-left ">
                                <div class="form-check mt-3">
                                    {{form_widget(form.terms, {"attr": {"class": "form-check-input oznaci" }}) }}
                                    <label class="form-check-label d-flex justify-content-between" for="contact_terms">
                                        <span style="display: none">Agree</span>
                                        <span>{{ 'translate.terms_agree'|trans }}</span>

                                    </label>
                                </div>
                            </div>
                            <div class="col-12 text-left ">
                                <div class="form-check mt-3">
                                    {{form_widget(form.marketing, {"attr": {"class": "form-check-input oznaci" }}) }}
                                    <label class="form-check-label d-flex justify-content-between" for="contact_marketing">
                                        <span style="display: none">Agree</span>
                                        <span>{{ 'translate.marketing_agree'|trans }}</span>

                                    </label>
                                </div>
                            </div>
                            <div class="col-12 mt-3">
                                {{ form_widget(form.captcha, {"attr": {"class": "mt-3" }}) }}
                            </div>
                            <div class="col-12">
                                <button type="submit" class="">{{ 'translate.submit'|trans }}</button>
                            </div>
                            <div class="col-12">
                                <p class="info">{{ 'translate.all_fields_required'|trans }}</p>
                            </div>
                            {{ form_end(form) }}

                            <script>
                                const el = document.getElementById('contact_country');

                                const box = document.getElementById('box');

                                el.addEventListener('change', function handleChange(event) {
                                    if (event.target.value > 0) {
                                        box.style.display = 'block';
                                    } else {
                                        box.style.display = 'none';
                                    }
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="list-rental-products sec-30">
        <div class="container-fluid">
            <div class="container">
                <div class="row no-gutters">
                    <h3 class="filtering_title text-center mb-3 text-white">{{ 'translate.all_rental_products'|trans }}</h3>
                    <div class="filtering col-sm-12 text-center mb-5">
                        <span data-filter=".all" class="active filtering_title">{{ 'translate.all_purposes'|trans }}</span>
                        {% for ind in Industries %}
                            <span data-filter=".ind{{ ind.id }}" class="filtering_title">{{ ind.name }}</span>
                        {% endfor %}

                    </div>
                </div>
            </div>
            <div class="container clearfix">
                <div class="row">
                    <div class="col-12 text-center w-100 mt-5">
                        <div class="row gallery">
                            {% for product in Products %}

                                <div class="col-sm-6 col-lg-3 mb-3 all grid-item product {% for ind in product.industry %} ind{{ ind.id}} {% endfor %}">
                                    <div class="portfolio-wrapper">
                                        <div class="portfolio-image mb-2">
                                            <img src="{{ asset('uploads/images/' ~ product.image) }}" alt="{{ product.title }}" />
                                        </div>
                                        <h2 class="text-white">{{ product.title }}</h2>
                                        <div class="portfolio-overlay">
                                            <div class="portfolio-content">
                                                <a class="popimg ml-0" href="#">
                                                    <i class="ti-zoom-in display-24 display-md-23 display-lg-22 display-xl-20"></i>
                                                </a>

                                                <p class="button"><a href="{{ path('rentals_detail_page', {'slug': product.slug, 'lang': app.request.locale }) }}">Rent</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% endfor %}

                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>

    {% include('elements/_footer_buy.html.twig') %}


    {% include('elements/_footer.html.twig') %}

{% endblock %}