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

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

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

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

    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .btn-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: 140px; position: relative" class="block-header block-header-default bg-gray">
            <h4 class="font-w700" id="number-rma" style="margin: 0; display: -webkit-box">
                {{ articles | length }} Articles
            </h4>
            <div class="btn-top">
                <i class="fa fa-arrow-up" aria-hidden="true"></i>
            </div>
            <div style="display: flex; flex-direction: column">
                <h4 class="font-w700" style="position: relative;margin-top: 1em">
                    <select class="form-control" id="families-select" name="subfamilies-select" style="width: 350px;margin-right: 20px;margin-top: -6px;">
                        <option value="">Sélectionner une famille</option>
                        {% for family in families  %}
                            <option value="{{ family }}" {% if filterFamily and filterFamily == family %}selected{% endif %}>{{ family }}</option>
                        {% endfor  %}
                    </select>
                </h4>

                <h4 class="font-w700" style="position: relative;">
                    <select class="form-control" id="subfamilies-select" name="subfamilies-select" style="width: 350px;margin-right: 20px;margin-top: -6px;">
                        <option value="">Sélectionner une sous-famille</option>
                        {% for subFamily in subFamilies  %}
                            <option value="{{ subFamily.id }}" {% if filterSubFamily and filterSubFamily == subFamily.id %}selected{% endif %}>{{ subFamily.name }}</option>
                        {% endfor  %}
                    </select>
                </h4>
                <h4 class="font-w700" style="position: relative;">
                    <select class="form-control" id="delay-select" name="delay-select" style="width: 350px;margin-right: 20px;margin-top: -6px;">
                        <option value="">Sélectionner un temps de validation</option>
                        <option value="large" {% if filterDelay and filterDelay == 'large' %}selected{% endif %}>À jour</option>
                        <option value="medium" {% if filterDelay and filterDelay == 'medium' %}selected{% endif %}>Approchant de la date limite</option>
                        <option value="short" {% if filterDelay and filterDelay == 'short' %}selected{% endif %}>Date limite dépassée</option>
                        <option value="none" {% if filterDelay and filterDelay == 'none' %}selected{% endif %}>Sans certificat</option>
                        <option value="with" {% if filterDelay and filterDelay == 'with' %}selected{% endif %}>Avec certificat</option>
                    </select>
                </h4>
            </div>
        </div>
        <div class="block-content block-content-full">
            {% if not filterSubFamily %}
                <p style="font-size: medium; margin: 0;">Injection des notices uniquement avec un filtre sous-famille (à tous les articles de la sous-famille)</p>
                {% if app.user.hasServiceDateCertif %}
                    <button class="btn btn-outline-secondary button-date-certif" onclick="openPopipDateCertif()" style="margin-top: 1em">Modifier les dates applicable</button>
                {% endif %}
            {% endif %}
            <div style="text-align: right;margin-bottom: 10px;">
            </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="max-width: 100px; text-align: center">Sous-Famille</th>
                    <th style="width: 80px; text-align: center">Article</th>
                    <th style="max-width: 50px; text-align: center">Numéro de série</th>
                    <th style="max-width: 70px; text-align: center">Date du certificat d'origine</th>
                    <th style="max-width: 70px; text-align: center">Temps de validation</th>
                    <th style="width: 60px; text-align: center">Date création</th>
                    <th style="width: 60px;min-width: 70px; text-align: center">Date de fin</th>
                    <th style="max-width: 50px; text-align: center">Fichier</th>
                    <th style="max-width: 150px; text-align: center">Observation</th>
                </tr>
                </thead>
                <tbody>

                {% if filterSubFamily and not filterFamily and not filterDelay %}
                    {% if isCertif == 'no' %}
                        {% if app.user.hasServiceAddNotice %}
                            <div style="display: flex; flex-direction: row-reverse; margin-bottom: 1em;">
                                <button onclick ="openPopipCertificateAdd('{{ filterSubFamily }}', 'notice')" class="btn btn-secondary btn-lg" style="font-size: medium; display: flex;"> Ajouter une Notice d'utilisation</button>
                            </div>
                        {% endif %}
                    {% endif %}
                    {% if app.user.hasServiceDeleteNotice %}
                        <div style="display: flex; flex-direction: row-reverse; margin-bottom: 1em;">
                            <button onclick ="openPopipCertificateDelete('{{ filterSubFamily }}')" class="btn btn-secondary btn-lg" style="font-size: medium; display: flex;">Supprimer la notice</button>
                        </div>
                    {% endif %}
                {% endif %}

                {% for article in articles %}
                    <tr>
                        <td class="d-none d-sm-table-cell" style="text-align: center; font-size: small">
                            {{ article.caption }}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center; font-size: small">
                            {{ article.id }}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;max-width: 100px!important;padding-left: 4px; padding-right: 1px">
                            <span data-toggle="popover" title="{{ article.name }}" style="cursor: pointer;" ><i class="fa fa-hand-pointer-o "></i></span>
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if article.getDateCertifOrigin %}
                                {{ article.dateCertifOrigin | date("d/m/Y") }}
                            {% else %}
                                /
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if article.getExpirationCertif == '1 an' %}
                                {{ article.getExpirationCertif }}  <span style="font-size: smaller">+/- 1 mois</span>
                            {% elseif article.getExpirationCertif == '3 mois'%}
                                {{ article.getExpirationCertif }}  <span style="font-size: smaller">+/- 2 semaines</span>
                            {% elseif article.getExpirationCertif == '45 jours' %}
                                {{ article.getExpirationCertif }}  <span style="font-size: smaller">+/- 1 semaine</span>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="max-width: 140px!important;word-wrap: break-word;text-align: center;">
                            {% if article.getCreationDate %}
                                {{ article.creationDate | date("d/m/Y") }}
                            {% else %}

                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;{% if article.getEndDate %}background-color: {{ article.getColorStatusCertificat() }}{% endif %}">
                            {% if article.getEndDate %}
                                {{ article.endDate | date("d/m/Y") }}
                            {% else %}

                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center; min-width: 80px;">
                            {% if article.isCertif() %}
                                <i data-toggle="popover" title="Certificat" style="margin-right: 8px; color: #4473B3; cursor: pointer" class="fa fa-download" onclick="generateCertif('{{ article.id }}')"  aria-hidden="true"></i>
                                <i class="fa fa-files-o" onclick="allCertif('{{ article.id }}')" aria-hidden="true" style="cursor: pointer"></i>
                            {% endif %}
                            {% if article.getLastNoticeId %}
                                <i data-toggle="popover" title="Notice" style="margin-left: 8px; color: #6D9B25; cursor: pointer" class="fa fa-download" onclick="generateNotice('{{ article.id }}')"  aria-hidden="true"></i>
                            {% endif %}
                            {% if not article.getLastNoticeId and not article.isCertif() %}
                                <i data-toggle="popover" title="Pas de notice ni de certificat pour cet article" style="margin-left: 8px; color: grey; cursor: pointer" class="fa fa-ban" onclick="generateNotice('{{ article.id }}')"  aria-hidden="true"></i>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;">
                            {% if article.getObservation %}
                                {{ article.observation }}
                            {% endif %}
                        </td>
                    </tr>

                {% endfor %}

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

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


{% endblock %}

{% block modal %}

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

    <div class="modal" id="modal-large-no-certif" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="border-radius: 20px;">
                <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">
                            <p style="font-weight: 700;"><span id="article-label"></span></p>
                            <div class="form-group row">
                                <div class="col-12" style="display: inline-flex; text-align: center; justify-content: center; font-size: large">
                                    Aucun certificat présent pour l'article
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-date-certif" tabindex="-1" role="dialog" aria-labelledby="modal-date-certif" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="justify-content: center; display: flex;">
            <div class="modal-content" style="border-radius: 20px; width: 70%;">
                <div class="modal-header">
                    <h4 class="font-w700">
                        Dates des Certificats
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content-date-certif" id="modal-content-date-certif">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-certificate-delete" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="border-radius: 20px;">
                <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">
                            <input type="hidden" id="certificate_article-delete">
                            <p style="font-weight: 700;"><span id="article-label"></span></p>
                            <div class="form-group row">
                                <div class="col-12" style="display: inline-flex; text-align: center; justify-content: center; font-size: large">
                                    Etes vous sur de vouloir supprimez la notice
                                </div>
                            </div>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer" style="display: flex; justify-content: space-evenly;">
                        <button type="button" class="btn btn-outline-danger" id="close-modal-notice-delete" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-outline-secondary" onclick="deleteNotice()">
                            <i class="fa fa-check"></i> Valider
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-certificate-add" tabindex="-1" role="dialog" aria-labelledby="modal-certificate-add" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                {{ form_start(form, {'attr' : {'id' : 'certificate-form'}}) }}

                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header">
                        <h3 class="block-title">Ajouter un certificat</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" style="height: 400px;">

                        <style>
                            .margin-field {
                                margin-left: 0!important;
                                margin-bottom: 10px;
                                padding-left: 5px;
                            }
                        </style>

                        <label class="col-12 margin-field" for="example-text-input-valid">Sélectionner un fichier (uniquement PDF et WORD). 4Mo Maximum :</label>
                        {{ form_widget(form.certificate) }}
                        {{ form_errors(form.certificate) }}

                        <div style="display: none">
                            {{ form_widget(form.article, {'value' : 'temp'}) }}
                            {{ form_widget(form.documentType, {'value' : 'temp'}) }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary" onclick="createCertificate()" id="btn-create-certificate">
                        <i class="fa fa-check"></i> Valider
                    </button>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>

{% endblock  %}

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

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

        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, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[2]},
                    {orderable:false,targets:[7]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun certificat",
                    "zeroRecords": "La recherche ne donne aucun résultat"

                }
            });

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

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

        function deleteNotice() {
            var url = '{{ path('delete_notice_subfamily') }}';
            var subFamily = $('#certificate_article-delete').val();

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'subFamily': subFamily,
                },
                success: function(data){
                    $('#close-modal-notice-delete').click();
                    window.location.reload();
                }
            });
        }

        function generateNotice(articleId) {

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

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

        function openPopipCertificateDelete(articleId) {
            $('#btn-modal-certificate-delete').click();
            $('#certificate_article-delete').val(articleId);
        }

        function openPopipCertificateAdd(articleId, documentType) {
            $('#btn-modal-certificate-add').click();
            $('#certificate_article').val(articleId);
            $('#certificate_documentType').val(documentType);
        }

        $('#subfamilies-select').change(function() {
            var delay = $('#delay-select option:selected').val();
            var subfamily = $('#subfamilies-select option:selected').val();
            var family = $('#families-select option:selected').val();
            window.location.href = "{{ path('certificate_tab_list') }}" + "?filterSubFamily=" + subfamily + "&filterFamily=" + family + "&filterDelay=" + delay;
        });

        $('#families-select').change(function() {
            var delay = $('#delay-select option:selected').val();
            var subfamily = $('#subfamilies-select option:selected').val();
            var family = $('#families-select option:selected').val();
            window.location.href = "{{ path('certificate_tab_list') }}" + "?filterSubFamily=" + subfamily + "&filterFamily=" + family + "&filterDelay=" + delay;
        });

        $('#delay-select').change(function() {
            var delay = $('#delay-select option:selected').val();
            var subfamily = $('#subfamilies-select option:selected').val();
            var family = $('#families-select option:selected').val();
            window.location.href = "{{ path('certificate_tab_list') }}" + "?filterSubFamily=" + subfamily + "&filterFamily=" + family + "&filterDelay=" + delay;
        });

        function allCertif(articleCode) {

            var url = '{{ path('certificat_all') }}';
            var delay = $('#delay-select option:selected').val();
            var subfamily = $('#subfamilies-select option:selected').val();
            var family = $('#families-select option:selected').val();

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'articleId': articleCode,
                },
                success: function(data){
                    if (data === 'Not Found') {
                        $('#btn-modal-no-certif').click();
                    }
                    else {
                        document.location = url + "?articleId=" + articleCode + "&filterSubFamily=" + subfamily + "&filterFamily=" + family + "&filterDelay=" + delay;
                    }
                }
            });
        }

        function generateCertif(articleCode) {

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

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'articleId': articleCode,
                },
                success: function(data){
                    var dataTmp = data;
                    dataTmp = dataTmp.substr(dataTmp.length - 4)
                    if (dataTmp === '.pdf' || dataTmp === 'docx' || dataTmp === '.doc') {
                        urlCertificate = '{{ asset('uploads/reploc/') }}' + data;
                        window.open(urlCertificate, '_blank');
                    }
                    else if (data === 'No Certif') {
                        $('#btn-modal-no-certif').click();
                    } else {
                        document.location = url + "?articleId=" + articleCode;
                    }
                    // if (data === 'No Certif') {
                    //     $('#btn-modal-no-certif').click();
                    // }
                    // else {
                    //     document.location = url + "?articleId=" + articleCode;
                    // }
                }
            });
        }

        function openPopipDateCertif() {
            $('#modal-content-date-certif').html('');

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

            $.ajax({
                url: url,
                type: 'GET',
                success: function(data){
                    $('#modal-content-date-certif').html(data);
                }
            });
            $('#btn-modal-date-certif').click();
        }

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

        })

    </script>
{% endblock %}