{% 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_save {
            width: 40vh;
            height: 7vh;
            background-color: #88b83d!important;
            margin-top: 2em;
            font-size: large;
        }
        .button_generate {
            margin-top: 2em;
            width: 40vh;
            height: 7vh;
            font-size: large;
        }
        .div_button {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }

        .radio-certif {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            text-align: center;
            font-size: larger;
        }

        .radio-certif-hanna {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            text-align: center;
            font-size: large;
        }

        .button-valid-certif {
            width: 10vh;
            height: 4vh;
            font-size: medium;
        }
        .button-actions {
            width: 110px;
            margin-bottom: 8px!important;
            padding-left: 6px;
            padding-right: 6px;
            max-width: 110px;
            min-width: 110px;
            height: 35px;
            min-height: 35px;
            max-height: 35px;
        }


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

        .modal-content-overview {
            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-top-right-radius: 0.3rem;
            outline: 0;
        }


        .modal-large-create-rma, .modal-delete, .modal-large-edit-date-prev, .modal-large-certif, .modal-large-confirm, .modal-large-edit-status {
            justify-content: center;
            display: flex;
            background-color: #dddddd;
            box-shadow: 0 0 0 50vmax rgba(0,0,0,.5);
            border-radius: 3px;
        }
        .btn-top {
            height: 30px;
            width: 30px;
            background: white;
            border: solid grey;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            right: 5px;
            bottom: 20px;
            cursor: pointer;
        }
    </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-primary" data-toggle="tooltip" title="" onclick="openPopupRmaCreate()">
                        <i class="fa fa-plus mr-5"></i>Ajouter une RMA
                    </button>
                {% endif %}
            </div>
        </div>
        <div class="btn-top">
            <i class="fa fa-arrow-up" aria-hidden="true"></i>
        </div>
        <div class="block-content block-content-full">
            <div style="text-align: right;margin-bottom: 10px;">
                Filtrer par Statut
                <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterStatus == 'AUCUN' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('AUCUN')">NON RECEPTIONNÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ZERO' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('ZERO')">RECEPTIONNÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'DIAG' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('DIAG')">DIAGNOSTIQUÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'DEVIS' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('DEVIS')">DEVIS EDITÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'FOUR_ENV' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('FOUR_ENV')">ENVOYÉ CHEZ FOURNISSEUR</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'FOUR_P' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('FOUR_P')">EN ATTENTE DE PIECE FOURNISSEUR</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'IRREP' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('IRREP')">IRRÉPARABLE</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'TERMINE' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('TERMINE')">TERMINÉ</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ALL' or filterStatus == ''  %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('ALL')">VOIR TOUT</button>
                <input type="hidden" id="filter-status" name="filter-status" value="{{ filterStatus }}" />
            </div>
            <div style="text-align: right;margin-bottom: 10px;">
                Filtrer par Date Prévisionnelle de Réparation
                <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterDatePrev == 'OUI' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByDatePrevDeRep('OUI')">OUI</button>
                <button type="button" style="margin-right: -4px;{% if filterDatePrev == 'NON' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByDatePrevDeRep('NON')">NON</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterDatePrev == 'ALL' or filterDatePrev == ''  %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByDatePrevDeRep('ALL')">VOIR TOUT</button>
                <input type="hidden" id="filter-datePrev" name="filter-datePrev" value="{{ filterDatePrev }}" />
            </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="width: 70px">Type</th>
                    <th style="min-width: 280px!important">Statut</th>
                    <th style="width: 70px">Suivi</th>
                    <th>Client</th>
                    <th style="max-width: 140px!important">Contact</th>
                    <th>Matériel</th>
                    <th style="width: 40px">Date prév de rép</th>
                    <th style="width: 95px">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;">{{ rma.type}}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;min-width: 280px!important;padding-left: 4px; padding-right: 1px">
                            {% if rma.isStatusNull and rma.getArticleCode == '' %}
                                <span {% if user.isAdmin %} title="Modifier le statut et date de la RMA"  onclick="editStatusPopup({{ rma.id }}, '{{ rma.code }}', '{{ rma.fourName }}', '{{ rma.codeDevis }}', '{{ rma.commentaireFin }}')";{% endif %} style="opacity: 0.55{% if user.isAdmin %};cursor: pointer{% endif %};font-weight: 900">Formulaire à remplir</span>
                            {% elseif rma.isStatusNull %}
                                <span {% if user.isAdmin %} title="Modifier le statut et date de la RMA"  onclick="editStatusPopup({{ rma.id }}, '{{ rma.code }}', '{{ rma.fourName }}', '{{ rma.codeDevis }}', '{{ rma.commentaireFin }}')";{% endif %} style="opacity: 0.55{% if user.isAdmin %};cursor: pointer{% endif %};font-weight: 900">{{ rma.displayStatus }}</span>
                            {% else %}
                                <span {% if user.isAdmin %} title="Modifier le statut et date de la RMA"  onclick="editStatusPopup({{ rma.id }}, '{{ rma.code }}', '{{ rma.fourName }}', '{{ rma.codeDevis }}', '{{ rma.commentaireFin }}')";{% endif %} style="{% if user.isAdmin %}cursor: pointer{% endif %};font-weight: 900">{{ rma.displayStatus }}</span>

                                <div style="text-align: left">
                                    {% if rma.codeDevis %}
                                        <br>Devis n° : <span style="color: #3F9CE8">{{ rma.codeDevis }}</span>
                                    {% endif %}
                                    {% if rma.codeCommande %}
                                        <br>Commande n° : <span style="color: #3F9CE8">{{ rma.codeCommande }}</span>
                                    {% endif %}
                                    {% if rma.rmaFourRef %}
                                        <br>Réf RMA fournisseur : <span style="color: #3F9CE8">{{ rma.rmaFourRef }}</span>
                                    {% endif %}
                                    {% if rma.fourName %}
                                        <br>Nom fournisseur : <span style="color: #3F9CE8">{{ rma.fourName }}</span>
                                    {% endif %}
                                    {% if rma.dateEnvoiFour %}
                                        <br>Date envoi chez fournisseur : <span style="color: #3F9CE8">{{ rma.dateEnvoiFour | date("d/m/Y") }}</span>
                                    {% endif %}
                                    {% if rma.dateRetourFour %}
                                        <br>Date diag fournisseur : <span style="color: green">{{ rma.dateRetourFour | date("d/m/Y") }}</span>
                                    {% endif %}
                                    {% if rma.commentaireRetourFour %}
                                        <br><span data-toggle="popover" title="{{ rma.commentaireRetourFour }}" style="color: green; cursor: pointer;" >Voir le commentaire diag fournisseur</span>
                                    {% endif %}
                                    {% if rma.dateRetourMateriel %}
                                        <br>Date réception matériel fournisseur : <span style="color: #3F9CE8">{{ rma.dateRetourMateriel | date("d/m/Y") }}</span>
                                    {% endif %}
                                    {% if rma.blRemplacementCode %}
                                        <br>Numéro BL prise sous garantie : <span style="color: #3F9CE8">{{ rma.blRemplacementCode }}</span>
                                    {% endif %}
                                    {% if rma.blCode %}
                                        <br>Numéro BL : <span style="color: #3F9CE8">{{ rma.blCode }}</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" title="{% if rma.getBusinessManager %}{{ rma.businessManager.email }}{% else %}noBusinessManager{% endif %}">
                            {% if rma.receptionIntervenant or rma.diagnosticIntervenant or rma.getBusinessManager %}
                                {% if rma.receptionIntervenant %}
                                    <div>Récep : {{ rma.receptionIntervenant.code }}</div>
                                {% endif %}
                                {% if rma.diagnosticIntervenant %}
                                    <div>Diag : {{ rma.diagnosticIntervenant.code }}</div>
                                {% endif %}
                                {% if rma.getBusinessManager and rma.businessManager.name != '' %}
                                    <div>Suivi : {{ rma.businessManager.code }}</div>
                                {% endif %}
                            {% else %}
                                <span style="opacity: 0.55">Inconnu</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell">
                            {% if user.hasServiceDemo %}
                                <div><strong>NOM client</strong></div>
                                <div>Code : </div>
                                {% if rma.clientAgence != '' %} <div>Agence : </div> {% endif %}
                            {% else %}
                                <div><strong>{{ rma.clientName }}</strong></div>
                                <div>Code : {{ rma.clientCode }}</div>
                                {% if rma.clientAgence != '' %} <div>Agence : {{ rma.clientAgence }}</div> {% endif %}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="max-width: 140px!important;word-wrap: break-word;">
                            {% if user.hasServiceDemo %}
                                <div><strong>NOM contact</strong></div>
                                <div>adresse email</div>
                            {% else %}
                                <div><strong>{{ rma.contactName }}</strong></div>
                                <div>{{ rma.contactEmail }}</div>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" >
                            <div {% if user.isAdmin %}style="cursor: pointer;" title="Modifier le matériel" onclick="editMaterielPopup({{ rma.id }}, '{{ rma.code }}', '{% if rma.articleDesignation != null%}{{ rma.articleDesignation }}{% endif %}', '{% if rma.articleCode != null %}{{ rma.articleCode }}{% endif %}')";{% endif %}>
                                {% if rma.getArticleCode != '' %}
                                    <div><strong>{{ rma.articleDesignation }}</strong></div>
                                {% if rma.articleCode | length >= 9 %}
                                    <div>N° Série : <span data-toggle="popover" title="{{ rma.articleCode }}" style="color: #3F9CE8" >Voir le code</span></div>
                                {% else %}
                                    <div>N° Série : {{ rma.articleCode }}</div>
                                {% endif %}
                                {% if rma.getArticleRef %}
                                    {% if rma.articleRef | length >= 9 %}
                                        <div>Ref Int : <span data-toggle="popover" title="{{ rma.articleRef }}" style="color: #3F9CE8" >Voir le code</span></div>
                                    {% else %}
                                        <div>Ref Int : {{ rma.articleRef }}</div>
                                    {% endif %}
                                {% endif %}

                                {% else %}
                                    <span style="opacity: 0.55">Inconnu</span>
                                {% endif %}
                            </div>
                            {% 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 %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center; {% if user.hasServiceRmaAdmin or user.hasServiceRmaAdminLight %}cursor: pointer;{% endif %}" {% if user.hasServiceRmaAdmin or user.hasServiceRmaAdminLight %} title="Modifier la date prévisionnelle de réparation" onclick="editDatePrevPopup({{ rma.id }}, '{{ rma.code }}', '{% if rma.datePlanifRepar != null %}{{ rma.datePlanifRepar|date('Y-m-d') }}{% endif %}')";{% endif %}>
                            {% if rma.datePlanifRepar != null %}
                                {{ rma.datePlanifRepar|date('d/m/Y') }}
                            {% else %}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if rma.contactFormDate == null %}
                            {% elseif rma.isStatusNull and rma.contactFormDate != null %}
{#                                <button type="button" id="btn-modal-confirm-reception" data-toggle="modal" data-target="#modal-large-confirm-reception" class="btn btn-danger monitoring-btn button-actions" onclick="redirect('{{ path('rma_reception') }}?id={{ rma.getId }}')">Réceptionner</button>#}
                            {% elseif rma.isStatusZero %}
                                <button type="button" class="btn btn-danger main-action-btn monitoring-btn button-actions" onclick="redirect('{{ path('rma_diagnostic_form') }}?id={{ rma.getId }}')">Diagnostiquer</button>
                            {% elseif rma.isStatusDiag %}
                            {% elseif rma.isStatusDevis %}
                                {% if rma.dateValidationDevis == null %}
                                {% else %}
                                {% endif %}
                            {% elseif (rma.isStatusFourEnv or rma.isStatusFourP) and rma.dateRetourMateriel == null %}
                            {% elseif rma.isStatusTermine %}
                            {% elseif rma.isStatusIrrep %}
                            {% else %}
                            {% endif %}
                            {% if not rma.isStatusNullOrZeroOrTermine %}
                                {% if not rma.isDiagnosticCalibYes or rma.getHasCertif == "oui" %}
                                    <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer" onclick="redirect('{{ path('rma_end') }}?rmaId={{ rma.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Terminer</button>
                                {% else %}
                                    <div style="display: flex; flex-direction: column; align-items: center">
                                        <button type="button" id="btn-modal-confirm-terminer"  onclick="redirect('{{ path('certificat_rma') }}?id={{ rma.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Certificat</button>
                                    </div>
                                {% endif %}
                            {% endif %}

{#                            <button class="btn btn-primary" style="width: 90px; margin-bottom: 8px;padding-left: 6px;padding-right: 6px" onclick="goToRoute('rma_dates','{{ rma.id }}')">Indicateurs</button>#}
                            <button class="btn btn-primary button-actions" onclick="goToRoute('rma_files','{{ rma.id }}')">Fichiers</button>
                            <button class="btn btn-primary button-actions" onclick="openPopipBlOverview('{{ rma.id }}', '{{ rma.code }}')">Récap</button>
                            {% if rma.getArticleCode == '' and rma.isStatusNull %}
                                <button class="btn btn-primary button-actions" onclick="window.location.href='{{urlSitePlmServices}}/rma/form/contact?id={{rma.id}}';">Formulaire</button>
                            {% else %}
                                {% if rma.hasCertif == 'oui' %}
                                    <button class="btn btn-success button-actions" onclick="openPopupRmaCertif('{{ rma.id }}', '{{ rma.code }}')">Certificat</button>
                                {% else %}
                                    <button class="btn btn-primary button-actions" onclick="openPopupRmaCertif('{{ rma.id }}', '{{ rma.code }}')">Certificat</button>
                                {% endif %}
                            {% endif %}
                            {% if user.hasServiceRmaAdmin %}
                                <button class="btn btn-info button-actions" onclick="goToRoute('rma_admin','{{ rma.id }}')">Admin</button>
                            {% elseif user.hasServiceRmaAdminLight %}
                                <button class="btn btn-info button-actions" onclick="goToRoute('rma_admin_light','{{ rma.id }}')">Admin</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-rma-overview" class="btn" data-toggle="modal" data-target="#modal-large-overview" style="display: none"></button>
    <button type="button" id="btn-modal-rma-certif" class="btn" data-toggle="modal" data-target="#modal-large-certif" style="display: none"></button>



{% endblock %}

{% block modal %}


    <div class="modal modal_outer left_modal fade" id="modal-large-overview" tabindex="-1" role="dialog" aria-labelledby="modal-large-overview" style="display: none; width: 40%" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="width :40%; min-width: 600px;">
            <div class="modal-content-overview" >
                <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="z-index:1000; overflow: hidden; position: fixed; width: 100%; background-color: #3164a9!important;">
                            <h3 class="block-title" style="font-size: 20px" id="title-popup-overview"></h3>
                            <input type="text" id="rma-id-overview" 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">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block block-rounded" style="margin-left: 15px; margin-right: 15px">
                            <div class="block-content" id="modal-content-overview">
                            </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-create" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-large-create-rma" role="document" style="border-radius: 5px;">
            <div class="modal-content" style="border-radius: 5px;">
                        <div class="block-header" style="background-color: #3164a9; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                            <h3 class="block-title" style="color: white;">Créer une RMA</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-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">

                            {% if user.isAdmin %}
                                <h6 style="color:#3164a9; font-size: 16px;">Fonctionnalités ADMIN :</h6>
                                <div class="form-group row">
                                    <label class="col-12">Code RMA</label>
                                    <div class="col-12" style="display: inline-flex">
                                        <input type="number" class="form-control" id="rma-force-id" name="rma-force-id" min="0" max="999999" step="1"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-12">Date de création</label>
                                    <div class="col-12" style="display: inline-flex">
                                        <input type="date" id="rma-force-created-at" class="form-control">
                                    </div>
                                </div>
                                <h6 style="margin-top: 32px; color:#3164a9;font-size: 16px;">Fonctionnalités par défaut :</h6>
                            {% endif %}

                            <div class="form-group row">
                                <label class="col-12">Séléctionner un client</label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="hidden" id="rma-client-code" name="rma-client-code" value="" />
                                    <input type="hidden" id="rma-client-name-value" name="rma-client-name-value" value="" />
                                    <input type="hidden" id="rma-client-agence" name="rma-client-agence" value="" />
                                    <input type="hidden" id="rma-client-colleague-first-name" name="rma-client-colleague-first-name" value="" />
                                    <input type="hidden" id="rma-client-colleague-name" name="rma-client-colleague-name" value="" />
                                    <input type="hidden" id="rma-client-colleague-email" name="rma-client-colleague-email" value="" />
                                    <input id="rma-client-name" name="rma-client-name" class="form-control" type="text" autofocus="true" autocomplete="off"/>
                                    <div style="position: absolute; top: 34px;" id="rma-autocomplete-client"></div>
                                </div>
                            </div>
                            <div id="input-contact-container" style="display: none; margin-top: 40px">
                                <div class="form-group row">
                                    <div class="col-12" style="display: inline-flex">
                                        <select id="rma-contact-mode" class="form-control" onchange="displayInputContact()">
                                            <option value="1">Séléctionner un contact dans la liste</option>
                                            <option value="2">Renseigner un contact</option>
                                        </select>
                                    </div>
                                </div>
                                <div id="rma-select-contact-field" class="form-group row" style="display: none">
                                    <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 id="rma-type-contact-field" style="display: none">
                                    <div class="form-group row" >
                                        <label class="col-12" for="rma-client-name">Prénom et nom du contact</label>
                                        <div class="col-12" style="display: inline-flex">
                                            <input type="text" id="rma-contact-fullname" name="rma-contact-fullname" value="" placeholder="Ex: John Doe" class="form-control" autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-12" for="rma-client-name">Adresse Email du contact</label>
                                        <div class="col-12" style="display: inline-flex">
                                            <input type="email" id="rma-contact-email" name="rma-contact-email" value="" placeholder="Ex: john.doe@web.com" class="form-control" autocomplete="off"/>
                                        </div>
                                    </div>
                                </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-primary" onclick="openPopupRmaConfirm()" >
                            <i class="fa fa-check"></i> Valider
                        </button>
                    </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-confirm" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-large-confirm" role="document" style="border-radius: 5px;">
            <div class="modal-content" style="border-radius: 5px;">
                <div class="block-header" style="background-color: #3164a9!important; border-top-right-radius: 5px; border-top-left-radius: 5px;">
                    <h3 class="block-title" style="color:white;">Confirmation</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close" style="color:white;"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p>Un email va être envoyé au contact suivant :</p>
                    <strong><p id="rma-confirm-contact"></p></strong>
                    <p>Êtes-vous sûr de vouloir créer cette RMA ?</p>
                </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-primary" onclick="createRma()" id="btn-update-rma-create">
                        <i class="fa fa-check"></i> Valider
                    </button>
                </div>
            </div>
        </div>
    </div>

    <button type="button" id="btn-modal-edit-status" class="btn" data-toggle="modal" data-target="#modal-large-edit-status" style="display: none"></button>

    <div class="modal fade" id="modal-large-edit-status" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-large-edit-status" role="document" style="border-radius: 5px;">
            <div class="modal-content" style="border-radius: 5px;">
                <div class="block-header" style="background-color: #3164a9!important; border-top-right-radius: 5px; border-top-left-radius: 5px;">
                    <h3 class="block-title" style="color: white">Modifier le statut</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close" style="color: white"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p style="font-weight: 700;">RMA <span id="edit-status-popup-ref"></span></p>
                    <div class="form-group row">
                        <label class="col-12">Statut</label>
                        <div class="col-12" style="display: inline-flex">
                            <select id="edit-status-popup-select" onchange="editStatusForm()" class="form-control">
                                <option value="ZERO">RECEPTIONNÉ</option>
                                <option value="DIAG">DIAGNOSTIQUÉ</option>
                                <option value="DEVIS">DEVIS EDITÉ</option>
                                <option value="FOUR_ENV">ENVOYÉ CHEZ FOURNISSEUR</option>
                                <option value="FOUR_P">EN ATTENTE DE PIECE FOURNISSEUR</option>
                                <option value="IRREP">IRRÉPARABLE</option>
                                <option value="TERMINE">TERMINÉ</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row" id="edit-status-popup-code-devis-container" style="display: none;">
                        <label class="col-12">Code devis</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="text" id="edit-status-popup-code-devis" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row" id="edit-status-popup-four-name-container" style="display: none;">
                        <label class="col-12">Nom du fournisseur</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="text" id="edit-status-popup-four-name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row" id="edit-status-popup-term-msg-container" style="display: none;">
                        <label class="col-12">Commentaire</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="text" id="edit-status-popup-term-msg" class="form-control" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-12">Date</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="date" id="edit-status-popup-date" class="form-control">
                        </div>
                    </div>
                </div>
                <br>
                <div class="modal-footer">
                    <button id="btn-modal-rma-edit-status-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button id="edit-status-confirm-btn" type="button" class="btn btn-primary" onclick="" id="btn-update-rma-create">
                        <i class="fa fa-check"></i> Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <button type="button" id="btn-modal-edit-materiel" class="btn" data-toggle="modal" data-target="#modal-large-edit-materiel" style="display: none"></button>

    <div class="modal" id="modal-large-edit-materiel" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Modifier le matériel</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                    <i class="si si-close"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <p style="font-weight: 700;">RMA <span id="edit-materiel-popup-ref"></span></p>
                            <div class="form-group row">
                                <label class="col-12">Designation</label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="text" id="edit-materiel-popup-designation" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row" >
                                <label class="col-12">Référence</label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="text" id="edit-materiel-popup-ref-mat" class="form-control" autocomplete="off">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Date du forumlaire contact</label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="date" id="edit-materiel-popup-date" class="form-control">
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-rma-edit-materiel-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="edit-materiel-confirm-btn" type="button" class="btn btn-primary" onclick="" id="btn-update-rma-create">
                            <i class="fa fa-check"></i> Modifier
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <button type="button" id="btn-modal-edit-date-prev" class="btn" data-toggle="modal" data-target="#modal-large-edit-date-prev" style="display: none"></button>

    <div class="modal fade" id="modal-large-edit-date-prev" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-large-edit-date-prev" role="document" style="border-radius: 5px;">
            <div class="modal-content" style="border-radius: 5px;">
                <div class="block-header" style="background-color: #3164a9!important; border-top-right-radius: 5px; border-top-left-radius: 5px;">
                    <h3 class="block-title" style="color: white">Modifier la date prévisionnelle de réparation</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close" style="color: white"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p style="font-weight: 700;">RMA <span id="edit-date-prev-popup-ref"></span></p>
                    <div class="form-group row">
                        <label class="col-12">Date prévisionnelle de réparation</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="date" id="edit-date-prev-popup-date" class="form-control">
                        </div>
                    </div>
                </div>
                <br>
                <div class="modal-footer">
                    <button id="btn-modal-rma-edit-date-prev-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button id="edit-date-prev-confirm-btn" type="button" class="btn btn-primary" onclick="" id="btn-update-rma-date-prev">
                        <i class="fa fa-check"></i> Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-certif" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-large-certif" role="document" style="border-radius: 5px;">
            <div class="modal-content" style="border-radius: 5px; ">
                <div class="block-header" style="background-color: #3164a9!important; border-top-right-radius: 5px; border-top-left-radius: 5px;">
                    <h3 class="block-title" style="font-size: 20px; color: white" id="title-popup-certif"></h3>
                    <input type="text" id="rma-id-certif" style="display: none">
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close" style="color: white"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <div class="block-content block-content-full">
                        <div class="div_button">
                            <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_generate" onclick="displayRadio()">Générer un certificat</button>
                            <div class="col-12 radio-certif" style="display: none" id="radio-certif">
                                <p>Sélectionner le certificat associé à la RMA :</p>
                                <div class="test">

                                    <input type="radio" id="gilair" name="certif" value="Gilair">
                                    <label for="gilair">Gilair</label><br/>

                                    <input type="radio" id="pid_tiger" name="certif" value="PID Tiger">
                                    <label for="pid_tiger">PID Tiger</label><br/>

                                    <input type="radio" id="hanna" name="certif" value="Hanna">
                                    <label for="hanna">Hanna</label><br/>

                                    <input type="radio" id="odeon" name="certif" value="Odeon">
                                    <label for="odeon">Odeon</label><br/>

                                    <input type="radio" id="multigaz" name="certif" value="Multigaz">
                                    <label for="multigaz">Multigaz</label>
                                </div>
                                <div class="col-12 radio-certif-hanna" style="display: none" id="radio-certif-hanna">
                                    <p>Sélectionner le.s  certificat.s Hanna associé.s à la RMA :</p>
                                    <div style>
                                        <input type="checkbox" id="boitier" name="certif-hanna" value="Boitier">
                                        <label for="boitier">Boitier</label><br/>

                                        <input type="checkbox" id="conductivite" name="certif-hanna" value="Conductivité">
                                        <label for="conductivite">Conductivité</label><br/>

                                        <input type="checkbox" id="oxygene" name="certif-hanna" value="Oxygène">
                                        <label for="oxygene">Oxygène</label><br/>

                                        <input type="checkbox" id="ph" name="certif-hanna" value="Ph">
                                        <label for="ph">Ph</label><br/>
                                    </div>
                                </div>
                                <div class="col-12 radio-certif-odeon" style="display: none" id="radio-certif-odeon">
                                    <p>Sélectionner le.s  certificat.s Odeon associé.s à la RMA :</p>
                                    <div style>
                                        <input type="checkbox" id="boitierOdeon" name="certif-odeon" value="Boitier">
                                        <label for="boitierOdeon">Boitier</label><br/>

                                        <input type="checkbox" id="pheht" name="certif-odeon" value="Pheht">
                                        <label for="pheht">Pheht</label><br/>

                                        <input type="checkbox" id="optod" name="certif-odeon" value="Optod">
                                        <label for="optod">Optod</label><br/>

                                        <input type="checkbox" id="c4e" name="certif-odeon" value="C4e">
                                        <label for="c4e">C4e</label><br/>
                                    </div>
                                </div>
                                <div class="col-12 radio-certif-multigaz" style="display: none" id="radio-certif-multigaz">
                                    <p>Sélectionner les gaz Multigaz associés à la RMA :</p>
                                    <div style>
                                        <input type="checkbox" id="lel" name="certif-multigaz" value="LEL">
                                        <label for="lel">LEL</label><br/>

                                        <input type="checkbox" id="h2s" name="certif-multigaz" value="H2S">
                                        <label for="h2s">H2S</label><br/>

                                        <input type="checkbox" id="co" name="certif-multigaz" value="CO">
                                        <label for="co">CO</label><br/>

                                        <input type="checkbox" id="o2" name="certif-multigaz" value="O2">
                                        <label for="o2">O2</label><br/>

                                        <input type="checkbox" id="co2" name="certif-multigaz" value="CO2">
                                        <label for="co2">CO2</label><br/>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_generate button-valid-certif" onclick="ValidCertif()">Valider</button>
                            </div>
                            <button type="button" class="btn btn-primary main-action-btn monitoring-btn button_save" onclick="goToRouteCertif('rma_files')">Enregistrer un certificat</button>
                        </div>
                    </div>
                </div>
                <br>
            </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);
            })
        });

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

        function openPopupRmaCertif(rmaId, rmaCode) {
            $('#title-popup-certif').html('Générer un certificat : RMA ' + rmaCode);
            $('#rma-id-certif').val(rmaId);
            $('#btn-modal-rma-certif').click();
        }

        const btnTop = document.querySelector('.btn-top');
        btnTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                left: 0,
                behavior: "smooth"
            })

        })

        // Renvoie 'OK' si toutes les informations nécessaires à la création d'une RMA sont valides
        // Sinon renvoie un message d'alerte correspondant aux informations manquantes
        function formStatus() {
            if($('#rma-client-code').val() != '') {

                var contactMode = $('#rma-contact-mode').val()

                if(contactMode == 1 && $('#rma-contact-code').val() == '') {
                    return 'Selectionnez un contact dans la liste'
                }
                else if(contactMode == 2 && $('#rma-contact-fullname').val() == '') {
                    return 'Renseignez le nom du contact'
                }
                else if(contactMode == 2 && $('#rma-contact-email').val() == '') {
                    return 'Renseignez l\'adresse email du contact'
                }
                else {
                    return 'OK'
                }
            }
            else {
                return 'Selectionnez un client dans la liste'
            }
        }

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

        var intervalId = window.setInterval(function(){
            contactSection();
        }, 200);

        //var clientTypingTimer;
        var inputClient = $('#rma-client-name');
        var inputContact = $('#rma-contact-name');


        inputClient.on('keyup', function () {
            //clearTimeout(clientTypingTimer);
            rmaSearchClient();
            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)
        });


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

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

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

            if (term.length > 0) {

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

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

                                // Quand une suggestion est selectionnée : le champ caché "rma-client-code" prends comme valeur le code client associé
                                $("#rma-client-code").val(ui.item.code);

                                $("#rma-client-name").val(ui.item.label);
                                $("#rma-client-name-value").val(ui.item.name);
                                $("#rma-client-agence").val(ui.item.agence);
                                $("#rma-client-colleague-first-name").val(ui.item.colleagueFirstName);
                                $("#rma-client-colleague-name").val(ui.item.colleagueName);
                                $("#rma-client-colleague-email").val(ui.item.colleagueEmail);
                                displayInputContact();
                            }
                        });
                    }
                });
            }
            displayClientSuggestions(1)
        };

        function displayClientSuggestions(status) {

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

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

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

        function contactSection() {
            var term = $('#rma-client-name').val();

            if (term.length < 5) {
                $('#rma-client-code').val('')
                $('#rma-contact-code').val('')
                $('#rma-contact-name').val('')
                $('#rma-contact-fullname').val('')
                $('#rma-contact-email').val('')
                displayInputContact() // comme la valeur de rma-client-code est nulle cela masque le champ contact
            }
        }

        function goToCertificat(route, rmaId) {

            window.location.href = "{{ path('certificat_rma') }}?id=" + rmaId;

        }
        function goToRoute(route, rmaId) {

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

            var path = "";
            if(route === "rma_dates") {
                path = "{{ path('rma_dates') }}?id=" + rmaId;

            } else if(route === "rma_files") {
                path = "{{ path('rma_files') }}?id=" + rmaId + "&redirect=list";

            } else if(route === "rma_overview") {
                path = "{{ path('rma_overview') }}?id=" + rmaId;

            } else if(route === "rma_admin") {
                path = "{{ path('rma_admin') }}?id=" + rmaId;

            } else if(route === "rma_admin_light") {
                path = "{{ path('rma_admin_light') }}?id=" + rmaId;

            }

            if(searchString != "") {
                path = path + "&search=" + searchString;
            }

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

            window.location.href = path;
        }

        function filterByStatus(status) {

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

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

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

            window.location.href = path;
        }

        function filterByDatePrevDeRep(dateValue) {

            $('#filter-datePrev').val(dateValue);

            path = "{{ path('rma_list') }}?filterDatePrev=" + dateValue;

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

            window.location.href = path;
        }

        //Gère l'affichage du champ contact en fonction du mode de saisie selectioné (rma-contact-mode) et du champ client
        function displayInputContact() {
            var contactContainer = document.getElementById('input-contact-container')

            if($('#rma-client-code').val() != '') {
                contactContainer.style.display = "block"

                // Mode : Renseigner un contact
                if($('#rma-contact-mode').val() == 2) {
                    $('#rma-type-contact-field').css('display', 'block')
                    $('#rma-select-contact-field').css('display', 'none')
                }
                // Mode : selectionner un contact dans la liste
                else {
                    $('#rma-type-contact-field').css('display', 'none')
                    $('#rma-select-contact-field').css('display', 'block')
                }
            }
            else {
                contactContainer.style.display = "none"
            }
        }

        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);
                                }
                            });
                        }
                    });
                }
                displayContactSuggestions(1)
            }
            else {
                displayInputContact();
            }
        }

        function displayContactSuggestions(status) {

            var suggestions = document.getElementsByClassName("ui-menu")[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';
                }
            }
        }

        function createRma() {

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

            var status = formStatus();

            if(status == 'OK') {

                if($('#rma-contact-mode').val() == 2) {
                    var contactCode = ""
                } else {
                    var contactCode = $('#rma-contact-code').val()
                }
                var clientCode = $('#rma-client-code').val()
                var clientName = $('#rma-client-name-value').val()
                var clientAgence = $('#rma-client-agence').val()
                var clientColleagueFirstName = $("#rma-client-colleague-first-name").val();
                var clientColleagueName = $("#rma-client-colleague-name").val();
                var clientColleagueEmail = $('#rma-client-colleague-email').val();
                var contactName = $('#rma-contact-fullname').val()
                var contactEmail = $('#rma-contact-email').val()
                var rmaType = '';
                var bmId = '';
                var rmaForceId = $('#rma-force-id').val()
                var rmaForceCreatedAt = $('#rma-force-created-at').val();

                $.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 editStatusPopup(rmaId, rmaCode, rmaFourName, rmaCodeDevis, termMsg) {
            $('#edit-status-popup-ref').html(rmaCode);
            $('#edit-status-popup-four-name').val(rmaFourName);
            $('#edit-status-popup-code-devis').val(rmaCodeDevis);
            $('#edit-status-popup-term-msg').val(termMsg);
            $('#btn-modal-edit-status').click();
            document.getElementById('edit-status-confirm-btn').setAttribute('onclick', 'editStatus(' + rmaId + ')');
        }

        function editStatus(rmaId) {

            var status = $('#edit-status-popup-select').val();
            var date = $('#edit-status-popup-date').val();
            var codeDevis = $('#edit-status-popup-code-devis').val();
            var fourName = $('#edit-status-popup-four-name').val();
            var termMsg = $('#edit-status-popup-term-msg').val()

            $.ajax({
                url: $('#edit-status-rma-url').val(),
                type: 'GET',
                data: {
                    'rmaId': rmaId,
                    'status': status,
                    'date': date,
                    'codeDevis' : codeDevis,
                    'fourName' : fourName,
                    'termMsg' : termMsg
                },
                success: function(data){
                    document.location.reload();
                }
            });
        }

        function editStatusForm() {
            var status = $('#edit-status-popup-select').val();

            if(status == "DEVIS") {
                document.getElementById('edit-status-popup-code-devis-container').style.display = 'block';
                document.getElementById('edit-status-popup-four-name-container').style.display = 'none';
                document.getElementById('edit-status-popup-term-msg-container').style.display = 'none';
            } else if (status == "FOUR_ENV" || status == "FOUR_P") {
                document.getElementById('edit-status-popup-four-name-container').style.display = 'block';
                document.getElementById('edit-status-popup-code-devis-container').style.display = 'none';
                document.getElementById('edit-status-popup-term-msg-container').style.display = 'none';
            }else if(status == "TERMINE" || status == "IRREP") {
                document.getElementById('edit-status-popup-term-msg-container').style.display = 'block';
                document.getElementById('edit-status-popup-code-devis-container').style.display = 'none';
                document.getElementById('edit-status-popup-four-name-container').style.display = 'none';
            } else {
                document.getElementById('edit-status-popup-code-devis-container').style.display = 'none';
                document.getElementById('edit-status-popup-four-name-container').style.display = 'none';
                document.getElementById('edit-status-popup-term-msg-container').style.display = 'none';
            }
        }

        function editMaterielPopup(rmaId, rmaCode, designation, refMat) {
            $('#edit-materiel-popup-ref').html(rmaCode);
            $('#btn-modal-edit-materiel').click();
            document.getElementById('edit-materiel-confirm-btn').setAttribute('onclick', 'editMateriel(' + rmaId + ')');
            document.getElementById('edit-materiel-popup-designation').setAttribute('value', designation);
            document.getElementById('edit-materiel-popup-ref-mat').setAttribute('value', refMat);
        }

        function editMateriel(rmaId) {
            var designation = $('#edit-materiel-popup-designation').val();
            var ref = $('#edit-materiel-popup-ref-mat').val();
            var date = $('#edit-materiel-popup-date').val();

            if(designation != '' && ref != '') {
                $.ajax({
                    url: $('#edit-materiel-rma-url').val(),
                    type: 'GET',
                    data: {
                        'rmaId': rmaId,
                        'designation' : designation,
                        'ref' : ref,
                        'date' : date
                    },
                    success: function(data){
                        document.location.reload();
                    }
                });
            } else {
                alert('Veuillez remplir les champs "Désignation" et "Référence"')
            }
        }

        function editDatePrevPopup(rmaId, rmaCode, datePrev) {
            $('#edit-date-prev-popup-ref').html(rmaCode);
            $('#btn-modal-edit-date-prev').click();
            document.getElementById('edit-date-prev-confirm-btn').setAttribute('onclick', 'editDatePrev(' + rmaId + ')');
            document.getElementById('edit-date-prev-popup-date').setAttribute('value', datePrev);
        }

        function editDatePrev(rmaId) {

            var date = $('#edit-date-prev-popup-date').val();

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

        }

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

        function openPopipBlOverview(rmaId, rmaCode) {
            $('#title-popup-overview').html('Récap RMA ' + rmaCode);
            $('#rma-id-overview').val(rmaId);

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

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

        var display = 0;
        var displayMultigaz = 0;
        function displayRadio() {
            if (display == 0) {
                $(".radio-certif").css('display', 'block');
                display++;
            }
            else {
                $(".radio-certif").css('display', 'none');
                display--;
            }
        }

        function ValidCertif() {
            var boit = 0;
            var cond = 0;
            var oxyg = 0;
            var ph = 0;
            var boitOdeon = 0;
            var pheht = 0;
            var optod = 0;
            var c4e = 0;
            var lel = 0;
            var h2s = 0;
            var co = 0;
            var o2 = 0;
            var co2 = 0;
            var path = "";
            var rmaId = $('#rma-id-certif').val();

            if ($('#hanna').is(':checked')) {
                if ($('#boitier').is(':checked')) {
                    boit = 1;
                }
                if ($('#conductivite').is(':checked')) {
                    cond = 1;
                }
                if ($('#oxygene').is(':checked')) {
                    oxyg = 1;
                }
                if ($('#ph').is(':checked')) {
                    ph = 1;
                }
                if (ph === 0 && oxyg === 0 && cond === 0 && boit === 0) {
                    alert('Veuillez sélectionner un certificat Hanna');
                }
                else {
                    path = "{{ path('certificat_rma_hanna_formulaire') }}?id=" + rmaId + "&boit=" + boit + "&cond=" + cond + "&oxyg=" + oxyg + "&ph=" + ph;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#odeon').is(':checked')) {
                if ($('#boitierOdeon').is(':checked')) {
                    boitOdeon = 1;
                }
                if ($('#pheht').is(':checked')) {
                    pheht = 1;
                }
                if ($('#optod').is(':checked')) {
                    optod = 1;
                }
                if ($('#c4e').is(':checked')) {
                    c4e = 1;
                }
                if (c4e === 0 && optod === 0 && pheht === 0 && boitOdeon === 0) {
                    alert('Veuillez sélectionner un certificat Odeon');
                }
                else {
                    path = "{{ path('certificat_rma_odeon_formulaire') }}?id=" + rmaId + "&boitOdeon=" + boitOdeon + "&pheht=" + pheht + "&optod=" + optod + "&c4e=" + c4e;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#gilair').is(':checked')) {
                path = "{{ path('certificat_rma_gilair_formulaire') }}?id=" + rmaId;
                // console.log(path);
                window.location.href = path;
            }
            else if ($('#pid_tiger').is(':checked')) {
                path = "{{ path('certificat_rma_pid_formulaire') }}?id=" + rmaId;
                // console.log(path);
                window.location.href = path;
            }
            else if ($('#multigaz').is(':checked')) {
                if ($('#lel').is(':checked')) {
                    lel = 1;
                }
                if ($('#h2s').is(':checked')) {
                    h2s = 1;
                }
                if ($('#co').is(':checked')) {
                    co = 1;
                }
                if ($('#o2').is(':checked')) {
                    o2 = 1;
                }
                if ($('#co2').is(':checked')) {
                    co2 = 1;
                }
                if (lel === 0 && h2s === 0 && co === 0 && o2 === 0 && co2 === 0) {
                    alert('Veuillez sélectionner un ou plusieurs gaz');
                }
                else {
                    path = "{{ path('certificat_rma_multigaz_formulaire') }}?id=" + rmaId + "&lel=" + lel + "&h2s=" + h2s + "&co=" + co + "&o2=" + o2 + "&co2=" + co2;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else {
                alert('Veuillez sélectionner un certificat');
            }
        }

        function goToRouteCertif(route) {

            var path = "";
            var rmaId = $('#rma-id-certif').val();

            if (route === "rma_files") {
                path = "{{ path('rma_files') }}?id=" + rmaId + '&redirect=certificat_redirect&certif=true';
            }
            else if (route === "certificat_rma_gilair_formulaire") {
                path = "{{ path('certificat_rma_gilair_formulaire') }}?id=" + rmaId;
            }
            window.location.href = path;
        }

        const radios = document.querySelectorAll('div.test > input')
        for (const radio of radios) {
            radio.onclick = (e) => {
                if (e.target.value == "Hanna") {
                    $(".radio-certif-hanna").css('display', 'block');
                }
                else {
                    $(".radio-certif-hanna").css('display', 'none');
                }
                if (e.target.value == "Multigaz") {
                    $(".radio-certif-multigaz").css('display', 'block');
                }
                else {
                    $(".radio-certif-multigaz").css('display', 'none');
                }
                if (e.target.value == "Odeon") {
                    $(".radio-certif-odeon").css('display', 'block');
                }
                else {
                    $(".radio-certif-odeon").css('display', 'none');
                }
            }
        }

    </script>
{% endblock %}