{% extends "admin_base.html" %}

{% block title %}Add Tenant User{% endblock %}
{% block page_title %}Add User to Tenant{% endblock %}
{% block page_description %}Assign a user to a tenant organization{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xl-8">
        <div class="admin-card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user-plus me-2 text-primary"></i>Add User to Tenant
                    </h5>
                </div>
            </div>
            <div class="card-body">
                <form method="post" id="tenantUserCreateForm">
                    {% csrf_token %}
                    
                    <!-- User Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-user me-2"></i>User Information
                            </h6>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" class="form-control" name="first_name" id="first_name" 
                                       placeholder="Enter first name">
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" class="form-control" name="last_name" id="last_name" 
                                       placeholder="Enter last name">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="user_email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="user_email" id="user_email" 
                                       placeholder="user@example.com" required>
                                <div class="form-text">User will be created if email doesn't exist</div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tenant" class="form-label">Tenant <span class="text-danger">*</span></label>
                                <select class="form-select" name="tenant" id="tenant" required>
                                    <option value="">Select Tenant</option>
                                    {% for tenant in tenants %}
                                    <option value="{{ tenant.id }}">{{ tenant.name }} ({{ tenant.slug }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                                <select class="form-select" name="role" id="role" required>
                                    <option value="">Select Role</option>
                                    {% for value, label in role_choices %}
                                    <option value="{{ value }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">User's role within the tenant organization</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input type="password" class="form-control" name="password" id="password" 
                                       placeholder="Leave blank to auto-generate">
                                <div class="form-text">Leave blank to generate a random password</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between pt-4 border-top">
                        <a href="{% url 'tenants_admin:tenant_user_list' %}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-arrow-left me-2"></i>Back to List
                        </a>
                        <button type="submit" class="btn btn-admin-primary btn-lg" id="submitBtn">
                            <i class="fas fa-save me-2"></i>Add User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-xl-4">
        <!-- Role Information Card -->
        <div class="admin-card mb-4">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-info-circle me-2"></i>Role Descriptions
                </h6>
            </div>
            <div class="card-body">
                <div class="role-info">
                    <div class="mb-3">
                        <strong class="text-primary">Owner</strong>
                        <p class="small text-muted mb-0">Full access to all tenant features and settings</p>
                    </div>
                    <div class="mb-3">
                        <strong class="text-info">Admin</strong>
                        <p class="small text-muted mb-0">Administrative access with some restrictions</p>
                    </div>
                    <div class="mb-3">
                        <strong class="text-warning">Manager</strong>
                        <p class="small text-muted mb-0">Management access to specific modules</p>
                    </div>
                    <div class="mb-0">
                        <strong class="text-secondary">Staff</strong>
                        <p class="small text-muted mb-0">Basic access for day-to-day operations</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Quick Tips Card -->
        <div class="admin-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-lightbulb me-2"></i>Quick Tips
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>If user doesn't exist, they will be created automatically</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>A temporary password will be generated for new users</small>
                    </li>
                    <li class="mb-0">
                        <i class="fas fa-check text-success me-2"></i>
                        <small>Users can be assigned to multiple tenants with different roles</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('tenantUserCreateForm');
    const submitBtn = document.getElementById('submitBtn');
    
    // Form validation
    form.addEventListener('submit', function(e) {
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Adding User...';
        submitBtn.disabled = true;
    });
    
    // Email validation
    const emailField = document.getElementById('user_email');
    emailField.addEventListener('input', function() {
        const email = this.value;
        const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        
        if (email && !pattern.test(email)) {
            this.classList.add('is-invalid');
            this.setCustomValidity('Please enter a valid email address');
        } else {
            this.classList.remove('is-invalid');
            this.setCustomValidity('');
        }
    });
});
</script>
{% endblock %}