{% 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>
<style>
    .custom-btn-sm {
        padding: 5px 10px;
        margin: 10px;
        font-size: 12px;
        width: 80px;
        height: 30px;
    }
</style>
{% 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 'editProduct' pro.id %}">
                                    <img src="{% static 'assets/img/icons/edit.svg' %}" alt="img">
                                </a>
                                <a class="me-3" href="{% url 'deleteProduct' pro.id %}">
                                    <img src="{% static 'assets/img/icons/delete.svg' %}" alt="img">
                                </a>
                            </div>
                            <ul class="product-bar">
                                <li>
                                    <h4>Product</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}}</h6>
                                </li>
                                <li>
                                    <h4>Model No.</h4>
                                    <h6>{{pro.model_no}}</h6>
                                </li>
                                {% if pro.category_id == 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>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>
                                <li>
                                    <h4>Manufacturing Country</h4>
                                    <h6>{{pro.manufacturing_country}}</h6>
                                </li>
                                <li>
                                    <h4>This item is sold due to</h4>
                                    <h6>{{pro.reason_to_sell}}</h6>
                                </li>
                                <li>
                                    <h4>Manufacturing Year</h4>
                                    <h6>{{pro.manufacturing_year}}</h6>
                                </li>
                                <li>
                                    <h4>Quantity</h4>
                                    <h6>{{pro.quantity}}</h6>
                                </li>
                                <li>
                                    <h4>Date Added</h4>
                                    <h6>{{pro.date_added}}</h6>
                                </li>
                                <li>
                                    <h4>ExpDate</h4>

                                    {% if pro.exp_date == "0000" %}
                                    <h6>**Not Added</h6>
                                    {% else %}
                                    <h6>{{pro.exp_date}}</h6>
                                    {% endif %}

                                </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>Price</h4>
                                    <h6>{{pro.price}}</h6>
                                </li>
                                <li>
                                    <h4>Previous Price</h4>
                                    <h6>{{pro.market_price}}</h6>
                                </li>
                                <li>
                                    <h4>Status</h4>

                                    {% if pro.status == "1" %}
                                    <button class="btn btn-success custom-btn-sm status" type="button"
                                        value="{{pro.id}}">Active</button>
                                    {% else %}
                                    <button class="btn btn-danger custom-btn-sm status" type="button"
                                        value="{{pro.id}}">Inactive</button>
                                    {% endif %}
                                </li>
                                <li>
                                    <h4>Featured</h4>

                                    {% if pro.special == "1" %}
                                    <button class="btn btn-success custom-btn-sm change" type="button"
                                        value="{{pro.id}}">Special</button>
                                    {% else %}
                                    <button class="btn btn-danger custom-btn-sm change" type="button"
                                        value="{{pro.id}}">NotSpl</button>
                                    {% endif %}
                                </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>Description</h4>
                                    <h6>{{pro.description}}</h6>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="slider-product-details">
                            {% for image in to_get_raw %}
                            {% if image.product_image %}
                            <div class="item">
                                <a href="{{ image.product_image.url }}" data-fancybox="images"
                                    data-caption="{{ image.product_image }}">
                                    <img src="{{ image.product_image.url }}" srcset="{{ image.product_image.url }}" alt="pro-image">
                                </a>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </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.change', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'actdea' %}",
                data: {
                    activedea: $(this).attr('value'),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                dataType: 'json',
                success: function (data) {
                    $('h7').html(data.success);
                    $this.html(data.html).removeClass('btn-success btn-danger').addClass(data.class);
                }
            });
        }
    });
</script>
<script>
    $('body').on('click', 'button.status', function (e) {
        $this = $(this);
        if ($(this).attr('value')) {
            $.ajax({
                type: 'POST',
                url: "{% url 'actsts' %}",
                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);
                }
            });
        }
    });
</script>
{% endblock body %}