{% extends 'frontend/layouts/index.html.twig' %}

{% block publiccontent %}
    {% if isConnectedToAiApp is defined %}
        <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/connect_to_app_ai_growth.css') }}">
    {% endif %}
    <style>
        {% include 'frontend/products/style.css' %}
        .product-gallery {
            display: flex;
            position: relative;
        }

        .main-image {
            flex: 1;
            position: relative;
            width: 400px; /* Fixed width for the main image */
            height: 500px; /* Fixed height for the main image */
            overflow: hidden;
        }

        .main-image img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Ensures the image covers the container without stretching */
        }

        .thumbnails {
            margin-top: 10px;;
            display: flex;
            align-items: center;
            position: relative;
            width: 650px; /* 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;
        }

        @media (max-width: 600px){
            .thumbnail-slider img {
                width: 63px;
                height: 65px;
            }
            .thumbnails {
                width: 352px;
            }
            .main-image {
                height: 350px;
            }
            .product-title {
                font-size: 8vw;
                margin-top: 10px;
            }
        }

        /* For medium screens (between 600px and 900px wide) */
        @media (min-width: 601px) and (max-width: 900px) {
            .main-image {
                height: 400px;
            }
            .product-title {
                font-size: 4vw;
            }
        }
    </style>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                {% if product.images %}
                    <div class="product-gallery">
                        <div class="main-image">
                            <img id="displayed-image" src="{{ asset('uploads/productImages/' ~ product.images[0]) }}" alt="Product Image">
                        </div>
                    </div>
                    <div class="thumbnails">
                        <div id="thumbnail-slider" class="thumbnail-slider">
                            {% for image in product.images %}
                                <img onclick="changeImage('{{ asset('uploads/productImages/' ~ image) }}')" src="{{ asset('uploads/productImages/' ~ image) }}" alt="Thumbnail">
                            {% endfor %}
                        </div>
                        <div id="left-control" class="slider-control left">&#10094;</div>
                        <div id="right-control" class="slider-control right">&#10095;</div>
                    </div>
                {% else %}
                    <div class="container-card">
                        <div class="top">{{ product.name }}</div>
                        <div class="bottom" aria-hidden="true">{{ product.name }}</div>
                    </div>
                {% endif %}
            </div>

            <div class="col-md-6">
                <h1 class="product-title">{{ product.name }}</h1>
                <div class="product-price">{{ product.regularprice|number_format(2,',','.') }} € / Month</div>
                <ul class="product-description">
                    {% for productPoints in shortDescriptionArray %}
                        <li>{{ productPoints }}</li>
                    {% endfor %}
                </ul>
                <div class="product-categories">
                    <strong>Category:</strong> {{ product.category.name }}
                </div>
                <div class="product-share">
                    <strong>Duration:</strong>
                    {{ form_start(form) }}
                    {{ form_widget(form.durationMonth) }}
                </div>
                <p  id="selectedDurationNote" ></p>
                <div style="text-decoration: line-through; font-size: 30px;"  id="selectedDurationPrice"></div>
                <div style="font-size: 30px;" id="selectedDurationDiscountPrice" class="product-price" ></div>

                {% if product.getTrialsDay %}
                <h6 style="color: orange;">You have a {{ product.getTrialsDay }}-day trial period for this product.</h6>
                {% endif %}
                {{ form_widget(form.subscribe) }}
                {{ form_end(form) }}

            </div>
        </div>
        <div class="tabs" data-tab="description">DESCRIPTION</div>
        <div id="description" class="active">
            <p>{{ product.description|nl2br }}</p>
        </div>
    </div>
    <footer class="container text-center mt-3 mb-5">
        <h3>Available Payment Methods </h3>
        <div class="payment-methods">
            <img src="{{ asset('../assets/icons/visa.png') }}" alt="Visa" height="50px">
            <img src="{{ asset('../assets/icons/mastercard.png') }}" alt="mastercard" height="50px" >
            <img src="{{ asset('../assets/icons/american-express.png') }}" alt="PayPal" height="50px" >
            <img src="{{ asset('../assets/icons/stripe.png') }}" alt="PayPal" height="50px" >
            <img src="{{ asset('../assets/icons/bitcoin.png') }}" alt="PayPal" height="40px" >
            <img src="{{ asset('../assets/icons/paypal.png') }}" alt="PayPal" height="40px" >
        </div>
    </footer>

{% endblock %}

{% block javascripts %}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var durationMonth = document.getElementById('product_preview_durationMonth');
            var selectedDurationNote = document.getElementById('selectedDurationNote');
            var selectedDurationPrice = document.getElementById('selectedDurationPrice');
            var selectedDurationDiscountPrice = document.getElementById('selectedDurationDiscountPrice');
            var subscribeButton = document.getElementById('form_subscribe');
            // display product note product price 
            durationMonth.addEventListener('change', function () {
                var selectedMonth = durationMonth.value;
                var selectedOption = durationMonth.options[durationMonth.selectedIndex];
                var productPrice = parseFloat(selectedOption.getAttribute('data-price'));
                var note = selectedOption.getAttribute('data-note');
                var discount = parseFloat(selectedOption.getAttribute('data-discount'));
                var selectedMonth = parseInt(durationMonth.value);
                if (note.trim() === '') {
                    selectedDurationNote.textContent = '';
                } else {
                    selectedDurationNote.textContent = note;
                }

                selectedDurationPrice.textContent = (productPrice * selectedMonth).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " €";

                if (discount) {
                    var discountPrice = (((productPrice * selectedMonth) * discount) / 100);
                    selectedDurationDiscountPrice.textContent = ((productPrice * selectedMonth) - discountPrice).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + " € for " + selectedMonth + " Months";
                    selectedDurationPrice.style.textDecoration = 'line-through';
                } else {
                    selectedDurationDiscountPrice.textContent = "";
                    selectedDurationPrice.style.textDecoration = 'none';
                }

                subscribeButton.classList.remove('disabled');
            });

            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)`;
                };
            }
        });

        {% if isConnectedToAiApp is defined and isConnectedToAiApp is not null %}
            console.log('{{ path("app_front_connect_with_app_ai_growth") }}','{{ app.request.schemeAndHttpHost }}');
			const getConnectedToAiAppValue = '{{ isConnectedToAiApp }}';
			const isAnyInstaDataInsertedToAiApp  = '{{ isAnyInstaDataInsertedToAiApp }}';
			const currentUserId  = '{{ currentUserId }}';
            const connectWithAppAiGrowthUrl = '{{ app.request.scheme ~ "://" ~ app.request.host ~ path("app_front_connect_with_app_ai_growth") }}';
            console.log(connectWithAppAiGrowthUrl);
        {% endif %}

        function changeImage(src) {
            const mainImage = document.getElementById("displayed-image");
            mainImage.src = src;
            document.querySelectorAll('.thumbnails img').forEach(img => img.classList.remove('active'));
            event.target.classList.add('active');
        }

    </script>
    {% if isConnectedToAiApp is defined and isConnectedToAiApp is not null %}
		<script src="{{ asset('assets/js/connect_to_app_ai_growth.js') }}"></script>
    {% endif %}
{% endblock %}