{% extends "base.html" %}
{% load static %}
{#
This template renders an interactive configurator for custom rugs. It
presents select elements for each option type available on the product. When
the form is submitted, it recalculates the total price based on the base
price of the product and the selected options' price modifiers.

In a full implementation, this could be enhanced with client‑side JavaScript
to update the price instantly without a page reload and to preview the
selected options using images. For now, server‑side rendering keeps the
logic simple and accessible.
#}

{% block title %}Configure {{ product.name }} — KiwiCrib{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold mb-4">Configure {{ product.name }}</h1>
<p class="mb-3">Base price: <strong>${{ product.base_price }}</strong> per {{ product.unit }}</p>

<form method="post" class="space-y-4">
    {% csrf_token %}
    {% for opt_type, options in options_by_type.items %}
        <div>
            <label for="id_{{ opt_type }}" class="block font-semibold mb-1">{{ opt_type|title }}</label>
            <select name="{{ opt_type }}" id="id_{{ opt_type }}" class="border rounded px-2 py-1 w-full">
                <option value="">-- Select {{ opt_type|title }} --</option>
                {% for option in options %}
                    <option value="{{ option.id }}" {% if selected.get(opt_type) == option %}selected{% endif %}>
                        {{ option.name }}{% if option.price_modifier %} (+${{ option.price_modifier }}){% endif %}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endfor %}
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Calculate price</button>
</form>

{% if total_price %}
<div class="mt-6 p-4 border rounded bg-green-50">
    <h2 class="text-xl font-semibold mb-2">Price Summary</h2>
    <p>Total price: <strong>${{ total_price }}</strong></p>
    <p>This estimate includes the base price of ${{ product.base_price }} and your selected options. Final pricing may vary with installation and delivery.</p>
</div>
<form method="post" action="{% url 'orders:add_to_cart' %}" class="mt-4">
    {% csrf_token %}
    <input type="hidden" name="product_id" value="{{ product.id }}">
    <input type="hidden" name="quantity" value="1">
    {% for opt_type, option in selected.items %}
        <input type="hidden" name="option_{{ opt_type }}" value="{{ option.id }}">
    {% endfor %}
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Add to Cart</button>
</form>
{% endif %}

{% endblock %}