{% extends "AppBundle::layout_backend.html.twig" %}

{% block bootstrap_stylesheets %}
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
        crossorigin="anonymous"
    >
{% endblock %}

{% block bootstrap_javascript %}
    <script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
        crossorigin="anonymous">
    </script>

{% endblock %}

{% block title 'Autorización' %}

{% block content %}

	{% stylesheets 
		'bundles/app/css/new-boostrap-common-styles.css'
		filter='cssrewrite' %}
		<link rel="stylesheet" href="{{ asset_url }}"/>
	{% endstylesheets %}
	
	<div class="box" style="position: relative; width: 100%; height: 100vh;">
        <div class="box-body">
            <div class="col-sm-12 col-md-8 col-lg-8" style="position: absolute;width: 50%;height: auto;top: 0;bottom: 0;left: 0;right: 0;margin: auto;">
                <div>
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="row">
                                <div class="d-flex justify-content-center"> 
                                    <span class="mx-2 d-flex align-items-center">
                                        {% image '@AppBundle/Resources/public/images/logo-fulljaus.png' %}
                                            <img style="width: 150px" src="{{ asset_url }}" alt="Fulljaus"/>
                                        {% endimage %}
                                    </span>
                                    <span class="mx-2 d-flex align-items-center">
                                        <i class="fa fa-link" aria-hidden="true" style="font-size: 30px;"></i>
                                    </span>
                                    <span class="mx-2 mx-2 d-flex align-items-center">
                                        {% if integrationType == 'provider' %}
                                            <img style="width: 150px" src="{{ asset('uploads/providers/' ~ integrationIcon) }}"/>
                                        {% elseif integrationType == 'marketplace' %}
                                            <img style="width: 150px" src="{{ asset('uploads/images/market/' ~ integrationIcon) }}"/>
                                        {% else %}
                                            <img style="width: 150px" src="{{ asset('uploads/images/carrier/' ~ integrationIcon) }}"/>
                                        {% endif %}
                                    </span>
                                </div>
                            </div>

                            <div class="row" id="connection-choice">
                                <h5 class="mt-3 text-center">Conectar aplicación externa</h5>
                                <p class="text-center">¿Cómo desea conectar esta aplicación a su cuenta?</p>
                                <div class="d-flex justify-content-center">
                                    {% if integration.getMultipleInstances() or connections is empty %}
                                    <button id="btn-new-connection" class="btn btn-custom-primary mx-2">
                                        <i class="fa fa-plus-circle"></i> Nueva conexión
                                    </button>
                                    {% endif %}    

                                    {% if connections is not empty %}
                                    <button id="btn-update-connection" class="btn btn-secondary mx-2">
                                        <i class="fa fa-refresh"></i> Actualizar conexión
                                    </button>
                                    {% endif %}
                                </div>
                            </div>

                            {# Paso 2: Formulario de creación de nueva conexión (inicialmente oculto) #}
                            <div id="new-connection-form" class="d-none">
                                <div class="card-body text-center">
                                    <h5 class="mb-3">Generar conexión</h5>
                                    <p>En esta sección podrás iniciar la conexión con {{integration.getNombre()}}.</p>
                                    <div class="mb-2">
                                        <input id="config-name" class="form-control" type="text" placeholder="Ingresar el nombre de la configuración">
                                    </div>
                                    <div>
                                        <button id="confirm-installation" class="btn btn-sm btn-custom-primary" data-url="{{ path('confirm_auth_app', { 'integrationType': integrationType, 'integrationCode': integrationCode }) }}" disabled style="float: right;">Confirmar instalación</button>
                                        <button id="btn-back-from-create" class="btn btn-sm btn-secondary mx-1" style="float: right;"><i class="fa fa-arrow-left"></i> Volver</button>
                                    </div>
                                </div>
                            </div>

                            {# Paso 3: Contenido para actualizar conexión (de momento es un mensaje) #}
                            <div id="update-connection-form" class="d-none">
                                <div class="card-body text-center">
                                    <h5 class="mb-3">Actualizar conexión</h5>
                                    <p>En esta sección podrás actualizar la configuración de una conexión existente.</p>
                                    <div class="mb-2">
                                        <div class="list-group">
                                            {% for connection in connections %}
                                            <label class="list-group-item">
                                                <input class="form-check-input float-end" type="radio" name="connection" id="conn-{{connection.id()}}" value="{{connection.id()}}" {{loop.index == 1 ? 'checked' : '' }}> 
                                                <p><b>{{connection.id()}} - {{connection.getNombreconfiguracion()}}</b></p>
                                            </label>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <div>
                                        <button id="confirm-update" class="btn btn-sm btn-custom-primary" data-url="{{ path('update_auth_app', { 'integrationType': integrationType, 'integrationCode': integrationCode }) }}" style="float: right;">Actualizar conexión</button>
                                        <button id="btn-back-from-update" class="btn btn-sm btn-secondary mx-1" style="float: right;"><i class="fa fa-arrow-left"></i> Volver</button>
                                    </div>
                                </div>
                            </div>

                            <input hidden id="query-params" class="form-control" type="text" value="{{queryParams}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed bottom-0 end-0 p-3" id="toast-container" style="z-index: 200000">
    </div>

{% endblock %}

{% block javascripts2nd %}

    {% javascripts
        '@AppBundle/Resources/public/js/Auth/index.js'
        '@AppBundle/Resources/public/js/Toast/toast.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

{% endblock %}