{% macro pricing_tab(pricing_plans, csrf_token) %}
<div class="pricing-configuration">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Pricing Plans Configuration</h4>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPricingPlanModal">
            <i class="fas fa-plus me-2"></i>Add New Plan
        </button>
    </div>

    <!-- Pricing Plans List -->
    <div class="row" id="pricingPlansContainer">
        {% for plan in pricing_plans %}
        <div class="col-md-6 col-lg-4 mb-4" data-plan-id="{{ plan.id }}">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ plan.name }}</h5>
                    <div class="form-check form-switch">
                        <input class="form-check-input plan-status-toggle" type="checkbox" 
                               data-plan-id="{{ plan.id }}" 
                               {% if plan.is_active %}checked{% endif %}>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Monthly Price:</strong> €{{ "%.2f"|format(plan.monthly_price) }}<br>
                        <strong>Annual Price:</strong> €{{ "%.2f"|format(plan.annual_price) }}
                    </div>
                    
                    {% if plan.description %}
                    <div class="mb-3">
                        <strong>Description:</strong><br>
                        <small class="text-muted">{{ plan.description }}</small>
                    </div>
                    {% endif %}
                    
                    <!-- Quotas Section -->
                    <div class="mb-3">
                        <strong>Quotas:</strong>
                        <div class="row mt-2">
                            <div class="col-6">
                                <small class="text-muted">
                                    <i class="fas fa-door-open me-1"></i>Rooms: {{ plan.format_quota_display('room_quota') }}<br>
                                    <i class="fas fa-comments me-1"></i>Conversations: {{ plan.format_quota_display('conversation_quota') }}<br>
                                    <i class="fas fa-hdd me-1"></i>Storage: {{ plan.format_quota_display('storage_quota_gb') }}
                                </small>
                            </div>
                            <div class="col-6">
                                <small class="text-muted">
                                    <i class="fas fa-user-tie me-1"></i>Managers: {{ plan.format_quota_display('manager_quota') }}<br>
                                    <i class="fas fa-user-shield me-1"></i>Admins: {{ plan.format_quota_display('admin_quota') }}
                                </small>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stripe Integration Info -->
                    {% if plan.stripe_product_id or plan.stripe_monthly_price_id or plan.stripe_annual_price_id %}
                    <div class="mb-3">
                        <strong>Stripe Integration:</strong>
                        <div class="mt-2">
                            {% if plan.stripe_product_id %}
                            <div class="mb-1">
                                <small class="text-muted">
                                    <i class="fas fa-tag me-1"></i>Product ID: 
                                    <code class="text-primary">{{ plan.stripe_product_id }}</code>
                                </small>
                            </div>
                            {% endif %}
                            {% if plan.stripe_monthly_price_id %}
                            <div class="mb-1">
                                <small class="text-muted">
                                    <i class="fas fa-credit-card me-1"></i>Monthly Price ID: 
                                    <code class="text-primary">{{ plan.stripe_monthly_price_id }}</code>
                                </small>
                            </div>
                            {% endif %}
                            {% if plan.stripe_annual_price_id %}
                            <div class="mb-1">
                                <small class="text-muted">
                                    <i class="fas fa-credit-card me-1"></i>Annual Price ID: 
                                    <code class="text-primary">{{ plan.stripe_annual_price_id }}</code>
                                </small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <strong>Features:</strong>
                        <ul class="list-unstyled mt-2">
                            {% for feature in plan.features %}
                            <li><i class="fas fa-check text-success me-2"></i>{{ feature }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input plan-popular-toggle" type="checkbox" 
                                   data-plan-id="{{ plan.id }}" 
                                   {% if plan.is_popular %}checked{% endif %}>
                            <label class="form-check-label">Most Popular</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input plan-custom-toggle" type="checkbox" 
                                   data-plan-id="{{ plan.id }}" 
                                   {% if plan.is_custom %}checked{% endif %}>
                            <label class="form-check-label">Custom Plan</label>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-sm btn-outline-primary edit-plan-btn" 
                                data-plan-id="{{ plan.id }}"
                                data-bs-toggle="modal" data-bs-target="#editPricingPlanModal">
                            <i class="fas fa-edit me-1"></i>Edit
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger delete-plan-btn" 
                                data-plan-id="{{ plan.id }}">
                            <i class="fas fa-trash me-1"></i>Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-tags fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No pricing plans configured</h5>
                <p class="text-muted">Click "Add New Plan" to create your first pricing plan.</p>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Add Pricing Plan Modal -->
<div class="modal fade" id="addPricingPlanModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Pricing Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addPricingPlanForm">
                <div class="modal-body">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="planName" class="form-label">Plan Name *</label>
                                <input type="text" class="form-control" id="planName" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="planDescription" class="form-label">Description</label>
                                <textarea class="form-control" id="planDescription" name="description" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="monthlyPrice" class="form-label">Monthly Price (€) *</label>
                                <input type="number" class="form-control" id="monthlyPrice" name="monthly_price" 
                                       step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="annualPrice" class="form-label">Annual Price (€) *</label>
                                <input type="number" class="form-control" id="annualPrice" name="annual_price" 
                                       step="0.01" min="0" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quotas Section -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Resource Quotas</h6>
                            <small class="text-muted">Set to 0 for unlimited</small>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="roomQuota" class="form-label">Room Quota</label>
                                        <input type="number" class="form-control" id="roomQuota" name="room_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of rooms allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="conversationQuota" class="form-label">Conversation Quota</label>
                                        <input type="number" class="form-control" id="conversationQuota" name="conversation_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of conversations allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="storageQuota" class="form-label">Storage Quota (GB)</label>
                                        <input type="number" class="form-control" id="storageQuota" name="storage_quota_gb" 
                                               min="0" value="0">
                                        <small class="text-muted">Storage limit in gigabytes</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="managerQuota" class="form-label">Manager Quota</label>
                                        <input type="number" class="form-control" id="managerQuota" name="manager_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of manager users allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="adminQuota" class="form-label">Admin Quota</label>
                                        <input type="number" class="form-control" id="adminQuota" name="admin_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of admin users allowed</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="planFeatures" class="form-label">Features *</label>
                        <div id="featuresContainer">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control feature-input" name="features[]" required>
                                <button type="button" class="btn btn-outline-danger remove-feature-btn">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="addFeatureBtn">
                            <i class="fas fa-plus me-1"></i>Add Feature
                        </button>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="buttonText" class="form-label">Button Text</label>
                                <input type="text" class="form-control" id="buttonText" name="button_text" 
                                       value="Get Started">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stripe Product/Price IDs Section -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeProductId" class="form-label">Stripe Product ID</label>
                                <input type="text" class="form-control" id="stripeProductId" name="stripe_product_id" placeholder="prod_xxx">
                                <small class="text-muted">The Stripe Product ID for this plan</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeMonthlyPriceId" class="form-label">Stripe Monthly Price ID</label>
                                <input type="text" class="form-control" id="stripeMonthlyPriceId" name="stripe_monthly_price_id" placeholder="price_xxx">
                                <small class="text-muted">The Stripe Price ID for monthly billing</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeAnnualPriceId" class="form-label">Stripe Annual Price ID</label>
                                <input type="text" class="form-control" id="stripeAnnualPriceId" name="stripe_annual_price_id" placeholder="price_xxx">
                                <small class="text-muted">The Stripe Price ID for annual billing</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isPopular" name="is_popular">
                                <label class="form-check-label" for="isPopular">Most Popular</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isCustom" name="is_custom">
                                <label class="form-check-label" for="isCustom">Custom Plan</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="isActive" name="is_active" checked>
                                <label class="form-check-label" for="isActive">Active</label>
                            </div>
                        </div>
                    </div>
                </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">Create Plan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Pricing Plan Modal -->
<div class="modal fade" id="editPricingPlanModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Pricing Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editPricingPlanForm">
                <div class="modal-body">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <input type="hidden" id="editPlanId" name="plan_id">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editPlanName" class="form-label">Plan Name *</label>
                                <input type="text" class="form-control" id="editPlanName" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editPlanDescription" class="form-label">Description</label>
                                <textarea class="form-control" id="editPlanDescription" name="description" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editMonthlyPrice" class="form-label">Monthly Price (€) *</label>
                                <input type="number" class="form-control" id="editMonthlyPrice" name="monthly_price" 
                                       step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editAnnualPrice" class="form-label">Annual Price (€) *</label>
                                <input type="number" class="form-control" id="editAnnualPrice" name="annual_price" 
                                       step="0.01" min="0" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quotas Section -->
                    <div class="card mb-3">
                        <div class="card-header">
                            <h6 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Resource Quotas</h6>
                            <small class="text-muted">Set to 0 for unlimited</small>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="editRoomQuota" class="form-label">Room Quota</label>
                                        <input type="number" class="form-control" id="editRoomQuota" name="room_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of rooms allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="editConversationQuota" class="form-label">Conversation Quota</label>
                                        <input type="number" class="form-control" id="editConversationQuota" name="conversation_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of conversations allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="editStorageQuota" class="form-label">Storage Quota (GB)</label>
                                        <input type="number" class="form-control" id="editStorageQuota" name="storage_quota_gb" 
                                               min="0" value="0">
                                        <small class="text-muted">Storage limit in gigabytes</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="editManagerQuota" class="form-label">Manager Quota</label>
                                        <input type="number" class="form-control" id="editManagerQuota" name="manager_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of manager users allowed</small>
                                    </div>
                                    <div class="mb-3">
                                        <label for="editAdminQuota" class="form-label">Admin Quota</label>
                                        <input type="number" class="form-control" id="editAdminQuota" name="admin_quota" 
                                               min="0" value="0">
                                        <small class="text-muted">Number of admin users allowed</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="editPlanFeatures" class="form-label">Features *</label>
                        <div id="editFeaturesContainer">
                            <!-- Features will be populated dynamically -->
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="editAddFeatureBtn">
                            <i class="fas fa-plus me-1"></i>Add Feature
                        </button>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editButtonText" class="form-label">Button Text</label>
                                <input type="text" class="form-control" id="editButtonText" name="button_text">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stripe Product/Price IDs Section -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeProductId" class="form-label">Stripe Product ID</label>
                                <input type="text" class="form-control" id="stripeProductId" name="stripe_product_id" placeholder="prod_xxx">
                                <small class="text-muted">The Stripe Product ID for this plan</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeMonthlyPriceId" class="form-label">Stripe Monthly Price ID</label>
                                <input type="text" class="form-control" id="stripeMonthlyPriceId" name="stripe_monthly_price_id" placeholder="price_xxx">
                                <small class="text-muted">The Stripe Price ID for monthly billing</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="stripeAnnualPriceId" class="form-label">Stripe Annual Price ID</label>
                                <input type="text" class="form-control" id="stripeAnnualPriceId" name="stripe_annual_price_id" placeholder="price_xxx">
                                <small class="text-muted">The Stripe Price ID for annual billing</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editIsPopular" name="is_popular">
                                <label class="form-check-label" for="editIsPopular">Most Popular</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editIsCustom" name="is_custom">
                                <label class="form-check-label" for="editIsCustom">Custom Plan</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editIsActive" name="is_active">
                                <label class="form-check-label" for="editIsActive">Active</label>
                            </div>
                        </div>
                    </div>
                </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">Update Plan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePricingPlanModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Pricing Plan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this pricing plan? This action cannot be undone.</p>
                <p class="text-danger"><strong>Plan: <span id="deletePlanName"></span></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeletePlan">Delete Plan</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}