{% extends 'admin/layouts/base.html.twig' %}
{% block title %}View Product{% endblock %}
{% set active = 'app_admin_product' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title':'Product Management',
    },
    {
        'link': path('app_admin_product'), 'title': 'Products',
    },
    {
        'title': 'View',
    }
]%}
{% block content %}
    <style>
        .thumbnails {
            margin-top: 10px;;
            display: flex;
            align-items: center;
            position: relative;
            width: 550px; /* Adjust as needed */
            overflow: hidden;
        }

        .thumbnail-slider {
            display: flex;
            transition: transform 0.3s ease;
        }

        .thumbnail-slider img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
            margin-right: 10px; /* Spacing between thumbnails */
        }

        .thumbnail-slider img:hover,
        .thumbnail-slider img.active {
            opacity: 1;
            border: 2px solid black;
        }

        /* Controls styling */
        .slider-control {
            display: none; /* Hidden by default */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: black;
            cursor: pointer;
            z-index: 10;
            background: rgba(255, 255, 255, 0.7);
            padding: 0 10px;
            border-radius: 50%;
        }

        .slider-control.left {
            left: 0;
        }

        .slider-control.right {
            right: 10px;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6"><h1>Product Details</h1></div>
                <div class="col-md-6 text-end">
                    <a href="{{ path('app_admin_product') }}" class="btn btn-primary">Back</a>
                </div>
            </div>
            <div class="table-responsive">
                <div class="table">
                    <table class="table border-1">
                        <tbody>
                        <tr>
                            <th class="w-25">Id</th>
                            <td class="w-75">{{ product.id }}</td>
                        </tr>
                        <tr>
                            <th class="w-25">Name</th>
                            <td class="w-75">
                                {% if product.name is empty %}
                                    N/A
                                {% else %}
                                    {{ product.name }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Description</th>
                            <td class="w-75" style="white-space: normal; word-wrap: break-word; line-height: 1.5; max-width: 600px;">
                            {% if product.description is empty %}
                                    N/A
                                {% else %}
                                    {{ product.description }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Short Description</th>
                            <td class="w-75">
                                {% if short_description_array is empty %}
                                    N/A
                                {% else %}
                                    {{ short_description_array|join(' , ') }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Regular Price</th>
                            <td class="w-75">
                                {% if product.regularprice is empty %}
                                    N/A
                                {% else %}
                                    {{ product.regularprice|number_format('2', ',', '.') }}<i class="ph ph-currency-eur" style="font-size: 20px"></i>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Sale Price</th>
                            <td class="w-75">
                                {% if product.saleprice is empty %}
                                    N/A
                                {% else %}
                                    {{ product.saleprice|number_format('2', ',', '.') }}<i class="ph ph-currency-eur" style="font-size: 20px"></i>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">SKU</th>
                            <td class="w-75">
                                {% if product.sku is empty %}
                                    N/A
                                {% else %}
                                    {{ product.sku }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Category</th>
                            <td class="w-75">
                                {% if product.category.name is empty %}
                                    N/A
                                {% else %}
                                    {{ product.category.name }}
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <th class="w-25">Status</th>
                            <td class="w-75">
                                {% if product.status is empty %}
                                    N/A
                                {% else %}
                                    {% if product.status == 1 %}
                                        <span class="badge badge bg-success">PUBLISH</span>
                                    {% elseif product.status == 0 %}
                                        <span class="badge badge bg-warning">UNPUBLISH</span>
                                    {% endif %}
                                {% endif %}
                            </td>
                        </tr>
                        {#<tr>
                            <th class="w-25">Wordpress Product</th>
                            <td class="w-75">
                                {{ product.wordpressproductid ? "Yes" : 'No'}}
                            </td>
                        </tr>#}
                        {#{% if product.wordpressproductid is not null %}
                            <th class="w-25">Wordpress Subscription Duration  Id </th>
                            <td class="w-75">
                                {{ product.wordpressproductid }}
                            </td>
                        {% endif %}#}
                        {% if product.images %}
                            <tr>
                                <th class="w-25">Images:</th>
                                <th class="w-75">
                                    <div class="product-images">
                                        <div class="thumbnails">
                                            <div id="thumbnail-slider" class="thumbnail-slider">
                                                {% for image in product.images %}
                                                    <img src="{{ asset('uploads/productImages/' ~ image) }}" alt="Product Image" class="product-detail-image" style="width: 100px; height: 100px; object-fit: cover; margin-right: 10px;">
                                                {% endfor %}
                                            </div>
                                            <div id="left-control" class="slider-control left">&#10094;</div>
                                            <div id="right-control" class="slider-control right">&#10095;</div>
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock  %}
{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const slider = document.getElementById("thumbnail-slider");
            const images = slider.querySelectorAll("img");
            const leftControl = document.getElementById("left-control");
            const rightControl = document.getElementById("right-control");
            let scrollPosition = 0;

            // Display controls only if there are more than 5 images
            if (images.length > 5) {
                leftControl.style.display = "block";
                rightControl.style.display = "block";

                leftControl.onclick = function () {
                    // Scroll left
                    scrollPosition -= 130; // Adjust for image width + margin
                    if (scrollPosition < 0) scrollPosition = 0;
                    slider.style.transform = `translateX(-${scrollPosition}px)`;
                };

                rightControl.onclick = function () {
                    // Scroll right
                    const maxScroll = (images.length * 130) - 650; // Total width minus visible container width
                    scrollPosition += 130;
                    if (scrollPosition > maxScroll) scrollPosition = maxScroll;
                    slider.style.transform = `translateX(-${scrollPosition}px)`;
                };
            }
        });
    </script>
{% endblock %}