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

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    Réceptionner une commande
{% endblock %}

{% block stylesheets %}

    {{ parent() }}


    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
            height: 40px;
        }
        .modal-dialog .form-group {
            margin-bottom: 5px;
        }
        .modal-dialog .block-header {
            padding-top: 2px;
            padding-bottom: 2px;
        }
        .modal-dialog .block-content {
            padding-top: 5px;
        }

        .modal-dialog .form-control, .input-group-text {
            height: 30px;
        }
        .modal-dialog .btn-clear {
            height: 30px;
        }
        .modal-footer {
            display: block;
        }

        .nav-link.bl {
            background-color: aliceblue;
        }

        .modal-dialog input[type=radio] {
            width: 30px;
            -ms-transform: scale(2);
            -webkit-transform: scale(2);
            transform: scale(2);
        }
        @media (max-width: 770px) {
            .datepicker.datepicker-dropdown.dropdown-menu {
                top:65px!important;
                left:10px!important;
                width: 90%!important;
            }
        }
    </style>
{% endblock %}

{% block body %}
    {{ parent() }}






    <style>
        .input-form-douchette {
            width: 155px!important;
            padding-left: 4px;
            padding-right: 4px;
        }
        input[readonly] {
            cursor: pointer !important;
            background-color: white !important;
        }

        @media screen and (min-width: 771px) {
            .display-desktop {
                display: inline;
            }
            .display-mobile {
                display: none;
            }
        }
        @media (max-width: 770px) {
            h4 {
                margin-bottom: 5px;
            }
            .display-desktop {
                display: none;
            }
            .display-mobile {
                display: inline;
            }
        }

        input[type="number"] {
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield;
        }
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    </style>
    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding: 5px">

            <a type="button" name="menu" class="btn" href="{{ path('douchette_menu') }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Menu</span>
            </a>

            <a type="button" name="menu" class="btn" href="{{ path('douchette_commandes') }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Retour</span>
            </a>

            Commande {{ commande.documentNumber }}

        </div>

        <div class="block-content block-content-full" style="padding-top: 5px;padding-right: 5px;padding-left: 5px;background-color: #f6f7f9;">
            {% set articleNumber = 0 %}
            {% for commandeLigne in commande.commandeLignes %}
                    {% if commandeLigne.article.manageStock and commandeLigne.quantityRemaining != 0 %}
                        {% set articleNumber = articleNumber + 1 %}
                        <input type="text" id="article-{{ articleNumber }}-id" value="{{ commandeLigne.article.id }}" style="display: none">
                        <input type="text" id="article-{{ articleNumber }}-commandeLigneId" value="{{ commandeLigne.id }}" style="display: none">
                        <input type="text" id="article-{{ articleNumber }}-tracking-mode" value="{{ commandeLigne.article.trackingMode }}" style="display: none">
                        <div class="form-group row" style="margin-bottom:8px">
                            <div class="col-12">
                                <div>
                                    {{ commandeLigne.article.id }} - <span class="display-desktop">{{ commandeLigne.article.name }}</span><span class="display-mobile">{{ commandeLigne.article.name }}</span>
                                    <br>
                                    {{ commandeLigne.quantity }} commandé - {% if commandeLigne.article.manageStock %}{{ commandeLigne.quantityDelivered }}/{{ commandeLigne.quantity }} déjà réceptionné ({% if commandeLigne.article.trackingMode == 0 %}Standard{% else %}série/lot{% endif %}){% else %}Article non géré en stock{% endif %}
                                </div>
                                <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                    <button type="button" class="btn btn-primary" id="btm-minus-{{ articleNumber }}" onclick="minus('article-{{ articleNumber }}',{{ commandeLigne.article.trackingMode }})">-</button>
                                    <input type="number" class="form-control" id="article-{{ articleNumber }}" value="0" style="width: 60px">
                                    <button type="button" class="btn btn-primary" id="btm-plus-{{ articleNumber }}" onclick="plus('article-{{ articleNumber }}',{{ commandeLigne.quantityRemaining }},{{ commandeLigne.article.trackingMode }})">+</button>


                                </div>

                                {% if commandeLigne.article.trackingMode == 1 %}
                                    <div>
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-serie-1" placeholder="Saisir 1er n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-serie-2" placeholder="Saisir 2ème n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-serie-3" placeholder="Saisir 3ème n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-serie-4" placeholder="Saisir 4ème n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-serie-5" placeholder="Saisir 5ème n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    </div>
                                {% elseif  commandeLigne.article.trackingMode == 2  %}
                                    <div>
                                        <input type="text" class="form-control" id="article-{{ articleNumber }}-lot" placeholder="Saisir le n° du lot" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    {% endif %}


            {% endfor %}

            <input type="text" id="commande-article-number" value="{{ articleNumber }}" style="display: none">
            <input type="text" id="commande-reception-url" value="{{ path('douchette_reception_create') }}" style="display: none">
            <input type="text" id="commande-reception-redirect" value="{{ path('douchette_commandes') }}" style="display: none">


            <button type="button" class="btn btn-primary" onclick="controle()" id="btn-reception">
                Réceptionner
            </button>
        </div>
    </div>

{% endblock %}


{% block javascripts %}
    {{ parent() }}


    <script>
        function plus(article, max, trackingMode) {
            var artId = '#' + article;
            var val = parseInt($(artId).val());
            var newVal = val+1;
            if(val < max) {
                if (trackingMode == 1) {
                    if (val < max) {
                        $(artId).val(newVal);
                        changeDisplayFieldsSerie(artId, newVal);
                    }
                } else if (trackingMode == 2) {
                    $(artId).val(newVal);
                    changeDisplayFieldsLot(artId, newVal);
                } else {
                    $(artId).val(newVal);
                }
            }
        }
        function minus(article, trackingMode) {
            var artId = '#' + article;
            var val = parseInt($(artId).val());
            var newVal = val-1;
            if(val > 0) {
                $(artId).val(newVal);

                if(trackingMode == 1) {
                    changeDisplayFieldsSerie(artId,newVal);
                } else if (trackingMode == 2) {
                    changeDisplayFieldsLot(artId,newVal);
                }
            }
        }

        function changeDisplayFieldsSerie(artId, val) {
            if(val == 0) {
                $(artId + '-serie-1').css('display', 'none');
                $(artId + '-serie-2').css('display', 'none');
                $(artId + '-serie-3').css('display', 'none');
                $(artId + '-serie-4').css('display', 'none');
                $(artId + '-serie-5').css('display', 'none');
            } else if (val == 1) {
                $(artId + '-serie-1').css('display', 'block');
                $(artId + '-serie-2').css('display', 'none');
                $(artId + '-serie-3').css('display', 'none');
                $(artId + '-serie-4').css('display', 'none');
                $(artId + '-serie-5').css('display', 'none');
            } else if (val == 2) {

                $(artId + '-serie-1').css('display', 'block');
                $(artId + '-serie-2').css('display', 'block');
                $(artId + '-serie-3').css('display', 'none');
                $(artId + '-serie-4').css('display', 'none');
                $(artId + '-serie-5').css('display', 'none');
            } else if (val == 3) {
                $(artId + '-serie-1').css('display', 'block');
                $(artId + '-serie-2').css('display', 'block');
                $(artId + '-serie-3').css('display', 'block');
                $(artId + '-serie-4').css('display', 'none');
                $(artId + '-serie-5').css('display', 'none');
            } else if (val == 4) {
                $(artId + '-serie-1').css('display', 'block');
                $(artId + '-serie-2').css('display', 'block');
                $(artId + '-serie-3').css('display', 'block');
                $(artId + '-serie-4').css('display', 'block');
                $(artId + '-serie-5').css('display', 'none');
            } else if (val == 5) {
                $(artId + '-serie-1').css('display', 'block');
                $(artId + '-serie-2').css('display', 'block');
                $(artId + '-serie-3').css('display', 'block');
                $(artId + '-serie-4').css('display', 'block');
                $(artId + '-serie-5').css('display', 'block');
            }
        }

        function changeDisplayFieldsLot(artId, val) {
            if(val == 0) {
                $(artId + '-lot').css('display', 'none');
            } else {
                $(artId + '-lot').css('display', 'block');
            }
        }


        function controle() {

            //contruit une chaine avec
            // articleId;commandeLigneId;articleVal;articleTrackingMode;serie¤serie;1¤1 | ...
            // ou si trackinMode = 2
            // articleId;commandeLigneId;articleVal;articleTrackingMode;lot;1 | ...
            var articleNumber = $('#commande-article-number').val();
            var chaine = "";
            var error = "";
            var articleNb = 0;

            for (var i = 1; i<=articleNumber; i++) {

                var articleId = $('#article-'+i+'-id').val();
                var commandeLigneId = $('#article-'+i+'-commandeLigneId').val();
                var articleVal = $('#article-'+i).val();
                var articleTrackingMode = $('#article-'+i+'-tracking-mode').val();

                if(articleVal > 0) {
                    articleNb = articleNb + 1;
                    if(chaine != "") {
                        chaine = chaine + "|"
                    }
                    chaine = chaine + articleId + ";" + commandeLigneId + ";" + articleVal + ";" + articleTrackingMode;
                    if (articleTrackingMode == 1) {
                        var serie1Id = '#article-'+i+'-serie-1';
                        var serie2Id = '#article-'+i+'-serie-2';
                        var serie3Id = '#article-'+i+'-serie-3';
                        var serie4Id = '#article-'+i+'-serie-4';
                        var serie5Id = '#article-'+i+'-serie-5';
                        var serie1 = "";
                        var serie2 = "";
                        var serie3 = "";
                        var serie4 = "";
                        var serie5 = "";
                        var serieNum = "";
                        var serieQte = "";

                        if(articleVal == 1) {

                            serie1 = $(serie1Id).val();
                            serieNum = serie1;
                            serieQte = '1';

                            if(serie1 == "") {
                                error = error + articleId + ' ';
                            }
                        } else if(articleVal == 2) {
                            serie1 = $(serie1Id).val();
                            serie2 = $(serie2Id).val();
                            serieNum = serie1 + '!' + serie2;
                            serieQte = '1!1';

                            if(serie1 == "" || serie2 == "" || serie1 == serie2) {
                                error = error + articleId + ' ';
                            }
                        } else if(articleVal == 3) {
                            serie1 = $(serie1Id).val();
                            serie2 = $(serie2Id).val();
                            serie3 = $(serie3Id).val();
                            serieNum = serie1 + '!' + serie2 + '!' + serie3;
                            serieQte = '1!1!1';

                            if(serie1 == "" || serie2 == "" || serie3 == ""  || serie1 == serie2  || serie1 == serie3  || serie2 == serie3) {
                                error = error + articleId + ' ';
                            }
                        } else if(articleVal == 4) {
                            serie1 = $(serie1Id).val();
                            serie2 = $(serie2Id).val();
                            serie3 = $(serie3Id).val();
                            serie4 = $(serie4Id).val();
                            serieNum = serie1 + '!' + serie2 + '!' + serie3 + '!' + serie4;
                            serieQte = '1!1!1!1';

                            if(serie1 == "" || serie2 == "" || serie3 == "" || serie4 == "" || serie1 == serie2 || serie1 == serie3 || serie1 == serie4 || serie2 == serie3 || serie2 == serie4 || serie3 == serie4) {
                                error = error + articleId + ' ';
                            }
                        } else if(articleVal == 5) {
                            serie1 = $(serie1Id).val();
                            serie2 = $(serie2Id).val();
                            serie3 = $(serie3Id).val();
                            serie4 = $(serie4Id).val();
                            serie5 = $(serie5Id).val();
                            serieNum = serie1 + '!' + serie2 + '!' + serie3 + '!' + serie4 + '!' + serie5;
                            serieQte = '1!1!1!1!1';

                            if(serie1 == "" || serie2 == "" || serie3 == "" || serie4 == "" || serie5 == "" || serie1 == serie2 || serie1 == serie3 || serie1 == serie4 || serie1 == serie5 || serie2 == serie3 || serie2 == serie4 || serie2 == serie5 || serie3 == serie4 || serie3 == serie5 || serie4 == serie5) {
                                error = error + articleId + ' ';
                            }
                        }

                        chaine = chaine + ";" + serieNum + ";" + serieQte;
                    } else if (articleTrackingMode == 2) {
                        var lotId = '#article-'+i+'-lot';
                        var lot = "";
                        var lotNum = "";
                        var lotQte = "";

                        if(articleVal > 0) {

                            lot = $(lotId).val();
                            lotNum = lot;
                            lotQte = articleVal;

                            if (lotNum == "") {
                                error = error + articleId + ' ';
                            }
                        }

                        chaine = chaine + ";" + lotNum + ";" + lotQte;
                    }
                }
            }

            if(error) {
                alert('Tous les numéros de serie/lots doivent être renseignés et différents pour les articles '+error);
            } else if (chaine != "") {

                if (confirm('Confirmez-vous la réception de la commande {{ commande.documentNumber }}')) {
                    var btnReception = '#btn-reception';
                    $(btnReception).css('pointer-events', 'none');
                    $(btnReception).css('opacity', '0.5');
                    $(btnReception).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Réception (durée 15 secondes)');

                    var url = $('#commande-reception-url').val();
                    var redirect = $('#commande-reception-redirect').val();

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'chaine': chaine,
                            'nb': articleNb,
                            'commande': '{{ commande.documentNumber }}'
                        },
                        success: function(data){
                            window.location.href = redirect;
                        }
                    });
                }

            }

        }
    </script>

{% endblock %}