{% extends "layout.html" %}

{% block content %}
<div class="admin-container">
    <h1>
        {% if is_initial_setup %}
            Welcome to {{ g.branding.app_name }}
        {% else %}
            Create New Company
        {% endif %}
    </h1>
    
    <!-- Info Message -->
    {% if is_initial_setup %}
        <div class="info-message">
            <h3><i class="ti ti-confetti"></i> Let's Get Started!</h3>
            <p>Set up your company and create the first administrator account to begin using {{ g.branding.app_name }}.</p>
        </div>
    {% elif is_super_admin %}
        <div class="info-message">
            <h3><i class="ti ti-building"></i> New Company Setup</h3>
            <p>Create a new company with its own administrator. This will be a separate organization within {{ g.branding.app_name }}.</p>
        </div>
    {% else %}
        <div class="error-message">
            <h3><i class="ti ti-alert-triangle"></i> Access Denied</h3>
            <p>You do not have permission to create new companies.</p>
            <a href="{{ url_for('home') }}" class="btn btn-secondary">Return Home</a>
        </div>
        {% set show_form = false %}
    {% endif %}

    {% if is_initial_setup or is_super_admin %}
        {% set show_form = true %}
    {% endif %}

    {% if show_form %}
        <form method="POST" class="company-setup-form">
            <!-- Company Information Section -->
            <div class="form-section">
                <h2>Company Information</h2>
                
                <div class="form-group">
                    <label for="company_name">Company Name</label>
                    <input type="text" id="company_name" name="company_name" class="form-control" 
                           value="{{ request.form.company_name or '' }}" required autofocus
                           placeholder="e.g., Acme Corporation">
                    <small class="form-help">This will be displayed throughout the application</small>
                </div>

                <div class="form-group">
                    <label for="company_description">Description (Optional)</label>
                    <textarea id="company_description" name="company_description" class="form-control" 
                              rows="3" placeholder="Brief description of your company">{{ request.form.company_description or '' }}</textarea>
                </div>
            </div>

            <!-- Administrator Account Section -->
            <div class="form-section">
                <h2>Administrator Account</h2>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="admin_username">Username</label>
                        <input type="text" id="admin_username" name="admin_username" class="form-control" 
                               value="{{ request.form.admin_username or '' }}" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="admin_email">Email</label>
                        <input type="email" id="admin_email" name="admin_email" class="form-control" 
                               value="{{ request.form.admin_email or '' }}" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="admin_password">Password</label>
                        <input type="password" id="admin_password" name="admin_password" class="form-control" required>
                        <small class="form-help">Minimum 6 characters</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirm_password">Confirm Password</label>
                        <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
                    </div>
                </div>

                <div class="admin-info">
                    <h3>Administrator Privileges</h3>
                    <p>
                        {% if is_initial_setup %}
                            This account will have full access to manage users, teams, and projects within your company.
                        {% else %}
                            This administrator will have full control over the new company and its users, teams, and projects.
                        {% endif %}
                    </p>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="form-actions">
                {% if is_super_admin %}
                    <a href="{{ url_for('companies.admin_company') }}" class="btn btn-secondary">
                        <i class="ti ti-arrow-left"></i> Back to Dashboard
                    </a>
                {% endif %}
                <button type="submit" class="btn btn-success">
                    <i class="ti ti-rocket"></i> {% if is_initial_setup %}Create Company & Admin Account{% else %}Create New Company{% endif %}
                </button>
            </div>
        </form>

        {% if is_initial_setup and existing_companies > 0 %}
            <div class="alternative-actions">
                <p>Already have an account?</p>
                <a href="{{ url_for('login') }}" class="btn btn-secondary">Go to Login</a>
            </div>
        {% endif %}
    {% endif %}
</div>

<script>
// Form validation
function validatePasswords() {
    const password = document.getElementById('admin_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const confirmField = document.getElementById('confirm_password');
    
    if (password && confirmPassword && password !== confirmPassword) {
        confirmField.setCustomValidity('Passwords do not match');
        return false;
    } else {
        confirmField.setCustomValidity('');
        return true;
    }
}

document.getElementById('confirm_password').addEventListener('input', validatePasswords);
document.getElementById('admin_password').addEventListener('input', validatePasswords);

// Form submission validation
document.querySelector('.company-setup-form').addEventListener('submit', function(e) {
    if (!validatePasswords()) {
        e.preventDefault();
        alert('Please ensure passwords match before submitting.');
    }
});
</script>

<style>
.company-setup-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
}

.form-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.info-message {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border: 1px solid #b3d9ff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.info-message h3 {
    margin-top: 0;
    color: #0066cc;
    font-size: 24px;
}

.info-message p {
    margin-bottom: 0;
    color: #555;
    font-size: 16px;
}

.error-message {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.error-message h3 {
    margin-top: 0;
    color: #c53030;
    font-size: 24px;
}

.error-message p {
    margin-bottom: 20px;
    color: #555;
    font-size: 16px;
}

.admin-info {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.admin-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0066cc;
    font-size: 16px;
}

.admin-info p {
    margin-bottom: 0;
    color: #555;
    line-height: 1.5;
}

.alternative-actions {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.alternative-actions p {
    margin-bottom: 15px;
    color: #666;
}
</style>
{% endblock %}