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

{% block title %}Settings{% endblock %}

{% block content %}

    <div class="content__inner content__inner--sm">
        <header class="content__title">
            <h1>{{ user.getName }} <small>{{ user.getClient.getTitle }}</small></h1>
        </header>

        {#
        <div class="card profile">
            <div class="profile__img">
                <img src="{{ asset('demo/img/profile-pics/user_empty.png') }}" alt="">

                <a href="" class="zwicon-camera profile__img__edit"></a>
            </div>

            <div class="profile__info">
                <p>Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magnae tiam porta sem malesuada magna mollis euismod.</p>

                <p>dummy data:</p>
                <ul class="icon-list">
                    <li><i class="zwicon-phone"></i> 308-360-8938</li>
                    <li><i class="zwicon-mail"></i> {{ user.getEmail }}</li>
                    <li><i class="zwicon-chat"></i>@malinda-h</li>
                </ul>
            </div>
        </div>
        #}

        {% if errors is not empty %}
        <div class="card">
            <div class="card-body">
                <h5 class="card-body__title">Errors</h5>

                {% for error in errors %}
                <p class="card-text">{{ error }}</p>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="card">
            <div class="card-body">
                <h5 class="card-body__title">Change your personal data</h5>

                <form action="{{ path('settings_personal_data') }}" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="{{ user.getId }}">

                    <div class="row">
                        <label class="col-sm-2 col-form-label">Surename</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="text" class="form-control" name="surename" value="{{ user.getSurename }}" placeholder="Surename">
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-2 col-form-label">Lastname</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="text" class="form-control" name="lastname" value="{{ user.getLastname }}" placeholder="Lastname">
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="email" class="form-control" name="email" value="{{ user.getEmail }}" placeholder="Email Address">
                            </div>

                        </div>
                    </div>

                    {% if app.user.hasToolAccess( constant('App\\Entity\\Tool::TOOL_IMAGE_LIBRARY') ) %}
                    <h5 class="card-body__title">Apikey and default solution for image library</h5>

                    <div class="row">
                        <label class="col-sm-2 col-form-label"></label>
                        <div class="col-sm-5">
                            <div class="form-group">
                                <label>Width</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" min="0" step="1" name="defaultWidth" value="{{ user.getDefaultWidth }}" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text">px</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5">
                            <div class="form-group">
                                <label>Height</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" min="0" step="1" name="defaultHeight" value="{{ user.getDefaultHeight }}" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text">px</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <label class="col-sm-2 col-form-label">Apikey</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-theme" id="btnApiKey">generate</button>
                                    </div>
                                    <input type="hidden" name="apikey" id="apikeyHidden" value="{{ user.getApiKey }}">
                                    <input type="text" class="form-control" id="apikey" value="{{ user.getApiKey }}" disabled>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-theme" id="btnCopyApiKey">copy</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    {% endif %}

                    <h5 class="card-body__title">Submit with your current password</h5>

                    <div class="row">
                        <label class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="password" class="form-control" name="password" value="" placeholder="Password" autocomplete="false">
                            </div>
                        </div>
                    </div>


                    <button type="submit" class="btn btn-theme">Save</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h5 class="card-body__title">Change your password</h5>

                <form action="{{ path('settings_change_password') }}" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="{{ user.getId }}">

                    <div class="row">
                        <label class="col-sm-2 col-form-label">Current password</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="password" class="form-control" name="current" value="" placeholder="Password" autocomplete="false">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <label class="col-sm-2 col-form-label">New password</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="password" class="form-control" name="new1" value="" placeholder="Password" autocomplete="false">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <label class="col-sm-2 col-form-label">Repeat new password</label>
                        <div class="col-sm-10">
                            <div class="form-group">
                                <input type="password" class="form-control" name="new2" value="" placeholder="Password" autocomplete="false">
                            </div>
                        </div>
                    </div>


                    <button type="submit" class="btn btn-theme">Save</button>
                </form>
            </div>
        </div>
    </div>

    {#% include 'footer.html.twig' %#}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        $('#btnApiKey').click(function(){
            /*
            var key = Math.random().toString(36).substring(2, 15) +
                      Math.random().toString(36).substring(2, 15) +
                      Math.random().toString(36).substring(2, 15);
            $('#apikey').val(key);
            $('#apikeyHidden').val(key);
            */

            $.get("{{ path('api_settings_get_api_key') }}",{},
            function(data) {
                //console.log(data);
                $('#apikey').val(data);
                $('#apikeyHidden').val(data);
            });
        });

        $('#btnCopyApiKey').click(function(){
            $('#apikey').prop('disabled', false);

            /* Get the text field */
            var copyText = $('#apikey');

            /* Select the text field */
            copyText.select();
            //copyText.setSelectionRange(0, 99999); /*For mobile devices*/

            /* Copy the text inside the text field */
            document.execCommand('copy');

            /* Alert the copied text */
            //alert("Copied the text: " + copyText.value);

            $('#apikey').prop('disabled', true);
        });
    </script>
{% endblock %}