{% extends './manager.html' %}
{% block content %}
{% load static %}
<style>
   
    button[type="submit"]:hover {
        background-color: #be185d !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(214, 51, 132, 0.4) !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active{
        -webkit-box-shadow: 0 0 0 30px white inset !important;
        -webkit-text-fill-color: #000 !important;
    }
</style>
<div class="container">
    <div class="page-inner">
        
       
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-lg border-0 rounded-4">
                    <div class="card-header text-white" style="background: linear-gradient(135deg, #0b2f4c 0%, #1a4b70 100%); border-radius: 15px 15px 0 0;">
                        <div class="d-flex align-items-center">
                            <div>
                                <p  style="font-size: 0.9em;">
                                    Actualiza aquí la llave (Key) de Gemini o OpenAI cuando se agoten tus créditos.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-4">
                        <div class="alert alert-info d-flex align-items-center mb-4" role="alert" style="background-color: #f0f8ff; border-left: 5px solid #0b2f4c;">
                          
                            <div>
                                <strong>Nota Importante:</strong>
                                Esta clave es la que permite a tu Chatbot responder preguntas. Si el bot deja de responder, genera una nueva clave gratuita y pégala aquí.
                            </div>
                        </div>

                        <form method="POST">
                            {% csrf_token %}
                            
                            <div class="form-group mb-4 position-relative">
                                <label for="id_openai_api_key" class="form-label fw-bold" style="color: #0b2f4c;">
                                    <i class="fas fa-key me-2" style="color: #d63384;"></i> Nueva API Key:
                                </label>
                                
                                {{ form.openai_api_key }}
                                
                                <button type="button" class="btn btn-sm position-absolute" 
                                        style="top: 38px; right: 15px; color: #6c757d;"
                                        onclick="togglePassword()">
                                    <i class="fas fa-eye" id="toggleIcon"></i>
                                </button>

                                <small class="form-text text-muted mt-2">
                                    <i class="fas fa-lock"></i> Tu clave se guarda encriptada y segura.
                                </small>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-lg text-white fw-bold shadow-sm" 
                                        style="background-color: #d63384; border-radius: 50px; transition: all 0.3s;">
                                    <i class="fas fa-save me-2"></i> ACTUALIZAR CONEXIÓN
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
   
    function togglePassword() {
        var input = document.getElementById("id_openai_api_key");
        var icon = document.getElementById("toggleIcon");
        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        }
    }
</script>

{% if messages %}
    {% for message in messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Swal.fire({
                title: '¡Excelente!',
                text: '{{ message }}',
                icon: 'success',
                confirmButtonColor: '#d63384',
                confirmButtonText: 'Continuar',
                background: '#fff',
                backdrop: `
                    rgba(0,0,123,0.1)
                    left top
                    no-repeat
                `
            });
        });
    </script>
    {% endfor %}
{% endif %}

<style>
    
    button[type="submit"]:hover {
        background-color: #be185d !important; 
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(214, 51, 132, 0.4) !important;
    }
</style>

{% endblock %}