{% extends 'base_param_be.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') }}">
    <style>
        tr.group,
        tr.group:hover {
            background-color: #f0f2f5 !important;
            font-weight: 900
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 220px;
        }
    </style>
{% endblock %}

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

    <!-- Dynamic Table Full -->
    <div class="block">
        <div class="block-header block-header-default bg-gray">

            <h4 class="font-w700">
                Liste des utilisateurs
            </h4>

            <div>
                <button type="button" style="margin-left: 8px;" class="btn btn-sm btn-primary" data-toggle="tooltip" onclick="createUser()">
                    <i class="fa fa-plus mr-5"></i>Créer un utilisateur
                </button>
            </div>
        </div>
        <div class="block-content block-content-full">
            <!-- 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">
                <thead>
                <tr>
                    <th class="text-center"  style="width: 20px">ID</th>
                    <th>email et infos</th>
                    <th>Type</th>
                    <th>Fonctionnalités</th>
                    <th class="text-center" style="width: 30px"></th>
                </tr>
                </thead>
                <tbody>

                {% for user in users %}


                    <tr>
                        <td class="d-none d-sm-table-cell">
                            <div style="margin-top: 4px; font-weight: 900">
                                {{ user.id}}
                            </div>
                        </td>
                        <td class="d-none d-sm-table-cell">
                            <span style="font-weight: 900">{{ user.email }}</span>
                            {% if user.type == 'CLIENT' %}
                                <br>
                                Client Code : {{ user.customerId}}
                                <br>
                                Client Nom : {{ user.customerName}}
                                <br>
                                Client Agence : {{ user.Agence}}
                                <br>
                                Créé sur le site de services le : {{ user.createdAt|date('d/m/Y H:i:s') }}

                                {% if user.lastLogin %}<br>Derniere connexion le : {{ user.lastLogin|date('d/m/Y H:i:s') }}{% endif %}

                                {% if user.ebpContactMultiple %}
                                    <br>
                                    Liste des contacts EBP pour ce mail :<br>
                                    {% set contacts = user.ebpContactMultiple|split('|') %}
                                    {% for key,value in contacts %}
                                    <span style="margin-left: 10px">{{ value }}</span><br>
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell" style="width: 30px">
                            {% if user.isClient %}
                            <div style="margin-top: 4px; font-weight: 900">
                                {{ user.type}}
                            </div>
                            {% else %}
                             <div style="color: #3F9CE8; margin-top: 4px; font-weight: 900">
                                {{ user.type}}
                             </div>
                            {% endif %}
                        </td>
                        <td class="d-none d-sm-table-cell">
                            {% for userservice in user.services %}
                                {{ userservice.service.getName() }}<br>
                            {% endfor %}
                        </td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-primary" onclick="redirectEdit({{ user.id }})" style="margin-bottom: 8px; width: 115px; padding-left: 6px; padding-right: 6px">
                                <i class="fa fa-pencil" style="margin-right: 5px;"></i>Editer
                            </button>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
    </div>
    <!-- END Dynamic Table Full -->

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

{% endblock %}

{% block modal %}
    <div class="modal" id="modal-large" 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">Modifier une location</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">
                            <input type="text" id="chantier-id" style="display: none">
                            <input type="text" id="update-chantier-url" value="{{ path('update_chantier') }}" style="display: none">
                            <input type="text" id="update-chantier-redirect" value="{{ path('chantier_list') }}" style="display: none">
                            <div class="form-group row">
                                <label class="col-12 mt-10"><span id="chantier-article-label" style="font-weight: 900"></span></label>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Référence du chantier :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <input type="text"
                                           id="chantier-reference"
                                           class="form-control"
                                           value="" style="width: 350px;margin-right:15px">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Numéro de commande :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <input type="text"
                                           id="chantier-commande"
                                           class="form-control"
                                           value="" style="width: 350px;margin-right:15px">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12">Facturer le chantier</label>
                                <div class="col-12">
                                    <div class="custom-control custom-radio custom-control-inline mb-5">
                                        <input class="custom-control-input" type="radio" name="chantier-facture" id="chantier-facture-true" value="1" checked="">
                                        <label class="custom-control-label" for="chantier-facture-true">Oui</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline mb-5">
                                        <input class="custom-control-input" type="radio" name="chantier-facture" id="chantier-facture-false" value="0">
                                        <label class="custom-control-label" for="chantier-facture-false">Non</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="updateChantier()" id="btn-update-chantier">
                            <i class="fa fa-check"></i> Mettre à jour
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal" id="modal-large-create" 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">Créer un chantier de location</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">
                            <input type="text" id="create-chantier-url" value="{{ path('create_chantier') }}" style="display: none">
                            <input type="text" id="create-chantier-redirect" value="{{ path('chantier_list') }}" style="display: none">

                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Séléctionner un article de location</label>
                                <div class="col-12" style="display: inline-flex">
                                    <select class="form-control" id="chantier-code-create">
                                        <option value="0"></option>
                                            <option value="tt">tt</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Référence du chantier :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <input type="text"
                                           id="chantier-reference-create"
                                           class="form-control"
                                           value="" style="width: 350px;margin-right:15px">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-12" for="example-text-input-valid">Numéro de commande :</label>
                                <div class="col-6" style="display: inline-flex">
                                    <input type="text"
                                           id="chantier-commande-create"
                                           class="form-control"
                                           value="" style="width: 350px;margin-right:15px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary" onclick="createChantier()" id="btn-update-chantier-create">
                            <i class="fa fa-check"></i> Valider
                        </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 tableArticle = $(".js-dataTable-full");
            tableArticle.DataTable({
                fixedHeaders: true,
                "paging": false,
                "order": [[ 0, "asc" ]],
                columnDefs:[
                    {orderable:false,targets:[1]}
                ],
                responsive: true,
                "info": false,
                "language": {
                    "search": "Recherche",
                    "emptyTable": "Aucun utilisateur",
                    "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();
                }
            });
        });

        function openPopipChantier(id, l, r, n, dl, fl, f) {

            $('#chantier-id').val(id);
            $('#chantier-article-label').html(l);
            $('#chantier-reference').val(r);
            $('#chantier-commande').val(n);
            $('#chantier-start-location').val(dl);
            $('#chantier-end-location').val(fl);

            if(f === '1') {
                $('#chantier-facture-true').prop('checked', true);
            } else {
                $('#chantier-facture-false').prop('checked', true);
            }

            $('#btn-modal-chantier').click();
        }

        function openPopipChantierCreate() {

            $('#chantier-start-location-create').val('');
            $('#chantier-end-location-create').val('');

            $('#btn-modal-chantier-create').click();
        }


        function certificatList() {
            window.location.href = "{{ path('user_list') }}";
        }

        $('#btn-date-start-chantier-clear').click(function() {
            $('#chantier-start-location').val('');
        });

        $('#btn-date-end-chantier-clear').click(function() {
            $('#chantier-end-location').val('');
        });

        $('#btn-date-start-chantier-clear-create').click(function() {
            $('#chantier-start-location-create').val('');
        });

        $('#btn-date-end-chantier-clear-create').click(function() {
            $('#chantier-end-location-create').val('');
        });

    </script>

    <script type="text/javascript">
        function updateChantier() {

            $('#btn-update-chantier').css('pointer-events', 'none');
            $('#btn-update-chantier').css('opacity', '0.5');
            $('#btn-update-chantier').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Mise à jour');

            var url = $('#update-chantier-url').val();
            var redirect = $('#update-chantier-redirect').val();
            var chantierId = $('#chantier-id').val();
            var chantierReference = $('#chantier-reference').val();
            var chantierCommande = $('#chantier-commande').val();
            var startLocation = $('#chantier-start-location').val();
            var endLocation = $('#chantier-end-location').val();
            var factured = $('input[name=chantier-facture]:checked').val();

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    'chantierId': chantierId,
                    'chantierReference': chantierReference,
                    'chantierCommande': chantierCommande,
                    'startLocation': startLocation,
                    'endLocation': endLocation,
                    'factured': factured
                },
                success: function(data){
                    window.location.href = redirect;
                }
            });
        }

        function createChantier() {

            //test si article selectionné
            var chantierCode = $('#chantier-code-create').val();
            if( chantierCode == '0') {
                alert('Séléctionner un article dans la liste');
            } else {
                $('#btn-update-chantier-create').css('pointer-events', 'none');
                $('#btn-update-chantier-create').css('opacity', '0.5');
                $('#btn-update-chantier-create').html('<i class="fa fa-spinner fa-pulse fa-1x fa-fw"></i> Création');

                var url = $('#create-chantier-url').val();
                var redirect = $('#create-chantier-redirect').val();
                var code = $('#chantier-code-create').val();
                var chantierReference = $('#chantier-reference-create').val();
                var chantierCommande = $('#chantier-commande-create').val();
                var startLocation = $('#chantier-start-location-create').val();
                var endLocation = $('#chantier-end-location-create').val();

                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        'code': code,
                        'chantierReference': chantierReference,
                        'chantierCommande': chantierCommande,
                        'startLocation': startLocation,
                        'endLocation': endLocation,
                        'clientCode': clientCode
                    },
                    success: function(data){
                        window.location.href = redirect + "?clientCode=" + clientCode;
                    }
                });
            }
        }

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

        function redirectEdit(userId) {
            redirect("{{ path('edit_user') }}?userId=" + userId);
        }

        function createUser() {
            redirect("{{ path('create_user') }}");
        }

    </script>
{% endblock %}