{#<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>#}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<style>
    .article_name {
        font-size: 16px;
        color: #e7505a;
        font-weight: 600;
    }

    .article_tva {
        font-size: 18px;
        color: #b24952;
        font-weight: 600;
    }

    .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;
    }

    .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
        overflow: hidden;
    }

</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" style="background: white !important;">
                <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" id="myTable" style="margin-bottom: 15px">
                        <thead>
                        <tr>
                            <th></th>
                            <th> Désignation1</th>
                            <th> Désignation2</th>
                            <th> Quantité</th>
                            <th> Prix</th>
                            <th> Détail</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for variante in variantes %}
                            <tr style="background: white">
                                <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> {{ variante.article.designation2 }} </td>
                                <td>
                                    <input type="number" min="1" id="quantity-{{ variante.id }}"
                                           name="quantity-{{ variante.id }}" value="1"/>
                                    <script>
                                        quantity = $('#millesima_client_demandeur_demande_nbrePax').val();
                                        var enabled = "{{ variante.article.quantityDocument }}";
                                        $('#millesima_client_demandeur_demande_nbrePax').change(function () {
                                            alert('sdsdsdds');
                                            var enabled = "{{ variante.article.quantityDocument }}";
                                            quantity = $('#millesima_client_demandeur_demande_nbrePax').val();
                                            if (enabled == 0) {
                                                $('#quantity-{{ variante.id }}').val($('#millesima_client_demandeur_demande_nbrePax').val());
                                            }
                                        });
                                        if (enabled == 0) {
                                            $('#quantity-{{ variante.id }}').val(quantity);
                                        }
                                    </script>
                                </td>
                                <td> {{ variante.prix }} </td>
                                <td>
                                    <span class="millesima-article-detail btn btn-danger"
                                          data-id="{{ variante.id }}">Préstation</span>
                                </td>

                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <button class="btn submit pull-right" data-dismiss="modal" id-variantes="" id="btn-valide-add"
                            style="margin-top: -25px">Ajouter des Articles
                    </button>
                </div>
            </div>

        </div>
    </div>

{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script>
    $('#myTable').dataTable();
    $('.millesima-article-detail').click(function () {
        var id = $(this).attr('data-id');
        $.ajax({
            url: Routing.generate('millesima_show_detail_article', {'id': id}),
            success: function (data) {
                $.alert({
                    title: 'Détail Article',
                    content: data,
                });
            }
        })
    });

    function filter(chiffre) {
        var chiffre = chiffre.toString();
        var p = chiffre.indexOf('.');
        var c = chiffre;
        if (p > -1) {
            c = chiffre.substring('0', p + 3);
        }
        return parseFloat(c);
    }
    var qte = 1;
    $('#millesima_client_demandeur_demande_nbrePax').change(function () {
        var somme = 0;
        var checkedDescription = $(".md-check:checked").map(function () {
            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);
            somme = somme + filter(total);
            return '<span class="article_name">' + $(this).attr('data-nom') + '</span>: <span class="article_prix">' + prix + '<sup>DT</sup> </span>* <span class="article_qte">' + qte + ' </span>'
                + '= <b>' + filter(total) + '<sup>DT</sup></b></span>';

        }).toArray();
        var checkedIds = $(".md-check:checked").map(function () {
            return this.id;
        }).toArray();
        var articles = "";
        for (var i = 0; i < checkedDescription.length; i++) {
            articles += checkedDescription[i] + "<br/>";
        }
        $('#article-request').html(articles + '<span class="article_tva">Total = </span><b style="font-size: 18px">' + filter(somme) + '</b><sup>DT</sup>');
    });

    $("#btn-valide-add").click(function () {
        var somme = 0;
        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);
            somme = somme + filter(total);
            return '<span class="article_name">' + $(this).attr('data-nom') + '</span>: <span class="article_prix">' + prix + '<sup>DT</sup> </span>* <span class="article_qte">' + qte + ' </span>'
                + '= <b>' + filter(total) + '<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_project_manager_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 + '<span class="article_tva">Total = </span><b style="font-size: 18px">' + filter(somme) + '</b><sup>DT</sup>');
                        var URL3 = Routing.generate('millesima_project_manager_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_project_manager_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').prop('checked', true);
                                    $("#millesima_client_demandeur_demande_heurePause1").removeAttr("disabled");
                                } else {
                                    $('#checkbox1').attr('checked', false);
                                    $('#checkbox1').prop('disabled', true);
                                    $("#millesima_client_demandeur_demande_heurePause1").attr("disabled", true);
                                    $("#millesima_client_demandeur_demande_heurePause1").val("");
                                }

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

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

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

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

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

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

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

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

</script>