{#<label for="millesima_client_demandeur_demande_variantes" class="required">Article</label>
<select class="form-control" id="millesima_client_demandeur_demande_variantes" name="millesima_client_demandeur_demande_variantes[variantes]">
    {% for article in articles %}
        <option value="{{ article.id }}">{{ article.designation1 }}</option>
    {% endfor %}
</select>#}

<style>
    .article_name {
        font-size: 16px;
        color: #e7505a;
        font-weight: 600;
    }
    .article_tva {
        font-size: 12px;
        color: #b24952;
        font-weight: 400;
    }
    .article_prix {
        font-size: 14px;
        color: #24b3af;
        font-weight: 400;
    }
    .article_qte{
        font-size: 13px;
        color: #24c2be;
        font-weight: 400;
    }
    .articleTTC{
        font-size: 15px;
        color: #16605c;
        font-weight: 400;
    }

</style>
{% if variantes is empty %}

    <span style="padding-left: 25%;color: #a01616;font-size: 27px;">Pas d'article</span>

{% else %}


    <div class="add_href_acticle">
        <a href="#" id="add_articles" class="add_articles" style="color: #a01616;" data-toggle="modal"
           data-target="#add-articles-modal"> <i style="padding-left: 25%;color: #a01616;" class="fa fa-plus"></i>Choix
            des Articles</a>
    </div>
    <!-- Modal Add Articles -->
    <div class="modal fade" id="add-articles-modal" role="dialog">
        <div class="modal-dialog  modal-lg" style="width: 90%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Ajouter des articles</h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th></th>
                            <th> Désignation1</th>
                            <th> Pause Café d'accueil</th>
                            <th> Réunion 1</th>
                            <th> Pause Café Matin</th>
                            <th> Réunion 2</th>
                            <th> Déjeuner</th>
                            <th> Réunion 3</th>
                            <th> Pause Café Aprés-Midi</th>
                            <th> Réunion 4</th>
                            <th> Dînner</th>
                            <th> Quantité</th>
                            <th> Prix</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for variante in variantes %}
                            <tr>
                                <td>
                                    <div class="md-checkbox">
                                        <input class="md-check" type="checkbox" id="{{ variante.id }}"
                                               data-nom="{{ variante.article.designation1 }}"
                                               data-description="{{ variante.article.designation1 }}"
                                               data-prix="{{ variante.prix }}"
                                               data-tva ="{{ variante.article.tax }}"
                                               data-enabled="{{ variante.article.quantityDocument }}">
                                        <label for="{{ variante.id }}">
                                            <span></span>
                                            <span class="check"></span>
                                            <span class="box"></span>
                                        </label>
                                    </div>
                                </td>
                                <td> {{ variante.article.designation1 }} </td>
                                <td> {% if variante.article.pauseCafe == 1 %} Oui {% else %} Non {% endif %}</td>
                                <td> {% if variante.article.reunion1 == 1 %} Oui {% else %} Non {% endif %} </td>
                                <td> {% if variante.article.pauseMatin == 1 %} Oui {% else %} Non {% endif %}</td>
                                <td> {% if variante.article.reunion2 == 1 %} Oui {% else %} Non {% endif %} </td>
                                <td> {% if variante.article.dejeuner == 1 %} Oui {% else %} Non {% endif %}</td>
                                <td> {% if variante.article.reunion3 == 1 %} Oui {% else %} Non {% endif %} </td>
                                <td> {% if variante.article.pauseMidi == 1 %} Oui {% else %} Non {% endif %}</td>
                                <td> {% if variante.article.reunion4 == 1 %} Oui {% else %} Non {% endif %} </td>
                                <td> {% if variante.article.dinner == 1 %} Oui {% else %} Non {% endif %} </td>
                                <td> {% if variante.article.quantityDocument == 1 %}<input type="number" min="1" id="quantity-{{ variante.id }}" name="quantity-{{ variante.id }}" value="1"/>{% endif %} </td>
                                <td> {{ variante.prix }} </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn submit" data-dismiss="modal" id-variantes="" id="btn-valide-add">Ajouter des
                        Articles
                    </button>
                </div>
            </div>

        </div>
    </div>

{% endif %}

<script>
    function filter(chiffre){
        var chiffre = chiffre.toString();
        var p = chiffre.indexOf('.');
        var c = chiffre.substring('0',p+3);
        return parseFloat(c);
    }

    $("#btn-valide-add").click(function () {
        var checkedDescription = $(".md-check:checked").map(function () {
            var qte = $('#quantity-' + $(this).attr('id')).val();
            var prix = parseFloat($(this).attr('data-prix'));
            var tva = parseInt($(this).attr('data-tva'));
            var total = parseInt(qte) * parseFloat(prix);
            if ($(this).attr('data-enabled') == true) {
                return '<span class="article_name">'+$(this).attr('data-nom') + '</span><span class="article_tva"> ('+tva+'%) </span>: <span class="article_prix">' + prix + '<sup>DT</sup> </span>* <span class="article_qte">' + qte + ' </span>+ <span class="articleTTC">' + filter(total*(tva/100))
                    +'<sup>DT</sup> = <b>'+filter((total*(tva/100))+total)+'<sup>DT</sup></b></span>';
            } else {
                return '<span class="article_name">'+$(this).attr('data-nom') + '</span><span class="article_tva"> ('+tva+'%) </span>: <span class="article_prix">' + prix + '<sup>DT</sup> </span>* <span class="article_qte">1 </span>+ <span class="articleTTC">' + filter(prix*(tva/100))
                    +'<sup>DT</sup> = <b>'+filter((prix*(tva/100))+prix)+'<sup>DT</sup></b></span>';
            }

        }).toArray();
        var checkedIds = $(".md-check:checked").map(function () {
            return this.id;
        }).toArray();

        if (checkedIds.length === 0) {
            alert('il faut ajouter un article');
            return false;
        } else {
            $.ajax({
                url: Routing.generate('millesima_client_acheteur_ajax_verfier_compatibilite_article', {
                    'articles': checkedIds,
                    'type': 'select'
                }),
                success: function (data) {
                    if (data != "true") {
                        var $data_string = JSON.stringify(checkedIds);
                        var $data_description = JSON.stringify(checkedDescription);
                        var checkedNames = $(".md-check:checked").map(function () {
                            return $(this).attr('data-nom');
                        }).toArray();
                        var $data_string_name = JSON.stringify(checkedNames);
                        $("button#btn-valide-add").attr('id-variantes', ($data_string));
                        $("#millesima_client_demandeur_demande_variantes").val($data_string);
                        var articles = "";
                        for (var i = 0; i < checkedDescription.length; i++) {
                            articles += checkedDescription[i] + "<br/>";
                        }
                        $('#article-request').html(articles);
                        var URL3 = Routing.generate('millesima_client_acheteur_ajax_get_comptes_facturation_by_account', {'idAccount': $("#account").val()});
                        {% set loadingSC =  asset('back/assets/global/img/ajax-loading.gif') %}
                        $("#add_compte_facturation_ajax_response").html("<img src = '{{ loadingSC }}' />");
                        var request = $.ajax({
                            url: URL3,
                            method: "POST",
                        }).done(function (msg) {
                            $("#add_compte_facturation_ajax_response").html(msg);
                        }).fail(function (jqXHR, textStatus) {
                            console.log(textStatus);
                        });
                        $('.button-next').removeClass('disabled');
                        $('.button-previous').removeClass('disabled');
                        $.ajax({
                            url: Routing.generate('millesima_client_acheteur_ajax_verfier_compatibilite_article', {
                                'articles': checkedIds,
                                'type': 'filtre'
                            }),
                            success: function (data) {
                                var result = JSON.parse(data);
                                if (result[1] == true) {
                                    $('#checkbox1').attr('disabled', false);
                                    $('#checkbox1').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heurePause1").removeAttr("disabled");
                                } else {
                                    $('#checkbox1').attr('checked', false);
                                    $('#checkbox1').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heurePause1").attr("disabled", true);
                                }

                                if (result[2] == true) {
                                    $('#checkbox2').attr('disabled', false);
                                    $('#checkbox2').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureReunion").removeAttr("disabled");
                                } else {
                                    $('#checkbox2').attr('checked', false);
                                    $('#checkbox2').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureReunion").attr("disabled", true);
                                }

                                if (result[3] == true) {
                                    $('#checkbox3').attr('disabled', false);
                                    $('#checkbox3').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heurePause2").removeAttr("disabled");
                                } else {
                                    $('#checkbox3').attr('checked', false);
                                    $('#checkbox3').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heurePause2").attr("disabled", true);
                                }

                                if (result[4] == true) {
                                    $('#checkbox22').attr('disabled', false);
                                    $('#checkbox22').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureReunion2").removeAttr("disabled");
                                } else {
                                    $('#checkbox22').attr('checked', false);
                                    $('#checkbox22').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureReunion2").attr("disabled", true);
                                }

                                if (result[5] == true) {
                                    $('#checkbox4').attr('disabled', false);
                                    $('#checkbox4').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureDejeuner").removeAttr("disabled");
                                } else {
                                    $('#checkbox4').attr('checked', false);
                                    $('#checkbox4').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureDejeuner").attr("disabled", true);
                                }

                                if (result[6] == true) {
                                    $('#checkbox23').attr('disabled', false);
                                    $('#checkbox23').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureReunion3").removeAttr("disabled");
                                } else {
                                    $('#checkbox23').attr('checked', false);
                                    $('#checkbox23').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureReunion3").attr("disabled", true);
                                }

                                if (result[7] == true) {
                                    $('#checkbox5').attr('disabled', false);
                                    $('#checkbox5').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heurePause3").removeAttr("disabled");
                                } else {
                                    $('#checkbox5').attr('checked', false);
                                    $('#checkbox5').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heurePause3").attr("disabled", true);
                                }

                                if (result[8] == true) {
                                    $('#checkbox24').attr('disabled', false);
                                    $('#checkbox24').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureReunion4").removeAttr("disabled");
                                } else {
                                    $('#checkbox24').attr('checked', false);
                                    $('#checkbox24').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureReunion4").attr("disabled", true);
                                }

                                if (result[9] == true) {
                                    $('#checkbox6').attr('disabled', false);
                                    $('#checkbox6').attr('checked', true);
                                    $("#millesima_client_demandeur_demande_heureDiner").removeAttr("disabled");
                                } else {
                                    $('#checkbox6').attr('checked', false);
                                    $('#checkbox6').attr('disabled', true);
                                    $("#millesima_client_demandeur_demande_heureDiner").attr("disabled", true);
                                }
                            }
                        })
                    } else {
                        alert('Verifier les choix de votre articles il faut choisier des articles complimenter');
                        $('.button-next').addClass('disabled');
                        $('.button-previous').addClass('disabled');
                    }
                }
            });
        }
    });

</script>