{% extends 'base.html' %}
{% load static %}

{% block title %}Cadastro Realizado - Allure{% endblock %}

{% block extra_css %}
<style>
    .success-container {
        max-width: 600px;
        margin: 2rem auto;
        padding: 2rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .success-icon {
        width: 80px;
        height: 80px;
        background: #28a745;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        color: white;
        font-size: 2rem;
    }
    
    .success-title {
        color: #28a745;
        font-size: 1.8rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    .success-message {
        color: #6c757d;
        margin-bottom: 2rem;
        line-height: 1.6;
    }
    
    .credentials-box {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1.5rem 0;
        text-align: left;
    }
    
    .credentials-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
    }
    
    .credential-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .credential-item:last-child {
        border-bottom: none;
    }
    
    .credential-label {
        font-weight: 500;
        color: #6c757d;
    }
    
    .credential-value {
        font-family: monospace;
        background: #e9ecef;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
    }
    
    .steps-container {
        margin: 2rem 0;
        text-align: left;
    }
    
    .step-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid var(--primary-color);
    }
    
    .step-number {
        background: var(--primary-color);
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .step-content {
        flex: 1;
    }
    
    .step-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }
    
    .step-description {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .btn-login {
        background: var(--primary-color);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }
    
    .btn-login:hover {
        background: #0056b3;
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }
    
    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin: 1rem 0;
    }
    
    .alert-warning {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        color: #856404;
    }
    
    .alert-info {
        background: #d1ecf1;
        border: 1px solid #bee5eb;
        color: #0c5460;
    }
</style>
{% endblock %}

{% block content %}
<div class="success-container">
    <div class="success-icon">
        <i class="fas fa-check"></i>
    </div>
    
    <h1 class="success-title">Cadastro Realizado com Sucesso!</h1>
    
    <p class="success-message">
        Parabéns! Seu cadastro foi realizado com sucesso. Suas credenciais de acesso foram enviadas para o email informado.
    </p>
    
    {% if credentials %}
    <div class="credentials-box">
        <div class="credentials-title">
            <i class="fas fa-key me-2"></i>
            Suas Credenciais de Acesso
        </div>
        
        <div class="credential-item">
            <span class="credential-label">Usuário:</span>
            <span class="credential-value">{{ credentials.username }}</span>
        </div>
        
        <div class="credential-item">
            <span class="credential-label">Senha Temporária:</span>
            <span class="credential-value">{{ credentials.password }}</span>
        </div>
    </div>
    {% endif %}
    
    <div class="alert alert-warning">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Importante:</strong> Altere sua senha no primeiro acesso por segurança.
    </div>
    
    <div class="steps-container">
        <h3>Próximos Passos:</h3>
        
        <div class="step-item">
            <div class="step-number">1</div>
            <div class="step-content">
                <div class="step-title">Validação do Perfil</div>
                <div class="step-description">
                    Seu perfil está em análise e será validado em até 24 horas. Você receberá um email quando for aprovado.
                </div>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">2</div>
            <div class="step-content">
                <div class="step-title">Pagamento da Mensalidade</div>
                <div class="step-description">
                    Após a validação, você receberá instruções para realizar o pagamento da mensalidade via Mercado Pago.
                </div>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">3</div>
            <div class="step-content">
                <div class="step-title">Ativação do Perfil</div>
                <div class="step-description">
                    Após o pagamento confirmado, seu perfil será ativado e aparecerá no site para os clientes.
                </div>
            </div>
        </div>
        
        <div class="step-item">
            <div class="step-number">4</div>
            <div class="step-content">
                <div class="step-title">Completar Perfil</div>
                <div class="step-description">
                    Você poderá adicionar mais fotos, serviços e informações detalhadas sobre seus atendimentos.
                </div>
            </div>
        </div>
    </div>
    
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        <strong>Dúvidas?</strong> Entre em contato conosco através do email: suporte@allure.com.br
    </div>
    
    <a href="{% url 'accounts:login' %}" class="btn-login">
        <i class="fas fa-sign-in-alt me-2"></i>
        Fazer Login
    </a>
</div>
{% endblock %}