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

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

{% block title %}
    {{ parent() }}
    Gestion des Articles
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />

    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .btn-info {
            background-color: #8ca9d6!important;
            border-color: #ffffff!important;
        }
        .detail-bl:hover {
            background-color: #697d9b!important;
            width: 80%!important;
        }
        .button-filter:hover {
            background-color: #697d9b!important;
        }
        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }

        .alert-certif, .alert-notice {
            background-color: rgb(252, 248, 227);
            height: 3em;
            width: 25em;
            text-align: center;
            margin: auto;
            border: solid;
            border-color: #FBEED5;
            border-radius: 17px;
            margin-bottom: 1em;
        }

        .alert-certif-span, .alert-certif-close, .alert-notice-span, .alert-notice-close{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .alert-certif-close, .alert-notice-close {
            margin-right: 0.5em;
        }
        /*left modal*/
        .modal.left_modal{
            position: fixed;
            z-index: 99999;
        }

        .modal.left_modal .modal-dialog {
            position: fixed;
            margin: auto;
            width: 32%;
            height: 100%;
            -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }

        .modal-dialog {
            /* max-width: 100%; */
            margin: 1.75rem auto;
        }
        @media (min-width: 576px)
        {
            .left_modal .modal-dialog {
                max-width: 100%;
            }
        }
        .modal.left_modal .modal-content, .modal-content-files {
            /*overflow-y: auto;
              overflow-x: hidden;*/
            height: 100vh !important;
        }

        .modal.left_modal .modal-body {
            padding: 15px 15px 30px;
        }

        /*.modal.left_modal  {
            pointer-events: none;
            background: transparent;
        }*/

        .modal-backdrop {
            display: none;
        }

        /*Left*/
        .modal.left_modal.fade .modal-dialog{
            left: -50%;
            -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
            -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
        }

        .modal.left_modal.fade.show .modal-dialog {
            left: 0;
            box-shadow: 0px 0px 19px
            rgba(0,0,0,.5);
        }

        /* ----- MODAL STYLE ----- */
        .modal-content, .modal-content-files {
            border-radius: 0;
            border: none;
        }

        .modal-header.left_modal {

            padding: 10px 15px;
            border-bottom-color:
                    #EEEEEE;
            background-color:
                    #FAFAFA;
        }

        .modal_outer_two .modal-content, .modal-content-files{
            /*height:90%;*/
            overflow-y: auto;
            overflow-x: hidden;
            height: 91vh;
        }

        .modal-content-files {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 100%;
            pointer-events: auto;
            background-color: #fff;
            background-clip: padding-box;
            border-radius: 0.3rem;
            outline: 0;
        }

        .modal-large-no-certif {
            display: flex!important;
        }

    </style>
{% endblock %}

{% block body %}
    {{ parent() }}

    <!-- Dynamic Table Full -->
    <div class="block" style="overflow: hidden;">
        <div  style="height: 60px; position: relative" class="block-header block-header-default bg-gray">
            <h4 class="font-w700" id="number-rma" style="margin: 0; display: -webkit-box">
                {{ bonLivraison | length }} Bons de Livraison
            </h4>
            {% if app.user.hasServiceTableauBl or app.user.isAdmin %}
            <h5 style="margin-top: 1em;">
                {{ nameClient }}
            </h5>
            <div class="form-group row">
                <div class="col-12" style="display: inline-flex">
                    <input type="hidden" id="bl-client-code" name="bl-client-code" value="" />
                    <input type="hidden" id="bl-client-name-value" name="bl-client-name-value" value="" />
                    <input type="hidden" id="bl-client-agence" name="bl-client-agence" value="" />
                    <input type="hidden" id="bl-client-colleague-first-name" name="bl-client-colleague-first-name" value="" />
                    <input type="hidden" id="bl-client-colleague-name" name="bl-client-colleague-name" value="" />
                    <input type="hidden" id="bl-client-colleague-email" name="bl-client-colleague-email" value="" />
                    <input id="bl-client-name" name="bl-client-name" class="form-control" type="text" placeholder="Séléctionner un client" autofocus="true" autocomplete="off" style="width: 357px; margin-top: 1em;"/>
                    <div style="position: absolute; margin-top:3.4em;" id="bl-autocomplete-client"></div>
                </div>
            </div>
            {% endif %}
        </div>
        <div class="block-content block-content-full">
            {% if app.user.hasServiceTableauBl and nameClient %}
                <div style="text-align: right;margin-bottom: 10px;">
                    <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterStatus == 'LOC' %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('LOC')">LOCATION EN COURS</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'NOLOC' %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('NOLOC')">LOCATION TERMINÉE</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ALL' or filterStatus == ''  %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('ALL')">VOIR TOUT</button>
                    <input type="hidden" id="filter-status" name="filter-status" value="{{ filterStatus }}" />
                </div>
            {% elseif app.user.hasServiceTableauClientBl %}
                <div style="text-align: right;margin-bottom: 10px;">
                    <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterStatus == 'LOC' %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('LOC')">LOCATION EN COURS</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'NOLOC' %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('NOLOC')">LOCATION TERMINÉE</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ALL' or filterStatus == ''  %};background-color: #697d9b!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('ALL')">VOIR TOUT</button>
                    <input type="hidden" id="filter-status" name="filter-status" value="{{ filterStatus }}" />
                </div>
            {% endif %}
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full" style="background-color: white">
                <thead>
                <tr>
                    <th style="min-width: 60px">Numéro bon de livraison</th>
                    <th style="min-width: 80px!important">Date de début</th>
                    {% if filterStatus == 'LOC' %}
                        <th style="width: 80px">Date de fin prévisionelle</th>
                    {% elseif filterStatus == 'NOLOC' %}
                        <th style="width: 120px">Date de fin</th>
                    {% else %}
                        <th style="width: 120px">Date de fin</th>
                    {% endif %}
                    <th style="max-width: 150px!important">Commande et Référence</th>
                    <th style="max-width: 140px!important">Votre correspondant</th>
                    <th style="max-width: 140px!important">Actions</th>
                    <th style="max-width: 140px!important">Fichiers</th>
                </tr>
                </thead>

                <tbody>

                {% for bl in bonLivraison %}
                    <tr>
                        <td class="d-none d-sm-table-cell" style="text-align: center; width: 100px;">
                            {{ bl.documentNumber }}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {{ bl.startLocationAt | date('d/m/Y') }}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {{ bl.endLocationAt | date('d/m/Y') }}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center; max-width: 200px">
                            {% if bl.getCommandeClient %}
                            {{ bl.getCommandeClient }}<br><br>
                            {% endif %}
                            {% if bl.getReference[0] %}
                            {{ bl.getReference[0] }}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if bl.colleagueFirstName and bl.colleagueName %}
                                {{ bl.colleagueFirstName }} {{ bl.colleagueName }}
                            {% else %}
                                /
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center; max-width: 140px!important">
                            <button class="btn btn-sm btn-info detail-bl" style="border-radius: 13px; transition: width 0.3s; width: 100px" onclick="openPopipBl('{{bl.documentNumber}}', '{{ bl.getDealStatus }}')">Voir le détail</button>
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            <button class="btn btn-sm btn-info detail-bl" style="border-radius: 13px; transition: width 0.3s; width: 100px" onclick="openPopipBlFile('{{bl.documentNumber}}')">Fichiers</button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->

    <button type="button" id="btn-modal-bl-create" class="btn" data-toggle="modal" data-target="#modal-large-create" style="display: none"></button>
    <button type="button" id="btn-modal-bl-confirm" class="btn" data-toggle="modal" data-target="#modal-large-confirm" style="display: none"></button>
    <button type="button" id="btn-modal-bl" class="btn" data-toggle="modal" data-target="#modal-large" style="display: none"></button>
    <button type="button" id="btn-modal-bl-file" class="btn" data-toggle="modal" data-target="#modal-large-files" style="display: none"></button>

{% endblock %}

{% block modal %}

    <div class="modal modal_outer left_modal fade" id="modal-large-files" tabindex="-1" role="dialog" aria-labelledby="modal-large-files" style="display: none; width: 50%" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="width :50%">
            <div class="modal-content-files" width="860px" >
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed mb-0 bg-gray-lighter">
                        <div class="block-header" style="background-color: #8ca9d6!important;">
                            <h3 class="block-title" style="font-size: 20px" id="title-popup-bl-file"></h3>
                            <input type="text" id="bon-livraison-id-files" style="display: none">
                            <input type="text" id="open-file" style="display: none">
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" onclick="closeModalFile()">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="modal-footer bg-gray-lighter" id="div-button-modal-files" style="padding-bottom: 5px; display: flex; justify-content: space-around;">
                            <button type="button" id="btn-generate-pdf" class="btn btn-outline-secondary" onclick="generatePdfBonLivraison()">
                                Télécharger le bon de livraison
                            </button>
                            <button type="button" id="btn-fiche-pdf" class="btn btn-outline-secondary" onclick="generatePdfFicheVerification()">
                                Télécharger la fiche de vérification
                            </button>
                        </div>
                        <div class="block block-rounded" style="margin-left: 15px; margin-right: 15px">
                            <div class="block-content" id="modal-content-files">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-gray-lighter">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModalFile()">Fermer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal modal_outer left_modal fade" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none; width: 50%" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="width :50%">
            <div class="modal-content" width="860px" >
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed mb-0 bg-gray-lighter">
                        <div class="block-header" style="background-color: #8ca9d6!important;">
                            <h3 class="block-title" style="font-size: 20px" id="title-popup-bl"></h3>
                            <input type="text" id="bon-livraison-id" style="display: none">
                            <input type="text" id="open" style="display: none">
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" onclick="closeModalBl()">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="modal-footer bg-gray-lighter" id="div-button-modal" style="padding-bottom: 5px; display: flex; justify-content: space-around;">
                            <button type="button" class="btn btn-outline-secondary" style="" onclick="displayBLockCommentProl()">
                                Prolonger la location
                            </button>
                            <button type="button" class="btn btn-outline-danger" onclick="displayBLockCommentEnd()">
                                Arrêter la Location
                            </button>
                        </div>
                        <div class="block block-rounded" style="margin:15px;display: none" id="block-comment-end">
                            <div class="block-content">
                                <div class="form-group row">
                                    <label class="col-12">Votre commentaire à destination des équipes de PLM <span class="required-input-sign">*</span> :</label>
                                    <div class="col-12" style="margin-bottom: 10px">
                                        <input type="text" placeholder="Saisir votre commentaire" class="form-control" id="bl-end-commentaire"></input>
                                    </div>
                                    <div class="col-12">
                                        <button type="button" class="btn btn-secondary btn-lg" style="font-size: small;" onclick="sendEnd()" id="btn-send-comment">
                                            ENVOYER LA DEMANDE D'ARRÊT AUX EQUIPES PLM
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="block block-rounded" style="margin:15px;display: none" id="block-comment-prol">
                            <div class="block-content">
                                <div class="form-group row">
                                    <label class="col-12">Votre commentaire à destination des équipes de PLM <span class="required-input-sign">*</span> :</label>
                                    <div class="col-12" style="margin-bottom: 10px">
                                        <input type="text" placeholder="Saisir votre commentaire" class="form-control" id="bl-prolonger-commentaire"></input>
                                    </div>

                                    <div class="col-12">
                                        <button type="button" class="btn btn-secondary btn-lg" style="font-size: small;" onclick="sendProlonger()" id="btn-send-comment">
                                            ENVOYER LA DEMANDE DE PROLONGATION AUX EQUIPES PLM
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="block block-rounded" style="margin-left: 15px; margin-right: 15px">
                            <div class="block-content" id="modal-content">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-gray-lighter">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModalBl()">Fermer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock  %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>

    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">

        // jQuery.noConflict();

        var tableArticle = $(".js-dataTable-full");
        $(document).ready(function() {
            // $('[data-toggle="popover"]').popover({
            //     trigger: 'hover',
            //     html: true,
            //     content: function () {
            //         return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
            //     },
            //     title: 'Toolbox'
            // })
            tableArticle.DataTable({
                fixedHeader: true,
                "paging": false,
                "order": [[ 1, "asc" ]],
                columnDefs:[
                    {"targets":1, "type":"date-eu"},
                    {orderable:false,targets:[5]},
                    {orderable:false,targets:[6]},
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun certificat",
                    "zeroRecords": "La recherche ne donne aucun résultat"
                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            });
        });

        function generatePdfBonLivraison() {

            var blid = $('#bon-livraison-id-files').val();
            //requet ajax pour recupérer le contenu
            var url = '{{ path('bon_livraison_generate_pdf') }}';

            $('#btn-generate-pdf').css('pointer-events', 'none');
            $('#btn-generate-pdf').css('opacity', '0.5');
            $('#btn-generate-pdf').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

            document.location = url + "?blid=" + blid;

            $('#btn-generate-pdf').css('pointer-events', 'auto');
            $('#btn-generate-pdf').css('opacity', '1');
            $('#btn-generate-pdf').html('Télécharger le bon de livraison');
        }

        function generatePdfFicheVerification() {


            var blid = $('#bon-livraison-id-files').val();
            //requet ajax pour recupérer le contenu
            var url = '{{ path('fiche_verification_generate_pdf') }}';

            $('#btn-fiche-pdf').css('pointer-events', 'none');
            $('#btn-fiche-pdf').css('opacity', '0.5');
            $('#btn-fiche-pdf').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

            document.location = url + "?blid=" + blid;

            $('#btn-fiche-pdf').css('pointer-events', 'auto');
            $('#btn-fiche-pdf').css('opacity', '1');
            $('#btn-fiche-pdf').html('Télécharger la fiche de vérification');
        }

        function displayBLockCommentProl() {
            if($("#block-comment-end").css("display") === "block") {
                $('#block-comment-end').css('display', 'none');
            }
            if($("#block-comment-prol").css("display") === "none") {
                $('#block-comment-prol').css('display', 'block');
            } else {
                $('#block-comment-prol').css('display', 'none');
            }
        }

        function displayBLockCommentEnd() {
            if($("#block-comment-prol").css("display") === "block") {
                $('#block-comment-prol').css('display', 'none');
            }
            if($("#block-comment-end").css("display") === "none") {
                $('#block-comment-end').css('display', 'block');
            } else {
                $('#block-comment-end').css('display', 'none');
            }
            var dt = new Date();
            var time = dt.getDay() + "/" + dt.getMonth() + "/" + dt.getFullYear();
            if (dt.getDay() > 0 && dt.getDay() < 10) {
                time = '0' + dt.getDay() + "/" + dt.getMonth() + "/" + dt.getFullYear();
            }
            if (dt.getMonth() > 0 && dt.getMonth() < 10) {
                time = dt.getDay() + "/" + '0' + dt.getMonth() + "/" + dt.getFullYear();
            }
            if ((dt.getDay() > 0 && dt.getDay() < 10) && (dt.getMonth() > 0 && dt.getMonth() < 10)) {
                time = '0' + dt.getDay() + "/" + '0' + dt.getMonth() + "/" + dt.getFullYear();
            }
            $('#date-end').val(time);
        }

        function openPopipBl(blid, dealStatus) {
            if ($('#open').val() === 'open') {
                $('#open').val('close');
            } else {
                $('#open').val('open');
            }
            $('#block-comment').css('display', 'none');
            $('#bl-commentaire').val('');

            $('#block-prolonger').css('display', 'none');

            //var dateEndLocation = fl;
            var dateEndLocation = '';

            $('#title-popup-bl').html('BON DE LIVRAISON N° ' + blid);
            $('#bon-livraison-id').val(blid);

            $('#modal-content').html('');

            //requet ajax pour recupérer le contenu
            var url = '{{ path('bon_livraison_client_get') }}';
            if (dealStatus === 'Loc terminée') {
                $("#div-button-modal").css('display', 'none');
            }
            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'blid': blid
                },
                success: function(data){
                    $('#modal-content').html(data);

                }
            });
            if ($('#open-file').val() === 'open') {
                $('#btn-modal-bl-file').click();
                $('#open-file').val('close');
            }
            $('#btn-modal-bl').click();
        }

        function openPopipBlFile(blid) {
            if ($('#open-file').val() === 'open') {
                $('#open-file').val('close');
            } else {
                $('#open-file').val('open');
            }
            $('#title-popup-bl-file').html('BON DE LIVRAISON N° ' + blid);
            $('#bon-livraison-id-files').val(blid);

            $('#modal-content-files').html('');

            //requet ajax pour recupérer le contenu
            var url = '{{ path('bon_livraison_file_get') }}';

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'blid': blid
                },
                success: function(data){
                    $('#modal-content-files').html(data);
                }
            });
            if ($('#open').val() === 'open') {
                $('#btn-modal-bl').click();
                $('#open').val('close');
            }
            $('#btn-modal-bl-file').click();
        }

        function closeModalFile() {
            if ($('#open-file').val() === 'open') {
                $('#open-file').val('close');
            }
        }

        function closeModalBl() {
            if ($('#open').val() === 'open') {
                $('#open').val('close');
            }
        }

        function sendProlonger() {

            var commentaire = $('#bl-prolonger-commentaire').val();

            if (commentaire != '') {
                if (confirm('Cette demande sera transmise aux équipes PLM, confirmez-vous l\'envoi ?')) {

                    var blid = $('#bon-livraison-id').val();
                    //requet ajax pour recupérer le contenu
                    var url = '{{ path('update_bon_livraison_prolonger') }}';

                    $('#btn-send-prolonger').css('pointer-events', 'none');
                    $('#btn-send-prolonger').css('opacity', '0.5');
                    $('#btn-send-prolonger').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'commentaire': commentaire,
                            'blid': blid
                        },
                        success: function (data) {
                            $('#block-comment').css('display', 'none');
                            $('#block-prolonger').css('display', 'none');
                            $('#bl-prolonger-commentaire').val('');
                            $('#date-prolonger').val('');

                            $('#btn-send-prolonger').css('pointer-events', 'auto');
                            $('#btn-send-prolonger').css('opacity', '1');
                            $('#btn-send-prolonger').html('ENVOYER LA DEMANDEAUX EQUIPES PLM');

                            alert('la demande a bien été envoyé');
                        }
                    });
                }
            }
        }

        function sendEnd() {

            var commentaire = $('#bl-end-commentaire').val();

            if (commentaire != '') {
                if (confirm('Cette demande sera transmise aux équipes PLM, confirmez-vous l\'envoi ?')) {

                    var blid = $('#bon-livraison-id').val();
                    //requet ajax pour recupérer le contenu
                    var url = '{{ path('update_bon_livraison_fin') }}';

                    $('#btn-send-prolonger').css('pointer-events', 'none');
                    $('#btn-send-prolonger').css('opacity', '0.5');
                    $('#btn-send-prolonger').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> en cours');

                    $.ajax({
                        url: url,
                        type: 'GET',
                        data: {
                            'commentaire': commentaire,
                            'blid': blid
                        },
                        success: function (data) {
                            $('#block-comment').css('display', 'none');
                            $('#block-prolonger').css('display', 'none');
                            $('#bl-prolonger-commentaire').val('');
                            $('#date-prolonger').val('');

                            $('#btn-send-prolonger').css('pointer-events', 'auto');
                            $('#btn-send-prolonger').css('opacity', '1');
                            $('#btn-send-prolonger').html('ENVOYER LA DEMANDEAUX EQUIPES PLM');

                            alert('la demande a bien été envoyé');
                        }
                    });
                }
            }
        }

        function filterByStatus(status) {
            $('#filter-status').val(status);
            var searchString = $("#DataTables_Table_0_filter input").val();
            path = "{{ path('article_client') }}?filterStatus=" + status + "&search=" + searchString + "&searchClient=" + '{{ searchClient }}' + "&nameClient=" + '{{ nameClient }}';
            window.location.href = path;
        }

        function redirect(url) {
            window.location.replace(url);
        }

        var inputClient = $('#bl-client-name');

        inputClient.on('keyup', function () {
            //clearTimeout(clientTypingTimer);
            blSearchClient();
            displayClientSuggestions(1)
            //clientTypingTimer = setTimeout(function(){rmaSearchClient()}, 500);
        });
        inputClient.on('keydown', function () {
            //clearTimeout(clientTypingTimer);
            displayClientSuggestions(1)
        });
        inputClient.focusin(function() {
            displayClientSuggestions(1)
        });
        inputClient.focusout(function() {
            displayClientSuggestions(0)
        });

        // Affiche la liste des clients correspondants à la recherche
        function blSearchClient(){

            var url = "{{ path('bl_search_client') }}"
            var term = $('#bl-client-name').val();

            if (term.length > 0) {

                $.ajax({
                    url: url,
                    dataType: "html",
                    data: {
                        term: term
                    },
                    success: function( data ) {

                        $("#bl-client-name").autocomplete({
                            source:eval(data),
                            delay: 0,
                            minLength : 1,
                            select: function (event, ui) {

                                $("#bl-client-code").val(ui.item.code);

                                $("#bl-client-name").val(ui.item.label);
                                $("#bl-client-name-value").val(ui.item.name);
                                $("#bl-client-agence").val(ui.item.agence);
                                $("#bl-client-colleague-first-name").val(ui.item.colleagueFirstName);
                                $("#bl-client-colleague-name").val(ui.item.colleagueName);
                                $("#bl-client-colleague-email").val(ui.item.colleagueEmail);

                                path = "{{ path('article_client') }}?filterStatus=" + '{{ filterStatus }}' + "&search=" +  '{{ search }}' + "&searchClient=" + ui.item.code + "&nameClient=" + ui.item.label;
                                window.location.href = path;
                            }
                        });
                    }
                });
            }
            displayClientSuggestions(1)
        }

        function displayClientSuggestions(status) {

            var suggestions = document.getElementsByClassName("ui-menu")[0];
            if (suggestions !== undefined) {

                document.getElementById("bl-autocomplete-client").innerHTML = "";
                document.getElementById("bl-autocomplete-client").appendChild(suggestions)

                if(status === 1) {
                    suggestions.style.display = 'block';
                }
                else {
                    suggestions.style.display = 'none';
                }
            }
        }

    </script>
{% endblock %}