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

{% block title %}Complete Price List{% endblock %}

{% block extra_js %}
<script src="{% static "js/chart.js" %}"></script>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">Complete Price List - All Service Variants</h1>
            
            {% if pricing_data_by_group_and_service_level %}
                {% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
                    <div class="mb-5 border rounded p-3">
                        <h2 class="mb-3 text-primary">{{ group_name }}</h2>

                        {# Display group description and node_label from first available plan #}
                        {% 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-2"><strong>Description:</strong> {{ representative_plan.compute_plan_group_description }}</p>
                                    {% endif %}
                                    {% if representative_plan.compute_plan_group_node_label %}
                                        <p class="text-muted mb-3"><strong>Node Label:</strong> <code>{{ representative_plan.compute_plan_group_node_label }}</code></p>
                                    {% endif %}
                                {% endwith %}
                            {% endif %}
                        {% endfor %}
                        
                        {% for service_level, pricing_data in service_levels.items %}
                            <div class="mb-4">
                                <h3 class="mb-3 text-secondary">{{ service_level }}</h3>
                                {% if pricing_data %}
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-sm">
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>Cloud Provider</th>
                                                    <th>Service</th>
                                                    <th>Compute Plan</th>
                                                    <th>vCPUs</th>
                                                    <th>RAM (GB)</th>
                                                    <th>CPU/Memory Ratio</th>
                                                    <th>Term</th>
                                                    <th>Currency</th>
                                                    <th>Compute Plan Price</th>
                                                    <th>Variable Unit</th>
                                                    <th>Units</th>
                                                    <th>Replica Enforce</th>
                                                    <th>SLA Base</th>
                                                    <th>SLA Per Unit</th>
                                                    <th>SLA Price</th>
                                                    {% if show_discount_details %}
                                                    <th>Discount Model</th>
                                                    <th>Discount Details</th>
                                                    {% endif %}
                                                    <th class="table-warning">Final Price</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for row in pricing_data %}
                                                <tr>
                                                    <td>{{ row.cloud_provider }}</td>
                                                    <td>{{ row.service }}</td>
                                                    <td>{{ row.compute_plan }}</td>
                                                    <td>{{ row.vcpus }}</td>
                                                    <td>{{ row.ram }}</td>
                                                    <td>{{ row.cpu_mem_ratio }}</td>
                                                    <td>{{ row.term }}</td>
                                                    <td>{{ row.currency }}</td>
                                                    <td>{{ row.compute_plan_price|floatformat:2 }}</td>
                                                    <td>{{ row.variable_unit }}</td>
                                                    <td>{{ row.units }}</td>
                                                    <td>{{ row.replica_enforce }}</td>
                                                    <td>{{ row.sla_base|floatformat:2 }}</td>
                                                    <td>{{ row.sla_per_unit|floatformat:4 }}</td>
                                                    <td>{{ row.sla_price|floatformat:2 }}</td>
                                                    {% if show_discount_details %}
                                                    <td>
                                                        {% if row.has_discount %}
                                                            {{ row.discount_model }}
                                                        {% else %}
                                                            None
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        {% if row.has_discount %}
                                                            <small class="text-muted">
                                                                <strong>Total Units:</strong> {{ row.total_units }}<br>
                                                                <strong>Standard Price:</strong> {{ row.standard_sla_price|floatformat:2 }}<br>
                                                                <strong>Discounted Price:</strong> {{ row.discounted_sla_price|floatformat:2 }}<br>
                                                                <strong>Savings:</strong> {{ row.discount_savings|floatformat:2 }} ({{ row.discount_percentage|floatformat:1 }}%)<br>
                                                                {% if row.discount_breakdown %}
                                                                    <strong>Breakdown:</strong><br>
                                                                    {% for tier in row.discount_breakdown %}
                                                                        {{ tier.tier_range }} units: {{ tier.units }} × {{ tier.rate|floatformat:4 }} = {{ tier.subtotal|floatformat:2 }}<br>
                                                                    {% endfor %}
                                                                {% endif %}
                                                            </small>
                                                        {% else %}
                                                            <small class="text-muted">No discount applied</small>
                                                        {% endif %}
                                                    </td>
                                                    {% endif %}
                                                    <td class="table-warning fw-bold">{{ row.final_price|floatformat:2 }}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                    
                                    {# Price Chart #}
                                    <div class="mt-3">
                                        <h5 class="text-muted">Price Chart - Units vs Final Price</h5>
                                        <div style="height: 400px;">
                                            <canvas id="chart-{{ group_name|slugify }}-{{ service_level|slugify }}" width="400" height="200"></canvas>
                                        </div>
                                    </div>
                                    
                                    <p class="text-muted"><strong>{{ pricing_data|length }}</strong> variants for {{ service_level }} in {{ group_name }}</p>
                                {% else %}
                                    <p class="text-muted">No pricing variants available for {{ service_level }} in {{ group_name }}.</p>
                                {% endif %}
                            </div>
                        {% empty %}
                             <p class="text-muted">No service levels with pricing data found for group: {{ group_name }}.</p>
                        {% endfor %}
                    </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-info">
                    <h4>No pricing data available</h4>
                    <p>Please ensure you have active compute plans with prices and VSHNAppCat price configurations.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Chart data for each service level
    {% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
        {% for service_level, pricing_data in service_levels.items %}
            {% if pricing_data %}
                // Prepare data for {{ group_name }} - {{ service_level }}
                const chartData{{ forloop.parentloop.counter }}{{ forloop.counter }} = {
                    labels: [{% for row in pricing_data %}{{ row.units }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                    datasets: [
                        {
                            label: 'Final Price',
                            data: [{% for row in pricing_data %}{{ row.final_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            tension: 0.1,
                            fill: false
                        },
                        {
                            label: 'SLA Price',
                            data: [{% for row in pricing_data %}{{ row.sla_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            tension: 0.1,
                            fill: false
                        },
                        {
                            label: 'Compute Plan Price',
                            data: [{% for row in pricing_data %}{{ row.compute_plan_price|floatformat:2 }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                            borderColor: 'rgb(54, 162, 235)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            tension: 0.1,
                            fill: false
                        }
                    ]
                };

                // Create chart for {{ group_name }} - {{ service_level }}
                const ctx{{ forloop.parentloop.counter }}{{ forloop.counter }} = document.getElementById('chart-{{ group_name|slugify }}-{{ service_level|slugify }}').getContext('2d');
                new Chart(ctx{{ forloop.parentloop.counter }}{{ forloop.counter }}, {
                    type: 'line',
                    data: chartData{{ forloop.parentloop.counter }}{{ forloop.counter }},
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Units'
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Price ({{ pricing_data.0.currency|default:"CHF" }})'
                                },
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            title: {
                                display: true,
                                text: '{{ group_name }} - {{ service_level }} Pricing'
                            },
                            legend: {
                                display: true
                            }
                        },
                        elements: {
                            point: {
                                radius: 4,
                                hoverRadius: 6
                            }
                        }
                    }
                });
            {% endif %}
        {% endfor %}
    {% endfor %}
});
</script>
{% endblock %}