{% extends "admin_base.html" %}

{% block title %}Create Tenant{% endblock %}
{% block page_title %}Create New Tenant{% endblock %}
{% block page_description %}Add a new tenant organization to the system{% 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-plus me-2 text-primary"></i>New Tenant Registration
                    </h5>
                    <span class="badge bg-info">Step 1 of 1</span>
                </div>
            </div>
            <div class="card-body">
                <form method="post" id="tenantCreateForm">
                    {% csrf_token %}

                    <!-- Business Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-building me-2"></i>Business Information
                            </h6>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label fw-semibold">Business Name *</label>
                                <input type="text" class="form-control form-control-lg" name="name" id="name" required>
                                <div class="form-text">Legal business name for the organization</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="slug" class="form-label fw-semibold">Subdomain *</label>
                                <div class="input-group input-group-lg">
                                    <input type="text" class="form-control" name="slug" id="slug" required pattern="[a-z0-9-]+">
                                    <span class="input-group-text">.salesshark.com</span>
                                </div>
                                <div class="form-text">Only lowercase letters, numbers, and hyphens. Must be unique.</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="contact_email" class="form-label fw-semibold">Business Email *</label>
                                <input type="email" class="form-control form-control-lg" name="contact_email" id="contact_email" required>
                                <div class="form-text">Primary business contact email</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="contact_phone" class="form-label fw-semibold">Business Phone *</label>
                                <input type="tel" class="form-control form-control-lg" name="contact_phone" id="contact_phone" required>
                                <div class="form-text">Primary business phone number</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="address" class="form-label fw-semibold">Business Address</label>
                        <textarea class="form-control" name="address" id="address" rows="3" placeholder="Enter complete business address"></textarea>
                        <div class="form-text">Physical location of the business</div>
                    </div>

                    <!-- Subscription Plan Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-crown me-2"></i>Subscription Plan
                            </h6>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="plan" class="form-label fw-semibold">Select Plan *</label>
                                <select class="form-select form-select-lg" name="plan" id="plan" required>
                                    {% for value, label in plan_choices %}
                                    <option value="{{ value }}" {% if value == 'basic' %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text">Plan can be changed later in tenant settings</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label fw-semibold">Initial Status</label>
                                <select class="form-select form-select-lg" name="status" id="status">
                                    <option value="trial" selected>Trial (14 days free)</option>
                                    <option value="active">Active (Paid subscription)</option>
                                    <option value="suspended">Suspended</option>
                                </select>
                                <div class="form-text">Default is 14-day trial period</div>
                            </div>
                        </div>
                    </div>

                    <!-- Resource Limits Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-sliders-h me-2"></i>Resource Limits
                            </h6>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_shops" class="form-label fw-semibold">Maximum Shops</label>
                                <input type="number" class="form-control form-control-lg" name="max_shops" id="max_shops" value="1" min="1" max="50">
                                <div class="form-text">Number of shops/branches allowed</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_users" class="form-label fw-semibold">Maximum Users</label>
                                <input type="number" class="form-control form-control-lg" name="max_users" id="max_users" value="5" min="1" max="100">
                                <div class="form-text">Number of user accounts allowed</div>
                            </div>
                        </div>
                    </div>

                    <!-- Owner Information Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-user-crown me-2"></i>Owner Account Information
                            </h6>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="owner_first_name" class="form-label fw-semibold">First Name *</label>
                                <input type="text" class="form-control form-control-lg" name="owner_first_name" id="owner_first_name" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="owner_last_name" class="form-label fw-semibold">Last Name *</label>
                                <input type="text" class="form-control form-control-lg" name="owner_last_name" id="owner_last_name" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="owner_email" class="form-label fw-semibold">Owner Email *</label>
                                <input type="email" class="form-control form-control-lg" name="owner_email" id="owner_email" required>
                                <div class="form-text">Will be used for login and notifications</div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Settings -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-cog me-2"></i>Additional Settings
                            </h6>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="send_welcome_email" id="send_welcome_email" checked>
                                    <label class="form-check-label fw-semibold" for="send_welcome_email">
                                        Send Welcome Email
                                    </label>
                                    <div class="form-text">Send login credentials to owner email</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="auto_setup" id="auto_setup" checked>
                                    <label class="form-check-label fw-semibold" for="auto_setup">
                                        Auto Setup
                                    </label>
                                    <div class="form-text">Create default shop and settings</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between pt-4 border-top">
                        <a href="{% url 'tenants_admin:tenant_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>Create Tenant
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <!-- Plan 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 text-info"></i>Plan Information
                </h6>
            </div>
            <div class="card-body">
                <div id="plan-info">
                    <div class="plan-details" data-plan="basic">
                        <h6 class="text-primary">Basic Plan - KES 2,000/month</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success me-2"></i>1 Shop/Branch</li>
                            <li><i class="fas fa-check text-success me-2"></i>Up to 5 Users</li>
                            <li><i class="fas fa-check text-success me-2"></i>Basic Reports</li>
                            <li><i class="fas fa-check text-success me-2"></i>Email Support</li>
                        </ul>
                    </div>
                    <div class="plan-details d-none" data-plan="standard">
                        <h6 class="text-primary">Standard Plan - KES 5,000/month</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success me-2"></i>Up to 3 Shops</li>
                            <li><i class="fas fa-check text-success me-2"></i>Up to 15 Users</li>
                            <li><i class="fas fa-check text-success me-2"></i>Advanced Reports</li>
                            <li><i class="fas fa-check text-success me-2"></i>Priority Support</li>
                            <li><i class="fas fa-check text-success me-2"></i>API Access</li>
                        </ul>
                    </div>
                    <div class="plan-details d-none" data-plan="premium">
                        <h6 class="text-primary">Premium Plan - KES 10,000/month</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success me-2"></i>Unlimited Shops</li>
                            <li><i class="fas fa-check text-success me-2"></i>Unlimited Users</li>
                            <li><i class="fas fa-check text-success me-2"></i>All Reports & Analytics</li>
                            <li><i class="fas fa-check text-success me-2"></i>24/7 Phone Support</li>
                            <li><i class="fas fa-check text-success me-2"></i>Custom Integrations</li>
                            <li><i class="fas fa-check text-success me-2"></i>White Label Options</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Creation Steps -->
        <div class="admin-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-list-check me-2 text-success"></i>What happens next?
                </h6>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Tenant Created</h6>
                            <small class="text-muted">Organization account is set up</small>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Owner Account</h6>
                            <small class="text-muted">Admin user account is created</small>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Welcome Email</h6>
                            <small class="text-muted">Login credentials sent to owner</small>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker bg-warning"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Trial Started</h6>
                            <small class="text-muted">14-day free trial begins</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item {
    position: relative;
    margin-bottom: 24px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -18px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px currentColor;
}

.timeline-content h6 {
    color: #1e293b;
    font-weight: 600;
}

.form-control-lg, .form-select-lg {
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

.form-control-lg:focus, .form-select-lg:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-check-input:checked {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from business name
    const nameField = document.getElementById('name');
    const slugField = document.getElementById('slug');

    nameField.addEventListener('input', function() {
        const slug = this.value
            .toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-')
            .replace(/^-+|-+$/g, '');
        slugField.value = slug;
    });

    // Copy business email to owner email if not set
    const contactEmailField = document.getElementById('contact_email');
    const ownerEmailField = document.getElementById('owner_email');

    contactEmailField.addEventListener('blur', function() {
        if (!ownerEmailField.value && this.value) {
            ownerEmailField.value = this.value;
        }
    });

    // Plan selection handler
    const planField = document.getElementById('plan');
    const planDetails = document.querySelectorAll('.plan-details');

    function updatePlanInfo() {
        const selectedPlan = planField.value;
        planDetails.forEach(detail => {
            if (detail.dataset.plan === selectedPlan) {
                detail.classList.remove('d-none');
            } else {
                detail.classList.add('d-none');
            }
        });

        // Update resource limits based on plan
        const maxShopsField = document.getElementById('max_shops');
        const maxUsersField = document.getElementById('max_users');

        switch(selectedPlan) {
            case 'basic':
                maxShopsField.value = Math.min(maxShopsField.value, 1);
                maxUsersField.value = Math.min(maxUsersField.value, 5);
                break;
            case 'standard':
                maxShopsField.value = Math.min(maxShopsField.value, 3);
                maxUsersField.value = Math.min(maxUsersField.value, 15);
                break;
            case 'premium':
                // No limits for premium
                break;
        }
    }

    planField.addEventListener('change', updatePlanInfo);
    updatePlanInfo(); // Initial load

    // Form validation
    const form = document.getElementById('tenantCreateForm');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function(e) {
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Creating Tenant...';
        submitBtn.disabled = true;
    });

    // Real-time slug validation
    slugField.addEventListener('input', function() {
        const slug = this.value;
        const pattern = /^[a-z0-9-]+$/;

        if (slug && !pattern.test(slug)) {
            this.classList.add('is-invalid');
            this.setCustomValidity('Only lowercase letters, numbers, and hyphens allowed');
        } else {
            this.classList.remove('is-invalid');
            this.setCustomValidity('');
        }
    });
});
</script>
{% endblock %}