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

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

{% block title %}
    {{ parent() }}
    Gestion des Utilisateurs
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />

    <style>
        tr.group,
        tr.group:hover {
            background-color: #737FAD!important;
            font-weight: 900
        }
        .button-filter:hover {
            background-color: #6A759E!important;
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
        .btn-info {
            background-color: #7D8BBF!important;
            border-color: #ffffff!important;
        }
        #user_edit_services {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .block-filter-create-user {
            display: flex;
            justify-content: space-between;
        }
        .user-autocomplete-client{
            position: absolute!important;
            top: 34px!important;
        }
        .user-autocomplete-contact{
            position: absolute!important;
            top: 34px!important;
        }

        .div-button-add-user {
            margin-top: 1em;
            justify-content: center;
            display: flex;
        }
        .button-add-user {
            background-color: white!important;
        }
        .button-add-user:hover {
            background-color: #7D8BBF!important;
            color: white!important;
        }
        .btn-send-create-user {
            color: #008d11!important;
            border-color: #008d11!important;
        }
        .btn-send-create-user:hover {
            background-color: #008d11!important;
            color: white!important;
        }

        .btn-close-create-user {
            color: #b60000!important;
            border-color: #b60000!important;
        }
        .btn-close-create-user:hover {
            background-color: #b60000!important;
            color: white!important;
        }
    </style>
{% endblock %}

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

    <!-- Dynamic Table Full -->
    <div class="block" style="overflow: hidden;">
        <div  style="height: 100%; position: relative" class="block-header block-header-default bg-gray">
            <h4 class="font-w700" id="number-rma" style="margin: 0; display: -webkit-box">
                {{ users | length }} Utilisateurs
            </h4>
            <div>
                <div class="block-content">
                    <input type="text" id="search-client-url" value="{{ path('user_search_client') }}" style="display: none">
                    <div class="form-group row select-user" style="display: none;">
                        <label class="col-12">Séléctionner un client</label>
                        <div class="col-12" style="display: inline-flex">
                            <input type="hidden" id="user-client-code" name="user-client-code" value="" />
                            <input type="hidden" id="user-client-name-value" name="user-client-name-value" value="" />
                            <input type="hidden" id="user-client-agence" name="user-client-agence" value="" />
                            <input type="hidden" id="user-client-colleague-first-name" name="user-client-colleague-first-name" value="" />
                            <input type="hidden" id="user-client-colleague-name" name="user-client-colleague-name" value="" />
                            <input type="hidden" id="user-client-colleague-email" name="user-client-colleague-email" value="" />
                            <input id="user-client-name" name="user-client-name" class="form-control" type="text" autofocus="true" autocomplete="off"/>
                            <div style="position: absolute; top: 34px;" id="user-autocomplete-client"></div>
                        </div>
                    </div>
                    <div id="input-contact-container" style="display: none;">
                        <div id="user-select-contact-field" class="form-group row" style="display: none">
                            <label class="col-12">Séléctionner un contact</label>
                            <div class="col-12" style="display: inline-flex">
                                <input type="hidden" id="user-contact-code" name="user-contact-code" value="" />
                                <input type="hidden" id="user-contact-id" name="user-contact-id" value="" />
                                <input onkeyup="userSearchContact()" id="user-contact-name" name="user-client-name" class="form-control" type="text" autocomplete="off"/>
                                <div style="position: absolute; top: 34px;" id="user-autocomplete-contact"></div>
                            </div>
                            <div class="col-12 div-button-add-user">
                                <button class="btn btn-outline-secondary button-add-user" onclick="openPopipCreateUser()">Créer l'utilisateur</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="block-content block-content-full">
            <div class="block-filter-create-user">
                <div>
                    <p style="font-size: medium; margin: 0;">Ajout d'un utilisateur uniquement avec le filtre CLIENT</p>
                </div>
                <div style="text-align: right;margin-bottom: 10px;">
                    <button type="button" style="margin-left:5px; margin-right: -4px;{% if filterType == 'PLM' %};background-color: #50597C!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByType('PLM')">PLM</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'CLIENT' %};background-color: #50597C!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByType('CLIENT')">CLIENT</button>
                    <button type="button" style="border-radius: 0;margin-right: -4px;{% if filterType == 'ALL' %};background-color: #50597C!important;{%  endif %}" class="btn btn-sm btn-info button-filter" onclick="filterByType('ALL')">VOIR TOUT</button>
                    <input type="hidden" id="filter-type" name="filter-type" value="{{ filterType }}" />
                </div>
            </div>
            <!-- DataTables functionality is initialized with .js-dataTable-full class in js/pages/be_tables_datatables.min.js which was auto compiled from _es6/pages/be_tables_datatables.js -->
            <table class="table table-bordered table-vcenter js-dataTable-full" style="background-color: white">
                <thead>
                <tr>
                    <th style="max-width: 60px">Nom Prénom</th>
                    <th style="max-width: 60px">Email</th>
                    <th style="max-width: 150px!important">Fonctionnalités</th>
                    <th style="max-width: 50px">Action</th>
                </tr>
                </thead>
                <tbody>

                {% for user in users %}
                    <tr>
                        <td class="d-none d-sm-table-cell" style="text-align: center;max-width: 60px!important">{{ user.name }} {{ user.firstname }}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;max-width: 60px!important">{{ user.email }}</td>
                        <td class="d-none d-sm-table-cell" style="text-align: center;max-width: 150px!important;padding-left: 4px; padding-right: 1px">
                            {% for userservice in user.services %}
                                {{ userservice.service.getName() }}<br>
                            {% endfor %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="max-width: 50px!important; text-align: center">
                            <button class="btn btn-outline-secondary button-filter" style="width: 98.14px;" onclick="openPopipEditUser('{{user.id}}', '{{ user.name }}', '{{ user.firstname }}')">Editer</button>
                            <button class="btn btn-outline-danger" style="margin-top: 1em" onclick="deleteUserModal('{{user.id}}', '{{ user.name }}', '{{ user.firstname }}')">Supprimer</button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->

    <button type="button" id="btn-modal-edit-user" class="btn" data-toggle="modal" data-target="#modal-edit-user" style="display: none"></button>
    <button type="button" id="btn-modal-delete-user" class="btn" data-toggle="modal" data-target="#modal-large-delete" style="display: none"></button>
    <button type="button" id="btn-modal-create-user" class="btn" data-toggle="modal" data-target="#modal-create-user" style="display: none"></button>

{% endblock %}

{% block modal %}

    <div class="modal fade" id="modal-create-user" tabindex="-1" role="dialog" aria-labelledby="modal-create-user" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="border-radius: 5px;">
                <div class="modal-header">
                    <h4 id="create-user-title"></h4>
                    <input type="hidden" id="create-user-id">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content-create-user" style="padding: 0px 20px 1px!important;">
                        <div class="block-content" style="font-size: large">
                            Êtes-vous sûr de vouloir ajouter cet utilisateur ?
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: center; margin-bottom: 1em;">
                    <button type="button" class="btn btn-outline-primary btn-send-create-user" onclick="sendAddUser()" style="margin-right: 1em">Envoyer la demande</button>
                    <button type="button" class="btn btn-outline-secondary btn-close-create-user" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-edit-user" tabindex="-1" role="dialog" aria-labelledby="modal-edit-user" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document" style="justify-content: center; display: flex;">
            <div class="modal-content" style="border-radius: 5px; width: 100%">
                <div class="modal-header">
                    <h5 class="user-title" id="user-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content">
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-large-delete" 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">
                <div class="modal-header">
                    <h4 id="delete-user-title"></h4>
                    <input type="hidden" id="delete-user-id">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="block block-rounded">
                    <div class="block-content" id="modal-content-create-user" style="padding: 0px 20px 1px!important;">
                        <div class="block-content" style="font-size: large">
                            <p>Etes vous sûr de vouloir supprimer definitivement cet utilisateur ?</p>
                        </div>
                    </div>
                </div>
                <div style="display: flex; justify-content: center; margin-bottom: 1em;">
                    <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-outline-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-outline-danger btn-send-delete-user" style="margin-left: 1em;" onclick="deleteUser()" >Supprimer</button>
                </div>
            </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 src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>

    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">

        var tableArticle = $(".js-dataTable-full");
        $(document).ready(function() {
            $('[data-toggle="popover"]').popover({
                trigger: 'hover',
                html: true,
                content: function () {
                    return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
                },
                title: 'Toolbox'
            })
            tableArticle.DataTable({
                fixedHeader: true,
                "paging": false,
                "order": [[ 0, "desc" ]],
                "search": {"search": "{{ search }}"},
                columnDefs:[
                    {orderable:false,targets:[3]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun utilisateurs",
                    "zeroRecords": "La recherche ne donne aucun résultat"
                }
            });

            $('#DataTables_Table_0_filter input').focus();

            // detect enter keypress
            $('#DataTables_Table_0_filter input').keypress(function(e) {
                var keycode = (e.keyCode ? e.keyCode : e.which);
                if (keycode == '13') {
                    $('#DataTables_Table_0_filter input').select();
                }
            })
            $('#DataTables_Table_0_filter input').keydown(function(e) {
                setTimeout(
                    function()
                    {
                        var lengthData= tableArticle[0].rows.length;
                        if (tableArticle[0].rows[1].innerText == "La recherche ne donne aucun résultat")
                            lengthData = 1;
                        $('#number-rma').text(lengthData - 1 + ' Utilisateurs');
                    }, 100);
            })

            var filterType = "{{ filterType }}"
            if (filterType === 'CLIENT') {
               $('.select-user').css('display', 'block');
            }

            var contact = "{{ searchContactLabel }}"
            var client = "{{ searchEntity }}"
            var userId = "{{ searchId }}"

            if (userId !== '') {
                $("#user-contact-id").val(userId);
            }
            if (client !== '') {
                var arrayClient = client.split(' - ');
                $("#user-client-name").val(client);
                $("#user-client-code").val(arrayClient[0]);
                $("#user-client-name-value").val(arrayClient[1]);
            }
            if (contact !== '') {
                $("#input-contact-container").css('display', 'block');
                $("#user-select-contact-field").css('display', 'block');
                $("#user-contact-name").val(contact);
            }
        });

        function filterByType(type) {

            $('#filter-type').val(type);

            path = "{{ path('user_tab') }}?filterType=" + type;
            var searchString = $("#DataTables_Table_0_filter input").val();
            if(searchString !== "") {
                path = path + "&search=" + searchString;
            }
            window.location.href = path;
        }

        function deleteUserModal(id, name, firstname) {

            $('#delete-user-title').html(name + ' ' + firstname);
            $('#delete-user-id').val(id);
            $('#btn-modal-delete-user').click();

        }

        function openPopipEditUser(id, name, firstname) {

            $('#user-title').html(name + ' ' + firstname);
            $('#modal-content-files').html('');

            //requet ajax pour recupérer le contenu
            var url = '{{ path('edit_user') }}';

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'userId': id
                },
                success: function(data){
                    $('#modal-content').html(data);
                }
            });

            $('#btn-modal-edit-user').click();

        }

        function openPopipCreateUser() {
            var userName = $('#user-contact-name').val();
            var userId = $('#user-contact-id').val();
            userName = 'Ajout de l\'utilisateur : ' + userName.split(' - ')[0];
            $('#create-user-title').html(userName);
            $('#create-user-id').val(userId);
            $('#btn-modal-create-user').click();
        }

        var inputClient = $('#user-client-name');

        inputClient.on('keyup', function () {
            //clearTimeout(clientTypingTimer);
            userSearchClient();
            displayClientSuggestions(1)
        });
        inputClient.on('keydown', function () {
            //clearTimeout(clientTypingTimer);
            displayClientSuggestions(1)
        });
        inputClient.focusin(function() {
            displayClientSuggestions(1)
        });
        inputClient.focusout(function() {
            displayClientSuggestions(0)
        });

        // function emptyClient() {
        inputClient.change(function() {
            if(!$("#user-client-name").val()) {
                $("#user-contact-name").val('');
            }
        });

        function userSearchClient(){

            // var url = $('#search-client-url').val()
            var term = $('#user-client-name').val();

            if (term.length > 0) {

                $.ajax({
                    url: "{{ path('user_search_client') }}",
                    dataType: "html",
                    data: {
                        term: term
                    },
                    success: function( data ) {

                        $("#user-client-name").autocomplete({
                            source:eval(data),
                            delay: 0,
                            minLength : 3,
                            select: function (event, ui) {

                                $("#user-client-code").val(ui.item.code);

                                $("#user-client-name").val(ui.item.label);
                                $("#user-client-name-value").val(ui.item.name);
                                $("#user-client-agence").val(ui.item.agence);
                                $("#user-client-colleague-first-name").val(ui.item.colleagueFirstName);
                                $("#user-client-colleague-name").val(ui.item.colleagueName);
                                $("#user-client-colleague-email").val(ui.item.colleagueEmail);
                                displayInputContact();
                            }
                        });
                    }
                });
            }
            displayClientSuggestions(1)
        }

        function displayClientSuggestions(status) {

            var suggestions = document.getElementsByClassName("ui-menu")[0];
            if (suggestions != undefined) {

                document.getElementById("user-autocomplete-client").innerHTML = "";
                document.getElementById("user-autocomplete-client").appendChild(suggestions)

                if(status == 1) {
                    suggestions.style.display = 'block';
                }
                else {
                    suggestions.style.display = 'none';
                }
            }
        }

        var inputContact = $('#user-contact-name');

        inputContact.on('keyup', function () {
            userSearchContact();
            displayContactSuggestions(1)
        });
        inputContact.on('keydown', function () {
            displayContactSuggestions(1)
        });
        inputContact.focusin(function() {
            displayContactSuggestions(1)
        });
        inputContact.focusout(function() {
            displayContactSuggestions(0)
        });

        function userSearchContact() {

            if($('#user-client-code').val() != '') {

                var term = $('#user-contact-name').val();

                if (term.length > 0) {

                    $.ajax({
                        url: "{{ path('user_search_contact') }}",
                        dataType: "html",
                        data: {
                            clientId: $('#user-client-code').val()
                        },
                        success: function (data) {

                            $("#user-contact-name").autocomplete({
                                source: eval(data),
                                delay: 0,
                                select: function (event, ui) {

                                    $("#user-contact-code").val(ui.item.code);
                                    $("#user-contact-email").val(ui.item.email);
                                    var label = ui.item.label;
                                    if (label[0] === 'X' && label[1] === ' ') {
                                        label = label.substr(2, label.length)
                                    }
                                    $("#user-contact-name").val(label);
                                    $("#user-contact-fullname").val(ui.item.fullName);
                                    $("#user-contact-id").val(ui.item.id);
                                    submitClientEmail(ui.item.email, label);
                                }
                            });
                        }
                    });
                }
                displayContactSuggestions(1)
            }
            else {
                displayInputContact();
            }
        }

        function displayInputContact() {
            var contactContainer = document.getElementById('input-contact-container')

            if($('#user-client-code').val() != '') {
                contactContainer.style.display = "block"
                $('#user-type-contact-field').css('display', 'none')
                $('#user-select-contact-field').css('display', 'block')
            }
            else {
                contactContainer.style.display = "none"
            }
        }

        function displayContactSuggestions(status) {

            var contactLabel = '{{ searchContactLabel }}';
            if (contactLabel === '') {
                var suggestions = document.getElementsByClassName("ui-menu")[1];
            }
            else {
                suggestions = document.getElementsByClassName("ui-menu")[0];
            }
            if (suggestions != undefined) {
                document.getElementById("user-autocomplete-contact").innerHTML = "";
                document.getElementById("user-autocomplete-contact").appendChild(suggestions)

                if(status == 1) {
                    suggestions.style.display = 'block';
                }
                else {
                    suggestions.style.display = 'none';
                }
            }
        }

        function submitClientEmail(email, label) {

            var type = $('#filter-type').val();
            var client = $("#user-client-name").val();
            var id = $("#user-contact-id").val();

            path = "{{ path('user_tab') }}?filterType=" + type;
            var searchString = $("#DataTables_Table_0_filter input").val();
            if(searchString !== "") {
                path = path + "&search=" + searchString;
            }
            if (email) {
                path = path + "&searchContact=" + email;
            }
            if (label) {
                path = path + "&searchContactLabel=" + label;
            }
            if (client) {
                path = path + "&searchEntity=" + client
            }
            if (id) {
                path = path + "&searchId=" + id
            }

            window.location.href = path;

        }

        function userCreateSearchContact() {

        }

        function sendAddUser() {
            $('#btn-modal-create-user').click();
            var id = $('#user-contact-id').val();
            redirect("{{ path('add_user_webclient') }}?id=" + id);
        }

        function deleteUser(){
            userId = $('#delete-user-id').val();
            redirect("{{ path('delete_user') }}?id=" + userId);
        }

        function redirect(url) {
            window.location.replace(url);
        }
    </script>
{% endblock %}