{% extends "backend/base.html.twig" %}

{% block title %}Modification d'un Collaborateur{% endblock %}

{% block breadcrumb %}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Modification d'un Collaborateur</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{#{{ path('admin.home') }}#}#">Accueil</a></li>
                        <li class="breadcrumb-item active">Modification d'un Collaborateur</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
{% endblock %}

{% block content %}

    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"></h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="card-body row justify-content-center">

                        {#{ include ('backend/collab/_form.html.twig', {form: form, button: 'Enregistrer'} ) }#}
                        {% set password = randomPassword(10) %}

                        {{ form_start(form, {'attr': {'class': 'col-8'}}) }}

                        {#{ form_row(form.name, {'attr': {'class': 'form-control', 'readonly': 'readonly'}}) }#}

                        <div class="form-group">
                            {{ form_label(form.gender) }}
                            {{ form_widget(form.gender, {value: gender , 'attr': {'readonly': 'readonly'} } ) }}
                        </div>
                        {{ form_row(form.lastname, {'attr': {'class': 'form-control', 'value': lastname, 'readonly': 'readonly'}}) }}
                        {{ form_row(form.firstname, {'attr': {'class': 'form-control', 'value': firstname, 'readonly': 'readonly'}}) }}

                        {{ form_row(form.gsm, {'attr': {'class': 'form-control', 'readonly': 'readonly'}}) }}
                        {#{ form_row(form.address, {'attr': {'class': 'form-control', 'readonly': 'readonly'}}) }#}
                        <div class="form-group">
                            {{ form_label(form.is_allowed_send_dcp) }}{{ form_widget(form.is_allowed_send_dcp) }}
                        </div>

                        <div class="form-group password-input">
                            <label for="password">Nouveau mot de passe</label>
                            <div class="form-row justify-content-between">
                                <input type="text" class="password form-control col-6" name="password" readonly value="{{ password }}">
                                <button type="button" href="javascript:void(0)" class="btn btn-primary w-25 regenerate-btn col-4">Regénérer</button>
                            </div>

                        </div>

                        <input type="text" id="presidentPass" class="d-none" name="presidentPass" value="">

                        {{ form_rest(form) }}
                        <div class="text-right">
                            <button type="submit" class="btn btn-primary btn-submit w-25 d-none">Modifier</button>
                            <button type="button" href="javascript:void(0)" class="btn btn-primary w-25" data-toggle="modal" data-target="#president-form" data-action="{{ path('backend.collaborator.new') }}">Modifier</button>
                            <a href="{{ path('backend.collaborator.list') }}" class="btn btn-danger w-25">Annuler</a>
                        </div>
                        {{ form_end(form) }}

                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->

    </section>

    <div class="modal fade" id="president-form" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Confirmation du mot de passe</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    {% if error %}
                        <div class="alert alert-danger">
                            {{ error.messageKey|trans(error.messageData, 'security') }}
                        </div>
                    {% endif %}

                    <form id="login-form" action="{{ path('jslogin') }}" method="post" class="col-md-12">
                        <div class="input-group mb-0">
                            <input type="hidden" id="username" name="_username" class="form-control" placeholder="Identifiant" value="{{ last_username }}">

                        </div>

                        <label for="userpassword">Entrer votre mot de passe :</label>
                        <div class="input-group mb-3">
                            <input type="password" id="userpassword" name="_password" class="form-control" placeholder="Entrer le mot de passe">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="csrf_token" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                        <button type="submit" class="btn btn-primary btn-block">Confirmer</button>

                    </form>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script>

        $('#login-form').submit( function(e) {
            e.preventDefault();
            //console.log('clique');

            $.ajax({
                url: '{{ path('jslogin') }}',
                type: 'POST',
                data: {
                    _username: $('#username').val(),
                    _password: $('#userpassword').val(),
                },
                dataType: 'json',
                async: true,
                success: function(data, status) {
                    //console.log(data);
                    if (data.response === false) {
                        alert("Votre mot de passe est incorrect!");
                    } else {
                        $('#presidentPass').val(data.password);
                        $('.btn-submit').click();
                    }
                },
                error : function(xhr, textStatus, errorThrown) {
                    alert('Une erreur est survenue.');
                }
            });


        });

        $(".regenerate-btn").click(function(){
            location.reload(true);
        });

    </script>

{% endblock %}