{% 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/Users/vertical_menu.html.twig' %}
            <div class="col-10">
                <div class="content-body" id="list"><!-- invoice list -->
                    <section id="establishment-list" class="ml-auto mr-auto width-95-per Black">
                        <div class="mt-5 mb-2">
                            <div class="Size-2 Bold">Gestion des utilisateurs</div>
                        </div>
                        <!-- create invoice button-->
                        <div class="mt-2 mb-2">
                            <div class="d-flex h-100">
                                <div class="col-2 align-self-center">Liste des utilisateurs</div>
                                <div class="col-1"></div>
                                <button class="btn btn-primary col-2" onclick="createUser()">Ajouter un utilisateur</button>
                                <div class="col-1"></div>
                                <button class="btn btn-primary col-2">Importer</button>
                            </div>
                        </div>
                        <!-- Options and filter dropdown button-->
                        <div class="table-responsive bg-white">
                            <table id="users" class="table table-striped w-100">
                                <thead>
                                <tr role="row">
                                    <th></th>
                                    <th>ID</th>
                                    <th>Nom - Prénom</th>
                                    <th>Etablissement lié</th>
                                    <th>Equipe liée</th>
                                    <th>Actif</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for user in users %}
                                    <tr id="select-{{ user.id }}">
                                        <td><input type="checkbox"/></td>
                                        <td><span class="">{{ user.id }}</span></td>
                                        <td><span class="">{{ user.username }}</span></td>
                                        <td><span class="">{{ user.agencyParticipants|length > 0 ? user.agencyParticipants|length > 1 ? "Plusieurs établissements" : user.agencyParticipants[0].agency.name : "Lié a aucun établissement" }}</span></td>
                                        <td><span class="">{{ user.teamParticipants|length > 0 ? user.teamParticipants[0].team.name : "Aucune équipe" }}</span></td>
                                        <td><input type="checkbox"/></td>
                                        <td>
                                            <div id="" class="invoice-action" onclick="">
                                                <div class="dropdown">
                                                    <span class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                                                          data-toggle="dropdown" aria-haspopup="true"
                                                          aria-expanded="true" role="menu"></span>
                                                    <div class="dropdown-menu dropdown-menu-right"
                                                         x-placement="bottom-end"
                                                         style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-125px, 19px, 0px);">
                                                        <a class="dropdown-item" onclick="editUser({{ user.id }})"><i
                                                                    class="bx bx-edit-alt mr-1"></i> edit</a>
                                                        <a class="dropdown-item"
                                                           href="{{ path('userCompanyDelete', {id : user.id }) }}"><i
                                                                    class="bx bx-trash mr-1"></i> delete</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </section>
                </div>
                <div class="content-body" id="createUser" style="display: none"><!-- invoice list -->
                    {{ form_start(formCreate) }}
                    <div class="row">
                        <div class="col-12">
                            <div class="Text mt-5 mb-2">
                                <div class="Size-2"><i class="bx bx-arrow-back Size-2" onclick="backToList()"></i>Création
                                    d'un utilisateur
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="Text row">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations générales</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formCreate.lastname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Prénom</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formCreate.firstname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Civilité</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(formCreate.gender) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Date de naissance</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(formCreate.birthdate) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="Text row">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations de contact</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Téléphone fixe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formCreate.phone) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Téléphone portable</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formCreate.mobile) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Email</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(formCreate.email) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations professionelles</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Poste occupé</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formCreate.position) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Equipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formCreate.team) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Etablissement</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formCreate.agency) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Role</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(formCreate.type) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{ form_row(formCreate.save) }}
                        </div>
                    </div>
                    {{ form_end(formCreate) }}
                </div>
                <div class="content-body" id="editUser" style="display: none"><!-- invoice list -->
                    {{ form_start(formEdit) }}
                    <div class="row">
                        <div class="col-12">
                            <div class="Text mt-5 mb-2">
                                <div class="Size-2"><i class="bx bx-arrow-back Size-2" onclick="backToList()"></i>Edition
                                    d'un utilisateur
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="Text row">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations générales</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formEdit.lastname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Prénom</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formEdit.firstname) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Civilité</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(formEdit.gender) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Date de naissance</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(formEdit.birthdate) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="Text row">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations de contact</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Téléphone fixe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formEdit.phone) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Téléphone portable</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formEdit.mobile) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Email</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(formEdit.email) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <p class="Size-3 Black">Informations professionelles</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Poste occupé</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formEdit.position) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Agence</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(formEdit.agency) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Role</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(formEdit.type) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{ form_row(formEdit.save) }}
                        </div>
                    </div>
                    {{ form_end(formEdit) }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        var selectedUser;
        let test;

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

        function createUser() {
            document.getElementById("list").style.display = "none";
            document.getElementById("createUser").style.display = "block";
        }

        function editUser(id) {
            document.getElementById("list").style.display = "none";
            document.getElementById("editUser").style.display = "block";
            $('#user_edit_id').val(id);

            let users = [];
            {% for user in users %}
            if ("{{ user.id }}" == id )
            {
                selectedUser = {
                    id: "{{ user.id }}",
                    firstname: "{{ user.firstname }}",
                    lastname: "{{ user.lastname }}",
                    gender: "{{ user.gender }}",
                    birthdate: "{{ user.birthdate ? user.birthdate | date("Y-m-d") : "" }}",
                    phone: "{{ user.phone }}",
                    mobile: "{{ user.mobile }}",
                    email: "{{ user.email }}",
                    position: "{{ user.position }}",
                    agency: "{{ user.agencyParticipants|length > 0 ? user.agencyParticipants[0].agency.id : "" }}",
                    type: "{{ user.type }}",

                };
            }
            {% endfor %}
            $('#user_edit_firstname').val(selectedUser.firstname);
            $('#user_edit_lastname').val(selectedUser.lastname);
            $('#user_edit_gender').val(selectedUser.gender);
            $('#user_edit_birthdate').val(selectedUser.birthdate);
            $('#user_edit_phone').val(selectedUser.phone);
            $('#user_edit_mobile').val(selectedUser.mobile);
            $('#user_edit_email').val(selectedUser.email);
            $('#user_edit_position').val(selectedUser.position);
            $('#user_edit_agency').val(selectedUser.agency);
            selectedUser.type ? $('#user_edit_type>option:eq(0)').attr('selected', true) : $('#user_edit_type').val(selectedUser.type);
        }

        function backToList() {
            document.getElementById("list").style.display = "block";
            document.getElementById("createUser").style.display = "none";
            document.getElementById("editUser").style.display = "none";
        }

        $(document).ready(function () {
            var table = $("#users").DataTable({
                iDisplayLength: -1,
                paging: false,
                info: false,
                "oLanguage": {
                    "sSearch": "Rechercher",
                    "emptyTable": "Aucune donnée disponible pour le moment"
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                ]
            });
            displayOn();
        });
    </script>

{% endblock %}