{% extends "business/auth/auth_base.html" %}

{% block title %}Register - Inventory Management System{% endblock %}

{% block auth_title %}Create Your Account{% endblock %}

{% block auth_subtitle %}Start managing your inventory efficiently{% endblock %}

{% block auth_content %}
<form method="POST" action="{% url 'register' %}" novalidate enctype="multipart/form-data">
    {% csrf_token %}
    
    <h5 class="mb-3 text-muted">Account Information</h5>
    
    <!-- Username Field -->
    <div class="mb-3">
        <label for="id_username" class="form-label">Username *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-user"></i>
            </span>
            <input type="text" 
                   class="form-control {% if user_form.username.errors %}is-invalid{% endif %}" 
                   id="id_username" 
                   name="username" 
                   value="{{ user_form.username.value|default:'' }}"
                   placeholder="Choose a username"
                   required
                   minlength="3"
                   maxlength="150"
                   autocomplete="username"
                   autocorrect="off"
                   autocapitalize="none"
                   spellcheck="false">
        </div>
        {% if user_form.username.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.username.errors.0 }}
            </div>
        {% else %}
            <div class="form-text">3-150 characters. Letters, digits and @/./+/-/_ only.</div>
        {% endif %}
    </div>
    
    <!-- Email Field -->
    <div class="mb-3">
        <label for="id_email" class="form-label">Email Address *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-envelope"></i>
            </span>
            <input type="email" 
                   class="form-control {% if user_form.email.errors %}is-invalid{% endif %}" 
                   id="id_email" 
                   name="email" 
                   value="{{ user_form.email.value|default:'' }}"
                   placeholder="you@example.com"
                   required
                   autocomplete="email"
                   autocorrect="off"
                   autocapitalize="none"
                   spellcheck="false">
        </div>
        {% if user_form.email.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.email.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- First Name -->
    <div class="mb-3">
        <label for="id_first_name" class="form-label">First Name *</label>
        <input type="text" 
               class="form-control {% if user_form.first_name.errors %}is-invalid{% endif %}" 
               id="id_first_name" 
               name="first_name" 
               value="{{ user_form.first_name.value|default:'' }}"
               placeholder="John"
               required
               autocomplete="given-name">
        {% if user_form.first_name.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.first_name.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Last Name -->
    <div class="mb-3">
        <label for="id_last_name" class="form-label">Last Name *</label>
        <input type="text" 
               class="form-control {% if user_form.last_name.errors %}is-invalid{% endif %}" 
               id="id_last_name" 
               name="last_name" 
               value="{{ user_form.last_name.value|default:'' }}"
               placeholder="Doe"
               required
               autocomplete="family-name">
        {% if user_form.last_name.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.last_name.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Password -->
    <div class="mb-3">
        <label for="id_password1" class="form-label">Password *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-lock"></i>
            </span>
            <input type="password" 
                   class="form-control {% if user_form.password1.errors %}is-invalid{% endif %}" 
                   id="id_password1" 
                   name="password1" 
                   placeholder="Create a strong password"
                   required
                   autocomplete="new-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
        {% if user_form.password1.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.password1.errors.0 }}
            </div>
        {% else %}
            <div class="form-text">
                <ul class="small mb-0">
                    <li>At least 8 characters</li>
                    <li>Not too common</li>
                    <li>Not entirely numeric</li>
                </ul>
            </div>
        {% endif %}
    </div>
    
    <!-- Password Confirmation -->
    <div class="mb-4">
        <label for="id_password2" class="form-label">Confirm Password *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-lock"></i>
            </span>
            <input type="password" 
                   class="form-control {% if user_form.password2.errors %}is-invalid{% endif %}" 
                   id="id_password2" 
                   name="password2" 
                   placeholder="Confirm your password"
                   required
                   autocomplete="new-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
        {% if user_form.password2.errors %}
            <div class="invalid-feedback d-block">
                {{ user_form.password2.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <hr class="my-4">
    
    <h5 class="mb-3 text-muted">Business Information</h5>
    
    <!-- Business Name -->
    <div class="mb-3">
        <label for="id_name" class="form-label">Business Name *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-building"></i>
            </span>
            <input type="text" 
                   class="form-control {% if business_form.name.errors %}is-invalid{% endif %}" 
                   id="id_name" 
                   name="name" 
                   value="{{ business_form.name.value|default:'' }}"
                   placeholder="Your Business Name"
                   required
                   autocomplete="organization">
        </div>
        {% if business_form.name.errors %}
            <div class="invalid-feedback d-block">
                {{ business_form.name.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Business Type -->
    <div class="mb-3">
        <label for="id_business_type" class="form-label">Business Type *</label>
        <select class="form-select {% if business_form.business_type.errors %}is-invalid{% endif %}" 
                id="id_business_type" 
                name="business_type"
                required>
            <option value="" selected disabled>Select business type</option>
            {% for value, label in business_types %}
                <option value="{{ value }}" {% if business_form.business_type.value == value %}selected{% endif %}>
                    {{ label }}
                </option>
            {% endfor %}
        </select>
        {% if business_form.business_type.errors %}
            <div class="invalid-feedback d-block">
                {{ business_form.business_type.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Business Email -->
    <div class="mb-3">
        <label for="id_business_email" class="form-label">Business Email</label>
        <input type="email" 
               class="form-control {% if business_form.email.errors %}is-invalid{% endif %}" 
               id="id_business_email" 
               name="email" 
               value="{{ business_form.email.value|default:'' }}"
               placeholder="business@example.com"
               autocomplete="organization-email">
        {% if business_form.email.errors %}
            <div class="invalid-feedback d-block">
                {{ business_form.email.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Phone -->
    <div class="mb-3">
        <label for="id_phone" class="form-label">Phone Number *</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-phone"></i>
            </span>
            <input type="tel" 
                   class="form-control {% if business_form.phone.errors %}is-invalid{% endif %}" 
                   id="id_phone" 
                   name="phone" 
                   value="{{ business_form.phone.value|default:'' }}"
                   placeholder="+1234567890"
                   required
                   autocomplete="tel">
        </div>
        {% if business_form.phone.errors %}
            <div class="invalid-feedback d-block">
                {{ business_form.phone.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Address -->
    <div class="mb-4">
        <label for="id_address" class="form-label">Business Address *</label>
        <textarea class="form-control {% if business_form.address.errors %}is-invalid{% endif %}" 
                  id="id_address" 
                  name="address" 
                  rows="2"
                  placeholder="123 Business St, City, Country"
                  required
                  autocomplete="street-address">{{ business_form.address.value|default:'' }}</textarea>
        {% if business_form.address.errors %}
            <div class="invalid-feedback d-block">
                {{ business_form.address.errors.0 }}
            </div>
        {% endif %}
    </div>
    
    <!-- Terms and Conditions -->
    <div class="mb-4">
        <div class="form-check">
            <input class="form-check-input {% if form.errors %}is-invalid{% endif %}" 
                   type="checkbox" 
                   id="terms" 
                   name="terms"
                   required>
            <label class="form-check-label small" for="terms">
                I agree to the <a href="#" class="text-decoration-none">Terms of Service</a> and <a href="#" class="text-decoration-none">Privacy Policy</a> *
            </label>
            <div class="invalid-feedback">
                You must agree to the terms and conditions.
            </div>
        </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary-auth btn-auth mb-3">
        <i class="fas fa-user-plus me-2"></i>
        Create Account
    </button>
    
    <!-- Demo Login -->
    <div class="text-center mt-3">
        <p class="small text-muted mb-2">Want to try first?</p>
        <a href="#" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-play-circle me-1"></i>
            Try Demo Account
        </a>
    </div>
</form>
{% endblock %}

{% block auth_footer %}
<p class="mb-0">
    Already have an account? 
    <a href="{% url 'login' %}" class="fw-semibold">Sign in here</a>
</p>
{% endblock %}

{% block extra_js %}
<script>
    // Real-time password strength indicator
    const passwordInput = document.getElementById('id_password1');
    const passwordStrength = document.createElement('div');
    passwordStrength.className = 'password-strength mt-2 small';
    passwordInput.parentNode.appendChild(passwordStrength);
    
    passwordInput.addEventListener('input', function() {
        const password = this.value;
        let strength = 0;
        let feedback = '';
        
        if (password.length >= 8) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[^A-Za-z0-9]/.test(password)) strength++;
        
        switch(strength) {
            case 0:
            case 1:
                feedback = '<span class="text-danger">Weak</span>';
                break;
            case 2:
                feedback = '<span class="text-warning">Fair</span>';
                break;
            case 3:
            case 4:
                feedback = '<span class="text-info">Good</span>';
                break;
            case 5:
                feedback = '<span class="text-success">Strong</span>';
                break;
        }
        
        passwordStrength.innerHTML = `Password strength: ${feedback}`;
    });
    
    // Password confirmation check
    const password2Input = document.getElementById('id_password2');
    password2Input.addEventListener('input', function() {
        const password1 = passwordInput.value;
        const password2 = this.value;
        
        if (password2 && password1 !== password2) {
            this.classList.add('is-invalid');
            this.classList.remove('is-valid');
        } else if (password2) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        }
    });
</script>
{% endblock %}