{% 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>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <section id="clients" class="ml-auto mr-auto width-95-per Black">
                                <!-- create invoice button-->
                                <!-- Options and filter dropdown button-->
                                <div class="table-responsive" style="height: 650px !important;">
                                    <table id="agencies-list" class="table table-striped compact w-100">
                                        <thead>
                                            <tr>
                                                <th>ID Client</th>
                                                <th>Nom Client</th>
                                                <th>Contact</th>
                                                <th>Code Postal</th>
                                                <th>Ville</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for agency in agencies %}
                                                <tr id="select-{{ agency.id }}" onclick="adminCompany('{{ agency.company.id }}')" class="cursor-pointer">
                                                    <td><span class="">{{ agency.id }}</span></td>
                                                    <td><span class="">{{ agency.company.name }} - {{ agency.name }}</span></td>
                                                    <td><span class="">{{ agency.agencyParticipants|length > 0 ? agency.agencyParticipants[0].user.username : "Aucun utilisateur" }}</span></td>
                                                    <td><span class="">{{ agency.place.postcode }}</span></td>
                                                    <td><span class="">{{ agency.place.city }}</span></td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>

        function adminCompany(id)
        {
            var route = "{{ path('manageCompanyInformation', {'id': "id" }) }}";
            route = route.replace("id", id);
            console.log(route);
            window.location.replace(route);
        }

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

        $(document).ready(function () {
            var table = $("#agencies-list").DataTable({
                "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
                iDisplayLength: -1,
                "lengthChange": false,
                paging: true,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1
                },
                fixedHeader: true,
                "sScrollY": "500px",
                "pageLength": 10,
                info: false,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                    {
                        targets: "_all",
                        className: 'dt-head-center',
                    },
                ],
            });

            displayOn();
        });
    </script>

{% endblock %}