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

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

{% block title %}
    {{ parent() }}
    Liste des commandes
{% 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;
        }
        h4 {
            text-align: center;
        }
        @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;
            }
            .datepicker-inline {
                width: 100%;
            }

            .datepicker table {
                width: 100%;
            }
        }
    </style>
    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-content block-content-full" style="padding: 5px">

            {{ form_start(form, {'attr' : {'id' : 'articleForm', 'class' : 'spinner_form form-inline'}}) }}

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

            {{ form_widget(form.codebar) }}

            <button type="submit" name="search" class="btn spinner_button" id="search-btn" style="padding: 2px;width: 70px;">
                <span>Valider</span>
            </button>

            {{ form_end(form) }}


        </div>



        {% if commandes %}
            <div>
                <h4>Commandes à récéptionner</h4>
                <div id="accordion" role="tablist" aria-multiselectable="true">
                    {% for commande in commandes %}
                        <div class="block block-bordered block-rounded mb-2">
                            <div class="block-header" role="tab" id="accordion_h{{ loop.index }}" style="padding-top: 4px;padding-bottom: 4px;padding-left:8px;padding-right:8px;">
                                <a class="font-w600 collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion_q{{ loop.index }}" aria-expanded="false" aria-controls="accordion_q1" style="width: 100%">
                                    {{ commande.documentDate|date('d/m/Y') }} - {{ commande.documentNumber }} - {{ commande.commandeLignes|length }} articles
                                    <br>
                                    {{ commande.supplierName }}
                                    <br>
                                    {{ commande.total|replace({',': ' ','.': ','}) }}€ - {{ macro.etatCommande(commande.deliveryState) }}
                                    <br>
                                    <span style="font-size: 12px">{{ commande.imputation }}</span><br>
                                    <span style="font-size: 12px">Crée par {{ commande.createdByName }}</span>
                                    <br>
                                    Affaire : {{ commande.dealId }}
                                    <br>
                                    Secteur : {{ commande.dealSecteur }}
                                </a>
                            </div>
                            <div id="accordion_q{{ loop.index }}" class="collapse {% if commandes|length == 1 %}show{% endif %}" role="tabpanel" aria-labelledby="accordion_h{{ loop.index }}" data-parent="#accordion">
                                <div class="block-content" style="padding-bottom: 20px;padding-top: 5px;">
                                    <div class="row">
                                        <div class="col-12">
                                            {% set numberRemaining = 0 %}
                                            {% set reception = 0 %}
                                            {% for commandeLigne in commande.commandeLignes %}
                                                {% if commandeLigne.quantityRemaining %}
                                                    {% set numberRemaining = numberRemaining + commandeLigne.quantityRemaining|number_format(0) %}
                                                {% endif %}
                                                {# on passe l'indication reception à true si au moins un article est géré en stock#}
                                                {% if commandeLigne.article.manageStock %}
                                                    {% set reception = 1 %}
                                                {% endif %}
                                                <div style="margin-bottom: 5px ;{% if commandeLigne.quantityRemaining == 0 %}color:lightgrey{% else %}color:black{% endif %}">
                                                    {{ commandeLigne.article.id }} - <span class="display-desktop">{{ commandeLigne.article.name }}</span><span class="display-mobile">{{ commandeLigne.article.name|slice(0,15) }}</span>
                                                    <br>
                                                    {% if commandeLigne.description %}Description : {{ commandeLigne.description }}<br>{% endif %}
                                                    {% if commandeLigne.referenceFournisseur %}Ref fournisseur : {{ commandeLigne.referenceFournisseur }}<br>{% endif %}
                                                    {{ commandeLigne.quantity }} commandé - {% if commandeLigne.article.manageStock %}{{ commandeLigne.quantityDelivered }}/{{ commandeLigne.quantity }} déjà réceptionné{% else %}Article non géré en stock{% endif %}
                                                    {% if commandeLigne.article.manageStock %}
                                                        <br>
                                                        {{ commandeLigne.article.stock }} en stock ({% if commandeLigne.article.trackingMode == 0 %}Standard{% elseif commandeLigne.article.trackingMode == 1 %}Numéro de série{% else %}Numéro de lot{% endif %})
                                                    {% endif %}
                                                </div>
                                            {% endfor %}
                                        </div>
                                        {# on affiche le bouton de reception s'il reste des qté à receptoinné et si au moins un article est géré #}
                                        {% if numberRemaining != 0 and reception == 1 %}
                                            <div class="col-12" style="text-align: center">
                                                <a type="button" class="btn btn-secondary spinner_reception" id="btn-end_loc{{ loop.index }}" style="padding: 5px 5px;height: 60px;margin-top: 5px" href="{{ path('douchette_commande') }}?dn={{ commande.documentNumber }}">RECEPTIONNER</a>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

    </div>

{% endblock %}


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

    <script type="text/javascript">

        $('#article_search_codebar').focus();
        $('#article_search_codebar').select();

        // detect enter keypress
        $('#article_search_codebar').click(function(e) {
            $('#article_search_codebar').select();
        });

        $('.spinner_form').submit(function() {
            $(this).find('.spinner_button').append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).find('.spinner_button').css('pointer-events', 'none');
            $(this).find('.spinner_button').css('opacity', '0.5');
        });

        $('.spinner_reception').click(function() {
            $(this).append('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i>');
            $(this).css('pointer-events', 'none');
            $(this).css('opacity', '0.5');
        });

    </script>

{% endblock %}