{% extends 'base.html' %}
{% load static %}
{% load contact_tags %}

{% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% endblock %}

{% block extra_js %}
<script defer src="{% static "js/price-calculator.js" %}"></script>
<link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
<style>
/* Subtle styling for the best plan */
.card.border-success.border-2 {
    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.1) !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card.border-success.border-2:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15) !important;
}

/* Best choice badge styling */
.badge.bg-success {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
    border: 2px solid white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    min-width: max-content;
}

/* Subtle enhancement for best plan button */
.btn-success.shadow {
    transition: all 0.2s ease-in-out;
}

.btn-success.shadow:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important;
}
</style>
<script>
// Function to select a plan in the dropdown when clicking "Select This Plan"
function selectPlan(element) {
    const planId = element.getAttribute('data-plan-id');
    const planName = element.getAttribute('data-plan-name');
    
    // Find the plan dropdown in the contact form
    const planDropdown = document.getElementById('id_choice');
    if (planDropdown) {
        // Find the option with matching plan id and select it
        for (let i = 0; i < planDropdown.options.length; i++) {
            const optionValue = planDropdown.options[i].value;
            if (optionValue.startsWith(planId + '|')) {
                planDropdown.selectedIndex = i;
                break;
            }
        }
    }
}
</script>
{% endblock %}

{% block content %}
<section class="section bg-primary-subtle">
    <div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
        <header class="section-primary__header text-center">
            <h1 class="section-h1 fs-40 fs-lg-64 mb-24">Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}</h1>
            <div class="text-gray-300 w-lg-37 mx-auto">
                <p class="mb-0">Details about {{ offering.service.name }} managed by VSHN on {{ offering.cloud_provider.name }}</p>
            </div>
        </header>
    </div>
</section>

<section class="section">
    <div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
        <div class="row">
            <!-- Left Sidebar -->
            <div class="col-12 col-lg-3">
                <div class="pr-lg-6">
                    <!-- Logo -->
                    <div class="mb-40 border rounded-4 p-4 d-flex align-items-center justify-content-center" style="min-height: 160px;">
                        {% if offering.service.logo %}
                            <a href="{{ offering.service.get_absolute_url }}">
                                <img class="img-fluid w-100 w-lg-auto" src="{{ offering.service.logo.url }}" 
                                     alt="{{ offering.service.name }} logo" style="max-height: 120px; object-fit: contain;">
                            </a>
                        {% endif %}
                    </div>

                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Managed by</h3>
                        <a href="https://www.vshn.ch/" target="_blank">
                          <img class="img-fluid" src="{% static "img/vshn-logo-wide.png" %}" alt="VSHN logo" style="max-height: 40px;">
                        </a>
                    </div>

                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Runs on</h3>
                        <a href="{{ offering.cloud_provider.get_absolute_url }}">
                          <img class="img-fluid" src="{{ offering.cloud_provider.logo.url }}" alt="{{ offering.cloud_provider.name }} logo" style="max-height: 40px;">
                        </a>
                    </div>

                    <!-- External Links for Offering -->
                    {% if offering.external_links.exists %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">External Links</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for link in offering.external_links.all %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ link.url }}" target="_blank">
                                    <span class="pr-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a.5.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" fill="#9A63EC"/>
                                            <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" fill="#9A63EC"/>
                                          </svg>
                                    </span>
                                    <span>{{ link.description }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Consulting Partners -->
                    {% if  offering.service.consulting_partners.exists %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Consulting Partners</h3>
                        <p>If you want to get the most out of your managed {{ offering.service.name }}, our consulting partners can help you optimize your setup and application:</p>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for partner in  offering.service.consulting_partners.all %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ partner.get_absolute_url }}">
                                    <span class="pr-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
                                            <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" fill="#9A63EC"/>
                                        </svg>
                                    </span>
                                    <span>{{ partner.name }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Related Articles about Service -->
                    {% if service_articles %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Articles about {{ offering.service.name }}</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for article in service_articles %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ article.get_absolute_url }}">
                                    <span class="pr-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-text" viewBox="0 0 16 16">
                                            <path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" fill="#9A63EC"/>
                                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" fill="#9A63EC"/>
                                        </svg>
                                    </span>
                                    <span>{{ article.title }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Related Articles about Provider -->
                    {% if provider_articles %}
                    <div class="mb-40">
                        <h3 class="fw-semibold mb-12">Articles about {{ offering.cloud_provider.name }}</h3>
                        <ul class="list-unstyled space-y-12 fs-19 ps-0">
                            {% for article in provider_articles %}
                            <li>
                                <a class="d-flex align-items-center text-gray-500 h-32 lh-32" href="{{ article.get_absolute_url }}">
                                    <span class="pr-10">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-text" viewBox="0 0 16 16">
                                            <path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" fill="#9A63EC"/>
                                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z" fill="#9A63EC"/>
                                        </svg>
                                    </span>
                                    <span>{{ article.title }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Main Content -->
            <div class="col-12 col-lg-9">
                <div class="pr-lg-32">
                    <!-- Header -->
                    <div class="pt-60 pb-lg-60">
                        <div class="row">
                            <div class="col-lg-8">
                                <header>
                                    <h2 class="fs-50 fw-semibold lh-1 mb-12"><a href="{{ offering.service.get_absolute_url }}" class="text-decoration-none">Managed {{ offering.service.name }}</a></h2>
                                </header>
                                <div class="fs-19 text-gray-500">
                                    {% for category in offering.service.categories.all %}
                                        <button class="btn btn-tertiary btn-sm mr-12">{{ category.full_path }}</button>
                                    {% endfor %}
                                    <button class="btn btn-tertiary btn-sm mr-12">Managed by VSHN</button>
                                    <button class="btn btn-tertiary btn-sm mr-12">Running on {{ offering.cloud_provider.name }}</button>
                                </div>
                    
                                {% if offering.short_description %}
                                <div class="fs-19 text-gray-500">
                                    {{ offering.short_description|safe }}
                                </div>
                                {% endif %}
                            </div>
                    
                            <div class="col-lg-4 d-flex align-items-center justify-content-lg-end mt-4 mt-lg-0">
                                <a href="#plans" class="btn btn-primary btn-lg px-4 py-2 fw-semibold d-flex align-items-center">
                                    <i class="bi bi-cart me-2"></i>Get It
                                </a>
                            </div>
                        </div>
                    </div>

                    {% if offering.service.description %}
                    <!-- Service Overview -->
                    <div>
                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Service Overview</h3>
                        <div class="fs-19 text-gray-500">
                            {{ offering.service.description|safe }}
                        </div>
                    </div>
                    {% endif %}

                    {% if offering.offer_description or offering.description %}
                    <!-- Offering Description -->
                    <div class="pt-40 pt-lg-34">
                        <h3 class="fs-24 fw-semibold lh-1 mb-12">Offering</h3>
                        {% if offering.description %}
                        <div class="fs-19 text-gray-500">
                            {{ offering.description|safe }}
                        </div>
                        {% endif %}
                        {% if  offering.offer_description %}
                        <div class="fs-19 text-gray-500">
                            {{ offering.offer_description.get_full_text|safe }}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}

                    <!-- Price Calculator -->
                    <div class="pt-24" id="plans" style="scroll-margin-top: 30px;">
                        {% if offering.msp == "VS" and price_calculator_enabled and pricing_data_by_group_and_service_level %}
                            <!-- Interactive Price Calculator -->
                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Choose your Plan</h3>
                            <div class="bg-light rounded-4 p-4 mb-4">
                                <div class="row">
                                    <!-- Calculator Controls -->
                                    <div class="col-12 col-lg-6">
                                        <div class="card h-100">
                                            <div class="card-body">                                               
                                                <!-- CPU Slider -->
                                                <div class="mb-4">
                                                    <label for="cpuRange" class="form-label d-flex justify-content-between">
                                                        <span>vCPUs</span>
                                                        <span class="fw-bold" id="cpuValue">2</span>
                                                    </label>
                                                    <input type="range" class="form-range" id="cpuRange" min="1" max="32" value="2" step="1">
                                                    <div class="d-flex justify-content-between text-muted small">
                                                        <span id="cpuMinDisplay">1</span>
                                                        <span id="cpuMaxDisplay">32</span>
                                                    </div>
                                                </div>

                                                <!-- Memory Slider -->
                                                <div class="mb-4">
                                                    <label for="memoryRange" class="form-label d-flex justify-content-between">
                                                        <span>Memory (GB)</span>
                                                        <span class="fw-bold" id="memoryValue">4</span>
                                                    </label>
                                                    <input type="range" class="form-range" id="memoryRange" min="1" max="128" value="4" step="1">
                                                    <div class="d-flex justify-content-between text-muted small">
                                                        <span id="memoryMinDisplay">1 GB</span>
                                                        <span id="memoryMaxDisplay">128 GB</span>
                                                    </div>
                                                </div>

                                                <!-- Storage Slider -->
                                                <div class="mb-4">
                                                    <label for="storageRange" class="form-label d-flex justify-content-between">
                                                        <span>Storage (GB)</span>
                                                        <span class="fw-bold" id="storageValue">20</span>
                                                    </label>
                                                    <input type="range" class="form-range" id="storageRange" min="10" max="1000" value="20" step="10">
                                                    <div class="d-flex justify-content-between text-muted small">
                                                        <span id="storageMinDisplay">10 GB</span>
                                                        <span id="storageMaxDisplay">1000 GB</span>
                                                    </div>
                                                </div>

                                                <!-- Instances Slider -->
                                                <div class="mb-4">
                                                    <label for="instancesRange" class="form-label d-flex justify-content-between">
                                                        <span>Instances</span>
                                                        <span class="fw-bold" id="instancesValue">1</span>
                                                    </label>
                                                    <input type="range" class="form-range" id="instancesRange" min="1" max="1" value="1" step="1">
                                                    <div class="d-flex justify-content-between text-muted small">
                                                        <span id="instancesMinDisplay">1</span>
                                                        <span id="instancesMaxDisplay">1</span>
                                                    </div>
                                                </div>

                                                <!-- Service Level Selection -->
                                                <div class="mb-4">
                                                    <label class="form-label">Service Level</label>
                                                    <div class="btn-group w-100" role="group" id="serviceLevelGroup">
                                                        <input type="radio" class="btn-check" name="serviceLevel" id="serviceLevelBestEffort" value="Best Effort" checked>
                                                        <label class="btn btn-outline-primary" for="serviceLevelBestEffort">Best Effort</label>
                                                        
                                                        <input type="radio" class="btn-check" name="serviceLevel" id="serviceLevelGuaranteed" value="Guaranteed Availability">
                                                        <label class="btn btn-outline-primary" for="serviceLevelGuaranteed">Guaranteed Availability</label>
                                                    </div>
                                                </div>
                                                
                                                <!-- Addons Section - Hidden by default, shown by JS if addons exist -->
                                                <div class="mb-4" id="addonsSection" style="display: none;">
                                                    <label class="form-label">Add-ons (Optional)</label>
                                                    <div id="addonsContainer">
                                                        <!-- Add-ons will be dynamically populated here -->
                                                    </div>
                                                </div>

                                                <!-- Direct Plan Selection -->
                                                <div class="mb-4">
                                                    <label for="planSelect" class="form-label">Or choose a specific plan</label>
                                                    <select class="form-select" id="planSelect">
                                                        <option value="">Auto-select best matching plan</option>
                                                    </select>
                                                    <p><small class="form-text text-muted">Selecting a plan will override the slider configuration</small></p>
                                                    <p><small class="form-text text-muted"><i class="bi bi-info-circle me-1"></i> Interested in a custom plan? Let us know via the <a href="#form">contact form</a>.</small></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Results Panel -->
                                    <div class="col-12 col-lg-6">
                                        <div class="card h-100 border-primary">
                                            <div class="card-body">
                                                <h5 class="card-title text-primary mb-4">Your Plan</h5>
                                                
                                                <!-- Plan Match Status -->
                                                <div id="planMatchStatus" class="alert alert-info mb-3">
                                                    <i class="bi bi-info-circle me-2"></i>
                                                    <span>Finding best matching plan...</span>
                                                </div>

                                                <!-- Selected Plan Details -->
                                                <div id="selectedPlanDetails" style="display: none;">
                                                    <div class="mb-3">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <span class="badge me-2" id="planGroup"></span>
                                                            <strong id="planName"></strong>
                                                        </div>
                                                        <small class="text-muted" id="planDescription"></small>
                                                    </div>

                                                    <div class="row mb-3">
                                                        <div class="col-3">
                                                            <small class="text-muted">vCPUs</small>
                                                            <div class="fw-bold" id="planCpus"></div>
                                                        </div>
                                                        <div class="col-3">
                                                            <small class="text-muted">Memory</small>
                                                            <div class="fw-bold" id="planMemory"></div>
                                                        </div>
                                                        <div class="col-3">
                                                            <small class="text-muted">Instances</small>
                                                            <div class="fw-bold" id="planInstances"></div>
                                                        </div>
                                                    </div>

                                                    <div class="row mb-3">
                                                        <div class="col-12">
                                                            <small class="text-muted">Service Level</small>
                                                            <div class="fw-bold">
                                                                <a href="https://products.vshn.ch/service_levels.html" target="_blank" class="text-decoration-none" id="planServiceLevel"></a>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Pricing Breakdown -->
                                                    <div class="border-top pt-3">
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span>Managed Service (incl. Compute)</span>
                                                            <span class="fw-bold">CHF <span id="managedServicePrice">0.00</span></span>
                                                        </div>
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span>Storage - <span id="storageAmount">20</span> GB</span>
                                                            <span class="fw-bold">CHF <span id="storagePrice">0.00</span></span>
                                                        </div>
                                                        
                                                        <!-- Addons Pricing -->
                                                        <div id="addonPricingContainer">
                                                            <!-- Addon pricing will be dynamically added here -->
                                                        </div>
                                                        
                                                        <hr>
                                                        <div class="d-flex justify-content-between">
                                                            <span class="fs-5 fw-bold">Total Monthly Price</span>
                                                            <span class="fs-4 fw-bold text-primary">CHF <span id="totalPrice">0.00</span></span>
                                                        </div>
                                                        <small class="text-muted mt-2 d-block">
                                                            <i class="bi bi-info-circle me-1"></i>
                                                            Monthly pricing based on 30 days (720 hours). Billing is conducted per hour.
                                                        </small>
                                                    </div>
                                                </div>

                                                <!-- No Match Found -->
                                                <div id="noMatchFound" style="display: none;" class="alert alert-warning">
                                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                                    No matching plan found for your requirements. Please adjust your configuration.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Order Button -->
                            <div class="text-center mt-4">
                                <a href="#order-form" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
                                    <i class="bi bi-cart me-2"></i>Order This Configuration
                                </a>
                            </div>

                            <!-- Order Form Section -->
                            <div id="order-form" class="pt-40" style="scroll-margin-top: 30px;">
                                <h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Configuration</h4>
                                <div class="row">
                                    <div class="col-12">
                                        {% embedded_contact_form source="Configuration Order" service=offering.service offering_id=offering.id %}
                                    </div>
                                </div>
                            </div>
                        {% elif offering.plans.all %}
                            <!-- Traditional Plans -->
                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Choose your Plan</h3>
                            <div class="bg-light rounded-4 p-4 mb-4">
                                <div class="row">
                                    {% for plan in offering.plans.all %}
                                    <div class="col-12 {% if offering.plans.all|length == 1 %}col-lg-8 mx-auto{% elif offering.plans.all|length == 2 %}col-lg-6{% else %}col-lg-4{% endif %} mb-4">
                                        <div class="card h-100 {% if plan.is_best %}border-success border-2 shadow-sm{% else %}border-primary shadow-sm{% endif %} position-relative">
                                            {% if plan.is_best %}
                                            <!-- Best Plan Badge -->
                                            <div class="position-absolute top-0 start-50 translate-middle" style="z-index: 10;">
                                                <span class="badge bg-success px-3 py-2 fs-6 fw-bold shadow-sm text-nowrap">
                                                    <i class="bi bi-star-fill me-1"></i>Best Choice
                                                </span>
                                            </div>
                                            {% endif %}
                                            <div class="card-body pt-3 d-flex flex-column">
                                                <h5 class="card-title {% if plan.is_best %}text-success{% else %}text-primary{% endif %} mb-3 fw-bold">
                                                    <i class="bi bi-{% if plan.is_best %}award{% else %}box{% endif %} me-2"></i>{{ plan.name }}
                                                </h5>
                                                
                                                <!-- Plan Description -->
                                                {% if plan.plan_description %}
                                                <div class="mb-3">
                                                    <small class="text-muted">Description</small>
                                                    <div class="text-dark">
                                                        {{ plan.plan_description.text|safe }}
                                                    </div>
                                                </div>
                                                {% endif %}
                                                
                                                {% if plan.description %}
                                                <div class="mb-3">
                                                    <small class="text-muted">Details</small>
                                                    <div class="text-dark">
                                                        {{ plan.description|safe }}
                                                    </div>
                                                </div>
                                                {% endif %}

                                                <!-- Pricing Information -->
                                                {% if plan.plan_prices.exists %}
                                                <div class="{% if plan.is_best %}border-top border-success{% else %}border-top{% endif %} pt-3 mt-3 flex-grow-1 d-flex flex-column">
                                                    <div class="mb-2">
                                                        <small class="{% if plan.is_best %}text-success fw-semibold{% else %}text-muted{% endif %}">Pricing</small>
                                                    </div>
                                                    <div class="flex-grow-1">
                                                        <div class="d-flex justify-content-between mb-2">
                                                            <span>Monthly Price</span>
                                                            <div class="text-end">
                                                                {% for price in plan.plan_prices.all %}
                                                                <div class="fs-5 fw-bold {% if plan.is_best %}text-success{% else %}text-primary{% endif %}">{{ price.currency }} {{ price.amount }}</div>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <small class="text-muted mt-2 d-block">
                                                        <i class="bi bi-info-circle me-1"></i>
                                                        Prices exclude VAT. Monthly pricing based on 30 days.
                                                    </small>
                                                </div>
                                                {% else %}
                                                <div class="{% if plan.is_best %}border-top border-success{% else %}border-top{% endif %} pt-3 mt-3 flex-grow-1 d-flex align-items-center justify-content-center">
                                                    <div class="text-center text-muted">
                                                        <i class="bi bi-envelope me-2"></i>Contact us for pricing details
                                                    </div>
                                                </div>
                                                {% endif %}

                                                <!-- Plan Action Button -->
                                                <div class="text-center mt-auto pt-3">
                                                    <a href="#plan-order-form" class="btn {% if plan.is_best %}btn-success btn-lg px-4 py-2 shadow{% else %}btn-primary btn-lg px-4 py-2{% endif %} fw-semibold w-100" data-plan-id="{{ plan.id }}" data-plan-name="{{ plan.name }}" onclick="selectPlan(this)">
                                                        <i class="bi bi-{% if plan.is_best %}star-fill{% else %}cart{% endif %} me-2"></i>{% if plan.is_best %}Select Best Plan{% else %}Select This Plan{% endif %}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% empty %} 
                                    <div class="col-12" id="interest" style="scroll-margin-top: 30px;">
                                        <div class="alert alert-info">
                                            <p>No plans available yet.</p>
                                            <h4 class="mb-3">I'm interested in this offering</h4>
                                            {% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <!-- Plan Order Forms -->
                            <div id="plan-order-form" class="pt-40" style="scroll-margin-top: 30px;">
                                <h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Plan</h4>
                                <div class="row">
                                    <div class="col-12">
                                        {% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            <!-- No Plans Available -->
                            <div class="col-12" id="interest" style="scroll-margin-top: 30px;">
                                <h4 class="mb-3">I'm interested in this offering</h4>
                                {% load contact_tags %}
                                {% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}