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

{% block title %}Managed {{ offering.service.name }} on {{ offering.cloud_provider.name }}{% 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 16h10a1.5 1.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 %}
                </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 %}

                    <!-- Plans or Service Plans -->
                    <div class="pt-24" id="plans" style="scroll-margin-top: 30px;">
                        {% if offering.msp == "VS" and pricing_data_by_group_and_service_level %}
                            <!-- Service Plans with Pricing Data -->
                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Service Plans</h3>
                            <div class="accordion" id="servicePlansAccordion">
                                {% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ forloop.counter }}">
                                            <button class="accordion-button{% if not forloop.first %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ forloop.counter }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ forloop.counter }}">
                                                <strong>{{ group_name }}</strong>
                                            </button>
                                        </h2>
                                        <div id="collapse{{ forloop.counter }}" class="accordion-collapse collapse{% if forloop.first %} show{% endif %}" aria-labelledby="heading{{ forloop.counter }}" data-bs-parent="#servicePlansAccordion">
                                            <div class="accordion-body">
                                                {% comment %} Display group description from first available plan {% endcomment %}
                                                {% for service_level, pricing_data in service_levels.items %}
                                                    {% if pricing_data and forloop.first %}
                                                        {% with pricing_data.0 as representative_plan %}
                                                            {% if representative_plan.compute_plan_group_description %}
                                                                <p class="text-muted mb-3">{{ representative_plan.compute_plan_group_description }}</p>
                                                            {% endif %}
                                                        {% endwith %}
                                                    {% endif %}
                                                    {% if forloop.first %}
                                                        {% comment %} Only show description for first service level {% endcomment %}
                                                    {% endif %}
                                                {% endfor %}
                                                
                                                {% for service_level, pricing_data in service_levels.items %}
                                                    <div class="mb-4">
                                                        <h4 class="mb-3 text-primary">{{ service_level }}</h4>
                                                        {% if pricing_data %}
                                                            <div class="table-responsive">
                                                                <table class="table table-striped table-sm">
                                                                    <thead class="table-dark">
                                                                        <tr>
                                                                            <th>Compute Plan</th>
                                                                            <th>vCPUs</th>
                                                                            <th>RAM (GB)</th>
                                                                            <th>Currency</th>
                                                                            <th>Compute Price</th>
                                                                            <th>Service Price</th>
                                                                            <th class="table-warning">Total Price</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        {% for row in pricing_data %}
                                                                        <tr>
                                                                            <td>{{ row.compute_plan }}</td>
                                                                            <td>{{ row.vcpus }}</td>
                                                                            <td>{{ row.ram }}</td>
                                                                            <td>{{ row.currency }}</td>
                                                                            <td>{{ row.compute_plan_price|floatformat:2 }}</td>
                                                                            <td>{{ row.sla_price|floatformat:2 }}</td>
                                                                            <td class="table-warning fw-bold">{{ row.final_price|floatformat:2 }}</td>
                                                                        </tr>
                                                                        {% endfor %}
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        {% else %}
                                                            <p class="text-muted">No pricing data available for {{ service_level }}.</p>
                                                        {% endif %}
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% elif offering.plans.all %}
                            <!-- Traditional Plans -->
                            <h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
                            <div class="row">
                                {% for plan in offering.plans.all %}
                                <div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
                                    <div class="bg-purple-50 rounded-16 border-all p-24">
                                        <div class="bg-white border-all rounded-7 p-20 mb-20">
                                            <h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
                                            {% if plan.plan_description %}
                                            <div class="text-black mb-20">
                                                {{ plan.plan_description.text|safe }}
                                            </div>
                                            {% endif %}
                                            {% if plan.description %}
                                            <div class="text-black mb-20">
                                                {{ plan.description|safe }}
                                            </div>
                                            {% endif %}
                                            {% if plan.pricing %}
                                            <div class="text-black mb-20">
                                                {{ plan.pricing|safe }}
                                            </div>
                                            {% endif %}
                                        </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>
                        {% 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 %}
                        
                        {% if offering.plans.exists %}
                        <div class="pt-40">
                            <h4 class="fs-22 fw-semibold lh-1 mb-12">I'm interested in a 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>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}