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

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

{% block title %}
    {{ parent() }}
    Recherche un article en location
{% endblock %}

{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('assets/js/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />

    {{ 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: 769px) {

            .display-desktop {
                display: inline;
            }
        }
        @media (max-width: 770px) {
            .display-desktop {
                display: none;
            }
            .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 article %}

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

                {% if bonLivraisons %}

                    <h4>L'article est présent dans {{ bonLivraisons|length }} bon{% if bonLivraisons|length > 1 %}s{% endif %} de livraison</h4>

                    {% for bonLivraison in bonLivraisons  %}

                        <input type="text" id="reception-articles-url" value="{{ path('reception_articles') }}" style="display: none">
                        <input type="text" id="article-codebar" value="{{ articleCodebar }}" style="display: none">
                        <input type="text" id="deal-id" value="{{ bonLivraison.dealId }}" style="display: none">
                        <input type="text" id="bl-id" value="{{ bonLivraison.documentNumber }}" style="display: none">

                        <div>{{ bonLivraison.documentNumber }} - {{ bonLivraison.createdAt|date('d/m/Y') }} - {{ bonLivraison.dealStatus }} - {{ bonLivraison.dealId }} - {{ bonLivraison.customerName }}</div>

                        <br>

                        <div class="block-content" style="padding-bottom: 20px;padding-top: 5px;">
                            <div class="row">
                                <div class="col-12">
                                    {% set articleAReceptionner =  0  %}

                                    {# On affiche la liste des articles de LOC uniquement  #}
                                    {% for BlArticle in bonLivraison.articles  if (('LOC_' in BlArticle.id) and ('TRANSPORT' not in BlArticle.id))  %}

                                        {% if not BlArticle.receptionAt %}
                                            {# On compte le nombre d'article restant à receptionner #}
                                            {% set articleAReceptionner =  articleAReceptionner + 1  %}
                                            <div style="color:black">
                                                <input type="checkbox" {% if article.id == BlArticle.id %}checked{% endif %} name="chk" style="transform: scale(2);margin-right: 20px;margin-bottom: 20px" id="{{ BlArticle.sdlId }}" >
                                                {{ BlArticle.id }}
                                            </div>
                                        {% else %}
                                            <div style="color:black;padding-left: 37px;padding-bottom: 20px;">
                                                {{ BlArticle.id }} - Récéptionné le {{ BlArticle.receptionAt|date('d/m/Y') }}
                                            </div>
                                        {% endif %}

                                    {% endfor %}

                                    {# On stocke le nombre d'article restant à receptionner  #}
                                    <input type="text" id="nb-article-to-receptionned" value="{{ articleAReceptionner }}" style="display: none">
                                </div>

                                <button type="button" id="btn-reception-article" class="btn btn-secondary"  style="padding: 5px 5px;height: 70px;margin-top: 5px" onclick="update()">RECEPTIONNER LES ARTICLES COCHÉS</button>


                            </div>
                        </div>

                    {% endfor %}

                {% else %}
                    <h4>Aucun bon de livraison en cours de location</h4>

                    {% if article.isReserved %}
                        <div>L'article est réservé</div>
                        <div>Date de début de réservation :{% if article.reservedStartLocationAt %}{{ article.reservedStartLocationAt|date('d/m/Y') }}{% endif %}</div>
                        <div>Date de fin de réservation :{% if article.reservedEndLocationAt %}{{ article.reservedEndLocationAt|date('d/m/Y') }}{% endif %}</div>
                    {% elseif article.isReparation %}
                        <div>L'article est en réparation</div>
                    {% elseif article.isMaintenance %}
                        <div>L'article est en maintenance</div>
                    {% endif %}

                {% endif %}

            </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');
        });

    </script>

    {% if article %}

        <script>

            function update() {

                if (confirm('Confirmez-vous votre demande ?')) {

                    var btnField = $('#btn-reception-article');

                    var sdlToReceptionned = "";
                    var nbArticleChecked = 0;
                    var closeDeal = 0;

                    $("input:checkbox[name=chk]:checked").each(function () {
                        sdlToReceptionned = sdlToReceptionned + $(this).attr("id") + "|";
                        nbArticleChecked = nbArticleChecked + 1;
                    });

                    //On ne continue que si au moins un article est coché
                    if(parseInt(nbArticleChecked) > 0) {
                        //Mise à jour du flag de cloture de l affaire si tous les item sont receptionné
                        var articleMax = $('#nb-article-to-receptionned').val();
                        if(parseInt(articleMax) == parseInt(nbArticleChecked)) {
                            closeDeal = 1;
                        }

                        var dealField = '#deal-id';
                        var blField = '#bl-id';

                        $(btnField).css('pointer-events', 'none');
                        $(btnField).css('opacity', '0.5');
                        $(btnField).html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Mise à jour');

                        var url = $('#reception-articles-url').val();
                        var articles = $('#article-id').val();
                        var deal = $(dealField).val();
                        var bl = $(blField).val();
                        var codebar = $('#article-codebar').val();

                        $.ajax({
                            url: url,
                            type: 'GET',
                            data: {
                                'sdls': sdlToReceptionned,
                                'deal': deal,
                                'bl': bl,
                                'closeDeal': closeDeal
                            },
                            success: function(data){
                                window.location.href = "{{ path('douchette_article_location') }}";
                            }
                        });
                    } else {
                        alert('Aucun article coché');
                    }
                }
            }

        </script>

    {% endif %}
{% endblock %}