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

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

{% block title %}
    {{ parent() }}
    Mettre à jour le poids et les dimensions d'un article
{% 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);
        }
        .table-title {
            text-align: right;
            vertical-align: middle;
        }
        .table-data {
            text-align: left;
            display: flex;
        }
        .table-data-unit {
            margin-top: auto;
            margin-bottom: auto;
            margin-left: 5px;
        }
        @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>

            Poids - Dimensions de l'article {{ article.id }}

        </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.id }}" style="display: none">
                <input type="text" id="bon-sortie-create-url" value="{{ path('douchette_article_poids_dimension_update') }}" style="display: none">
                <input type="text" id="bon-sortie-create-redirect" value="{{ path('douchette_search_articles') }}?searchType=stock&searchString={{ searchString }}" style="display: none">


                <div class="form-group row" style="margin-bottom:8px">
                    <div class="col-12">
                        <table style="border: none">
                            <tr>
                                <td class="table-title">Poids * :</td>
                                <td class="table-data">
                                    <input type="number" class="form-control" id="weight" value="{% if article.weight != 0 %}{{ article.weight }}{% endif %}" style="width: 60px">
                                    <span class="table-data-unit">Kg</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="table-title">Largeur * :</td>
                                <td class="table-data">

                                        <input type="number" class="form-control" id="width" value="{% if article.width != 0 %}{{ article.width }}{% endif %}" style="width: 60px">
                                        <span class="table-data-unit">millimètres</span>

                                </td>
                            </tr>
                            <tr>
                                <td class="table-title">Longeur * :</td>
                                <td class="table-data">
                                        <input type="number" class="form-control" id="length" value="{% if article.length != 0 %}{{ article.length }}{% endif %}" style="width: 60px">
                                        <span class="table-data-unit">millimètres</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="table-title">Hauteur * :</td>
                                <td class="table-data">
                                    <input type="number" class="form-control" id="height" value="{% if article.height != 0 %}{{ article.height }}{% endif %}" style="width: 60px">
                                    <span class="table-data-unit">millimètres</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="table-title">Nombre d'articles/colis :</td>
                                <td class="table-data">
                                    <input type="number" class="form-control" id="numberOfItemInPackage" value="{{ article.numberOfItemInPackage }}" style="width: 60px">
                                    <span class="table-data-unit">Facultatif, laisser 0 si pas necessaire</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <button type="button" class="btn btn-primary" onclick="controle()" id="btn-validate">
                    Mettre à jour dans EBP
                </button>

        </div>
    </div>

{% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script>
        function controle() {

            var articleId = $('#article-id').val();
            var weight =    $('#weight').val();
            var width =     $('#width').val();
            var length =    $('#length').val();
            var height =    $('#height').val();
            var numberOfItemInPackage = $('#numberOfItemInPackage').val();
            var error = "";


            if( weight == 0 || weight == "" ||
                    width == 0 || width == "" ||
                    length == 0 || length == "" ||
                    height == 0 || height == "" ||
                    numberOfItemInPackage == "") {
                alert('Toutes les valeurs sont obligatoires');
            } else {


                if (confirm('Confirmez-vous la mise à jour dans EBP de l\'article {{ article.id }} ?')) {
                    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> Mise à jour');

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

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'article': articleId,
                            'weight': weight,
                            'width': width,
                            'length': length,
                            'height': height,
                            'numberOfItemInPackage': numberOfItemInPackage
                        },
                        success: function(data){
                            window.location.href = redirect;
                        }
                    });
                }

            }

        }
    </script>

{% endblock %}