{% 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 équipes</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 équipes</div>
                                <div class="col-1"></div>
                                <button class="btn btn-primary col-2" onclick="createTeam()">Ajouter une équipe</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="teams" class="table table-striped w-100">
                                <thead>
                                <tr role="row">
                                    <th></th>
                                    <th>ID</th>
                                    <th>Nom</th>
                                    <th>Etablissement</th>
                                    <th>Responsable</th>
                                    <th>Active</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for team in teams %}
                                    <tr id="select-{{ team.id }}")>
                                        <td><input type="checkbox" disabled/></td>
                                        <td><span class="">{{ team.id }}</span></td>
                                        <td><span class="">{{ team.name }}</span></td>
                                        <td><span class="">{{ team.agency.name }}</span></td>
                                        <td><span class="">{{ team.manager.username }}</span></td>
                                        <td>
                                            <span class="">{{ team.isActive ? "<input type='checkbox' checked disabled/>" : "<input type='checkbox' disabled/>" }}</span>
                                        </td>
                                        <td>
                                            <div id="" class="invoice-action" onclick="event.stopPropagation();">
                                                <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="seeTeam({{ team.id }})"><i
                                                                    class="bx bx-show mr-1"></i> Voir</a>
                                                        <a class="dropdown-item" onclick="editTeam({{ team.id }})"><i
                                                                    class="bx bx-edit-alt mr-1"></i> edit</a>
                                                        <a class="dropdown-item"
                                                           href="{{ path('teamCompanyDelete', {id : team.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="createTeam" style="display: none"><!-- invoice list -->
                    {{ form_start(form) }}
                    <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'une équipe
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="Text row">
                                <div class="col-12">
                                    <p class="Size-3 Black">Informations générales</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom de l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(form.name) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Etablissement lié</div>
                                        <div class="ml-auto mr-0" id="establishment-card-1">
                                            {{ form_widget(form.agency) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Responsable de l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(form.manager) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Utilisateurs liés à l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(form.users) }}
                                        </div>
                                    </div>
                                    {{ form_row(form.save) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ form_end(form) }}
                </div>
                <div class="content-body" id="seeTeam" style="display: none"><!-- invoice list -->
                    <div class="row">
                        <div class="col-12">
                            <div class="Text mt-5 mb-2">
                                <div class="Size-2" id="team-name">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-12">
                            <div class="Text row">
                                <div class="col-12">
                                    <p class="Size-3 Black">Informations</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Etablissement lié</div>
                                        <div class="ml-auto mr-0" id="team-agency">
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom du manager de l'équipe</div>
                                        <div class="ml-auto mr-0" id="team-manager">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <p class="Size-3 Black">Membre de l'équipe</p>
                                    <div id="team-users">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-body" id="editTeam" 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'une équipe
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12">
                            <div class="Text row">
                                <div class="col-12">
                                    <p class="Size-3 Black">Informations générales</p>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Nom de l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-0">
                                            {{ form_widget(formEdit.name) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Etablissement lié</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>Responsable de l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-2">
                                            {{ form_widget(formEdit.manager) }}
                                        </div>
                                    </div>
                                    <div class="d-flex mt-1 mb-1">
                                        <div>Utilisateurs liés à l'équipe</div>
                                        <div class="ml-auto mr-0" id="establishment-card-3">
                                            {{ form_widget(formEdit.users) }}
                                        </div>
                                    </div>
                                    {{ form_row(formEdit.save) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ form_end(formEdit) }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script>
        let selectedTeam = null;
        var languages = [
            {
                "language": "jQuery",
                "value": 122
            },
            {
                "language": "AngularJS",
                "value": 132,
                "disabled": true
            },
            {
                "language": "ReactJS",
                "value": 422
            },
            {
                "language": "VueJS",
                "value": 232
            },
            {
                "language": "JavaScript",
                "value": 765
            },
            {
                "language": "Java",
                "value": 876
            },
            {
                "language": "Python",
                "value": 453
            },
            {
                "language": "TypeScript",
                "value": 125,
                "selected": true
            },
            {
                "language": "PHP",
                "value": 633
            },
            {
                "language": "Ruby on Rails",
                "value": 832
            }
        ];

        var groupData = [
            {
                "groupName": "JavaScript",
                "groupData": [
                    {
                        "language": "jQuery",
                        "value": 122
                    },
                    {
                        "language": "AngularJS",
                        "value": 643
                    },
                    {
                        "language": "ReactJS",
                        "value": 422
                    },
                    {
                        "language": "VueJS",
                        "value": 622
                    }
                ]
            },
            {
                "groupName": "Popular",
                "groupData": [
                    {
                        "language": "JavaScript",
                        "value": 132
                    },
                    {
                        "language": "Java",
                        "value": 112
                    },
                    {
                        "language": "Python",
                        "value": 124
                    },
                    {
                        "language": "TypeScript",
                        "value": 121
                    },
                    {
                        "language": "PHP",
                        "value": 432
                    },
                    {
                        "language": "Ruby on Rails",
                        "value": 421
                    }
                ]
            }
        ];

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

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

        function editTeam(id) {
            document.getElementById("list").style.display = "none";
            document.getElementById("editTeam").style.display = "block";
            let users = [];
            {% for team in teams %}
            if ("{{ team.id }}" == id )
            {
                selectedTeam = {
                    id: "{{ team.id }}",
                    name: "{{ team.name }}",
                    agency: "{{ team.agency.id }}",
                    manager: "{{ team.manager.id }}"
                };
                {% for tp in team.getTeamParticipants() %}
                users.push("{{ tp.user.username }}");
                {% endfor %}
            }
            {% endfor %}
            $('#team_edit_id').val(id);
            $('#team_edit_name').val(selectedTeam.name);
            $('#team_edit_agency').select(selectedTeam.agency);
            $('#team_edit_manager').select(selectedTeam.manager);
            for (var i = 0; i < users.length; i++) {
                $('#team_edit_users').select(users[i].id);
            }
        }

        function seeTeam(id) {
            document.getElementById("list").style.display = "none";
            document.getElementById("seeTeam").style.display = "block";
            let users = [];
            {% for team in teams %}
            if ("{{ team.id }}" == id )
            {
                selectedTeam = {
                    id: "{{ team.id }}",
                    name: "{{ team.name }}",
                    agency: "{{ team.agency.name }}",
                    manager: "{{ team.manager.username }}"
                };
                {% for tp in team.getTeamParticipants() %}
                   users.push("{{ tp.user.username }}");
                {% endfor %}
            }
            {% endfor %}
            document.getElementById("team-name").innerHTML = "<i class=\"bx bx-arrow-back Size-2\" onclick=\"backToList()\"></i>" + selectedTeam.name;
            document.getElementById("team-agency").innerHTML = selectedTeam.agency;
            document.getElementById("team-manager").innerHTML = selectedTeam.manager;
            for (var i = 0; i < users.length; i++) {
                document.getElementById("team-users").append(users[i] + "\n");
            }
        }

        function backToList() {
            document.getElementById("list").style.display = "block";
            document.getElementById("createTeam").style.display = "none";
            document.getElementById("seeTeam").style.display = "none";
            document.getElementById("editTeam").style.display = "none";
        }

        $(document).ready(function () {
            var table = $("#teams").DataTable({
                iDisplayLength: -1,
                paging: false,
                info: false,
                "oLanguage": {
                    "sSearch": "Rechercher",
                    "emptyTable": "Aucune donnée disponible pour le moment"
                },
                columnDefs: [
                    {
                        targets: "_all",
                        className: 'text-center',
                    },
                ]
            });
            var settings = {
                groupDataArray: groupData,
                // or
                dataArray: languages
            };
            const dualselect = jQuery('.doublebox').dualselect({
                // options here
            });
            displayOn();
        });
    </script>

{% endblock %}