{% extends "base/base-back.html.twig" %}
{% block title %}Perfil de la central de compra | Cershop{% endblock %}
{% block metadescription %}Perfil de la central de compra{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block titulo %}{% if is_granted('ROLE_ADMIN') %}Editar perfil de central de compra {% endif %}"{{ centro_compra.nombre }}"{% endblock %}
{% block contenido %}

<div class="container-fluid">
    <div class="row">
        <div class="col">
            {% if form_errors(form) or form_errors(form2) %}
                <div class="alert alert-danger" role="alert">{{ form_errors(form) }}{{ form_errors(form2) }}</div>
            {% endif %}
            {% for flash_message in app.session.flashbag.get('danger') %}
                <div class="alert alert-danger" role="alert">{{ flash_message }}</div>
            {% endfor %}
            {% for flash_message in app.session.flashbag.get('success') %}
                <div class="alert alert-success" role="alert">{{ flash_message }}</div>
            {% endfor %}
        </div>
    </div>

    <div class="row mb-5">
        <div class="col">
            <ul class="nav nav-tabs" id="tabPerfil">
                <li class="nav-item">
                    <a class="nav-link{% if not app.request.get('centro_compra') %} active{% endif %}" id="acceso-tab" data-toggle="tab" href="#acceso" role="tab" aria-controls="acceso" aria-selected="true">Datos de acceso</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link{% if app.request.get('centro_compra') %} active{% endif %}" id="informacion-tab" data-toggle="tab" href="#informacion" role="tab" aria-controls="informacion" aria-selected="false">Información</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="tab-content" id="tabPerfil">
        <div class="tab-pane fade{% if not app.request.get('centro_compra') %} show active{% endif %}" id="acceso" role="tabpanel" aria-labelledby="acceso-tab">
            <!-- Inicio del formulario -->
            {{ form_start(form, {'action':path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')), 'method':'post'}) }}
                <!-- Campos principales -->
                <div class="form-group row">
                    <div class="form-group col-md-4">
                        {{ form_label(form.usuario) }}
                        {{ form_widget(form.usuario) }}
                    </div>
                    <div class="form-group col-md-4">
                        {{ form_label(form.plainPassword.first) }}
                        {{ form_widget(form.plainPassword.first) }}
                    </div>
                    <div class="form-group col-md-4">
                        {{ form_label(form.plainPassword.second) }}
                        {{ form_widget(form.plainPassword.second) }}
                    </div>
                    <div class="form-group col-md-4">
                        {{ form_label(form.email) }}
                        {{ form_widget(form.email) }}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="form-group col">
                        <hr class="divisor-final-formularios">
                        {{ form_widget(form.save, {'label': 'Guardar cambios'}) }}
                        {% if is_granted('ROLE_ADMIN') %}
                            <a href="{{ path('volverListado', {seccion: 'listadoCentralesDeCompra'}) }}" class="btn btn-secondary float-right mb-2"><i class="fal fa-chevron-left"></i> Volver al listado</a>
                        {% endif %}
                    </div>
                </div>
            {{ form_end(form) }}
            <!-- ./fin del formulario -->
        </div>
        <div class="tab-pane fade{% if app.request.get('centro_compra') %} show active{% endif %}" id="informacion" role="tabpanel" aria-labelledby="informacion-tab">
            <!-- Inicio del formulario -->
            {{ form_start(form2, {'action':path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')), 'method':'post'}) }}
                <!-- Campos principales -->
                <div class="form-group row">
                    <div class="form-group col-md-4">
                        {{ form_label(form2.cif) }}
                        {{ form_widget(form2.cif) }}
                    </div>
                    <div class="form-group col-md-4">
                        {{ form_label(form2.email) }}
                        {{ form_widget(form2.email) }}
                    </div>
                    <div class="form-group col-md-4">
                        {{ form_label(form2.contacto) }}
                        {{ form_widget(form2.contacto) }}
                    </div>
                    <div class="form-group col-md-12">
                        {{ form_label(form2.descripcion) }}
                        {{ form_widget(form2.descripcion) }}
                    </div>
                </div>
                <div class="form-group row">
                    <div class="form-group col-md-4">
                        <h6 class="mb-3">Logo</h6>

                        {% if centro_compra.logotipo %}
                        <img id="miniatura" src="{{ centro_compra.ruta~'thumb-'~centro_compra.logotipo }}" alt="Nombre del logo" class="logo-perfil">
                        {% else %}
                        <img id="miniatura" src="{{ asset('assets/back/images/imagen-no-disponible.png') }}" alt="Nombre del logo" class="logo-perfil">
                        {% endif %}

                        <div class="clearfix"></div>
                        <a href="#" data-toggle="modal" data-target="#modalLogotipo" class="btn btn-secondary btn-xs mt-3">Subir logo</a>
                        
                        <!-- Modal logotipo -->
                        <div class="modal fade" id="modalLogotipo" tabindex="-1" role="dialog" aria-labelledby="modalLogotipo" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <h5 class="modal-title" id="modalLogotipo">Sube la imagen del logotipo</h5>
                                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                            <span class="input-group-text">Subir</span>
                                            </div>
                                            <div class="custom-file">
                                                {{ form_label(form2.logotipo) }}
                                                {{ form_widget(form2.logotipo) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancelar</button>
                                    <a class="btn btn-primary" href="#">Cargar imagen</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="form-group col">
                        <hr class="divisor-final-formularios">
                        {{ form_widget(form2.save, {'label': 'Guardar cambios'}) }}
                        {% if is_granted('ROLE_ADMIN') %}
                            <a href="{{ path('volverListado', {seccion: 'listadoCentralesDeCompra'}) }}" class="btn btn-secondary float-right mb-2"><i class="fal fa-chevron-left"></i> Volver al listado</a>
                        {% endif %}
                    </div>
                </div>
            {{ form_end(form2) }}
            <!-- ./fin del formulario -->
        </div>
    </div>

</div>

{% endblock %}

{% block javascript %}
{{ parent() }}
<script>
    if(window.FileReader) {
        function seleccionArchivo(evt) {
            var files = evt.target.files;
            var f = files[0];
            var leerArchivo = new FileReader();
            leerArchivo.onload = (function(elArchivo) {
                return function(e) {
                    $('#miniatura').attr('src', e.target.result);
                    $('#modalLogotipo').modal('hide');
                };
            })(f);
            leerArchivo.readAsDataURL(f);
        }
    }
    else {
        document.getElementById('miniatura').innerHTML = "El navegador no soporta vista previa";
    }
    document.getElementById('centro_compra_logotipo').addEventListener('change', seleccionArchivo, false);
    $(document).ready(function() {
        contenidof = $('#centro_compra_descripcion').val();
        const regex = /<br \/>/gi;
        $('#centro_compra_descripcion').val(contenidof.replace(regex, ''));
    });
</script>
{% endblock %}