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

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

{% block title %}
    {{ parent() }}
    Gestion des RMA
{% 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;
        }
        .button-filter {
            background-color: #8ca9d6!important;
            border-color: #ffffff!important;
            /*transition: all 0.5s;*/
        }
        .button-filter:hover {
            /*height: 30px;*/
            background-color: #3164a9!important;
            transition: background-color 700ms ;
        }

        /*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-docu {
            /*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-docu {
            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-docu {
            /*height:90%;*/
            overflow-y: auto;
            overflow-x: hidden;
            height: 91vh;
        }

        .modal-content-docu {
            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;
        }
        .detail-docu:hover {
            background-color: #3164a9!important;
            width: 90%!important;
        }
        .btn-delete:hover {
            background-color: #ef5350!important;
            width: 90%!important;
        }
        .btn-delete {
            background-color: #ef6664!important;
            border-color: #ffffff!important;
            color: white!important;
        }
        .btn-info {
            background-color: #5887c7!important;
            border-color: #ffffff!important;
        }
        .btn-form {
            background-color: #59c4c7!important;
            border-color: #ffffff!important;
            color: white!important;
        }
        .btn-form:hover {
            background-color: #5887c7!important;
            width: 90%!important;
        }

        .btn-add-rma {
            background-color: #59c4c7!important;
            border-color: #4dbc3e!important;
            color: white!important;
        }
        .btn-add-rma:hover {
            background-color: #5887c7!important;
        }
        .modal-create-rma, .modal-delete {
            justify-content: center;
            display: flex;
            background-color: #dddddd;
            box-shadow: 0 0 0 50vmax rgba(0,0,0,.5);
            border-radius: 3px;
        }

        .button-download-file {
            background-color: #5887c7!important;
            border-color: #ffffff!important;
            color: white!important;
        }
        .button-download-file:hover {
            background-color: #3164a9!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">
                {{ rmas | length }} RMA
            </h4>
            <div>
                {% if not user.hasServiceDemo %}
                    <button type="button" style="margin-left: 8px;" class="btn btn-sm btn-add-rma" data-toggle="tooltip" title="" onclick="openPopupRmaCreate()">
                        <i class="fa fa-plus mr-5"></i>Ajouter une RMA
                    </button>
                {% endif %}
            </div>
        </div>
        <div class="block-content block-content-full">
            <div style="text-align: right;margin-bottom: 10px; height: 150%;">
                Filtrer par Statut
                <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterStatus == 'AUCUN' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('AUCUN')">NON RECEPTIONNÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ZERO' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('ZERO')">RECEPTIONNÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'DIAG' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('DIAG')">DIAGNOSTIQUÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'DEVIS' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('DEVIS')">DEVIS EDITÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'FOUR_ENV' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('FOUR_ENV')">ENVOYÉ CHEZ FOURNISSEUR</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'FOUR_P' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('FOUR_P')">EN ATTENTE DE PIECE FOURNISSEUR</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'TERMINE' %};background-color: #3164a9!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByStatus('TERMINE')">TERMINÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ALL' or filterStatus == ''  %};background-color: #3164a9!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>
            <!-- 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="width: 30px">Réf</th>
                    <th style="min-width: 230px!important">Statut</th>
                    <th style="width: 120px">Suivi</th>
                    <th>Client</th>
                    <th style="max-width: 140px!important">Contact</th>
                    <th>Matériel</th>
                    <th style="max-width: 140px!important; min-width: 130px!important">Actions</th>
                </tr>
                </thead>
                <tbody>

                {% for rma in rmas %}
                    <tr>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">{{ rma.code}}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;min-width: 160px!important;padding-left: 4px; padding-right: 1px">
                            {% if rma.isStatusNull and rma.getArticleCode == '' %}
                                <span style="opacity: 0.55;font-weight: 900">Formulaire à remplir</span>
                            {% elseif rma.isStatusNull %}
                                <span style="opacity: 0.55;font-weight: 900">{{ rma.displayStatus }}</span>
                            {% else %}
                                <span style="font-weight: 900">{{ rma.displayStatus }}</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" title="{% if rma.getBusinessManager %}{{ rma.businessManager.email }}{% else %}noBusinessManager{% endif %}">
                            {% if rma.receptionIntervenant %}
                                <div>Récep : {{ rma.receptionIntervenant.name }}</div>
                            {% endif %}
                            {% if rma.diagnosticIntervenant %}
                                <div>Diag : {{ rma.diagnosticIntervenant.name }}</div>
                            {% endif %}
                            {% if rma.getBusinessManager and rma.businessManager.name != '' %}
                                <div>Suivi : {{ rma.businessManager.name }}</div>
                            {% else %}
                                <span style="opacity: 0.55">Inconnu</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="min-width: 180px!important;">
                            <div><strong>{{ rma.clientName }}</strong></div>
                            <div>Code : {{ rma.clientCode }}</div>
                            {% if rma.clientAgence != '' %} <div>Agence : {{ rma.clientAgence }}</div> {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="min-width: 180px!important;word-wrap: break-word;" >
                            <div><strong>{{ rma.contactName }}</strong></div>
                            <div>{{ rma.contactEmail }}</div>
                        </td>
                        <td class="d-none d-sm-table-cell" style="min-width: 180px!important;">
                            {% if rma.getArticleCode != '' %}
                                <div><strong>{{ rma.articleDesignation }}</strong></div>
                                <div>N° Série : {{ rma.articleCode }}</div>
                            {% else %}
                                <span style="opacity: 0.55">Inconnu</span>
                            {% endif %}
                            {% if rma.getArticleRef %}
                                <div>Ref Int : {{ rma.articleRef }}</div>
                            {% endif %}
                            {% if rma.createdAt >= dateMin and rma.createdAt <= dateMax %}
                                <div></div>
                            {% else %}
                                {% if rma.getFilenameExt %}
                                    <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameExt)) }}" target="_blank" data-toggle="popover" data-img="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameExt)) }}" title="Cliquez pour voir la photo de l'état extérieur du colis" ><i style="margin-right: 5px;" class="fa fa-camera"></i></a>
                                {% endif %}
                                {% if rma.getFilenameInt %}
                                    <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameInt)) }}" target="_blank" data-toggle="popover" data-img="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameInt)) }}" title="Cliquez pour voir la photo de l'état du matériel à l'intérieur du colis" ><i style="margin-right: 5px;" class="fa fa-camera"></i></a>
                                {% endif %}
                                {% if rma.getFilenameAcc %}
                                    <a href="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameAcc)) }}" target="_blank" data-toggle="popover" data-img="{{ absolute_url(asset('uploads/rma/' ~ rma.filenameAcc)) }}" title="Cliquez pour voir la photo des accessoires présents dans le colis" ><i style="margin-right: 5px;" class="fa fa-camera"></i></a>
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if rma.getArticleCode == '' and rma.isStatusNull %}
                                <button class="btn btn-sm btn-form" style="margin-bottom: 0.5em; border-radius: 13px; transition: width 0.3s; width: 110px" onclick="window.location.href='{{urlSitePlmServices}}/rma/form/contact?id={{rma.id}}';"><i style="margin-right: 3px;" class="fa fa-folder-open"></i>Formulaire</button>
                                <input id="delete-rma-url" type="hidden" value="{{ path('delete_rma') }}?id={{ rma.id }}">
                                <button class="btn btn-sm btn-delete"style="border-radius: 13px; transition: width 0.3s; width: 110px"  data-toggle="modal" data-target="#modal-large-delete" ><i style="margin-right: 3px;" class="fa fa-trash"></i>Supprimer</button>
                            {% else %}
                                <button class="btn btn-sm btn-info detail-docu" style="border-radius: 13px; transition: width 0.3s; width: 110px" onclick="openPopipBlDocument('{{rma.id}}', '{{ rma.code }}')"><i style="margin-right: 7px;" class="fa fa-file"></i>Documents</button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}

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

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

{% endblock %}

{% block modal %}

    <div class="modal modal_outer left_modal fade" id="modal-large-docu" tabindex="-1" role="dialog" aria-labelledby="modal-large-docu" style="display: none; width: 50%" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="width :50%; min-width: 700px;">
            <div class="modal-content-docu" 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: #3164a9!important;">
                            <h3 class="block-title" style="font-size: 20px" id="title-popup-docu"></h3>
                            <input type="text" id="rma-id-docu" 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 class="btn button-download-file" onclick="redirectRecap()"><i style="margin-right: 3px;" class="fa fa-download"></i>Télécharger le récapitulatif complet de la RMA </button>
                            <button class="btn button-download-file" onclick="redirectFicheComplet()"><i style="margin-right: 3px;" class="fa fa-download"></i>Télécharger la fiche suivie RMA </button>
                        </div>
                        <div class="block block-rounded" style="margin-left: 15px; margin-right: 15px">
                            <div class="block-content" id="modal-content-docu">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-gray-lighter">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" >Fermer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-delete" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-delete" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="block-title">Confirmation</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content-create-user" style="padding: 0px 20px 1px!important;">
                        <div class="block-content" style="font-size: medium">
                            <p>Etes vous sûr de vouloir supprimer definitivement cette RMA</p>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: center; margin-bottom: 1em;">
                    <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-outline-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-outline-danger btn-delete-rma" style="margin-left: 1em;" onclick="deleteRma()" >Supprimer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-create" tabindex="-1" role="dialog" aria-labelledby="modal-large-create" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-create-rma" role="document" style="">
            <div class="modal-content" style="border-radius: 5px; width: 100%">
                <div class="modal-header">
                    <h3 class="block-title">Créer une RMA</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content">
                        <input type="text" id="create-rma-url" value="{{ path('create_rma') }}" style="display: none">
                        <input type="text" id="create-rma-redirect" value="{{ path('rma_list') }}" style="display: none">
                        <input type="text" id="search-client-url" value="{{ path('rma_search_client') }}" style="display: none">
                        <input type="text" id="search-contact-url" value="{{ path('rma_search_contact') }}" style="display: none">
                        <input type="text" id="edit-status-rma-url" value="{{ path('rma_edit_status') }}" style="display: none">
                        <input type="text" id="edit-materiel-rma-url" value="{{ path('rma_edit_materiel') }}" style="display: none">
                        <input type="text" id="edit-date-prev-rma-url" value="{{ path('rma_date_previsionnelle') }}" style="display: none">

                        <div class="form-group row">
                            <label class="col-12">Sélectionner votre agence :</label>
                            <div class="col-12" style="display: inline-flex">
                                <select class="form-control" id="rma-client">
                                    {% if user.getEbpCustomerIdMultiple %}
                                        <option value="default" selected></option>
                                        {% for strUserCustomer in arrUserCustomer %}
                                            <option value="{{ strUserCustomer }}">{{ strUserCustomer }}</option>
                                        {% endfor  %}
                                    {% else  %}
                                        <option value="{{ arrUserCustomer[0] }}">{{ arrUserCustomer[0] }}</option>
                                    {% endif %}
                                </select>
                            </div>
                        </div>
                        <input type="hidden" id="rma-contact-fullname" name="rma-contact-fullname" value="" />
                        <input type="hidden" id="rma-contact-email" name="rma-contact-email" value="" />
                        <input type="hidden" id="rma-client-code" name="rma-client-code" value="" />
                        <div id="rma-select-contact-field" class="form-group row" style="display: block">
                            <label class="col-12">Séléctionner un contact</label>
                            <div class="col-12" style="display: inline-flex">
                                <input type="hidden" id="rma-contact-code" name="rma-contact-code" value="" />
                                <input onkeyup="rmaSearchContact()" id="rma-contact-name" name="rma-client-name" class="form-control" type="text" autocomplete="off"/>
                                <div style="position: absolute; top: 34px;" id="rma-autocomplete-contact"></div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="btn-modal-rma-create-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                            <button type="button" class="btn btn-add-rma" onclick="openPopupRmaConfirm()">
                                <i class="fa fa-check"></i> Valider
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-confirm" tabindex="-1" role="dialog" aria-labelledby="modal-large-confirm" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-create-rma" role="document" style="">
            <div class="modal-content" style="border-radius: 5px; width: 100%">
                <div class="modal-header">
                    <h3 class="block-title">Confirmation</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content">
                        <p>Êtes-vous sûr de vouloir créer cette RMA ?</p>
                        <strong><p id="rma-confirm-contact"></p></strong>
                        <p>Vous pourrez toujours annuler la RMA créée tant que vous n'avez pas rempli le formulaire associé.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-add-rma btn-create-rma-modal" onclick="createRma()" id="btn-update-rma-create">
                        <i class="fa fa-check"></i> Valider
                    </button>
                </div>
            </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">

        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": [[ 0, "desc" ]],
                "search": {"search": "{{ search }}"},
                columnDefs:[
                    {orderable:false,targets:[6]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucune RMA en cours",
                    "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();
                }
            })
            $('#DataTables_Table_0_filter input').keydown(function(e) {
                setTimeout(
                    function()
                    {
                        var lengthData= tableArticle[0].rows.length;
                        if (tableArticle[0].rows[1].innerText == "La recherche ne donne aucun résultat")
                            lengthData = 1;
                        $('#number-rma').text(lengthData - 1 + ' RMA');
                    }, 100);
            })

            var valueClient = $('#rma-client').find(":selected").text();
            $("#rma-client-code").val(valueClient.split(' ')[0]);
        });

        function goToRoute(route, rmaId) {

            var searchString = $("#DataTables_Table_0_filter input").val();

            var path = "";
            if (route === "rma_files_client") {
                path = "{{ path('rma_files_client') }}?id=" + rmaId + "&redirect=list";
                if (searchString != "") {
                    path = path + "&search=" + searchString;
                }

                path = path + "&filterStatus=" + $('#filter-status').val();

                window.location.href = path;
            }
        }

        function filterByStatus(status) {

            $('#filter-status').val(status);

            path = "{{ path('rma_list_client') }}?filterStatus=" + status;

            var searchString = $("#DataTables_Table_0_filter input").val();
            if(searchString != "") {
                path = path + "&search=" + searchString;
            }

            window.location.href = path;
        }

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

        function openPopupRmaCreate() {
            $('#btn-modal-rma-create').click();
        }

        function openPopupRmaConfirm() {
            var status = formStatus();
            console.log(status);
            if(status == 'OK') {
                $('#btn-modal-rma-create-close').click();
                $('#rma-confirm-contact').html('Nom : <span style="color : #3F9CE8">' + $('#rma-contact-fullname').val() + '</span>' + ' <br>Email : <span style="color : #3F9CE8">' + $('#rma-contact-email').val() + '</span>' + ' <br>Client : <span style="color : #3F9CE8">' + $('#rma-client').val() + '</span>')
                $('#btn-modal-rma-confirm').click();
            }
            else {
                alert(status)
            }
        }

        function formStatus() {

            if($('#rma-contact-fullname').val() == '') {
                return 'Renseignez votre prénom et nom'
            }
            else if($('#rma-contact-email').val() == '') {
                return 'Renseignez votre adresse email'
            }
            else if($('#rma-client').val() == 'default' || $('#rma-client').val() == '') {
                return 'Selectionnez votre client dans la liste'
            }
            else {
                return 'OK'
            }
        }

        function createRma() {

            $('.btn-create-rma-modal').css('pointer-events', 'none');
            $('.btn-create-rma-modal').css('opacity', '0.5');

            $('.btn-create-rma-modal').css('pointer-events', 'auto');
            $('.btn-create-rma-modal').css('opacity', '1');
            $('.btn-create-rma-modal').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Création en cours');

            // Ferme la fenêtre de confirmation
            $('#btn-modal-rma-confirm-close').click();

            var status = formStatus();

            if(status == 'OK') {

                var d = new Date();

                var month = d.getMonth()+1;
                var day = d.getDate();

                var dateOfDay = d.getFullYear() + '-' +
                    (month<10 ? '0' : '') + month + '-' +
                    (day<10 ? '0' : '') + day;

                var contactCode = ""
                var client = $('#rma-client').val();
                client = client.split(' - ');
                var clientCode = client[0]
                var clientName = client[1]
                var clientAgence = client[2]
                var clientColleagueFirstName = ''
                var clientColleagueName = ''
                var clientColleagueEmail = ''
                var contactName = $('#rma-contact-fullname').val()
                var contactEmail = $('#rma-contact-email').val()
                var rmaType = ''
                var bmId = ''
                var rmaForceId = ''
                var rmaForceCreatedAt = dateOfDay;

                $.ajax({
                    url: $('#create-rma-url').val(),
                    type: 'GET',
                    data: {
                        'clientCode': clientCode,
                        'clientName': clientName,
                        'clientAgence': clientAgence,
                        'clientColleagueFirstName': clientColleagueFirstName,
                        'clientColleagueName': clientColleagueName,
                        'clientColleagueEmail': clientColleagueEmail,
                        'contactCode': contactCode,
                        'contactName': contactName,
                        'contactEmail': contactEmail,
                        'rmaType': rmaType,
                        'bmId' : bmId,
                        'rmaForceId' : rmaForceId,
                        'rmaForceCreatedAt' : rmaForceCreatedAt,
                    },
                    success: function(data){
                        document.location.reload();
                    }
                });
            }
            else {
                alert(status)
            }
        }

        function deleteRma(){

            $('.btn-delete-rma').css('pointer-events', 'none');
            $('.btn-delete-rma').css('opacity', '0.5');

            $('.btn-delete-rma').css('pointer-events', 'auto');
            $('.btn-delete-rma').css('opacity', '1');
            $('.btn-delete-rma').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Suppression en cours');


            $.ajax({
                url: $('#delete-rma-url').val(),
                type: 'GET',
                data: {
                },
                success: function(data){
                    document.location.reload();
                }
            });
        }

        var inputContact = $('#rma-contact-name');

        inputContact.on('keyup', function () {
            rmaSearchContact();
            displayContactSuggestions(1)
        });
        inputContact.on('keydown', function () {
            displayContactSuggestions(1)
        });
        inputContact.focusin(function() {
            displayContactSuggestions(1)
        });
        inputContact.focusout(function() {
            displayContactSuggestions(0)
        });

        function rmaSearchContact() {

            if($('#rma-client-code').val() != '') {

                var url = $('#search-contact-url').val()
                var term = $('#rma-contact-name').val();

                if (term.length > 0) {

                    $.ajax({
                        url: url,
                        dataType: "html",
                        data: {
                            clientId: $('#rma-client-code').val()
                        },
                        success: function (data) {

                            $("#rma-contact-name").autocomplete({
                                source: eval(data),
                                delay: 0,
                                select: function (event, ui) {

                                    $("#rma-contact-code").val(ui.item.code);
                                    $("#rma-contact-email").val(ui.item.email);
                                    $("#rma-contact-name").val(ui.item.label);
                                    $("#rma-contact-fullname").val(ui.item.fullName);
                                    console.log(ui.item.fullName);
                                }
                            });
                        }
                    });
                }
                displayContactSuggestions(1)
            }
        }

        function displayContactSuggestions(status) {

            var suggestions = document.getElementById("ui-id-1");
            if (suggestions != undefined) {

                document.getElementById("rma-autocomplete-contact").innerHTML = "";
                document.getElementById("rma-autocomplete-contact").appendChild(suggestions)

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

        $("#rma-client").on('change', function() {
            var valueClient = this.value;
            $("#rma-client-code").val(valueClient.split(' ')[0]);
            console.log(this.value());
        })

        function openPopipBlDocument(rmaId, rmaCode) {
            $('#title-popup-docu').html('RMA ' + rmaCode);
            $('#rma-id-docu').val(rmaId);

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

            $.ajax({
                url: '{{ path('rma_files_client') }}',
                type: 'GET',
                data: {
                    'id': rmaId
                },
                success: function(data){
                    $('#modal-content-docu').html(data);
                }
            });
            $('#btn-modal-docu').click();
        }

        function redirectRecap() {
            var rmaId = $('#rma-id-docu').val();
            redirect('{{ path('rma_overview_pdf') }}?id=' + rmaId);
        }

        function redirectFicheComplet() {
            var rmaId = $('#rma-id-docu').val();
            redirect('{{ path('rma_download_pdf') }}?id=' + rmaId);
        }

    </script>
{% endblock %}