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

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

{% block title %}
    {{ parent() }}
    Créer un bon de sortie
{% 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_search_articles') }}?searchType={{ searchType }}&searchString={{ searchString }}"  style="padding: 2px;">
                <span style="vertical-align: -webkit-baseline-middle;">Retour</span>
            </a>

            Créer un bon de sortie

        </div>

        <div class="block-content block-content-full" style="padding-top: 5px;padding-right: 5px;padding-left: 5px;background-color: #f6f7f9;">

            {% if error != "" %}
                {{ error }}
            {% else %}

                <input type="text" id="article-id" value="{{ article }}" style="display: none">
                <input type="text" id="article-tracking-mode" value="{{ trackingMode }}" style="display: none">
                <input type="text" id="bon-sortie-create-url" value="{{ path('douchette_bon_sortie_create') }}" style="display: none">
                <input type="text" id="bon-sortie-create-redirect" value="{{ path('douchette_search_articles') }}?searchType=bon-sortie&searchString={{ searchString }}" style="display: none">


                <div class="form-group row" style="margin-bottom:8px">
                    <div class="col-12">

                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                            <button type="button" class="btn btn-primary" id="btm-minus" onclick="minus('{{ trackingMode }}')">-</button>
                            <input type="number" class="form-control" id="article-qte" value="0" style="width: 60px">
                            <button type="button" class="btn btn-primary" id="btm-plus" onclick="plus({{ stock }}, '{{ trackingMode }}')">+</button>
                        </div>

                        {% if trackingMode == 1 %}
                            <div>
                                <select class="form-control" id="article-serie-1" name="article-serie-1" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le 1er n° série</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }}</option>
                                    {% endfor %}
                                </select>

                                <select class="form-control" id="article-serie-2" name="article-serie-2" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le 2ème n° série</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }}</option>
                                    {% endfor %}
                                </select>
                                <select class="form-control" id="article-serie-3" name="article-serie-3" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le 3ème n° série</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }}</option>
                                    {% endfor %}
                                </select>
                                <select class="form-control" id="article-serie-4" name="article-serie-4" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le 4ème n° série</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }}</option>
                                    {% endfor %}
                                </select>
                                <select class="form-control" id="article-serie-5" name="article-serie-5" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le 5ème n° série</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% elseif  trackingMode == 2  %}
                            <div>
                                <select class="form-control" id="article-lot" name="article-lot" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                                    <option value="">Choisir le n° du lot</option>
                                    {% for trackingNumber in trackingNumbers %}
                                        <option value="{{ trackingNumber.id }}">{{ trackingNumber.id }} ({{ trackingNumber.stock }} en stock)</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}


                    </div>

                    <div class="col-12">
                        <div style="display: inline-flex;margin-top: 20px">
                            <input type="checkbox" id="reservation" value="0">
                            <label for="reservation" style="margin-left: 12px; position: relative; top: -5px">Cocher si c'est pour une réservation d'un article dans le stock</label>
                        </div>
                    </div>

                    <div class="col-12" id="block-num-bon-commande" style="display: none">
                        <div style="margin-bottom: 20px">
                            Saisir au format BC123456  (8 caractères obligatoires)
                            <input type="text" id="num-bon-commande" placeholder="Saisir le numéro du bon de commande" class="form-control" style="width: 350px">
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-primary" onclick="controle()" id="btn-validate">
                    Créer bon sortie
                </button>

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

{% endblock %}


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


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

        }

        function minus( trackingMode) {
            var artId = '#article-qte';
            var val = parseInt($(artId).val());
            var newVal = val-1;
            if(val > 0) {
                $(artId).val(newVal);

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

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

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

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

        function controle() {

            var articleId = $('#article-id').val();
            var articleQte = $('#article-qte').val();
            var articleTrackingMode = $('#article-tracking-mode').val();
            var error = "";

            if(articleQte > 0) {
                if (articleTrackingMode == 1) {
                    var serie1Id = '#article-serie-1';
                    var serie2Id = '#article-serie-2';
                    var serie3Id = '#article-serie-3';
                    var serie4Id = '#article-serie-4';
                    var serie5Id = '#article-serie-5';
                    var serie1 = "";
                    var serie2 = "";
                    var serie3 = "";
                    var serie4 = "";
                    var serie5 = "";
                    var serieNum = "";
                    var serieQte = "";

                    if(articleQte == 1) {

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

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

                        if(serie1 == "" || serie2 == "" || serie1 == serie2) {
                            error = error + articleId + ' ';
                        }
                    } else if(articleQte == 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(articleQte == 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(articleQte == 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 + ' ';
                        }
                    }
                } else if (articleTrackingMode == 2) {
                    var lotId = '#article-lot';

                    if(articleQte > 0) {
                        serieNum = $(lotId).val();
                        serieQte = articleQte;

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

                }
            }

            if(error) {
                alert('Tous les numéros de serie/lots doivent être séléctionnés et différents');
            } else {

                var bonCommande = "";
                if ($("#reservation").prop("checked")) {

                    bonCommande = $('#num-bon-commande').val();

                    if(bonCommande == "") {
                        alert('Pour faire une reservation d\'article, le numéro de bon de commande est obligatoire. Merci de le renseigner.');
                    } else {
                        if(bonCommande.length != 8 || bonCommande.indexOf("BC") != 0) {
                            alert('Le numéro de bon de commande doit commencer par BC en majuscule et 6 chiffres ensuite');
                        } else {
                            if (confirm('Confirmez-vous la création d\'un bon de sortie pour la réservation de l\'article {{ article }} ?')) {
                                var btnValidate = '#btn-validate';
                                $(btnValidate).css('pointer-events', 'none');
                                $(btnValidate).css('opacity', '0.5');
                                $(btnValidate).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Création (durée 15 secondes)');

                                var url = $('#bon-sortie-create-url').val();
                                var redirect = '{{ path('douchette_search_articles') }}?searchType=stock&searchString=' + articleId;

                                $.ajax({
                                    url: url,
                                    type: 'GET',
                                    data: {
                                        'article': articleId,
                                        'trackingMode': articleTrackingMode,
                                        'qte': articleQte,
                                        'serieNum': serieNum,
                                        'serieQte': serieQte,
                                        'bonCommande': bonCommande
                                    },
                                    success: function(data){
                                        window.location.href = redirect;
                                    }
                                });
                            }
                        }
                    }

                } else {
                    if (confirm('Confirmez-vous la création d\'un bon de sortie pour l\'article {{ article }} ?')) {
                        var btnValidate = '#btn-validate';
                        $(btnValidate).css('pointer-events', 'none');
                        $(btnValidate).css('opacity', '0.5');
                        $(btnValidate).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Création (durée 15 secondes)');

                        var url = $('#bon-sortie-create-url').val();
                        var redirect = $('#bon-sortie-create-redirect').val();

                        $.ajax({
                            url: url,
                            type: 'GET',
                            data: {
                                'article': articleId,
                                'trackingMode': articleTrackingMode,
                                'qte': articleQte,
                                'serieNum': serieNum,
                                'serieQte': serieQte,
                                'bonCommande': bonCommande
                            },
                            success: function(data){
                                var redirect = '{{ path('douchette_search_articles') }}?searchType=stock&searchString=' + articleId;
                                window.location.href = redirect;
                            }
                        });
                    }
                }
            }

        }

        $("#reservation").change(function() {
            if(this.checked) {
                $('#block-num-bon-commande').css('display', 'block');
            } else {
                $('#block-num-bon-commande').css('display', 'none');
            }
        });
    </script>

{% endblock %}