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


{% block content %}



    <div class="row">
        <div class="col-md-2">
            <label>Annee</label>
                <div class="multiselect">
                    <div class="selectBox" onclick="showCheckboxesAnnee()">
                        <select>
                            <option>{{ listAnnees[0] }}</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                    <div id="listAnnees">
                        {% for listAnnee in listAnnees %}
                            <label for="{{ listAnnee }}">
                            <input type="checkbox" id="{{listAnnee}}" value="{{listAnnee }}"/>{{ listAnnee }}</label>
                        {% endfor %}

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


        <div class="col-md-2">
            <label>Mois</label>
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxesMois()">
                    <select>
                        <option>Janvier</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="listMois">
                        {% for monthkey, listMonth in listMonths %}
                            <label for="{{ monthkey }}">
                                <input type="checkbox" id="{{monthkey}}" value="{{listMonth }}"/>{{ monthkey }}</label>
                        {% endfor %}
                </div>
            </div>
        </div>

        {# Si enseigne on affiche Magasin #}

        {% if app.user.isMag == false %}
        <div class="col-md-2">
            <label>Magasin</label>
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxesMagasin()">
                    <select>
                        <option>{{ listMag[0]['societe'] }}</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="listMagasin">
                    {% for mag in listMag %}
                        <label for="{{ mag['societe'] }}">
                            <input type="checkbox" id="{% if mag == 'Global Parc' %} 'parc' {% else %} {{ mag['societe'] }} {% endif %}" value="{{mag['zcc'] }}" {% if mag == 'Global Parc' %} checked {% endif %}/>{{ mag['societe']}}</label>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}


        <div class="col-md2">
            <button id="submit" class="btn btn-primary button-marg" type="submit"><span class="fa fa-fw fa-search"></span>Rechercher</button>
        </div>
    </div>

    <div id="affichage" class="margin-top">
        <span class="text-grey-margin-right">Option d'affichage:</span>
        <label id="afannuel" class="checkbox-inline remove-vertical-align">
            <input type="checkbox" class="radio" value="annuel" name="affichage" disabled/> Annuel
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" class="radio" value="mensuel" name="affichage" checked/>Mensuel
        </label>
        <label id="afhebdomadaire"  class="checkbox-inline">
            <input type="checkbox" class="radio" value="hebdomadaire" name="affichage"/>Hebdomadaire
        </label>
        <label id="afjournalier" class="checkbox-inline">
            <input type="checkbox" class="radio" value="journalier" name="affichage"/>Journalier
        </label>
        {# Si enseigne on affiche Magasin #}
        {% if app.user.isMag == false %}
            {#
        <label class="checkbox-inline">
            <input type="checkbox" class="radio" value="par_magasin" name="affichage"/>Par magasin
        </label>
        #}
        {% endif %}
    </div>

    <table id="mytab" class="table margin-top font-color-table">
        <thead>
        <tr class="font-colot-table-header">
            <th scope="col"></th>
            <th colspan="2" scope="col" class="text-center">13 kg Butane</th>
            <th colspan="2" scope="col" class="text-center">13 kg Propane</th>
            <th colspan="2" scope="col" class="text-center">Viseo</th>
            <th colspan="2" scope="col" class="text-center">Cube Butane</th>
            <th colspan="2" scope="col" class="text-center">Cube Propane</th>
        </tr>
        <tr>
            <th></th>
            <th class="text-center">En UB</th>
            <th class="text-center">En UV</th>
            <th class="text-center">En UB</th>
            <th class="text-center">En UV</th>
            <th class="text-center">En UB</th>
            <th class="text-center">En UV</th>
            <th class="text-center">En UB</th>
            <th class="text-center">En UV</th>
            <th class="text-center">En UB</th>
            <th class="text-center">En UV</th>
        </tr>
        </thead>
        <tbody id="bodytab" class="table-color-home">

            {% for keyYear, datas in formData %}
                {% for keyMonth, data in datas|reverse(true) %}
                    {% for keyMag, mag in data %}
                        <tr>
                            <th scope="row" class="text-center">{{ keyMonth}} {{ keyYear }} <br>{{ keyMag }}</th>
                            <td class="text-center">{{ mag['ub']['bu13']}}</td>
                            <td class="text-center">{{ mag['uv']['bu13'] }}</td>
                            <td class="text-center">{{ mag['ub']['pr13'] }}</td>
                            <td class="text-center">{{ mag['uv']['pr13'] }}</td>
                            <td class="text-center">{{ mag['ub']['vi10']|updateValueDecimal}}</td>
                            <td class="text-center">{{ mag['uv']['vi10'] }}</td>
                            <td class="text-center">{{ mag['ub']['cub5']|updateValueDecimal}}</td>
                            <td class="text-center">{{ mag['uv']['cub5'] }}</td>
                            <td class="text-center">{{ mag['ub']['cup5']|updateValueDecimal }}</td>
                            <td class="text-center">{{ mag['uv']['cup5'] }}</td>
                        </tr>
                    {% endfor %}
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>


{% endblock %}

{% block my_js %}

    <script type="text/javascript">
        var isMag;
        var getUser

        {% if app.user.isMag == false %}
            isMag = false
            getUser = {{ app.user.id }}
        {% else %}
            isMag = true
            getUser = {{ app.user.id }}
        {% endif %}


        var enseigneFiltreSearch = "{{ path('enseigne_filtre_search') }}"
    </script>
    <script src="{{ asset('src/js/enseigne/homepage_filtre.js') }}" ></script>
    <script src="{{ asset('src/js/enseigne/homepage_get_value.js') }}" ></script>
{% endblock %}