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

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

{% block title %}
    {{ parent() }}
    Certificat
{% endblock %}

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

        @media (max-width: 900px) {
            #rma_files_fileType {
                width: 100% !important;
            }
        }
        .rma-input-file {
            padding: 4px;
            margin-right: 8px;
        }
        .files-container-header{
            margin-top: 24px;
        }
        .file-container{
            background: #fff;
            border-radius: 4px;
            border-top:1px solid #cbd2dd;
            border-left:1px solid #cbd2dd;
            border-right:1px solid #cbd2dd;
        }
        .file-view{
            padding: 8px 24px;
            font-size: 18px;
            border-bottom:1px solid #cbd2dd;
            display: flex;
            flex-wraap: wrap;
            justify-content: space-between;
        }
        .file-name {
            margin-right: 24px;
        }
        .file-date {
            font-size: 15px;
            position: relative;
            top: 6px;
        }
        .action-container {
            margin-left: 24px;
        }
        .file-view:hover{
            background: #F0F2F5;
        }
    </style>
{% endblock %}

{% block headerRight %}
    {{ parent() }}
    <button type="button" class="btn btn-secondary page_precedente" id="btn-submit-rma-form" onclick="closeForm()">Retour page précédente</button>
{% endblock %}

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

    <h4 style="font-weight: 700; margin-bottom: 24px;">Article {{ article.id }}</h4>

    <div class="files-container-header" style="margin-left: 1em;">
        <h5>Liste des fichiers :</h5>
        <div style="display: flex; flex-direction: column; margin-bottom: 1em;">
            <span><i style="margin-right: 8px; cursor: pointer; color : #4473B3;" class="fa fa-download"></i> = Interne</span>
            <span><i style="margin-right: 8px; cursor: pointer; color : red;" class="fa fa-download"></i> = Externe</span>
        </div>
        <table class="table table-bordered table-vcenter js-dataTable-full-all-certif" style="background-color: white; width: 70%; margin-left: 1em"><thead>
            <tr>
                <th style="width: 40%; text-align: center">Date de création</th>
                <th style="width: 40%; text-align: center">Date de fin</th>
                <th style="width: 20%; text-align: center">Fichier</th>
                {% if app.user.hasServiceModifyCertificat or app.user.hasServiceDeleteCertificat %}
                    <th style="width: 20%; text-align: center">Actions</th>
                {% endif %}
            </tr>
            </thead>
            <tbody>
            {% if article.getArrayCertif %}
                {% for certif in article.arrayCertif %}
                    <tr>
                        <td style="text-align: center">
                            {{ certif[1] | date("d/m/Y")}}
                        </td>
                        <td style="text-align: center">
                            {{ certif[2] | date("d/m/Y")}}
                        </td>
                        <td style="text-align: center">
                            {% if certif[3] == 'file' %}
                                <i style="margin-right: 8px; cursor: pointer; {% if certif[4] == 'plm' %}color : #4473B3;{% else %}color : red;{% endif %}" class="fa fa-download" aria-hidden="true" onclick="generateCertifExterne('{{ certif[0] }}')"></i>
                            {% else %}
                                <i style="margin-right: 8px; cursor: pointer; color : #4473B3;" class="fa fa-download" aria-hidden="true" onclick="generateCertif('{{ certif[0] }}', '{{ certif[3] }}')"></i>
                            {% endif %}
                        </td>
                        {% if app.user.hasServiceModifyCertificat or app.user.hasServiceDeleteCertificat %}
                        <td style="text-align: center; {% if certif[3] != 'file' %}display: inline-flex;{% else %}display: block;{% endif %}">
                            {% if app.user.hasServiceModifyCertificat %}
                                {% if certif[3] == 'multigaz' %}
                                    <button style="background-color: white; border:none "class="btn btn-secondary" id="btn-modal-multigaz" data-toggle="modal" data-target="#modal-large-multigaz" onclick="multigazPopup('{{ certif[0] }}', '{{ certif[3] }}')"><i style="color: grey; cursor: pointer;" class="fa fa-pencil" aria-hidden="true" ></i></button>
                                {% elseif certif[3] == 'hanna' %}
                                    <button style="background-color: white; border:none "class="btn btn-secondary" id="btn-modal-hanna" data-toggle="modal" data-target="#modal-large-hanna" onclick="hannaPopup('{{ certif[0] }}', '{{ certif[3] }}')"><i style="color: grey; cursor: pointer;" class="fa fa-pencil" aria-hidden="true" ></i></button>
                                {% elseif certif[3] == 'tripod' %}
                                    <button style="background-color: white; border:none "class="btn btn-secondary" id="btn-modal-tripod" data-toggle="modal" data-target="#modal-large-tripod" onclick="tripodPopup('{{ certif[0] }}', '{{ certif[3] }}')"><i style="color: grey; cursor: pointer;" class="fa fa-pencil" aria-hidden="true" ></i></button>
                                {% elseif certif[3] != 'file'%}
                                    <button style="background-color: white; border:none "class="btn btn-secondary" onclick="updateCertif('{{ certif[0] }}', '{{ certif[3] }}')"><i style="color: grey; cursor: pointer;" class="fa fa-pencil" aria-hidden="true" ></i></button>
                                {% endif %}
                            {% endif %}
                            {% if app.user.hasServiceDeleteCertificat %}
                                <button style="background-color: white; border:none "class="btn btn-secondary" id="btn-modal-delete-confirm" data-toggle="modal" data-target="#modal-large-delete" onclick="deletePopup('{{ certif[0] }}', '{{ certif[3] }}')"><i style="color: grey; cursor: pointer;" class="fa fa-trash"></i></button>
                            {% endif %}
                        </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            {% endif %}

            </tbody>
        </table>

    </div>
    <div class="files-container">

    </div>

{% endblock %}

{% block modal %}

    <div class="modal" id="modal-large-delete" 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">Confirmation</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>Etes vous sûr de vouloir supprimer definitivement ce certificat ?</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="btn-delete-file" class="btn btn-danger" onclick="">Supprimer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-large-multigaz" 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" style="font-size: large; border-radius: 0; width: 70%; text-align: center;">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-content">
                            <div class="col-12 radio-certif-multigaz" id="radio-certif-multigaz">
                                <p>Sélectionner les gaz Multigaz associés au certificat:</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>
                    </div>
                    <div class="modal-footer" style="text-align: center; justify-content: center">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="btn-multigaz" class="btn btn-success" onclick="">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-large-hanna" tabindex="-1" role="dialog" aria-labelledby="modal-large" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="font-size: large; border-radius: 0; width: 70%; text-align: center;">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-content">
                            <div class="col-12 radio-certif-hanna" id="radio-certif-hanna">
                                <p>Sélectionner le.s  certificat.s Hanna associé.s au certificat:</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>
                    </div>
                    <div class="modal-footer" style="text-align: center; justify-content: center">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="btn-hanna" class="btn btn-success" onclick="">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-large-tripod" tabindex="-1" role="dialog" aria-labelledby="modal-large" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="font-size: large; border-radius: 0; width: 70%; text-align: center;">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-content">
                            <div class="col-12 radio-certif-tripod" id="radio-certif-tripod">
                                <p>Sélectionner le.s  certificat.s Tripod associé.s au certificat:</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>
                        </div>
                    </div>
                    <div class="modal-footer" style="text-align: center; justify-content: center">
                        <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button id="btn-tripod" class="btn btn-success" onclick="">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script type="text/javascript">

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

        function generateCertif(articleId, type) {
            var url = '{{ path('generate_old_certificat') }}';
            document.location = url + "?idCertif=" + articleId + "&type=" + type;
        }

        function generateCertifExterne(idFile) {

            var url = '{{ path('generate_old_certificat_externe') }}';

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'idFile': idFile,
                },
                success: function(data){
                    if (data !== 'Not Found') {
                        urlCertificate = '{{ asset('uploads/reploc/') }}' + data;
                        window.open(urlCertificate, '_blank');
                    }

                }
            });
        }

        function updateCertif(articleId, type) {
            var url = '{{ path('update_certificat') }}';
            if (type === 'hanna') {
                var boit = 0;
                var cond = 0;
                var oxyg = 0;
                var ph = 0;
                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 {
                    document.location = url + "?idCertif=" + articleId + "&type=" + type + "&boit=" + boit + "&cond=" + cond + "&oxyg=" + oxyg + "&ph=" + ph;
                }
            }
            else if (type === 'tripod') {
                var boitTri = 0;
                var condTri = 0;
                var oxygTri = 0;
                var phTri = 0;
                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 {
                    document.location = url + "?idCertif=" + articleId + "&type=" + type + "&boit=" + boitTri + "&cond=" + condTri + "&oxyg=" + oxygTri + "&ph=" + phTri;
                }
            }
            else if (type === 'multigaz') {
                var lel = 0;
                var h2s = 0;
                var co = 0;
                var o2 = 0;
                var co2 = 0;
                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 {
                    document.location = url + "?idCertif=" + articleId + "&type=" + type + "&lel=" + lel + "&h2s=" + h2s + "&co=" + co + "&o2=" + o2 + "&co2=" + co2;
                }
            } else {
                document.location = url + "?idCertif=" + articleId + "&type=" + type;
            }
        }

        function deletePopup(articleId, type) {
            document.getElementById('btn-delete-file').setAttribute('onclick', "deleteCertif('" + articleId + "','" + type + "')")
        }

        function multigazPopup(articleId, type) {
            document.getElementById('btn-multigaz').setAttribute('onclick', "updateCertif('" + articleId + "','" + type + "')")
        }

        function hannaPopup(articleId, type) {
            document.getElementById('btn-hanna').setAttribute('onclick', "updateCertif('" + articleId + "','" + type + "')")
        }

        function tripodPopup(articleId, type) {
            document.getElementById('btn-tripod').setAttribute('onclick', "updateCertif('" + articleId + "','" + type + "')")
        }

        function deleteCertif(articleId, type) {

            if (type === 'file') {

                $.ajax({
                    url: '{{ path('delete_old_certificat_externe') }}',
                    type: 'GET',
                    data: {
                        'idFile': articleId,
                    },
                    success: function(data){
                        $('.page_precedente').click();
                    }
                });
            }
            else {

                $.ajax({
                    url: '{{ path('remove_certificat') }}',
                    type: 'GET',
                    data: {
                        'idCertif': articleId,
                        'type': type,
                    },
                    success: function (data) {
                        $('.page_precedente').click();
                    }
                });
            }
        }

        function closeForm() {
            window.location.href = "{{ path('certificate_tab_list') }}?filterSubFamily={{ filterSubFamily }}&filterFamily={{ filterFamily }}&filterDelay={{ filterDelay }}";
        }

    </script>
{% endblock %}