{% extends 'landing/base_landing.html' %}

{% block title %}Create Your Account - 3ncount2026{% endblock %}

{% block extra_css %}
<style>
    .register-section {
        padding: 4rem 0;
        background: var(--light-bg);
        min-height: 100vh;
    }
    
    .register-container {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .register-card {
        background: white;
        border-radius: 1rem;
        padding: 2.5rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    
    .register-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .register-header h1 {
        font-size: 2rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .register-header p {
        color: var(--text-secondary);
        font-size: 1rem;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-label {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
        display: block;
        font-size: 0.9375rem;
    }
    
    .form-label .required {
        color: #dc3545;
    }
    
    .form-control, .form-select {
        padding: 0.625rem 0.875rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 0.9375rem;
        transition: all 0.3s ease;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
        outline: none;
    }
    
    /* Password Strength */
    .password-strength {
        margin-top: 0.5rem;
        display: none;
    }
    
    .password-strength.active {
        display: block;
    }
    
    .strength-bar {
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        overflow: hidden;
        margin-bottom: 0.375rem;
    }
    
    .strength-fill {
        height: 100%;
        width: 0%;
        transition: all 0.3s ease;
    }
    
    .strength-fill.weak {
        width: 33%;
        background: #dc3545;
    }
    
    .strength-fill.medium {
        width: 66%;
        background: #ffc107;
    }
    
    .strength-fill.strong {
        width: 100%;
        background: #10b981;
    }
    
    .strength-text {
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    .strength-text.weak {
        color: #dc3545;
    }
    
    .strength-text.medium {
        color: #ffc107;
    }
    
    .strength-text.strong {
        color: #10b981;
    }
    
    /* Checkbox */
    .form-check {
        padding-left: 1.75rem;
    }
    
    .form-check-input {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.125rem;
        border: 2px solid #e2e8f0;
        margin-left: -1.75rem;
    }
    
    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .form-check-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
    }
    
    .form-check-label {
        font-size: 0.9375rem;
        color: var(--text-secondary);
    }
    
    .form-check-label a {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
    }
    
    .form-check-label a:hover {
        text-decoration: underline;
    }
    
    /* Submit Button - Normal Size */
    .btn-register-submit {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 0.5rem;
        border: none;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
        color: white;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .btn-register-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
    }
    
    .divider {
        text-align: center;
        margin: 1.5rem 0;
        position: relative;
    }
    
    .divider::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background: #e2e8f0;
    }
    
    .divider span {
        background: white;
        padding: 0 0.75rem;
        position: relative;
        color: var(--text-secondary);
        font-size: 0.9375rem;
        font-weight: 600;
    }
    
    .social-login {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .btn-social {
        padding: 0.625rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        background: white;
        color: var(--text-primary);
        font-weight: 600;
        font-size: 0.9375rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .btn-social:hover {
        border-color: var(--primary-color);
        background: var(--light-bg);
        transform: translateY(-2px);
    }
    
    .btn-social i {
        font-size: 1.125rem;
    }
    
    .login-link {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
        font-size: 0.9375rem;
    }
    
    .login-link a {
        color: var(--primary-color);
        font-weight: 700;
        text-decoration: none;
    }
    
    .login-link a:hover {
        text-decoration: underline;
    }
    
    .trust-features {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
        flex-wrap: wrap;
    }
    
    .trust-feature {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
    }
    
    .trust-feature i {
        color: var(--secondary-color);
        font-size: 1rem;
    }
    
    @media (max-width: 768px) {
        .register-card {
            padding: 2rem 1.5rem;
        }
        
        .register-header h1 {
            font-size: 1.75rem;
        }
        
        .social-login {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="register-section">
    <div class="container register-container">
        <div class="register-card">
            <div class="register-header">
                <h1>Start Your Free Trial</h1>
                <p>No credit card required • 14 days free</p>
            </div>
            
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}
            
            <div class="social-login">
                <button class="btn-social" onclick="alert('Google login coming soon!')">
                    <i class="bi bi-google"></i>
                    <span>Google</span>
                </button>
                <button class="btn-social" onclick="alert('Microsoft login coming soon!')">
                    <i class="bi bi-microsoft"></i>
                    <span>Microsoft</span>
                </button>
            </div>
            
            <div class="divider">
                <span>Or register with email</span>
            </div>
            
            <form method="post" novalidate>
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="full_name" class="form-label">
                        Full Name <span class="required">*</span>
                    </label>
                    <input type="text" class="form-control" id="full_name" name="full_name" 
                           placeholder="e.g., Ahmad bin Abdullah" required>
                </div>
                
                <div class="form-group">
                    <label for="email" class="form-label">
                        Email Address <span class="required">*</span>
                    </label>
                    <input type="email" class="form-control" id="email" name="email" 
                           placeholder="your.email@company.com" required>
                </div>
                
                <div class="form-group">
                    <label for="company_name" class="form-label">
                        Company Name <span class="required">*</span>
                    </label>
                    <input type="text" class="form-control" id="company_name" name="company_name" 
                           placeholder="e.g., ABC Trading Sdn Bhd" required>
                </div>
                
                <div class="form-group">
                    <label for="phone" class="form-label">
                        Phone Number
                    </label>
                    <input type="tel" class="form-control" id="phone" name="phone" 
                           placeholder="e.g., 012-345-6789">
                </div>
                
                <div class="form-group">
                    <label for="account_type" class="form-label">
                        Account Type <span class="required">*</span>
                    </label>
                    <select class="form-select" id="account_type" name="account_type" required>
                        <option value="business">Business / SME</option>
                        <option value="individual">Individual / Freelancer</option>
                        <option value="retail">Retail / Shop</option>
                        <option value="services">Services Provider</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="password" class="form-label">
                        Password <span class="required">*</span>
                    </label>
                    <input type="password" class="form-control" id="password" name="password" 
                           placeholder="Minimum 8 characters" required>
                    <div class="password-strength" id="password-strength">
                        <div class="strength-bar">
                            <div class="strength-fill" id="strength-fill"></div>
                        </div>
                        <div class="strength-text" id="strength-text"></div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="password_confirm" class="form-label">
                        Confirm Password <span class="required">*</span>
                    </label>
                    <input type="password" class="form-control" id="password_confirm" name="password_confirm" 
                           placeholder="Re-enter your password" required>
                </div>
                
                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="agree_terms" name="agree_terms" required>
                        <label class="form-check-label" for="agree_terms">
                            I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>
                        </label>
                    </div>
                </div>
                
                <button type="submit" class="btn-register-submit">
                    <i class="bi bi-rocket-takeoff-fill"></i>
                    <span>Create Account & Start Free Trial</span>
                </button>
                
                <div class="trust-features">
                    <div class="trust-feature">
                        <i class="bi bi-shield-fill-check"></i>
                        <span>Bank-Level Security</span>
                    </div>
                    <div class="trust-feature">
                        <i class="bi bi-award-fill"></i>
                        <span>No Credit Card Required</span>
                    </div>
                    <div class="trust-feature">
                        <i class="bi bi-clock-fill"></i>
                        <span>14-Day Free Trial</span>
                    </div>
                </div>
            </form>
            
            <div class="login-link">
                Already have an account? <a href="{% url 'landing:login' %}">Sign In</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Password strength indicator
    const passwordInput = document.getElementById('password');
    const strengthIndicator = document.getElementById('password-strength');
    const strengthFill = document.getElementById('strength-fill');
    const strengthText = document.getElementById('strength-text');
    
    passwordInput.addEventListener('input', function() {
        const password = this.value;
        
        if (password.length === 0) {
            strengthIndicator.classList.remove('active');
            return;
        }
        
        strengthIndicator.classList.add('active');
        
        let strength = 0;
        if (password.length >= 8) strength += 1;
        if (password.length >= 12) strength += 1;
        if (/[a-z]/.test(password)) strength += 1;
        if (/[A-Z]/.test(password)) strength += 1;
        if (/[0-9]/.test(password)) strength += 1;
        if (/[^a-zA-Z0-9]/.test(password)) strength += 1;
        
        strengthFill.className = 'strength-fill';
        strengthText.className = 'strength-text';
        
        if (strength <= 2) {
            strengthFill.classList.add('weak');
            strengthText.classList.add('weak');
            strengthText.textContent = 'Weak password';
        } else if (strength <= 4) {
            strengthFill.classList.add('medium');
            strengthText.classList.add('medium');
            strengthText.textContent = 'Medium password';
        } else {
            strengthFill.classList.add('strong');
            strengthText.classList.add('strong');
            strengthText.textContent = 'Strong password';
        }
    });
    
    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const passwordConfirm = document.getElementById('password_confirm').value;
        const agreeTerms = document.getElementById('agree_terms').checked;
        
        if (password !== passwordConfirm) {
            e.preventDefault();
            alert('Passwords do not match!');
            return false;
        }
        
        if (password.length < 8) {
            e.preventDefault();
            alert('Password must be at least 8 characters long!');
            return false;
        }
        
        if (!agreeTerms) {
            e.preventDefault();
            alert('You must agree to the Terms of Service and Privacy Policy!');
            return false;
        }
    });
</script>
{% endblock %}