{% extends "layouts/base.html" %}

{% load static %}
{% block title %}{{ product.name }} - SavvyGT{% endblock %}
{% include 'partials/header.html' %}

{% block content %}
<div id="wrapper" class="wrap">
    <div class="breadcrumbs panel z-1 py-2 bg-primary-50 text-dark">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 fw-medium m-0">
                <li><a href="{% url 'products' %}">Home</a></li>
                <li><i class="unicon-chevron-right"></i></li>
                <li><a href="{% url 'products_all' %}">Products</a></li>
                <li><i class="unicon-chevron-right"></i></li>
                <li><span class="opacity-60">{{ product.name }}</span></li>
            </ul>
        </div>
    </div>

    <article class="product type-product single product-single py-2 lg:py-6 xl:py-8">
        <div class="container max-w-xl">
            <div class="row child-cols-12 lg:child-cols-6 gy-4 gx-4 md:gx-6 xl:gx-8">
                <div>
                    <div class="product-gallery panel">
                        <div class="ratio ratio-1x1 rounded uc-transition-toggle overflow-hidden">
                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                src="{% static 'assets/images/common/'|add:product.image|default:'default.jpg' %}"
                                alt="{{ product.name|default:'Deleted Product' }}">
                        </div>
                    </div>
                </div>
                <div>
                    <div class="product-details panel vstack gap-1 xl:gap-2 max-w-500px mx-auto">
                        <h1 class="product-title h3 xl:h1 m-0">{{ product.name }}</h1>

                        <!-- Country Selector -->
                        <!-- <div class="country-select-wrapper my-2"> -->
                            <!-- <span id="selected-flag" class="fi country-flag"></span>
                            <select id="country-select" class="custom-select">
                                <option value="India" data-flag="in">India</option>
                                <option value="USA" data-flag="us">USA</option>
                                <option value="UK" data-flag="gb">UK</option>
                                <option value="Japan" data-flag="jp">Japan</option>
                                <option value="Europe" data-flag="eu">Europe</option>
                                <option value="Australia" data-flag="au">Australia</option>
                            </select>
                        </div> -->

                        <div class="hstack justify-between items-center gap-2">
                            <div class="product-price hstack gap-1 fs-5 xl:fs-4">
                                {% if product.old_price %}
                                <span class="price-old text-line-through opacity-40">${{ product.old_price }}</span>
                                {% endif %}
                                <span class="price product-price" data-id="{{ product.id }}">
                                    {% if product.currency == "INR" %}₹
                                    {% elif product.currency == "USD" %}$
                                    {% elif product.currency == "EUR" %}€
                                    {% elif product.currency == "JPY" %}¥
                                    {% endif %}
                                    {{ product.price }}
                                </span>
                            </div>
                        </div>

                        <p class="product-desc fs-6 xl:fs-5 my-2">
                            {{ product.description }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selector = document.getElementById('country-select');
        const flagEl = document.getElementById('selected-flag');

        const setFlagAndPrices = (countryName) => {
            const option = Array.from(selector.options).find(opt => opt.value.toLowerCase() === countryName.toLowerCase());
            if (option) {
                selector.value = option.value;
                flagEl.className = `fi fi-${option.dataset.flag} country-flag`;
                updatePrices(option.value);
            }
        };

        const updatePrices = (country) => {
            fetch(`/api/converted-prices/?country=${country}`)
                .then(res => res.json())
                .then(data => {
                    if (data.products) {
                        data.products.forEach(product => {
                            const el = document.querySelector(`.product-price[data-id='${product.id}']`);
                            if (el) el.textContent = product.price;
                        });
                    }
                }).catch(err => {
                    console.error('Error fetching converted prices:', err);
                });
        };

        // Auto-detect country
        fetch('https://ipapi.co/json/')
            .then(response => response.json())
            .then(data => {
                const countryName = data.country_name;
                setFlagAndPrices(countryName);
            })
            .catch(() => {
                setFlagAndPrices('India'); // Fallback
            });

        // On manual change
        selector.addEventListener('change', function () {
            const selectedOption = selector.options[selector.selectedIndex];
            const country = selectedOption.value;
            const flagCode = selectedOption.dataset.flag;

            flagEl.className = `fi fi-${flagCode} country-flag`;
            updatePrices(country);
        });
    });
</script>
{% endblock %}