{% include 'AdminTemplates/adminDash.html' %} {% load static %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Product Details</h4>
                <h6>Full details of a product</h6>
            </div>
        </div>
        {% for pro in product_id %}
        <div class="row">
            <div class="col-lg-8 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h7 id="msgg"></h7>
                        <div class="productdetails">
                            {% csrf_token %}
                            <div class="d-flex justify-content-end">
                                <a class="me-3" href="{% url 'emailenqedit' pro.id %}">
                                    <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                </a>
                                <a class="me-3" href="{% url 'emailenqdel' pro.id %}">
                                    <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                </a>
                            </div>
                            <ul class="product-bar">
                                <li>
                                    <h4>Company</h4>
                                    <h6>{{pro.company}}</h6>
                                </li>
                                <li>
                                    <h4>Contact Person</h4>
                                    <h6>{{pro.contact_person}}</h6>
                                </li>
                                <li>
                                    <h4>Contact Number</h4>
                                    <h6>{{pro.contact_no}}</h6>
                                </li>
                                <li>
                                    <h4>Email</h4>
                                    <h6>{{pro.email}}</h6>
                                </li>
                                {% if pro.product_category == categoryid %}
                                <li>
                                    <h4>Product Category</h4>
                                    <h6>{{categoryname}}</h6>

                                </li>
                                {% else %}
                                <li>
                                    <h4>Product Category (*other category)</h4>
                                    <h6>{{pro.other_category}}</h6>
                                </li>
                                {% endif %}
                                <li>
                                    <h4>Product Name</h4>
                                    <h6>{{pro.product_name}}</h6>
                                </li>
                                <li>
                                    <h4>Product Code</h4>
                                    <h6>{{pro.product_code}}</h6>
                                </li>
                                <li>
                                    <h4>Brand</h4>
                                    <h6>{{pro.brand_name}}</h6>
                                </li>
                                <li>
                                    <h4>Model No.</h4>
                                    <h6>{{pro.model_no}}</h6>
                                </li>
                                <li>
                                    <h4>Original Price</h4>

                                    {% if pro.org_price == "" %}
                                    <h6>No Original Price</h6>
                                    {% else %}
                                    <h6>{{pro.org_price}}</h6>
                                    {% endif %}

                                </li>
                                <li>
                                    <h4>Previous Price (QAR)</h4>
                                    <h6>{{pro.market_price}}</h6>
                                </li>
                                <li>
                                    <h4>Current Price (QAR)</h4>
                                    <h6>{{pro.price}}</h6>
                                </li>
                                <li>
                                    <h4>Model Number</h4>
                                    <h6>{{pro.model_no}}</h6>
                                </li>
                                <li>
                                    <h4>Brand Name</h4>
                                    <h6>{{pro.brand_name}}</h6>
                                </li>
                                <li>
                                    <h4>Manufacturing Country</h4>
                                    <h6>{{pro.manufacturing_country}}</h6>
                                </li>
                                <li>
                                    <h4>Manufacturing Year</h4>

                                    {% if pro.manufacturing_year == "0000" %}
                                    <h6></h6>
                                    {% else %}
                                    <h6>{{pro.manufacturing_year}}</h6>
                                    {% endif %}

                                </li>
                                <li>
                                    <h4>ExpDate</h4>
                                    
                                    {% if pro.exp_date == "0000" %}
                                    <h6>**Not Added</h6>
                                    {% else %}
                                    <h6>{{pro.exp_date}}</h6>
                                    {% endif %}
                                        
                                </li>
                                <li>
                                    <h4>Dimensions</h4>
                                    <h6>{{pro.dimensions}}</h6>
                                </li>
                                <li>
                                    <h4>Quantity</h4>
                                    <h6>{{pro.quantity}}</h6>
                                </li>
                                <li>
                                    <h4>Status</h4>

                                    {% if pro.status == "1" %}
                                    <h6>Active</h6>
                                    {% else %}
                                    <h6>Not Active</h6>
                                    {% endif %}
                                </li>
                                <li>
                                    <h4>Enq. Date</h4>
                                    <h6>{{pro.enq_date}}</h6>
                                </li>
                                <li>
                                    <h4>Product Description</h4>
                                    <h6>{{pro.brand_name}}</h6>
                                </li>
                                <li>
                                    <h4>Countries</h4>
                                    <div class="d-flex flex-wrap">
                                        {% for country in related_countries %}
                                            <button type="button" class="btn btn-outline-dark btn-sm m-1">{{ country.con_name }}</button>
                                        {% endfor %}
                                    </div>
                                </li>
                                <li>
                                    <h4>User</h4>
                                    <h6>{{pro.user_id}}</h6>
                                </li>
                                <li>
                                    <h4>status</h4>
                                    <h6> {% if pro.status == "1" %}
                                        <button class="btn btn-sm btn-success status" type="button"
                                            value="{{pro.id}}">Approved</button>
                                        {% elif pro.status == "0" %}
                                        <button class="btn btn-sm btn-danger status" type="button"
                                            value="{{pro.id}}">Not
                                            Approved</button>
                                        {% else %}
                                        {% endif %}
                                    </h6>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            <div class="col-lg-4 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="slider-product-details">
                            {% for image in image_details %}
                            <div class="item">
                                <a href="/media/email_enq_images/{{ image.raw_name }}" data-fancybox="images"
                                    data-caption="{{ image.product_image }}">
                                    <img src="/media/email_enq_images/{{ image.raw_name }}" alt="pro-image">
                                </a>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var productCarousel = $(".product-img-carousel");
        var itemCount = productCarousel.find(".item").length;

        if (itemCount > 1) {
            productCarousel.owlCarousel({
                items: 1, // Number of items to show at once (you can adjust this)
                loop: true, // Infinite loop
                nav: true, // Show navigation buttons
                dots: true, // Show pagination dots
                autoplay: true, // Autoplay the carousel
                autoplayTimeout: 5000, // Autoplay timeout in milliseconds
                autoplayHoverPause: true // Pause autoplay on hover
            });
        } else {
            // If there's only one image, remove Owl Carousel classes
            productCarousel.removeClass("owl-carousel");
            productCarousel.find(".item").removeClass("item");
        }
    });
</script>

<script>
    $(document).ready(function () {
        var productCarousel = $(".product-img-carousel");

        productCarousel.find('a').fancybox({
            buttons: [
                "zoom",
                "slideShow",
                "fullScreen",
                "download",
                "thumbs",
                "close"
            ],
            loop: true,
        });

        var itemCount = productCarousel.find(".item").length;
        if (itemCount > 1) {
            productCarousel.owlCarousel({
                items: 1,
                loop: true,
                nav: true,
                dots: true,
                autoplay: true,
                autoplayTimeout: 5000,
                autoplayHoverPause: true
            });
        } else {
            productCarousel.removeClass("owl-carousel");
            productCarousel.find(".item").removeClass("item");
        }
    });
</script>
<script>
    $('body').on('click', 'button.status', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'appden' %}",
                data: {
                    activedea: $(this).attr('value'),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    $('#msgg').html(data.success);
                    $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                    location.reload();
                }
            });
        }
    });
</script>
{% endblock body %}