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

{% block title %}admin - CompanyInformation{% endblock %}

{% block body %}

    <div id="loader">
        <div class="loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>
    <div id="management" class="Page">
        <div>
            {% include '/management/top_menu.html.twig' %}
        </div>
        {% for message in app.flashes('success') %}
            <div class="alert alert-success position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('warning') %}
            <div class="alert alert-warning position-absolute" style="width: 100% !important; z-index: 3000">
                {{ message }}
            </div>
        {% endfor %}
        <div class="d-flex w-100" style="min-height: calc(100vh - 5rem - 85px)">
            {% include '/management/Network/vertical_menu.html.twig' %}
            <div class="col-10">
                <div class="content-body" id="editUser"><!-- invoice list -->
                    <div class="row">
                        <div class="col-12">
                            <div class="Text mt-5 mb-2">
                                <div class="Size-2 Bold">Documents à valider
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="row">
                            <div class="table-responsive">
                            <table id="documentsTab" style="width:100%" class="table table-striped compact">
                                <thead>
                                    <tr role="row">
                                        <th>Société</th>
                                        <th>Type de document</th>
                                        <th>Statut</th>
                                        <th>Valider</th>
                                        <th>Refuser</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   {% for document in documents %}
                                        <tr class="Black">
                                            <td>{{ document.company.name }}</td>
                                            <td><a class="cursor-pointer" target="_blank" href="{{ "/" ~ document.path ~ document.filename }}">{{ document.name }}</a></td>
                                            <td>{{ document.statut }}</td>
                                            <td><button onclick="validDocument({{ document.id }})" class="btn"><i class="bx bx-check Size-2" style="color: green"></i></button></td>
                                            <td><button href="{{ path('networkDocumentRefuse', { id: document.id }) }}" class="btn"><i class="bx bx-x Size-2" style="color: var(--color-red-primary)"></i></button></td>
                                        </tr>
                                        {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jquery_dialog" id="dialog-confirm" title="Validation du document">
          <label for="date">Entrez la date de validité du document</label>
          <input id="date" name="date" class="form-control" type="date"/>
        </div>
    </div>
    {% endblock %}

    {% block javascripts %}
        <script>
            function validDocument(id)
            {
                $( "#dialog-confirm" ).css("display", "block");
                $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height: "auto",
                    width: 400,
                    modal: true,
                    buttons: {
                        "Valider": function() {
                            let url = "{{ path('networkDocumentValid', { 'id': 'value' }) }}";
                            url = url.replace("value", id);
                            $.ajax({
                                method: "POST",
                                url: url,
                                data: {
                                    date: $("#date").val()
                                },
                                success: function (responses) {
                                    location.reload();
                                },
                            })
                            $(this).dialog( "close" );
                        },
                        "Refuser": function() {
                          $( this ).dialog( "close" );
                        }
                    }
                });
            }

            function displayOn()
            {
                document.getElementById("loader").style.display = "none";
                document.getElementById("management").style.display = "block";
            }

            $(document).ready(function () {
                var table = $("#documentsTab").DataTable({
                    iDisplayLength: -1,
                    paging: false,
                    language: {
                        url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                    },
                    "sScrollY": "500px",
                    info: false,
                    "searching": false,
                    columnDefs: [
                        {
                            targets: "_all",
                            className: 'text-center',
                        },
                        {
                            targets: "_all",
                            className: 'dt-head-center',
                        },
                    ]
                });
                displayOn();
            });
        </script>

    {% endblock %}