{% extends 'Admin/_include/_layout.sidebar.html.twig' %}

{% block content %}
    <div class="main_tools">
        <button class="button save small" data-open="modalAddOffer"><i class="fa fa-plus"></i> Ajouter une Offre</button>
    </div>

    <div class="cell small-12">
        <h1 class="mb-1">Liste des Offres</h1>
        <table id="offer_list" class="display dataTable" style="width: 100%;" role="grid">
            <thead>
            <tr role="row">
                <th>ID</th>
                <th>Nom</th>
                <th>Code</th>
                <th>Montant Annuel</th>
                <th>Option</th>
                <th>Taux TVA</th>
            </tr>
            </thead>
            <tbody>
            {% for offer in offers %}
{#                <tr role="row" data-href="#" style="cursor: pointer;">#}
                <tr role="row" data-href="{{ url('back_offer_view', {'offer' : offer.id}) }}" style="cursor: pointer;">
                    <td>{{ offer.id }}</td>
                    <td>{{ offer.name|trans }}</td>
                    <td>{{ offer.code }}</td>
                    <td>{% if offer.amount %}{{ offer.amount|number_format(2, ',','') }} €{% endif %}</td>
                    <td>
                        {% if offer.isOption %}
                            <i class="fa fa-check txt_green"></i>
                        {% else %}
                            <i class="fa fa-times txt_red"></i>
                        {% endif %}
                    </td>
                    <td>{{ offer.taxRate }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    {#    #}{# MODAL #}
        <div class="reveal" id="modalAddOffer" data-reveal>
            <div class="reveal-title">Ajouter une Offre</div>
            <div class="reveal-body">
                {{ form_start(formAdd, {'attr': {'id': 'formAdd'}}) }}
                <div class="grid-x grid-padding-x">
                    <div class="cell small-2 text-right">{{ form_label(formAdd.name) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.name) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formAdd.code) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.code) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formAdd.amount) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.amount) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formAdd.taxRate) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.taxRate) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formAdd.nbMaxArticle) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.nbMaxArticle) }}</div>
                    <div class="cell small-2 text-right">{{ form_label(formAdd.position) }}</div>
                    <div class="cell small-4">{{ form_widget(formAdd.position) }}</div>
                    <div class="cell small-10 small-offset-2">{{ form_widget(formAdd.isOption) }}{{ form_label(formAdd.isOption) }}</div>
                    <div class="cell small-10 small-offset-2">{{ form_widget(formAdd.optionAvailable) }}{{ form_label(formAdd.optionAvailable) }}</div>
                    <div class="cell small-12"><h4>Rôles</h4></div>
                    <hr>
                    {% for role in formAdd.roles %}
                        <div class="cell small-6">
                            {{ form_widget(role, {'attr' : {'class': 'no-mb'}}) }}
                            {{ form_label(role) }}
                        </div>
                    {% endfor %}
                </div>

            </div>
            <div class="reveal-footer">
                <button type="button" data-close class="button small cancel">Retour</button>
                <button type="submit" class="button small save">Ajouter</button>
            </div>
            <button class="close-button"  data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>
            {{ form_end(formAdd) }}
        </div>
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            // var form_parsley = $('#formAddGroup').parsley(parsley_options);
            //
            // $('#btnSubmitFormAddGroup').click(function () {
            //     if (form_parsley.isValid()){
            //         $(this).html(btn_spin);
            //     }
            // });



        });

        (function($) {
            "use strict";
            var datatableFrench = {
                "sProcessing":     "Traitement en cours...",
                "sSearch":         "Rechercher&nbsp;:",
                "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                "sInfoPostFix":    "",
                "sLoadingRecords": "Chargement en cours...",
                "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
                "oPaginate": {
                    "sFirst":      "Premier",
                    "sPrevious":   "Pr&eacute;c&eacute;dent",
                    "sNext":       "Suivant",
                    "sLast":       "Dernier"
                },
                "oAria": {
                    "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                    "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                }
            };

            var offer_list = $('#offer_list');
            // offer_list.dataTable({
            //     language:datatableFrench,
            //     "order": [
            //         [0, "ASC"]
            //     ],
            //     iDisplayLength: -1,
            // });
            offer_list.children('tbody').on( 'click', 'tr', function (e) {
                window.location = $(this).attr('data-href');
            } );
        })(jQuery);
    </script>
{% endblock %}