{% extends 'Layout/prod_detail_layout.html' %}
{% load core_tags ecom_tags %}
{% load wagtailimages_tags %}

{% block content %}

<section class="pb-20 px-4 ">
    <div class="mx-auto flex flex-wrap gap-1 md:gap-0 w-full">
        <div class="w-full md:w-[33%]">
            <div class="flex justify-end">
                <div class="dropdown">
                    <button class="text-gray-700 font-semibold px-1 inline-flex items-center" aria-label="Share">
                        <i class='bx bxs-share-alt text-2xl'></i>
                    </button>
                    <div class="dropdown-menu absolute hidden pt-1 w-20 shadow-xl bg-gray-200">
                        <ul class="text-3xl flex w-full items-center flex-col [&>li]:mb-2">
                            <li>
                                <a href="https://telegram.me/share/url?url={{request.scheme}}://{{ request.META.HTTP_HOST }}{{page.url}}"
                                    target="_blank" title="Telegram">
                                    <i class='bx bxl-telegram'></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://api.whatsapp.com/send?text={{request.scheme}}://{{ request.META.HTTP_HOST }}{{page.url}}"
                                    target="_blank" title="WhatsApp">
                                    <i class='bx bxl-whatsapp'></i>
                            </li>
                            <li>
                                <a onclick="copyUrl(`{{page.get_absolute_url}}`)" title="Copy Link">
                                    <i class='bx bx-link'></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex gap-2">
                {% if page.prod_var_images.all %}
                <div>
                    {% image page.search_image fill-31x31 as imgt %}
                    <img src="{{imgt.url}}" alt="{{imgt.title}}" loading="lazy"
                        class="w-[3.5rem] md:w-10 rounded border" id="img-thumb"
                        onmouseover="chImg('img-thumb',`{{page.search_image.file.url}}`)">
                    {% for img in page.prod_var_images.all %}
                    {% image img.image fill-31x31 as imgs %}
                    <img src="{{imgs.url}}" alt="{{img.image.title}}" class="w-[3.5rem] md:w-10 rounded border my-1"
                        id="img-{{forloop.counter}}"
                        onmouseover="chImg(`img-{{forloop.counter}}`,`{{img.image.file.url}}`)">
                    {% endfor %}
                </div>
                {% endif %}
                {% image page.search_image fill-366x366 id="thumb-img" loading="lazy" %}

                <!-- <img src="{{page.search_image.file.url}}" alt="{{page.title}}" loading="lazy"
                    class="w-full md:w-[90%] rounded-lg" id="thumb-img"> -->
            </div>
        </div>

        <div class="w-full md:w-[45%] md:px-4">
            <h1 class="text-xl font-semibold">
                {{page.customTitle|safe}}
            </h1>
            {% now "Y-m-d, g:i a" as today %}
            <span class="hidden" id="to_date">{{page.prOffer.toDate|date:"M d, Y g:i:s"}}</span>

            {% if page.prOffer and page.offerPrice %}
            <div id="off_price">
                {% if page.is_offer_due %}
                <div class="flex items-center gap-2 md:gap-4">
                    <div class="flex gap-6 items-center text-xl font-bold">
                        <span class="flex items-center">
                            {{ settings.core.CurrencySettings.icon|safe }}
                            {{page.offerPrice}}
                        </span>
                        <span class="line-through text-base">
                            {{page.prodMRP}}
                        </span>
                    </div>
                    <h1 class="px-2 text-sm rounded w-fit ">
                        {{page.prOffer.name}}
                    </h1>
                    {% include 'Product/CountDownEnd.html' %}

                </div>
                {% endif %}
            </div>
            {% endif %}

            {% if not page.is_offer_due %}
            <div id="reg_price" class="flex items-center gap-2 md:gap-4">

                {% if page.prodDealPrice %}
                <div class="flex gap-6 items-center text-xl font-bold">
                    <span class="flex items-center">
                        {{ settings.core.CurrencySettings.icon|safe }}
                        {{page.prodDealPrice}}
                    </span>
                    <span class="line-through text-base">
                        {{page.prodMRP}}
                    </span>
                </div>
                {% else %}
                <span class="flex items-center">
                    {{ settings.core.CurrencySettings.icon|safe }}
                    {{page.prodMRP}}
                </span>
                {% endif %}


                {% if page.prRec %}

                <h1 class="px-2 text-sm bg-[{{page.prRec.recBgColor}}] text-[{{page.prRec.recFgColor}}] rounded w-fit ">
                    {{page.prRec}}
                </h1>
                {% endif %}
            </div>
            {% endif %}

            <div class="mb-4 flex items-center justify-between gap-6">

                {% if not page.is_past_due %}
                {% if page.prodRating %}
                <div class="flex items-center text-xl text-gray-600">
                    <i class='bx bxs-star {% if page.prodRating >= 1 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if page.prodRating >= 2 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if page.prodRating >= 3 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if page.prodRating >= 4 %} text-yellow-500 {% endif %}'></i>
                    <i class='bx bxs-star {% if page.prodRating >= 5 %} text-yellow-500 {% endif %}'></i>
                </div>
                {% endif %}
                {% endif %}

                <div class="flex gap-4">

                    {% if page.prodStory %}
                    <a href="/story/{{page.slug}}/" class="hover:font-bold text-2xl flex items-center gap-1"><i
                            class='bx bx-images'></i>
                    </a>
                    {% endif %}
                </div>
            </div>

            <div>
                {% include 'components/Product/prodVariants.html' %}
            </div>

            {% if page.get_buy_now %}
            <div class="flex justify-center md:justify-start mt-2">
                <a href="{{page.get_buy_now}}" class="px-16 py-2 rounded-full bg-orange-400">Buy Now</a>
            </div>
            {% endif %}

            <div>
                {% if page.is_past_due %}
                Launch Date {{page.launchDate|date:'Y-m-d H:iA'}}
                <a href="notify-me/" class="bg-yellow-400 px-2 py-1 rounded">Notify me</a>
                {% endif %}
            </div>

            {% if commonfeaturesList %}
            <div class="my-2 flex gap-2 flex-wrap">
                {% for attr in commonfeaturesList %}
                <h1 class="flex items-center gap-2">
                    <b class="flex items-center text-xl">
                        {% if attr.attribute.attr.group.icon %}
                        <span class="text-4xl">
                            {{attr.attribute.attr.group.icon|safe}}
                        </span>
                        {% endif %}
                        {{attr.attribute.attr.name}}

                        : </b>
                    <span class="text-xl font-bold">

                        {{attr.value_text}}
                        {% if attr.attribute.attr.unit %}
                        {{attr.attribute.attr.unit}}
                        {% endif %} /
                    </span>
                </h1>
                {% endfor %}
            </div>
            {% endif %}


            <ul class="my-1 flex">
                {% for app in page.get_parent.specific.prod_app_item.all %}

                <li class="{% if forloop.counter > 1 %} -ml-[4.7rem] {% endif %}">
                    <div class="{% if forloop.counter > 1 %} pl-[9.5rem] {% endif %}">{{app.item.releaseDate}}</div>
                    <div class="timeline-middle flex items-center">
                        {% if forloop.counter > 1 %}
                        <div class="w-40 h-1 bg-gray-700 pl-10"></div>
                        {% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                            <path fill-rule="evenodd"
                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                            clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="{% if forloop.counter > 1 %} pl-[9.5rem] {% endif %}">{{app.item}}</div>
                </li>

                {% endfor %}


            </ul>


            <div class="mt-4">
                {{page.prDesc|add_list_classes}}
            </div>



            <div class="my-1">
                {% for offer in page.get_parent.specific.prod_offer.all %}
                <div class="border-t rounded">
                    {{offer.offer.name}}
                    {{offer.offerDetail|safe}}
                </div>
                {% endfor %}
            </div>

        </div>

        <div class="w-full md:w-[22%]">

            {% if news %}
            <div class="border rounded p-2 shadow-xl shadow-orange-50">
                <div class="font-bold text-left text-xl mb-1 w-full">Related News</div>
                <div class="grid gap-4">
                    {% for blog in news %}
                    <div class="border-b border-gray-600 h-full">
                        <a href="{{blog.url}}" class="group flex w-full gap-2">
                            <div>
                                <img src="{{blog.specific.search_image.file.url}}" alt="{{blog.title}}"
                                    class="object-cover w-32 h-20 scale-100 group-hover:scale-110 transition-all duration-500" />
                            </div>
                            <p class="line-clamp-3">
                                {{blog.title}}
                            </p>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            {% if blogs %}
            <div class="mt-3 border rounded p-2 shadow-xl shadow-orange-50">
                <div class="font-bold text-left text-xl mb-1 w-full">Related Blogs</div>
                <div class="grid gap-4">
                    {% for blog in blogs %}
                    <div class="border-b border-gray-600 h-full">
                        <a href="{{blog.url}}" class="group flex w-full gap-2">
                            <div>
                                <img src="{{blog.specific.search_image.file.url}}" alt="{{blog.title}}"
                                    class="object-cover w-32 h-20 scale-100 group-hover:scale-110 transition-all duration-500" />
                            </div>
                            <p class="line-clamp-3">
                                {{blog.title}}
                            </p>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

        </div>

    </div>

    <div class="container mx-auto mt-4">

        <table class="w-auto">
            {% for attr in features %}
            {% if attr.value_text %}
            <tr class="text-left">
                <th class="px-4 border">
                    <span class="flex items-center">

                        {% if attr.attribute.attr.group.icon %}
                        {{attr.attribute.attr.group.icon|safe}}
                        {% elif attr.attribute.attr.icon %}
                        {{attr.attribute.attr.icon|safe}}
                        {% endif %}
                        {{attr.attribute.attr.name}}
                    </span>
                </th>
                <td class="px-4 border flex items-center">
                    {% if attr.attribute.name == "Color" %}
                    <div class="bg-[{{attr.value_text_opt}}] p-2 rounded-full w-6 h-6">
                    </div>
                    {% elif attr.attribute.name == "Brand" %}
                    <!-- <img src="/media/original_images/{{attr.value_text_opt}}" alt="{{attr.value_text}}" class="h-10"> -->

                    <!-- &nbsp; -->
                    {{attr.value_text}}
                    {% else %}
                    {{attr.value_text}}
                    {% endif %}
                    {% if attr.attribute.attr.unit %}
                    {{attr.attribute.attr.unit}}
                    {% endif %}

                </td>
            </tr>
            {% endif %}
            {% endfor %}
        </table>
    </div>





    {% if user.is_authenticated %}
    <div class="container mx-auto">
        {% include 'components/Product/prodReview.html' %}
    </div>
    {% endif %}
    </div>

    {% if similarProducts %}
    <div class="my-4 ">
        <h1 class="text-xl">Compare with similar items</h1>
        <table class="w-full table-fixed ">
            <thead>
                <tr>
                    <th class="w-36">

                    </th>
                    {% for similar in similarProducts %}
                    <th class="px-4 shadow shadow-orange-100">
                        <a href="{{similar.url}}">
                            <div class="flex w-full justify-center">

                                <img src="{{similar.search_image.file.url}}" alt="{{similar.title}}" class="w-60">

                            </div>
                            <h1 class="text-left text-sm opacity-80 font-normal line-clamp-3">
                                {{similar.customTitle|safe}}
                            </h1>
                        </a>
                    </th>
                    {% endfor %}
                </tr>
                <tr class="border border-gray-300 odd:bg-zinc-100 odd:shadow odd:shadow-orange-100">
                    <th class="text-left px-2 w-36">Price</th>
                    {% for similar in similarProducts %}
                    <td class="px-4">
                        <b class="text-lg">{{similar.prodDealPrice}}</b>
                        <br />
                        <h1 class="opacity-80">
                            M.R.P: <span class="line-through">{{similar.prodMRP}}</span>
                        </h1>
                    </td>
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="text-sm overflow-y-auto h-60">
                {% for attr in similarAttr %}
                <tr class="[&>th]:py-1.5 border border-gray-300 even:bg-zinc-100 odd:shadow even:shadow-orange-100">
                    <th class="text-left px-2 w-36">{{attr}}</th>
                    {% for similar in similarProducts %}
                    <td class="px-4">
                        <!-- {{similar}} -->
                        {% prod_var_av_compare similar.id attr as pav %}

                        {% if pav.value_text %}
                        {{pav.value_text}}
                        {% else %}
                        -
                        {% endif %}

                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>

    </div>
    {% endif %}

</section>


{% endblock content %}


{% block script %}

<script>
    function chImg(id, img) {
        var image = document.getElementById('thumb-img');
        image.src = img;

    }


    function copyUrl(url) {
        var copyText = url;
        navigator.clipboard.writeText(window.location.host + copyText);
    }
</script>


{% endblock script %}