{% extends 'base.html.twig' %}
{% block customstylesheets %}
    <link href='{{ asset('src/css/products.css') }}' rel="stylesheet">
{% endblock %}
{% block body %}
    {#Macro sous formulaire#}
    {% macro custom_prototype(product,index) %}
        <div class="product">
            <div class="row ">
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.eancode) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.brandName) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.charcoalType) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.declaredKg) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.declaredLiters) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.declaredSpecies) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.rawMaterialOrigin) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.charcoalCertification) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.resellerName) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.brandOwner) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.brandOwnerCountry) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.carbonFixRate) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.safetyInscriptions) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {{ form_row(product.image) }}
                    </div>
                </div>
                <div class="col-3">
                    <div class="form-group">
                        {% if product.vars.data is not null and product.vars.data.imageFilename is not null %}
                            <img  class="img-fluid image-preview" src="{{ path('product_image', {'cryptId': product.vars.data.survey.cryptId,
                                'imageFilename': product.vars.data.imageFilename,
                                'productId': product.vars.data.id,
                            }) }}" alt="{{ product.vars.data.imageFilename }}">
                        {% endif %}
                    </div>
                </div>
                <div class="col-3" style="padding: 15px">
                    <button class='deleteProduct btn btn-danger float-right align-bottom'>
                        <i class="fas fa-trash-alt"></i></button>
                </div>
            </div>
        </div>
    {% endmacro %}


    <div class="container margin-top-30">
        <div class="col">
            <h3>Question {{ questionNumber }}</h3>
        </div>
        <div class="row">
            <div class="col-12">
                <p>In this section please list all charcoal products registered or sold under your companies name. The given information is
                    processed by Earthworm and integrated into EF's charcoal product database. The database is accessible for the European consumer
                    via <a target="_blank" href="https://charcoal-transparency.org/">https://charcoal-transparency.org/</a> .<br/>
                    Please fill out the categories carefully. The questions starting with "declared" are to be filled with information that is written on the charcoal bags.
                    For information on how to fill in these questions, see guidelines at the bottom of the page.<br/>
                    Please list all related product information in the table below</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                {{ form_start(form) }}

                {# Appel aux sous formulaires #}
                <div class="question">
                    <h4>Products:</h4>
                    <div class='products' data-prototype='{{ _self.custom_prototype(form.products.vars.prototype,'name')|e('html_attr') }}'>
                        {% for product in form.products %}
                            {{ _self.custom_prototype(product,loop.index0) }}
                        {% endfor %}
                    </div>
                    <div id="add_product_row" class="row">
                        <div class="col-12 text-center">
                            <button type="button" id="add_product_link" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Add a new product </button>
                        </div>
                    </div>

                    <div class="row">
                        {{ form_start(form) }}
                        <div class="col-12">
                            <a class="btn btn-success"
                                    {% set previousRoute = 'q'~previousResponseId %}
                               href="{{ path(previousRoute ,{ 'cryptId' : survey.cryptId , 'questionId' : previousResponseId}) }}"
                            >Previous </a>
                            {{ form_widget(form.submit) }}
                            <a class="float-right" href="{{ path('q59',{'questionId':59,'cryptId':survey.cryptId}) }}">Skip and go to next question
                                >></a>
                        </div>
                        {{ form_end(form) }}
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>


    <div class="row margin-top-30">
        <div class="col-12">
            <p><strong>GTIN-/EAN Code -</strong> Please indicate, the GTIN (Global trade Item number), formerly known as EAN (European Article Number)</p>
            <p><strong>Brand Name -</strong> Please indicate, the name of the product. the brand name is the name in which the product is officially registered by the trade mark authorities, normally it is identically with the product name</p>
            <p><strong>CTI -</strong> Please indicate if the product is already listed within the CTI</p>
            <p><strong>Type of charcoal -</strong> Please indicate the type of charcoal. Option to choose are restaurant charcoal > 40 mm, loose or lump charcoal 20mm - 40 mm, charcoal briquettes or mixed charcoal, a mix between briquettes and charcoal</p>
            <p><strong>Declared KG -</strong> Please indicate the amount of KG of the product (if applicable)</p>
            <p><strong>Declared LITRES -</strong> Please indicate the amount of liters of the product (if applicable)</p>
            <p><strong>Declared species -</strong> Please enter the name of wood species or type of raw material which were used to produce the product. Type of wood species is considered the species name. Other raw material e.g. Coconut should be indicated as such.</p>
            <p><strong>Declared country of origin -</strong> Please indicate the declared country of origin of the product. The country of origin is the country in which the product has been produced.</p>
            <p><strong>Certification -</strong> Please indicate if the charcoal (not the paper bag) is certified under FSC 100%, FSC Mix, PEFC, other (if other please mention)</p>
            <p><strong>Reseller name -</strong> Please indicate, the reseller names which offer the product for sale</p>
            <p><strong>Brand owner -</strong> Please indicate the brand owner name, the brand owner refers to the legal entity which holds the trademark license of the product. Please indicate the country of origin of brand owner.</p>
            <p><strong>C- Fix rate -</strong> Please indicate the C- fix rate of the product. The C-fix rate reflects the carbon content of the charcoal.</p>
            <p><strong>Health and Safety inscriptions -</strong> Please indicate, if health and safety inscriptions are printed on the bag. Health and Safety inscriptions refer to recommendations for a harmless use of the charcoal</p>
            <p><br/><br/>Thank you very much.</p>
        </div>
    </div>

</div>


{% endblock %}
{% block progressBar %}
    <div class="fixedElement">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar"
                             aria-valuenow="{{ questionNumber }}"
                             aria-valuemin="0"
                             aria-valuemax="60"
                             style="width: {{ percentage }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block customjavascript %}
    <script type="text/javascript" src="{{ asset('src/js/fixed-bar.js') }}"></script>
    <script id="edit_product" type="application/javascript" src="{{ asset('src/js/edit-products.js') }}" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on('change', '.custom-file-input',function() {
                console.log('change');
                var file = $(this)[0].files[0].name;
                $(this).next('.custom-file-label').text(file);
                var image = $(this).closest('.image-preview');
                console.log(image);
            });
        });

    </script>

{% endblock %}