{% extends "admin_base.html" %}
{% load static %}

{% block title %}{{ tenant.name }} - Tenant Details{% endblock %}
{% block page_title %}{{ tenant.name }}{% endblock %}
{% block page_description %}Detailed information about this tenant organization{% endblock %}

{% block content %}
<!-- Quick Actions Bar -->
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex gap-2">
                <a href="{% url 'tenants_admin:tenant_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to List
                </a>
                <a href="{% url 'tenants_admin:tenant_edit' tenant.id %}" class="btn btn-admin-primary">
                    <i class="fas fa-edit me-2"></i>Edit Tenant
                </a>
            </div>
            <div class="d-flex gap-2">
                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fas fa-cog me-1"></i>Actions
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="sendReminder('{{ tenant.id }}')">
                            <i class="fas fa-envelope me-2"></i>Send Reminder
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="loginAsTenant('{{ tenant.id }}')">
                            <i class="fas fa-sign-in-alt me-2"></i>Login As Tenant
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item text-warning" href="#" onclick="suspendTenant('{{ tenant.id }}')">
                            <i class="fas fa-pause me-2"></i>Suspend Tenant
                        </a></li>
                        <li><a class="dropdown-item text-danger" href="#" onclick="deleteTenant('{{ tenant.id }}')">
                            <i class="fas fa-trash me-2"></i>Delete Tenant
                        </a></li>
                    </ul>
                </div>
                <!-- Email Actions -->
                <div class="dropdown">
                    <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fas fa-paper-plane me-1"></i>Email
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="showEmailModal('{{ tenant.id }}')">
                            <i class="fas fa-envelope me-2"></i>Send Custom Email
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="showInvitationModal('{{ tenant.id }}')">
                            <i class="fas fa-user-plus me-2"></i>Send Invitation Email
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tenant Overview Cards -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card {% if tenant.status == 'active' %}success{% elif tenant.status == 'trial' %}warning{% elif tenant.status == 'expired' %}danger{% else %}secondary{% endif %}">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ tenant.get_status_display }}</h3>
                    <p class="mb-0">Current Status</p>
                </div>
                <div>
                    <i class="fas fa-{% if tenant.status == 'active' %}check-circle{% elif tenant.status == 'trial' %}clock{% elif tenant.status == 'expired' %}exclamation-triangle{% else %}pause{% endif %} fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card {% if tenant.days_remaining > 7 %}success{% elif tenant.days_remaining > 3 %}warning{% else %}danger{% endif %}">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ tenant.days_remaining }}</h3>
                    <p class="mb-0">Days Remaining</p>
                </div>
                <div>
                    <i class="fas fa-calendar-alt fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ tenant_users.count }}</h3>
                    <p class="mb-0">Total Users</p>
                </div>
                <div>
                    <i class="fas fa-users fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">{{ shops.count }}</h3>
                    <p class="mb-0">Active Shops</p>
                </div>
                <div>
                    <i class="fas fa-store fa-2x opacity-75"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Basic Information -->
    <div class="col-lg-8">
        <div class="admin-card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle me-2"></i>Basic Information
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Organization Name</label>
                            <p class="form-control-plaintext">{{ tenant.name }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Tenant Code</label>
                            <div class="input-group">
                                <span class="form-control">{{ tenant.tenant_code }}</span>
                                <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('{{ tenant.tenant_code }}')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Plan</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-info">{{ tenant.get_plan_display }}</span>
                            </p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Contact Email</label>
                            <p class="form-control-plaintext">
                                <a href="mailto:{{ tenant.contact_email }}">{{ tenant.contact_email }}</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Owner</label>
                            <p class="form-control-plaintext">
                                {{ tenant.owner.get_full_name|default:tenant.owner.username }}
                                <br><small class="text-muted">{{ tenant.owner.email }}</small>
                            </p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Contact Phone</label>
                            <p class="form-control-plaintext">{{ tenant.contact_phone|default:"Not provided" }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Created Date</label>
                            <p class="form-control-plaintext">{{ tenant.created_at|date:"M d, Y H:i" }}</p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Trial Ends</label>
                            <p class="form-control-plaintext">
                                {% if tenant.trial_ends_at %}
                                    {{ tenant.trial_ends_at|date:"M d, Y H:i" }}
                                {% else %}
                                    Not set
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                {% if tenant.address %}
                <div class="row">
                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Address</label>
                            <p class="form-control-plaintext">{{ tenant.address }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Users Section -->
        <div class="admin-card mb-4">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-users me-2"></i>Users ({{ tenant_users.count }})
                    </h5>
                    <a href="{% url 'tenants_admin:tenant_user_create' %}" class="btn btn-sm btn-admin-primary">
                        <i class="fas fa-plus me-1"></i>Add User
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                {% if tenant_users %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Joined</th>
                                <th width="100">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tenant_user in tenant_users %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="user-avatar me-3">
                                            {{ tenant_user.user.first_name.0|default:tenant_user.user.username.0|upper }}
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{{ tenant_user.user.get_full_name|default:tenant_user.user.username }}</div>
                                            <small class="text-muted">{{ tenant_user.user.email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-{% if tenant_user.role == 'owner' %}primary{% elif tenant_user.role == 'admin' %}success{% else %}secondary{% endif %}">
                                        {{ tenant_user.get_role_display }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{% if tenant_user.is_active %}success{% else %}danger{% endif %}">
                                        {% if tenant_user.is_active %}Active{% else %}Inactive{% endif %}
                                    </span>
                                </td>
                                <td>{{ tenant_user.joined_at|date:"M d, Y" }}</td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#">
                                                <i class="fas fa-edit me-2"></i>Edit Role
                                            </a></li>
                                            <li><a class="dropdown-item text-danger" href="#">
                                                <i class="fas fa-trash me-2"></i>Remove
                                            </a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                    <h6>No users found</h6>
                    <p class="text-muted">This tenant has no assigned users.</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Shops Section -->
        <div class="admin-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-store me-2"></i>Shops ({{ shops.count }})
                </h5>
            </div>
            <div class="card-body p-0">
                {% if shops %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Shop Name</th>
                                <th>Address</th>
                                <th>Phone</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for shop in shops %}
                            <tr>
                                <td class="fw-semibold">{{ shop.name }}</td>
                                <td>{{ shop.address|default:"Not provided" }}</td>
                                <td>{{ shop.phone|default:"Not provided" }}</td>
                                <td>{{ shop.email|default:"Not provided" }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-store fa-3x text-muted mb-3"></i>
                    <h6>No shops configured</h6>
                    <p class="text-muted">This tenant has no shops set up yet.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Sidebar Information -->
    <div class="col-lg-4">
        <!-- Limits & Usage -->
        <div class="admin-card mb-4">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-chart-bar me-2"></i>Limits & Usage
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="fw-semibold">Users</small>
                        <small>{{ tenant_users.count }} / {{ tenant.max_users }}</small>
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar" style="width: {% widthratio tenant_users.count tenant.max_users 100 %}%"></div>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="fw-semibold">Shops</small>
                        <small>{{ shops.count }} / {{ tenant.max_shops }}</small>
                    </div>
                    <div class="progress" style="height: 6px;">
                        <div class="progress-bar" style="width: {% widthratio shops.count tenant.max_shops 100 %}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="admin-card mb-4">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-tachometer-alt me-2"></i>Quick Stats
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 mb-0 text-primary">{{ tenant.get_plan_price|floatformat:0 }}</div>
                            <small class="text-muted">KES/month</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 mb-0 text-success">{{ tenant.created_at|timesince }}</div>
                            <small class="text-muted">Old</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="admin-card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-history me-2"></i>Recent Activity
                </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="timeline-title">Tenant Created</h6>
                            <p class="timeline-description">Organization was registered</p>
                            <small class="text-muted">{{ tenant.created_at|timesince }} ago</small>
                        </div>
                    </div>
                    {% if tenant.trial_ends_at %}
                    <div class="timeline-item">
                        <div class="timeline-marker bg-warning"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">Trial Period</h6>
                            <p class="timeline-description">14-day trial started</p>
                            <small class="text-muted">Expires {{ tenant.trial_ends_at|timeuntil }}</small>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Email Modals -->
<!-- Custom Email Modal -->
<div class="modal fade" id="customEmailModal" tabindex="-1" aria-labelledby="customEmailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="customEmailModalLabel">Send Email to {{ tenant.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="customEmailForm" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" class="form-control" id="subject" name="subject" required>
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" id="message" name="message" rows="5" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="attachment" class="form-label">Attachment (Optional)</label>
                        <input class="form-control" type="file" id="attachment" name="attachment">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Send Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Invitation Email Modal -->
<div class="modal fade" id="invitationModal" tabindex="-1" aria-labelledby="invitationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="invitationModalLabel">Send Invitation to {{ tenant.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="invitationForm">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="invite_email" class="form-label">Recipient Email</label>
                        <input type="email" class="form-control" id="invite_email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="invite_first_name" class="form-label">First Name</label>
                        <input type="text" class="form-control" id="invite_first_name" name="first_name">
                    </div>
                    <div class="mb-3">
                        <label for="invite_last_name" class="form-label">Last Name</label>
                        <input type="text" class="form-control" id="invite_last_name" name="last_name">
                    </div>
                    <div class="mb-3">
                        <label for="invite_role" class="form-label">Role</label>
                        <select class="form-select" id="invite_role" name="role">
                            {% for value, name in tenant_user_roles %}
                                <option value="{{ value }}">{{ name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="invite_message" class="form-label">Invitation Message (Optional)</label>
                        <textarea class="form-control" id="invite_message" name="message" rows="3"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Send Invitation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_css %}
<style>
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

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

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: 12px;
    bottom: -1.5rem;
    width: 2px;
    background-color: #dee2e6;
}

.timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.timeline-description {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        showAlert('Tenant code copied to clipboard!', 'success');
    });
}

function sendReminder(tenantId) {
    if (confirm('Send reminder email to this tenant?')) {
        fetch('/system-admin/tenants/' + tenantId + '/send-reminder/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Reminder sent successfully!', 'success');
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function suspendTenant(tenantId) {
    if (confirm('Suspend this tenant? They will lose access to their account.')) {
        updateTenantStatus(tenantId, 'suspended');
    }
}

function deleteTenant(tenantId) {
    const confirmText = 'DELETE';
    const userInput = prompt('This action cannot be undone. Type "' + confirmText + '" to confirm deletion:');

    if (userInput === confirmText) {
        fetch('/system-admin/tenants/' + tenantId + '/delete/', {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '/system-admin/tenants/';
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        });
    }
}

function updateTenantStatus(tenantId, status) {
    fetch('/system-admin/tenants/' + tenantId + '/status/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'status=' + status
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            showAlert('Error: ' + data.error, 'danger');
        }
    });
}

function loginAsTenant(tenantId) {
    if (confirm('Login as this tenant? This will redirect you to their dashboard.')) {
        window.open('/system-admin/tenants/' + tenantId + '/login/', '_blank');
    }
}

function showAlert(message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'danger' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    const container = document.querySelector('.admin-main');
    container.insertBefore(alertDiv, container.firstChild);

    setTimeout(() => {
        const bsAlert = new bootstrap.Alert(alertDiv);
        bsAlert.close();
    }, 5000);
}

    function showEmailModal(tenantId) {
        const modal = new bootstrap.Modal(document.getElementById('customEmailModal'));
        modal.show();
    }

    function showInvitationModal(tenantId) {
        const modal = new bootstrap.Modal(document.getElementById('invitationModal'));
        modal.show();
    }

    // Handle custom email form submission
    document.getElementById('customEmailForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Sending...';
        submitBtn.disabled = true;

        fetch(`/admin/tenants/{{ tenant.id }}/send-email/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Email sent successfully!', 'success');
                bootstrap.Modal.getInstance(document.getElementById('customEmailModal')).hide();
                this.reset();
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        })
        .catch(error => {
            showAlert('Error sending email: ' + error.message, 'danger');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    // Handle invitation form submission
    document.getElementById('invitationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Sending...';
        submitBtn.disabled = true;

        fetch(`/admin/tenants/{{ tenant.id }}/send-invitation/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('Invitation sent successfully!', 'success');
                bootstrap.Modal.getInstance(document.getElementById('invitationModal')).hide();
                this.reset();
                // Refresh page to show new user if account was created
                if (data.account_created) {
                    setTimeout(() => location.reload(), 2000);
                }
            } else {
                showAlert('Error: ' + data.error, 'danger');
            }
        })
        .catch(error => {
            showAlert('Error sending invitation: ' + error.message, 'danger');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
</script>
{% endblock %}