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

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

{% block title %}
    {{ parent() }}
    Créer un bon d'entrée
{% 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 d'entrée

        </div>

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

            <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-entree-create-url" value="{{ path('douchette_bon_entree_create') }}" style="display: none">
            <input type="text" id="bon-entree-create-redirect" value="{{ path('douchette_search_articles') }}?searchType=bon-entree&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('{{ trackingMode }}')">+</button>
                    </div>

                    {% if trackingMode == 1 %}
                        <div>
                            <input type="text" class="form-control" id="article-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-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-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-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-serie-5" placeholder="Saisir 5ème n° série" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                        </div>
                    {% elseif  trackingMode == 2  %}
                        <div>
                            <input type="text" class="form-control" id="article-lot" placeholder="Saisir le n° du lot" style="width: 250px;margin-left: 3px;margin-top: 3px;display: none">
                        </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 la levée d'une réservation d'un article dans le stock (Vide le champs référence du bon de sortie associé)</label>
                    </div>
                </div>
            </div>

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

{% endblock %}


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


    <script>
        function plus(trackingMode) {
            var artId = '#article-qte';
            var val = parseInt($(artId).val());
            var newVal = val+1;
            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 renseignés et différents');
            } else {

                var messageConfirm = '';
                if ($("#reservation").prop("checked")) {
                    messageConfirm = 'Confirmez-vous la création d\'un bon d\'entrée pour l\'article {{ article }} ? le champ référence du le bon de sortie de réservation associé sera vidé';
                } else {
                    messageConfirm = 'Confirmez-vous la création d\'un bon d\'entrée pour l\'article {{ article }} ?';
                }

                if (confirm(messageConfirm)) {
                    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-entree-create-url').val();
                    var redirect = $('#bon-entree-create-redirect').val();

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

            }

        }
    </script>

{% endblock %}