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

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

{% block title %}
    {{ parent() }}
    Gestion des Rep Loc
{% 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;
        }

        .add-articles {
            display: flex;
            justify-content: flex-start;
            align-items: center;

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

        .modal-content-indic, .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-reploc, .modal-delete, .modal-large-edit-date-prev, .modal-large-certif, .modal-large-confirm, .modal-large-edit-status, .modal-large-edit-materiel{
            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">
                {{ replocs | length }} Rep Loc
            </h4>
            <div>
                {% if not user.hasServiceDemo %}
                    <button type="button" style="margin-left: 8px;" class="btn btn-sm btn-primary" data-toggle="tooltip" title="" onclick="openPopupRepLocCreate()">
                        <i class="fa fa-plus mr-5"></i>Ajouter une Rep/Cal Loc
                    </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 Type
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'null' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByType('null')">VIDE</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'REPLOC' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByType('REPLOC')">REPLOC</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'CALLOC' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByType('CALLOC')">CALLOC</button>
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'ALL' or filterType == '' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByType('ALL')">VOIR TOUT</button>
                <input type="hidden" id="filter-type" name="filter-type" value="{{ filterType }}" />
            </div>
            <div style="text-align: right;margin-bottom: 10px;">
                Filtrer par Statut
                <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterStatus == 'ENR' %};background-color: #1c97a6;{%  endif %}" class="btn btn-sm btn-info" onclick="filterByStatus('ENR')">ENREGISTRÉE</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 == '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>Matériel</th>
                    <th style="width: 40px">Date prév de rép</th>
                    <th style="width: 95px">Actions</th>
                </tr>
                </thead>
                <tbody>

                {% for reploc in replocs %}
                    <tr>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">{{ reploc.code}}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">{{ reploc.type}}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;min-width: 280px!important;padding-left: 4px; padding-right: 1px">
                            <span {% if user.isAdmin %} title="Modifier le statut et date de la RepLoc"  onclick="editStatusPopup({{ reploc.id }}, '{{ reploc.code }}', '{{ reploc.fourName }}', '{{ reploc.commentaireFin }}')";{% endif %} style="{% if user.isAdmin %}cursor: pointer{% endif %};font-weight: 900">{{ reploc.displayStatus }}</span>
                            <div style="text-align: left">
                                {% if reploc.repLocFourRef %}
                                    <br>Réf RepLoc fournisseur : <span style="color: #3F9CE8">{{ reploc.repLocFourRef }}</span>
                                {% endif %}
                                {% if reploc.fourName %}
                                    <br>Nom fournisseur : <span style="color: #3F9CE8">{{ reploc.fourName }}</span>
                                {% endif %}
                                {% if reploc.dateEnvoiFour %}
                                    <br>Date envoi chez fournisseur : <span style="color: #3F9CE8">{{ reploc.dateEnvoiFour | date("d/m/Y") }}</span>
                                {% endif %}
                                {% if reploc.dateCommentaireFour %}
                                    <br>Date diag fournisseur : <span style="color: green">{{ reploc.dateCommentaireFour  | date("d/m/Y") }}</span>
                                {% endif %}
                                {% if reploc.commentaireRetourFour %}
                                    <br><span data-toggle="popover" title="{{ reploc.commentaireRetourFour }}" style="color: green; cursor: pointer;" >Voir le commentaire diag fournisseur</span>
                                {% endif %}
                                {% if reploc.dateRetourFour %}
                                    <br>Date réception matériel fournisseur : <span style="color: #3F9CE8">{{ reploc.dateRetourFour | date("d/m/Y") }}</span>
                                {% endif %}
                            </div>
                        </td>
                        <td class="d-none d-sm-table-cell" title="{% if reploc.getEnregistrementIntervenant %}{{ reploc.enregistrementIntervenant.email }}{% else %}noBusinessManager{% endif %}">
                            {% if reploc.enregistrementIntervenant or reploc.diagnosticIntervenant or reploc.termineIntervenant %}
                                {% if reploc.enregistrementIntervenant %}
                                    <div>Enr : {{ reploc.enregistrementIntervenant.code }}</div>
                                {% endif %}
                                {% if reploc.diagnosticIntervenant %}
                                    <div>Diag : {{ reploc.diagnosticIntervenant.code }}</div>
                                {% endif %}
                                {% if reploc.termineIntervenant and reploc.termineIntervenant.name != '' %}
                                    <div>Fin : {{ reploc.termineIntervenant.code }}</div>
                                {% endif %}
                            {% else %}
                                <span style="opacity: 0.55">Inconnu</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" >
                            <div {% if user.isAdmin %}style="cursor: pointer;" title="Modifier le matériel" onclick="editMaterielPopup({{ reploc.id }}, '{{ reploc.code }}', '{% if reploc.articleCode != null %}{{ reploc.articleCode }}{% endif %}')";{% endif %}>
                                {% if reploc.getArticleCode != '' or reploc.getArticleName != '' %}
                                    {% if reploc.getArticleCode != '' %}
                                        <div><strong>{{ reploc.articleCode }}</strong></div>
                                    {% endif %}
                                    {% if reploc.articleName | length >= 30 %}
                                        <div>Code : <span data-toggle="popover" title="{{ reploc.articleName }}" style="color: #3F9CE8" >Voir le libellé</span></div>
                                    {% else %}
                                        <div>Code : {{ reploc.articleName }}</div>
                                    {% endif %}
                                {% else %}
                                    <span style="opacity: 0.55">Inconnu</span>
                                {% endif %}
                            </div>
                            {% if reploc.getEnrFilenamePict %}
                                <a href="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" target="_blank" data-toggle="popover" data-img="{{ absolute_url(asset('uploads/reploc/' ~ reploc.enrFilenamePict)) }}" title="Cliquez pour voir la photo de l'article" style="margin-left: 4em;"><i 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.hasServiceRepLoc %} title="Modifier la date prévisionnelle de réparation" onclick="editDatePrevPopup({{ reploc.id }}, '{{ reploc.code }}', '{% if reploc.datePlanifRepar != null %}{{ reploc.datePlanifRepar|date('Y-m-d') }}{% endif %}')";{% endif %}>
                            {% if reploc.datePlanifRepar != null %}
                                {{ reploc.datePlanifRepar|date('d/m/Y') }}
                            {% else %}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">

                            {% if reploc.isStatusEnr %}
                                <div class="main-action-container">
                                    <button type="button" class="btn btn-danger main-action-btn monitoring-btn button-actions" onclick="redirect('{{ path('reploc_diagnostic_form') }}?id={{ reploc.getId }}')">Diagnostiquer</button>
                                </div>
                            {% endif %}

                            {% if reploc.isStatusDiag or reploc.isStatusFourEnv or reploc.isStatusFourP %}
                                {% if reploc.isCal %}
                                    {% if reploc.getHasCertif == "oui" %}
                                        <div class="main-action-container">
                                            <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer" onclick="redirect('{{ path('reploc_end') }}?repLocId={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Terminer</button>
                                        </div>
                                    {% else %}
                                        <div style="display: flex; flex-direction: column; align-items: center">
                                            <button type="button" id="btn-modal-confirm-terminer"  onclick="redirect('{{ path('certificat_reploc') }}?id={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Certificat</button>
                                        </div>
                                    {% endif %}
                                {% elseif reploc.isRep %}
                                    {% if not reploc.isDiagnosticCalibYes or reploc.getHasCertif == "oui" %}
                                        <div class="main-action-container">
                                            <button type="button" id="btn-modal-confirm-terminer" data-toggle="modal" data-target="#modal-large-confirm-terminer" onclick="redirect('{{ path('reploc_end') }}?repLocId={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Terminer</button>
                                        </div>
                                    {% else %}
                                        <div style="display: flex; flex-direction: column; align-items: center">
                                            <button type="button" id="btn-modal-confirm-terminer"  onclick="redirect('{{ path('certificat_reploc') }}?id={{ reploc.getId }}')" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Certificat</button>
                                        </div>
                                    {% endif %}
                                {% endif %}
{#                            {% elseif isButtonLoc == 0 %}#}
{#                                <div class="main-action-container">#}
{#                                    <button type="button" id="btn-modal-confirm-remise-loc" data-toggle="modal" data-target="#modal-large-confirm-remise-loc" onclick="remiseLocRedirect({{ reploc.getId }})" class="btn btn-danger main-action-btn monitoring-btn button-actions" >Location</button>#}
{#                                </div>#}
                            {% endif %}


                            <button class="btn btn-primary button-actions" onclick="openPopipBlIndic('{{ reploc.id }}', '{{ reploc.code }}')">Indicateurs</button>
                            <button class="btn btn-primary button-actions" onclick="goToRoute('reploc_files','{{ reploc.id }}')">Fichiers</button>
                            <button class="btn btn-primary button-actions" onclick="openPopipBlOverview('{{ reploc.id }}', '{{ reploc.code }}')">Récap</button>
                            {% if reploc.hasCertif == 'oui' %}
                                <button class="btn btn-success button-actions" onclick="openPopipCertif('{{ reploc.id }}', '{{ reploc.code }}')">Certificat</button>
                            {% else %}
                                <button class="btn btn-primary button-actions" onclick="openPopipCertif('{{ reploc.id }}', '{{ reploc.code }}')">Certificat</button>
                            {% endif %}
                            {% if user.hasServiceRepLocAdmin or user.isAdmin %}
                                <button class="btn btn-info button-actions"
                                        onclick="goToRoute('reploc_admin','{{ reploc.id }}')">Admin</button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}

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

    <button type="button" id="btn-modal-reploc-create" class="btn" data-toggle="modal" data-target="#modal-large-create" style="display: none"></button>
    <button type="button" id="btn-modal-reploc-confirm" class="btn" data-toggle="modal" data-target="#modal-large-confirm" style="display: none"></button>
    <button type="button" id="btn-modal-reploc-indic" class="btn" data-toggle="modal" data-target="#modal-large-indic" style="display: none"></button>
    <button type="button" id="btn-modal-reploc-overview" class="btn" data-toggle="modal" data-target="#modal-large-overview" style="display: none"></button>
    <button type="button" id="btn-modal-reploc-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: 50%" 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; background-color: #3164a9!important; position: fixed; width: 100%;">
                            <h3 class="block-title" style="font-size: 20px" id="title-popup-overview"></h3>
                            <input type="text" id="open-overview" style="display: none">
                            <input type="text" id="reploc-id-overview" style="display: none">
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" onclick="closeModalOverview()">
                                    <i class="si si-close" style="color: white" ></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" onclick="closeModalOverview()">Fermer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal modal_outer left_modal fade" id="modal-large-indic" tabindex="-1" role="dialog" aria-labelledby="modal-large-indic" style="display: none; width: 50%" aria-hidden="true" >
        <div class="modal-dialog modal-lg" role="document" style="width :40%; min-width: 600px;">
            <div class="modal-content-indic" width="860px" >
                <div class="block-header" style="z-index:1000; overflow: hidden; background-color: #3164a9!important; position: fixed; width: 100%">
                    <h3 class="block-title" style="font-size: 20px; color: white" id="title-popup-indic"></h3>
                    <input type="text" id="reploc-id-indic" style="display: none">
                    <input type="text" id="open-indic" style="display: none">
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" onclick="closeModalIndic()">
                            <i class="si si-close" style="color: white" ></i>
                        </button>
                    </div>
                </div>
                <div class="block block-rounded" style="margin-left: 15px; margin-right: 15px">
                    <div class="block-content" id="modal-content-indic">
                    </div>
                </div>
                <div class="modal-footer bg-gray-lighter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeModalIndic()" >Fermer</button>
                </div>
            </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">
        {{ form_start(form, {'attr' : {'id' : 'reploc-create-form', 'autocomplete' : 'off'}}) }}
            {{ form_widget(form.replocForceId, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocForceCreatedAt, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocEvent, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocEventText, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocArticleCode, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocArticleName, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocArticleNameMultiple, {'attr' : {'style' : 'display : none'}}) }}
            {{ form_widget(form.replocArticleCodeMultiple, {'attr' : {'style' : 'display : none'}}) }}
        <div class="modal-dialog modal-lg modal-large-create-reploc" 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 Rep Loc</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">

                            <input type="text" id="create-reploc-url" value="{{ path('create_reploc') }}" style="display: none">
                            <input type="text" id="create-reploc-redirect" value="{{ path('reploc_list') }}" style="display: none">
                            <input type="text" id="edit-status-reploc-url" value="{{ path('reploc_edit_status') }}" style="display: none">
                            <input type="text" id="edit-date-prev-reploc-url" value="{{ path('reploc_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 Rep Loc</label>
                                    <div class="col-12" style="display: inline-flex">
                                        <input type="number" class="form-control" id="reploc-force-id" name="reploc-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="reploc-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">Intervenant de l'enregistrement</label>
                                {{ form_widget(form.enrIntervenant, {'attr' : {'style' : 'margin-left : 1em; width : 25%'}}) }}
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Séléctionner un article</label>
                                <div class="col-12" style="display: inline-flex">
                                    <input type="text" id="reploc-search-articles" value="{{ path('reploc_search_articles') }}" style="display: none">
                                    <input type="hidden" id="reploc-article-name-value" name="reploc-article-name-value" value="" />
                                    <input type="hidden" id="reploc-article-code" name="reploc-article-code" value="" />
                                    <div class="col-12 form-group row add-articles">
                                        <input id="reploc-articles-name" name="reploc-articles-name" class="form-control" type="text" autofocus="true" autocomplete="off" style="max-width: 90%; margin-right: 1em"/>
                                        <i class="fa fa-plus" style="font-size: large; color: green; cursor: pointer" onclick="addArticle()"></i>
                                        <i class="fa fa-times" style=" color: red; margin-left: 0.5em; margin-bottom: 2px; font-size: large; cursor: pointer" onclick="resetArticle()"></i>
                                    </div>
                                    <div style="position: absolute; top: 34px; width: 110%" id="reploc-autocomplete-articles"></div>
                                </div>
                                <div class="col-12" id="articles-select"></div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Photo de l'article</label>
                                {{ form_widget(form.enrPicture, {'attr' : {'style' : 'margin-left : 1em'}})}}
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Événement</label>
                                <select id="reploc-event" name="reploc-event" class="form-control" style="width: 10%; margin-left: 1em;">
                                    <option value="Oui">Oui</option>
                                    <option value="Non" selected>Non</option>
                                </select>
                            </div>
                            <div id="reploc-event-text-div" class="form-group row" style="display: none">
                                <label class="col-12">Numéro d'événement</label>
                                <input type="text" id="reploc-event-text" name="reploc-event-text" class="form-control" style="margin-left: 1em; width: 96%" />
                            </div>
                        </div>
                    <div class="modal-footer">
                        <button id="btn-modal-reploc-create-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="openPopupRepLocConfirm()">
                            <i class="fa fa-check"></i> Valider
                        </button>
                    </div>
            </div>
        </div>
        {{ form_end(form) }}
    </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>Êtes-vous sûr de vouloir créer cette Rep Loc ?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-modal-reploc-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-primary" onclick="submitForm()" 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">ENREGISTRÉE</option>
                                <option value="DIAG">DIAGNOSTIQUÉ</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-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 fade" 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 modal-large-edit-materiel" 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 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" style="color: white;"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <p style="font-weight: 700;">Rep Loc <span id="edit-materiel-popup-ref"></span></p>
                    <div class="form-group row" >
                        <label class="col-12">Article</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="hidden" id="reploc-article-name-value-update" name="reploc-article-name-value-update" value="" />
                            <input type="hidden" id="reploc-article-code-update" name="reploc-article-code-update" value="" />
                            <input id="reploc-articles-name-update" name="reploc-articles-name-update" class="form-control" type="text" autofocus="true" autocomplete="off"/>
                            <div style="position: absolute; top: 34px; width: 110%" id="reploc-autocomplete-articles-update"></div>
                        </div>
                    </div>
                    {{ form_start(formUpdate, {'attr' : {'id' : 'reploc-update-form', 'autocomplete' : 'off'}}) }}
                    {{ form_widget(formUpdate.replocArticleCodeUpdate, {'attr' : {'style' : 'display : none'}}) }}
                    {{ form_widget(formUpdate.replocArticleNameUpdate, {'attr' : {'style' : 'display : none'}}) }}
                    {{ form_widget(formUpdate.repLocId, {'attr' : {'style' : 'display : none'}}) }}
                    <div class="form-group row">
                        <label class="col-12">Photo de l'article</label>
                        {{ form_widget(formUpdate.enrPictureUpdate, {'attr' : {'style' : 'margin-left : 1em'}})}}
                    </div>
                    {{ form_end(formUpdate) }}
                </div>
                <br>
                <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="submitFormUpdate()" id="btn-update-rma-create">
                        <i class="fa fa-check"></i> Modifier
                    </button>
                </div>
            </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="reploc-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 REP/CAL LOC :</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="tripod" name="certif" value="Tripod">
                                    <label for="tripod">Tripod</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 REP/CAL LOC :</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 REP/CAL LOC :</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 REP/CAL LOC :</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>

                                <div class="col-12 radio-certif-tripod" style="display: none" id="radio-certif-tripod">
                                    <p>Sélectionner le.s  certificat.s Tripod associé.s à la REP/CAL LOC :</p>
                                    <div style>
                                        <input type="checkbox" id="boitierTri" name="certif-tripod" value="BoitierTri">
                                        <label for="boitierTri">Boitier</label><br/>

                                        <input type="checkbox" id="conductiviteTri" name="certif-tripod" value="ConductivitéTri">
                                        <label for="conductiviteTri">Conductivité</label><br/>

                                        <input type="checkbox" id="oxygeneTri" name="certif-tripod" value="OxygèneTri">
                                        <label for="oxygeneTri">Oxygène</label><br/>

                                        <input type="checkbox" id="phTri" name="certif-tripod" value="PhTri">
                                        <label for="phTri">Ph</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('reploc_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 Rep Loc 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 + ' Rep Loc');
                    }, 100);
            })
        });

        function openPopupRepLocCreate() {
            $('#btn-modal-reploc-create').click();
        }

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

        })

        function openPopupRepLocConfirm() {
            var status = formStatus();
            if(status == 'OK') {
                $('#btn-modal-reploc-create-close').click();
                $('#btn-modal-reploc-confirm').click();
            }
            else {
                alert(status)
            }
        }

        var inputRepLoc = $('#reploc-articles-name');
        var inputRepLocUpdate = $('#reploc-articles-name-update');

        inputRepLoc.on('keyup', function () {
            repLocSearchArticles();
            displayArticlesSuggestions(1)
        });
        inputRepLoc.on('keydown', function () {
            displayArticlesSuggestions(1)
        });
        inputRepLoc.focusin(function() {
            displayArticlesSuggestions(1)
        });
        inputRepLoc.focusout(function() {
            displayArticlesSuggestions(0)
        });

        inputRepLocUpdate.on('keyup', function () {
            repLocSearchArticlesUpdate();
            displayArticlesSuggestionsUpdate(1)
        });
        inputRepLocUpdate.on('keydown', function () {
            displayArticlesSuggestionsUpdate(1)
        });
        inputRepLocUpdate.focusin(function() {
            displayArticlesSuggestionsUpdate(1)
        });
        inputRepLocUpdate.focusout(function() {
            displayArticlesSuggestionsUpdate(0)
        });

        function addArticle() {
            if ($("#articles-select").text() == '') {
                $("#articles-select").append($("#reploc-article-code").val() + ' ' + $("#reploc-article-name-value").val());
            }
            else {
                $("#articles-select").append('<br/>' + $("#reploc-article-code").val() + ' ' + $("#reploc-article-name-value").val());
            }

            if ($('#rep_loc_enregistrement_replocArticleCodeMultiple').val() == '') {
                $('#rep_loc_enregistrement_replocArticleCodeMultiple').val($("#reploc-article-code").val());
            }
            else {
                $('#rep_loc_enregistrement_replocArticleCodeMultiple').val($('#rep_loc_enregistrement_replocArticleCodeMultiple').val() + '|' + $("#reploc-article-code").val())
            }

            if ($('#rep_loc_enregistrement_replocArticleNameMultiple').val() == '') {
                $('#rep_loc_enregistrement_replocArticleNameMultiple').val($("#reploc-article-name-value").val());
            }
            else {
                $('#rep_loc_enregistrement_replocArticleNameMultiple').val($('#rep_loc_enregistrement_replocArticleNameMultiple').val() + '|' +  $("#reploc-article-name-value").val())
            }
            $("#reploc-articles-name").val('');
        }

        function resetArticle() {
            $("#reploc-articles-name").val('');
            $("#articles-select").text('');
            $('#rep_loc_enregistrement_replocArticleNameMultiple').val('');
            $('#rep_loc_enregistrement_replocArticleCodeMultiple').val('');
        }

        function goToCertificat(route, replocId) {
            window.location.href = "{{ path('certificat_reploc') }}?id=" + replocId;
        }

        function repLocSearchArticles(){

            var term = $('#reploc-articles-name').val();

            if (term.length > 0) {
                $.ajax({
                    url: $('#reploc-search-articles').val(),
                    dataType: "html",
                    data: {
                        term: term
                    },
                    success: function (data) {
                        $("#reploc-articles-name").autocomplete({
                            source: eval(data),
                            delay: 0,
                            minLength: 3,
                            select: function (event, ui) {
                                $("#reploc-article-code").val(ui.item.code);
                                $("#reploc-article-name-value").val(ui.item.name);
                            }
                        });
                    }
                });
            }
            displayArticlesSuggestions(1)
        }

        function repLocSearchArticlesUpdate(){

            var term = $('#reploc-articles-name-update').val();

            if (term.length > 0) {
                $.ajax({
                    url: $('#reploc-search-articles').val(),
                    dataType: "html",
                    data: {
                        term: term
                    },
                    success: function (data) {
                        $("#reploc-articles-name-update").autocomplete({
                            source: eval(data),
                            delay: 0,
                            minLength: 3,
                            select: function (event, ui) {
                                $("#reploc-article-code-update").val(ui.item.code);
                                $("#reploc-article-name-value-update").val(ui.item.name);
                            }
                        });

                    }
                });
            }
            displayArticlesSuggestions(1)
        }

        function displayArticlesSuggestionsUpdate(status) {

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

                document.getElementById("reploc-autocomplete-articles-update").innerHTML = "";
                document.getElementById("reploc-autocomplete-articles-update").appendChild(suggestions)

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

        function displayArticlesSuggestions(status) {

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

                document.getElementById("reploc-autocomplete-articles").innerHTML = "";
                document.getElementById("reploc-autocomplete-articles").appendChild(suggestions)

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

        function goToRoute(route, replocId) {

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

            var path = "";
            if(route === "reploc_dates") {
                path = "{{ path('reploc_dates') }}?id=" + replocId;

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

            } else if(route === "reploc_overview") {
                path = "{{ path('reploc_overview') }}?id=" + replocId;

            } else if(route === "reploc_admin") {
                path = "{{ path('reploc_admin') }}?id=" + replocId;

            } else if(route === "reploc_dispo") {
                path = "{{ path('reploc_dispo') }}?id=" + replocId;

            } else if(route === "reploc_reset_main_rep") {
                path = "{{ path('reploc_reset_main_rep') }}?id=" + replocId;
            }

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

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

            window.location.href = path;
        }

        function filterByType(type) {

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

            path = "{{ path('reploc_list') }}?filterType=" + type;

            var datePrev = $('#filter-datePrev').val();
            if (datePrev != "")
                path = path + "&filterDatePrev=" + datePrev;
            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;
        }

        function filterByStatus(status) {

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

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

            var type = $('#filter-type').val();
            if (type != "")
                path = path + "&filterType=" + type;
            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('reploc_list') }}?filterDatePrev=" + dateValue;

            var type = $('#filter-type').val();
            if (type != "")
                path = path + "&filterType=" + type;
            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;
        }

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

                if($('#reploc-event').val() == '') {
                    return 'Renseignez un événement';
                }
                else if($('#reploc-event').val() == 'Oui' && $('#reploc-event-text').val() == '') {
                    return 'Renseignez un numéro d\'événement';
                }
                else if( $('#reploc-enr-picture').val() == '') {
                    return 'Renseignez la photo de l\'article';
                }
                else {
                    return 'OK'
                }
            }
            else {
                return 'Selectionnez un article dans la liste'
            }
        }

        function submitForm() {

            var status = formStatus();

            if(status == 'OK') {
                $('#btn-modal-reploc-confirm-close').click();

                if ($('#reploc-force-id').val() == '') {
                    $('#rep_loc_enregistrement_replocForceId').val('');
                }
                else {
                    $('#rep_loc_enregistrement_replocForceId').val($('#reploc-force-id').val());
                }
                $('#rep_loc_enregistrement_replocForceCreatedAt').val($('#reploc-force-created-at').val());

                if ($("#articles-select").text() == '') {
                    $('#rep_loc_enregistrement_replocArticleCode').val($('#reploc-article-code').val());
                    $('#rep_loc_enregistrement_replocArticleName').val($('#reploc-article-name-value').val());
                    $('#rep_loc_enregistrement_replocArticleNameMultiple').val('');
                    $('#rep_loc_enregistrement_replocArticleCodeMultiple').val('');
                }

                if ($("#reploc-event").val() === 'Oui') {
                    $('#rep_loc_enregistrement_replocEvent').val('true')
                    $('#rep_loc_enregistrement_replocEventText').val($('#reploc-event-text').val());
                } else {
                    $('#rep_loc_enregistrement_replocEvent').val('false')
                }
                var form = document.getElementById('reploc-create-form');
                form.submit();
            }
            else {
                alert(status);
            }
        }

        function submitFormUpdate() {

            $('#rep_loc_file_update_replocArticleCodeUpdate').val($('#reploc-article-code-update').val());
            $('#rep_loc_file_update_replocArticleNameUpdate').val($('#reploc-article-name-value-update').val());

            var form = document.getElementById('reploc-update-form');
            form.submit();
        }

        function editStatusPopup(replocId, replocCode, replocFourName, termMsg) {
            $('#edit-status-popup-ref').html(replocCode);
            $('#edit-status-popup-four-name').val(replocFourName);
            $('#edit-status-popup-term-msg').val(termMsg);
            $('#btn-modal-edit-status').click();
            document.getElementById('edit-status-confirm-btn').setAttribute('onclick', 'editStatus(' + replocId + ')');
        }

        function editStatus(replocId) {

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

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

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

            if (status == "FOUR_ENV" || status == "FOUR_P") {
                document.getElementById('edit-status-popup-four-name-container').style.display = 'block';
                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-four-name-container').style.display = 'none';
            } else {
                document.getElementById('edit-status-popup-four-name-container').style.display = 'none';
                document.getElementById('edit-status-popup-term-msg-container').style.display = 'none';
            }
        }

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

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

        function editDatePrev(repLocId) {

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

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

        }

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

        $("#reploc-event").change(function () {
            var str = "";
            $("#reploc-event option:selected").each(function () {
                str = $(this).text() + " ";
            });
            if (str === "Non ") {
                $("#reploc-event-text-div").css('display', 'none');
            }
            else {
               $("#reploc-event-text-div").css('display', 'block');
            }
        })

        function remiseLocRedirect(replocId) {
            $.ajax({
                url: $('#remise-loc-reploc').val(),
                type: 'GET',
                data: {
                    'repLocId': replocId
                },
                success: function(data){
                    window.location.reload();
                }
            });
        }

        function openPopipBlIndic(repId, repCode) {
            if ($('#open-indic').val() === 'open') {
                $('#open-indic').val('close');
            } else {
                $('#open-indic').val('open');
            }
            $('#title-popup-indic').html('Indicateur REP/CAL : ' + repCode);
            $('#reploc-id-indic').val(repId);

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

            $.ajax({
                url: '{{ path('reploc_dates') }}',
                type: 'GET',
                data: {
                    'id': repId
                },
                success: function(data){
                    $('#modal-content-indic').html(data);
                }
            });
            $('#btn-modal-reploc-indic').click();
            if ($('#open-overview').val() === 'open') {
                $('#btn-modal-reploc-overview').click();
                $('#open-overview').val('close');
            }
        }

        function openPopipCertif(repId, repCode) {

            $('#title-popup-certif').html('Générer un certificat : REP/CAL ' + repCode);
            $('#reploc-id-certif').val(repId);
            $('#btn-modal-reploc-certif').click();
        }

        function openPopipBlOverview(repId, repCode) {
            if ($('#open-overview').val() === 'open') {
                $('#open-overview').val('close');
            } else {
                $('#open-overview').val('open');
            }

            $('#title-popup-overview').html('Récap REP/CAL ' + repCode);
            $('#reploc-id-overview').val(repId);

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

            $.ajax({
                url: '{{ path('reploc_overview') }}',
                type: 'GET',
                data: {
                    'id': repId
                },
                success: function(data){
                    $('#modal-content-overview').html(data);
                }
            });
            if ($('#open-indic').val() === 'open') {
                $('#btn-modal-reploc-indic').click();
                $('#open-indic').val('close');
            }
            $('#btn-modal-reploc-overview').click();
        }

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

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


        var display = 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 boitTri = 0;
            var condTri = 0;
            var oxygTri = 0;
            var phTri = 0;
            var lel = 0;
            var h2s = 0;
            var co = 0;
            var o2 = 0;
            var co2 = 0;
            var boitOdeon = 0;
            var pheht = 0;
            var optod = 0;
            var c4e = 0;
            var path = "";
            var replocId = $('#reploc-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_reploc_hanna_formulaire') }}?id=" + replocId + "&boit=" + boit + "&cond=" + cond + "&oxyg=" + oxyg + "&ph=" + ph;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#tripod').is(':checked')) {
                if ($('#boitierTri').is(':checked')) {
                    boitTri = 1;
                }
                if ($('#conductiviteTri').is(':checked')) {
                    condTri = 1;
                }
                if ($('#oxygeneTri').is(':checked')) {
                    oxygTri = 1;
                }
                if ($('#phTri').is(':checked')) {
                    phTri = 1;
                }
                if (phTri === 0 && oxygTri === 0 && condTri === 0 && boitTri === 0) {
                    alert('Veuillez sélectionner un certificat Tripod');
                }
                else {
                    path = "{{ path('certificat_reploc_tripod_formulaire') }}?id=" + replocId + "&boit=" + boitTri + "&cond=" + condTri + "&oxyg=" + oxygTri + "&ph=" + phTri;
                    // 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_reploc_odeon_formulaire') }}?id=" + replocId + "&boitOdeon=" + boitOdeon + "&pheht=" + pheht + "&optod=" + optod + "&c4e=" + c4e;
                    // console.log(path);
                    window.location.href = path;
                }
            }
            else if ($('#gilair').is(':checked')) {
                path = "{{ path('certificat_reploc_gilair_formulaire') }}?id=" + replocId;
                // console.log(path);
                window.location.href = path;
            }
            else if ($('#pid_tiger').is(':checked')) {
                path = "{{ path('certificat_reploc_pid_formulaire') }}?id=" + replocId;
                // 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_reploc_multigaz_formulaire') }}?id=" + replocId + "&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 replocId = $('#reploc-id-certif').val();

            if (route === "reploc_files") {
                path = "{{ path('reploc_files') }}?id=" + replocId + '&redirect=certificat_redirect&certif=true';
            }
            else if (route === "certificat_reploc_gilair_formulaire") {
                path = "{{ path('certificat_reploc_gilair_formulaire') }}?id=" + replocId;
            }
            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');
                }
                if (e.target.value == "Tripod") {
                    $(".radio-certif-tripod").css('display', 'block');
                }
                else {
                    $(".radio-certif-tripod").css('display', 'none');
                }
            }
        }
    </script>
{% endblock %}