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

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

{% block title %}
    {{ parent() }}
    Editer Utilisateur
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />
    <style>
        .row {
            diasplay: flex;
            margin-bottom: 4px;
            margin-left: 0!important;
            margin-bottom: 10px;
            padding-left: 5px;
            font-size: 14px;
        }

        .edit-user, .edit-client, .edit-user-client {
            height: 100%;
            width: 40%;
        }

        #user_edit_service {
            text-align: left;
            width: 5px;
        }

        label[for^="user_edit_services"],
        label[for^="client_edit_services"],
        label[for^="client_edit_checkBox"] {
            display: block;
            margin : 5px 10px 15px 20px;
        }

        input {
            position: absolute;
        }

        #explanation-services-user {
            position: absolute;
            text-align: left;
            display: inline-flex;
            margin-top: 150px;
            margin-left: 300px;
        }

        #explanation-services-client {
            position: absolute;
            text-align: left;
            display: inline-flex;
            margin-top: 50px;
            margin-left: 300px;
        }

    </style>
{% endblock %}

{% block headerRight %}
    {{ parent() }}
    <button type="button" class="btn btn-secondary" id="btn-submit-rma-form" onclick="closeEditUser()">Retour page précédente</button>
{% endblock %}

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

    <input type="hidden" id="user_list" value="{{ path('user_list') }}">
    <input id="delete-user-url" type="hidden" value="{{ path('delete_user') }}?id=">
    {{ form_start(form, {'attr' : { 'id' : 'edit-user-form' }}) }}
    {{ form_widget(form.listNewServices, {'attr' : { 'style' : 'display : none;'}})}}
    {% if isClient == 0 %}
        {{ form_widget(form.listUserClient, {'attr' : { 'style' : 'display : none;'}})}}
    {% endif %}

    <div id="main-block" class="block">
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    {% if user.isClient %}
                        <h3 style="font-size: 18px;" class="block-title">Editer le client {{ user.username }}</h3>
                        <div style="display: block;">{{ user.email }} <br> {{ user.customerId }} </div>
                    {% else %}
                    <h3 style="font-size: 18px;" class="block-title">Editer l'utilisateur {{ user.username }}</h3>
                    {% endif %}
                </div>
                <div class="block-content">
                    <div class="block block-themed block-transparent mb-0">
                        <div class="block-content">
                            <div class="form-section">
                                <div class="form-group row col-12">
                                    <label style="margin-bottom: 10px;" class="col-12">Services associés à l'utilisateur :</label>
                                    <div class="col-6" style="display: block">
                                        {{ form_widget(form.services)}}
                                    </div>
                                    {% if user.isClient %}
                                        <div class="col-6" id="explanation-services-client">
                                            CLIENT-AFFAIRE : Permet à un client de gérer ses utilisateurs et de valider des commandes en attente d'approbation<br>
                                            CLLIEN-AGENDA : Permet à un client de voir son agenda de location<br>
                                            CLIENT-RMA : Permet à un client de voir ses RMA<br>
                                            TABLEAU-CLIENT-BL : Permet à un client de voir le tableau récapitulatif des BL<br>
                                        </div>
                                    {% else %}
                                        <div class="col-6" id="explanation-services-user">
                                            RMA-ADMIN donne accès à la modification de toutes les valeurs d'une RMA<br><br>
                                            RMA-ADMIN-LIGHT donne accès uniquement à la modification de la date prévisionnelle de réparation, la date du diagnostic fournisseur et permet de terminer la RMA
                                        </div>
                                    {% endif %}
                                </div>
                            {% if isClient == 0 %}
                                <div class="form-group row col-12 list-customer-div" style="display: none">
                                    <label style="margin-bottom: 10px;" class="col-12">Clients associés à l'utilisateur :</label>
                                    <div class="col-6" style="display: block;">
                                        {{ form_widget(form.checkBoxUserClient)}}
                                </div>
                                </div>
                            {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                        <div class="left">
                            <button id="btn-edit-profile-close" type="button" class="btn btn-secondary" onclick="closeEditUser()" style="margin: 10px 16px 15px 30px">Annuler</button>
                            <button id="btn-edit-profile-valid" type="button" class="btn btn-primary" onclick="ValidateForm()" style="margin: 10px 0 15px 0px"><i class="fa fa-check"></i> Valider</button>
                        </div>
                        {% if user.isPlm and not user.isAdmin and not user.hasServiceGestionUser %}
                            <div class="right">
                                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-large-delete" id="btn-update-rma-create">
                                    <i class="fa fa-trash" style="margin-right: 5px;"></i>Supprimer l'utilisateur
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    {{ form_end(form) }}
{% endblock %}

{% block modal %}

<div class="modal" 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">
            <form action="be_forms_elements_bootstrap.html" method="post" onsubmit="return false;">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header">
                        <h3 class="block-title">Confirmation</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                <i class="si si-close"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <p>Etes vous sûr de vouloir supprimer definitivement cet utilisateur ?</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-modal-rma-confirm-close" type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn btn-danger" onclick="deleteUser({{ userId }})" id="btn-update-rma-create">Supprimer</button>
                </div>
            </form>
        </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 type="text/javascript">

        $(document).ready(function() {
            var result = "{{ listServices }}".split('|');
            var isClient = {{ isClient }};
            for(var i = 0; i < result.length; i++) {
                if (isClient === 0)
                    $('#client_edit_services_' + result[i]).prop('checked', true);
                else
                    $('#user_edit_services_' + result[i]).prop('checked', true);
            }
            if (isClient === 0) {
                var nbInputCheckBox = $("#client_edit_checkBoxUserClient input");
                var userClient = "{{ strUserClient }}".split('|');
                var iUserClient = 0;
                for(var j = 0; j < nbInputCheckBox.length; j++) {
                    if (userClient[iUserClient] === $('#client_edit_checkBoxUserClient_' + j).val()) {
                        $('#client_edit_checkBoxUserClient_' + j).prop('checked', true);
                        iUserClient++;
                    }
                }
            }
            if ($('#client_edit_services_9').prop('checked') == true) {
                $('.list-customer-div').css('display', 'block');
            }
            $('#client_edit_services_9').bind('change', function (event){
                if ($('#client_edit_services_9').prop('checked') == true) {
                    $('.list-customer-div').css('display', 'block');
                }
                else {
                    $('.list-customer-div').css('display', 'none');
                }
                if ($('#client_edit_services_9').prop('checked') == false) {
                    var nbInputCheckBox = $("#client_edit_checkBoxUserClient input");
                    for(var j = 0; j < nbInputCheckBox.length; j++) {
                        $('#client_edit_checkBoxUserClient_' + j).prop('checked', false);
                    }
                    $('.list-customer-div').css('display', 'none');
                }
            })
        })

        function ValidateForm() {
            var result = [];
            var resultVip = [];
            var isClient = {{ isClient }};
            if (isClient === 0) {
                $.each($("input[id^='client_edit_services_']:checked"), function () {
                    result = result + $(this).val() + "|";
                });
                $('#client_edit_listNewServices').val(result);
                $.each($("input[id^='client_edit_checkBox']:checked"), function () {
                    resultVip = resultVip + $(this).val() + "|";
                });
                $('#client_edit_listUserClient').val(resultVip);
                if ($('#client_edit_services_9').prop('checked') == false) {
                    var nbInputCheckBox = $("#client_edit_checkBoxUserClient input");
                    for(var j = 0; j < nbInputCheckBox.length; j++) {
                        $('#client_edit_checkBoxUserClient_' + j).prop('checked', false);
                    }
                    $('#client_edit_listUserClient').val('');
                }
            }
            else {
                $.each($("input[id^='user_edit_services_']:checked"), function () {
                    result = result + $(this).val() + "|";
                });
                $('#user_edit_listNewServices').val(result);
            }
            var form = document.getElementById('edit-user-form');
            form.submit();
        }

        function redirect(url) {
            window.location.replace(url);
        }

        function closeEditUser() {
            redirect($('#user_list').val());
        }

        function deleteUser(userId){
            redirect("{{ path('delete_user') }}?id=" + userId);
        }

    </script>
{% endblock %}