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

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

{% block title %}
    {{ parent() }}
    Fichiers RMA
{% 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() }}
    <input type="hidden" id="rma-modified-type-file" value="{{ path('rma_modified_type_file') }}">
    <button type="button" class="btn btn-secondary" id="btn-submit-rma-form" onclick="redirect('{{ path('rma_list') }}?search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}')">Retour page précédente</button>
{% endblock %}

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

    {% if status == 'submit' %}

        <script>window.location = window.location.href;</script>

    {% elseif status == 'ok' %}

        <h5 style="font-weight: 700; margin-bottom: 24px;">RMA {{ rma.code }}</h5>

        {{ form_start(form, {'attr' : {'id' : 'rma-files-form', 'autocomplete' : 'off'}}) }}
        {{ form_widget(form.certif, {'attr' : {'style' : 'display: none'}}) }}

            <div style="display: flex; flex-wrap: wrap;">
                <div class="form-group row">
                    {% if redirect == 'certificat_redirect' %}
                        <h5 style="margin-left: 1.3em;">Ajout d'un certificat</h5>
                        <div class="col-12" style="display: block; margin-left: 2em;">
                            {{ form_widget(form.rmaFiles) }}
                        </div>
                    {% else %}
                        <div class="col-12" style="display: block">
                            {{ form_widget(form.rmaFiles) }}
                        </div>
                    {% endif %}
                    <div class="col-12"  style= "display: block; margin-top: 20px; margin-left: 6px;">
                        <label for="rma_files_fileType"  >Visibilité du fichier : </label>
                        <div id="rma-files-visibility" style="padding-right: 20px;">
                            {{ form_widget(form.fileType, {'attr' : { 'style' : 'width: 40%;'}}) }}
                        </div>
                    </div>
                    <div class="col-12" style= "display: block; margin-top: 20px; margin-left: 6px;">
                        <button type="button" class="btn btn-primary" onclick="submitForm()"><i style="margin-right: 8px" class="fa fa-check"></i>Valider</button>
                    </div>
                </div>
            </div>
        {{ form_end(form) }}

        <div class="files-container-header">
            <h5>Liste des fichiers :</h5>
            {% if files|length == 0 %}
                <p>Aucun fichier</p>
            {% else %}
                <div class="file-container">
                    {% for file in files %}
                        <div class="file-view">
                            <div class="file-name">{{ file.originalFilename }}</div>
                            <div style="display: flex;">
                                {% if file.fileType == "CLIENT" %}
                                    <div class ="file-type" style="margin-right: 30px; margin-top: 2px;">Fichier visible par PLM et par le CLIENT</div>
                                {% else %}
                                    <div class ="file-type" style="margin-right: 33px; margin-top: 2px;">Fichier uniquement visible par PLM</div>
                                {% endif %}
                                <div class="file-date">{{ file.createdAt|date("d/m/Y") }}</div>
                                <div class="action-container">
                                    <button class="btn btn-secondary" onclick="generateFile('{{ file.fileName }}')"><i style="font-size: 18px;" class="fa fa-download"></i></button>
                                    <button class="btn btn-secondary" id="btn-modified-confirm" data-toggle="modal" data-target="#modal-modified-confirm" onclick="modifiedPopup('{{ file.fileName }}')"><i style="font-size: 18px;" class="fa fa-cog"></i></button>
                                    <button class="btn btn-secondary" id="btn-modal-delete-confirm" data-toggle="modal" data-target="#modal-large-delete-confirm" onclick="deletePopup('{{ file.fileName }}')"><i style="font-size: 18px;" class="fa fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

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

        </div>

    {% else %}

        <h4>Aucune RMA trouvée</h4>

    {% endif %}
{% endblock %}

{% block modal %}

    <div class="modal" id="modal-large-delete-confirm" 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>Êtes-vous sûr de vouloir supprimer ce fichier ?</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-modified-confirm" tabindex="-1" role="dialog" aria-labelledby="modal-large" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-header">
                            <h3 class="block-title">Modifier la visibilité du fichier</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="col-12"  style= "display: block; margin-top: 20px; margin-left: 6px;">
                            <label for="rma_files_fileType"  >Visibilité du fichier : </label>
                            <div id="rma-files-visibility" style="padding-right: 20px;">
                                <select class="form-control modified-type-file" style="width: 40%; margin: 10px 0px 20px 0px;">
                                    <option value="PLM">Fichier uniquement visible par PLM</option>
                                    <option value="CLIENT">Fichier visible par PLM et par le CLIENT</option>
                                </select>
                            </div>
                        </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-modified-file" class="btn btn-primary" 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">

        $(document).ready(function() {

            // detect enter keypress
            $('#rma-contact-form input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    return false
                }
            });
        });

        function submitForm() {
            var certif =  "{{ redirect }}";
            console.log(certif);
            if (certif == "certificat_redirect") {
                $('#rma_files_certif').val('OUI');
            }
            var form = document.getElementById('rma-files-form');
            if (form.checkValidity()) {
                form.submit();
            }
        }

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

        function generateFile(filename) {
            var url = '{{ path('rma_generate_file') }}';
            document.location = url + "?filename=" + filename;
        }

        function deletePopup(filename) {
            document.getElementById('btn-delete-file').setAttribute('onclick', "deleteFile('" + filename + "')")
        }

        function modifiedPopup(filename) {
            document.getElementById('btn-modified-file').setAttribute('onclick', "modifiedTypeFile('" + filename + "')")
        }

        function deleteFile(filename) {
            var url = '{{ path('rma_delete_file') }}';
            url = url + "?filename=" + filename + '&url={{ path('rma_files') }}&id={{app.request.get('id')}}&redirect={{app.request.get('redirect')}}';
            document.location = url;
        }

        function modifiedTypeFile(filename) {
            var newType = $("select.modified-type-file").children("option:selected").val();
            console.log(newType);
            $.ajax({
                url: $('#rma-modified-type-file').val(),
                type: 'GET',
                data: {
                    'filename' : filename,
                    'newType' : newType
                },
                success: function(data){
                    document.location.reload();
                }
            });
        }

    </script>
{% endblock %}