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

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

{% block title %}
    {{ parent() }}
    Fichiers Rep loc
{% 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) {
            #reploc_files_fileType {
                width: 100% !important;
            }
        }
        .reploc-input-file {
            padding: 4px;
            margin-right: 8px;
        }
        .files-container-header{
            margin-top: 24px;
        }
        .file-container{
            max-width: 70%;
            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;
        }
        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }
    </style>
{% endblock %}

{% block headerRight %}
    {{ parent() }}
    <button type="button" class="btn btn-secondary" id="btn-submit-reploc-form" onclick="redirect('{% if redirect == 'monitoring' %}{{ path('douchette_search_reploc') }}?searchString={{ reploc.code }}{% elseif redirect == 'overview' %}{{ path('reploc_overview') }}?id={{ reploc.id }}&search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}{% else %}{{ path('reploc_list') }}?search={{ search }}&filterStatus={{ filterStatus }}&filterDatePrev={{ filterDatePrev }}{% endif %}')">Retour page précédente</button>
{% endblock %}

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

    {% if status == 'submit' %}

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

    {% elseif status == 'ok' %}



        <div style="display: inline-flex">
            {% if reploc.isRep %}
                <h5 style="font-weight: 700; margin-bottom: 24px;">REPLOC {{ reploc.code }}</h5>
            {% else %}
                <h5 style="font-weight: 700; margin-bottom: 24px;">CALLOC {{ reploc.code }}</h5>
            {% endif %}
            <div class="certificat-info" style="display: none;font-weight: 700; margin-left: 3em">
                <h5>Ajout d'un certificat</h5>
            </div>
        </div>


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

        <div style="display: flex; flex-wrap: wrap;">
            <div class="form-group row">
                <div class="col-12" style="display: block">
                    {{ form_widget(form.repLocFiles) }}
                </div>
                <div style="display: none; margin-top: 1em; margin-left: 1em;" class="certif-intern-div col-12">
                    {{ form_widget(form.certifInterne) }}
                    <label for="rep_loc_files_certifInterne" style="margin-left: 12px; margin-bottom: 0!important; font-size: medium">Certificat Interne</label>
                </div>
                <div class="col-12 certificat-date-form" style="margin: 1em 0 1em 1em; display: none">
                    <label for="date-verification" style="margin-bottom: 0">Date de vérification : <span class="required-input-sign">*</span></label>
                    {{ form_widget(form.verificationDate, {'attr' : {'style' : 'border: none;background-color: #F1F2F5;'}}) }}
                    <label for="next-date-verification" style="margin-bottom: 0">Prochaine date de vérification : <span class="required-input-sign">*</span></label>
                    {{ form_widget(form.nextVerificationDate, {'attr' : {'style' : 'border: none;background-color: #F1F2F5;'}}) }}
                </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;">
                                <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-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 Rep Loc 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-reploc-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>

{% 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
            $('#reploc-contact-form input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    return false
                }
            });

            var certif =  "{{ redirect }}";
            if (certif === "certificat_redirect") {
                $('.certificat-info').css('display', 'block');
                $('.certificat-date-form').css('display', 'block');
                $('.certif-intern-div').css('display', 'inline-flex');
            }
        });

        $("#rep_loc_files_verificationDate").change(function () {
            $('#rep_loc_files_nextVerificationDate_day').val($("#rep_loc_files_verificationDate_day").val())
            $('#rep_loc_files_nextVerificationDate_month').val($("#rep_loc_files_verificationDate_month").val())
            var year = $("#rep_loc_files_verificationDate_year").val();
            year++;
            $('#rep_loc_files_nextVerificationDate_year').val(year)
        })

        function submitForm() {
            var certif =  "{{ redirect }}";
            if (certif === "certificat_redirect_generate" || certif === 'certificat_redirect')  {
                $('#rep_loc_files_certif').val('OUI');
            }
            var form = document.getElementById('reploc-files-form');
            if (form.checkValidity()) {
                form.submit();
            }
        }

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

        function generateFile(filename) {
            var url = '{{ path('reploc_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('reploc_delete_file') }}';
            url = url + "?filename=" + filename + '&url={{ path('reploc_files') }}&id={{app.request.get('id')}}&redirect={{app.request.get('redirect')}}';
            document.location = url;
        }

    </script>
{% endblock %}