{% extends "client_base.html" %}
{% load static %}
{% block title %}Products{% endblock  %}

{% block content %}
    <section class="details-area">
        <div class="containers">
            <div class="row">
                <div class="col-xxl-9">
                    <form method="post">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            {% for crumb in breadcrumbs %}
                                {% if crumb.url %}
                                    <li class="breadcrumb-item">
                                        <a href="{{ crumb.url }}">{{ crumb.name }}</a>
                                    </li>
                                {% else %}
                                    <li class="breadcrumb-item active" aria-current="page">
                                        {{ crumb.name }}
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ol>
                    </nav>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="detailslider">
                                <ul>
                                    {% comment %} <li>
                                        <img id="main-product-image" src="{{ item.cover_product_attribute.image.url }}">
                                        <img id="main-product-image" src="{{ product.product.product_attribute.first.image.url }}">
                                    </li> {% endcomment %}
                                    <div class="zoom-container">
                                        <img id="main-product-image" 
                                            src="{{ item.cover_product_attribute.image.url }}">
                                    </div>
                                </ul>

                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="detailscon">
                                {% if product.brand %}
                                <span class="badge text-bg-danger">{{product.brand}}</span>
                                {% endif %}
                                <h2>{{product.product.product_name}}</h2>
                                <p>{{product.product.description}}</p>
                                <div class="review-sold">
                                    <ul>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                        <li><i class="bi bi-star-fill"></i></li>
                                    </ul>

                                    <p class="wishlistt" data-product-id="{{product.id}}"> 0 Review <span class="vr"></span> {{product.product.total_sold_count.sold_qty|floatformat:0}} Sold  <span class="vr"></span>MOQ: {{product.product.moq}}</p>
                                    {% comment %} <i class="loves bi {% if product.id in user_wishlist_ids %}bi-heart-fill text-danger{% else %}bi-heart{% endif %}"></i></p> {% endcomment %}
                                    
                                </div>
                                <div class="price">
                                    <h3 id="product-price"></h3>
                                </div>

                                {% if attribute_list %}
                                <div class="sizes">
                                    <div class="tagname">
                                        <p>Size:</p>
                                    </div>

                                    {% comment %} <div class="taglint">
                                        {% for size in attribute_list %}
                                        <div class="form-check form-check-inline">
                                            <input
                                                class="form-check-input"
                                                type="radio"
                                                name="size"
                                                id="size{{ forloop.counter }}"
                                                value="{{ size.id }}"
                                            >
                                            <label class="form-check-label" for="size{{ forloop.counter }}">
                                                {{ size.size }}
                                            </label>
                                        </div>
                                        {% endfor %}
                                    </div> {% endcomment %}
                                    <div class="taglint">
                                        {% for size in sizes %}
                                        {% if size.size__id %}
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input variant-input" type="radio" name="size" 
                                                id="size{{ size.size__id }}" value="{{ size.size__id }}" 
                                                {% if forloop.first %}checked{% endif %}>
                                            <label class="form-check-label" for="size{{ size.size__id }}">
                                                {{ size.size__value }}
                                            </label>
                                        </div>
                                        {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>
                                {% endif %}
                                <div class="sizes">
                                    <div class="tagname">
                                        <p>Color:</p>
                                    </div>

                                    {% comment %} <div class="taglint">
                                        {% for attr in attribute_list %}
                                        <div class="form-check form-check-inline">
                                            <input
                                                class="form-check-input color-radio"
                                                type="radio"
                                                name="color"
                                                id="color{{ forloop.counter }}"
                                                value="{{ attr.id }}"
                                                data-image="{{ attr.image.url }}"
                                                data-regular-price="{{ attr.regular_price }}"
                                                data-discount-price="{{ attr.discount_price|default_if_none:'' }}"
                                                data-stock="{{ attr.stock }}"
                                                {% if attr.stock == 0 %}disabled{% endif %}
                                            >
                                            <label class="form-check-label {% if attr.stock == 0 %}text-muted{% endif %}"
                                                for="color{{ forloop.counter }}">
                                                {{ attr.color }}
                                            </label>
                                        </div>
                                        {% endfor %}
                                    </div> {% endcomment %}

                                    <div class="taglint">
                                        {% for color in colors %}
                                            {% if color.color__id %} <div class="form-check form-check-inline">
                                                <input class="form-check-input variant-input" type="radio" name="color" 
                                                    id="color{{ color.color__id }}" value="{{ color.color__id }}" 
                                                    {% if forloop.first %}checked{% endif %}>
                                                <label class="form-check-label" for="color{{ color.color__id }}">
                                                    {{ color.color__name }}
                                                </label>
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>

                                <span id="stockID"> Stock: 10 </span>

                                <div class="buybtns mt-2">
                                    <a href="#" class="cusbtn add-to-cart-details" data-product-id="{{product.product.id}}" data-variant-id="{{ product.product.product_attribute.first.id }}"><i class="bi bi-bag-dash"></i> Add to Cart</a>
                                    <a href="#" class="cusbtn2" id="buy_now_id">Buy Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    </form>

                    <!-- about-product -->
                    <div class="about-product">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">About Product</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Reviews</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                <div class="tab-con">
                                    <p>{{product.product.description}}</p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                <div class="tab-con">
                                    <h4>Rating and Review</h4>
                                    <div class="row">
                                        <div class="col-md-12 col-lg-8">
                                            <div class="rating">
                                                <div class="ratingrate">
                                                    <h4>5.0</h4>
                                                    <ul>
                                                        <li><i class="bi bi-star-fill"></i></li>
                                                        <li><i class="bi bi-star-fill"></i></li>
                                                        <li><i class="bi bi-star-fill"></i></li>
                                                        <li><i class="bi bi-star-fill"></i></li>
                                                        <li><i class="bi bi-star-fill"></i></li>
                                                    </ul>
                                                    <p>0 reviews</p>
                                                </div>
                                                <div class="progresbar">
                                                    <p>1 <span class="bar"></span> 0%</p>
                                                    <p>2 <span class="bar"></span> 0%</p>
                                                    <p>3 <span class="bar"></span> 0%</p>
                                                    <p>4 <span class="bar"></span> 0%</p>
                                                    <p>5 <span class="bar"></span> 0%</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="review">
                                        <h4>Reviews</h4>
                                        <p>Showing 1 to 0 of 0 results</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- about-product -->

                </div>
                <div class="col-xxl-3">
                    {% comment %} <div class="delivary">
                        <div class="d-flex mb-3">
                            <div class="flex-shrink-0">
                                <img src="{% static 'assets/img/money.svg' %}" alt="icons">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <p>Delivery charge</p>
                                <h5>৳ {{delivery_charge.initial_charge|default:"0"}}</h5>
                            </div>
                        </div>
                        <div class="d-flex ">
                            <div class="flex-shrink-0">
                                <img src="{% static 'assets/img/clock.svg' %}" alt="icons">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <p>Estimated delivery</p>
                                <h5>2-4 days</h5>
                            </div>
                        </div>

                    </div> {% endcomment %}
                    <div class="populers boxs">
                                    <h3 class="subtile3">Similar Product</h3>
                                    <div class="customscroll">
                                    {% if similar_product_obj %}
                                            {% for item in similar_product_obj %}
                                          
                                            <div class="d-flex populeritem mb-3" onclick="window.location='{% url 'product_details_page_url' item.id %}'" style="cursor: pointer;">
                                                <div class="flex-shrink-0">
                                                    <img src="{{ item.cover_product_attribute.image.url }}" alt="icons">
                                                </div>
                                                <div class="flex-grow-1 ms-3 productcon">
                                                    <a href="{% url 'product_details_page_url' item.id %}">{{ item.product_name }}</a>
                                                    {% if item.cover_product_attribute.final_discount.total_discount %}
                                                        <h5>৳ {{ item.cover_product_attribute.product_final_price  }} <del>৳ {{ item.cover_product_attribute.regular_price }}</del></h5>
                                                    {% else %}
                                                        <h5>৳ {{ item.cover_product_attribute.regular_price }}</h5>
                                                    {% endif %}
                                                    <div class="starsold">
                                                        <p><i class="bi bi-star-fill"></i> 0</p>
                                                        <div class="vr"></div>
                                                        <p>{{item.total_sold_count.sold_qty|floatformat:0}} Sold</p>
                                                    </div>
                                                    
                                                    {% if item.product_stock_status.flag %}
                                                         <span> Stock: {{item.product_stock_status.stock_qty}} </span>
                                                    {% else %}
                                                     <span class="text-danger"> Out of stock </span>
                                                    {% endif %}

                                                   
                                                </div>
                                            </div>
                                            
                                            {% endfor %}
                                            {% else %}
                                            <div class="customscroll">
                                                <div class="populeritem mb-3">
                                                    <h5 class="text-center">Products not found</h5>
                                                </div>
                                            </div>
                                            {% endif %}
                                            </div>

                                        </div>
                </div>
            </div>
        </div>
    </section>

{% endblock  %}

{% block JS %}
<script>
    $(document).on('click', '.loves', function(){
        let heart = $(this);
        let productId = heart.closest('.wishlistt').data('product-id');

        $.ajax({
            url: '{% url "add_to_wishlist_url" %}',
            type: 'POST',
            data: {
                product_id: productId,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            success: function(response) {
                if(response.status === 'added'){
                    heart.removeClass('bi-heart').addClass('bi-heart-fill text-danger');
                }
                else if(response.status === 'removed'){
                    heart.removeClass('bi-heart-fill text-danger').addClass('bi-heart')
                }
            }
        });
    });
</script>


<script>
    const buy_now_product_URL = "{% url 'buy_now_product_url' 0 %}"
    const product_details_URL = "{% url 'product_details_page_url' product.id %}"
    $(document).ready(function() {
        let attribute_id = false
        updateProductVariant();

        $("#buy_now_id").click(function(){
            updateProductVariant();
            let buy_now_url = buy_now_product_URL.replace("0", attribute_id);
            window.location.href = buy_now_url
        })


    function updateProductVariant() {
        let variantId = "{{ product.id }}"; 
        let colorId = $("input[name='color']:checked").val();
        let sizeId = $("input[name='size']:checked").val();

        if (colorId && sizeId) {
            $.ajax({
                url: "{% url 'get_variant_data' %}", 
                method: "GET",
                data: {
                    'variant_id': variantId,
                    'color_id': colorId,
                    'size_id': sizeId
                },
                success: function(response) {
                    if (response.success) {
                        attribute_id = response.attribute_id
                        
                        const newImgUrl = response.image_url;
                        $('#main-product-image').attr('src', response.image_url);
                        $('#lightSlider img').attr('src', newImgUrl);
                        $('#stockID').html(`Stock: ${response.stock_qty}`)
                        let priceHtml = "";
                        if (response.discount_price == response.regular_price) {
                            priceHtml = `৳ ${response.regular_price}`;
                        } else {
                            priceHtml = `৳ ${response.discount_price} <del class="text-muted" style="font-size: 0.8em;">৳ ${response.regular_price}</del>`;
                        }
                        $('#product-price').html(priceHtml);

                        let buyNowBaseUrl = "{% url 'buy_now_product_url' 0 %}";
                        let newBuyNowUrl = buyNowBaseUrl.replace('0', response.attribute_id);
                        
                        // $('.cusbtn2').attr('href', newBuyNowUrl);
                        // $('.add-to-cart').attr('data-variant-id', response.attribute_id);

                        if (response.stock <= 0) {
                            $('.buybtns').css('opacity', '0.5').css('pointer-events', 'none');
                            $('#product-price').append(' <span class="text-danger" style="font-size: 0.5em;">(Out of Stock)</span>');
                        } else {
                            $('.buybtns').css('opacity', '1').css('pointer-events', 'auto');
                        }

                    } else {
    
                        $('#product-price').html('<span class="text-muted" style="font-size: 0.7em;">Not Available</span>');
                        $('.buybtns').css('opacity', '0.5').css('pointer-events', 'none');
                    }
                },
                error: function() {
                    console.log("Error fetching variant data.");
                }
            });
        }
    };



    $('.variant-input').on('change', function() {
        updateProductVariant();
    });


    



    $(document).on('click', '.add-to-cart-details', function(e) {
        e.preventDefault();
        
        
        var productId = $(this).attr('data-product-id');
        var variantId = $(this).attr('data-variant-id'); 

        if (!variantId) {
            Toastify({ text: "Please select size and color", backgroundColor: "#ff9800" }).showToast();
            return;
        }

        $.ajax({
            url: "{% url 'add_to_cart_url' %}",
            type: "POST",
            data: {
                'attribute_id': attribute_id,
                'product_id': productId,
                'variant_id': variantId,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {

                    $('#cart-count').text('(' + response.item_count + ')');

                    Toastify({
                        text: `Added: ${response.product_name} (${response.color}/${response.size})`,
                        duration: 3000,
                        close: true,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#4caf50"
                    }).showToast();
                    setTimeout(function(){
                        location.href = product_details_URL;
                    }, 1500)
                    
                } else {
                    Toastify({
                        text: response.message || "Stock error",
                        backgroundColor: "#f44336"
                    }).showToast();
                }
            }
        });
    });
});
</script>
<script>
    const container = document.querySelector('.zoom-container');
    const img = document.getElementById('main-product-image');

    container.addEventListener('mousemove', function(e) {
        const rect = container.getBoundingClientRect();
        
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const xPercent = (x / rect.width) * 100;
        const yPercent = (y / rect.height) * 100;

        img.style.transformOrigin = `${xPercent}% ${yPercent}%`;
        img.style.transform = "scale(2.5)";
    });

    container.addEventListener('mouseleave', function() {
        img.style.transform = "scale(1)";
    });
</script>

{% endblock  %}