/**
* Theme Name:        avanam-cosmika
* Theme URI:         https://templatemela.com/
* Template:          avanam
* Author:            TemplateMela
* Author URI:        #
* Description:       This is a child theme of Avanam, generated by TemplateMela.
* Version:           1.0.0
* License:           GNU General Public License v3.0 (or later)
* License URI:       https://www.gnu.org/licenses/gpl-3.0.html
* Text Domain:       avanam-cosmika
* Requires at least: 6.2
* Tested up to:      6.6
* Requires PHP:      7.4
* Tags: translation-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce

*/
add_action('wp_footer', 'lm_inject_video_section_before_tabs_1658', 100);
function lm_inject_video_section_before_tabs_1658() {
    if (!is_product() || get_queried_object_id() != 1658) {
        return;
    }
    ?>
    <style>
    .lm-product-video-wrapper {
        width: 100%;
        margin: 30px 0 40px;
        clear: both;
    }

    .lm-videos-section {
        width: 100%;
    }

    .lm-videos-header h3 {
        margin: 0 0 18px;
        font-size: 24px;
        line-height: 1.2;
    }

    .lm-video-slider {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        user-select: none;
    }

    .lm-video-viewport {
        overflow: hidden;
        width: 100%;
    }

    .lm-video-track {
        display: flex;
        gap: 16px;
        transition: transform 0.45s ease;
        will-change: transform;
    }

    .lm-video-slide {
        flex: 0 0 calc((100% - 32px) / 3);
        box-sizing: border-box;
    }

    .lm-video-slide video {
        display: block;
        width: 100%;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        border-radius: 18px;
        background: #000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    }

    .lm-video-nav {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border: none;
        border-radius: 999px;
        background: #fff;
        color: #111;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        transition: transform 0.2s ease, opacity 0.2s ease;
        padding: 0;
    }

    .lm-video-nav:hover {
        transform: scale(1.05);
    }

    .lm-video-nav:active {
        transform: scale(0.98);
    }

    @media (max-width: 1024px) {
        .lm-video-slide {
            flex: 0 0 calc((100% - 16px) / 2);
        }
    }

    @media (max-width: 767px) {
        .lm-video-slider {
            gap: 8px;
        }

        .lm-video-slide {
            flex: 0 0 78%;
        }

        .lm-video-nav {
            width: 36px;
            height: 36px;
            min-width: 36px;
            font-size: 18px;
        }
    }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        if (document.body.classList.contains('postid-1658') === false) {
            return;
        }

        const targetSelectors = [
            '.woocommerce-tabs',
            '.wc-tabs-wrapper',
            '.woocommerce-Tabs-panel',
            '.elementor-widget-woocommerce-product-data-tabs',
            '.elementor-widget-tabs',
            '.tabs-wrapper',
            '.shopengine-product-tabs',
            '.product-tabs',
            '.etheme-tabs',
            '.wd-accordion-tabs',
            '.woocommerce-tabs-wrapper'
        ];

        let target = null;

        for (const selector of targetSelectors) {
            const found = document.querySelector(selector);
            if (found) {
                target = found;
                break;
            }
        }

        if (!target) {
            console.log('LM video section: tabs target not found');
            return;
        }

        if (document.getElementById('lm-product-video-wrapper')) {
            return;
        }

        const wrapper = document.createElement('div');
        wrapper.id = 'lm-product-video-wrapper';
        wrapper.className = 'lm-product-video-wrapper';
        wrapper.innerHTML = `
            <div class="lm-videos-section">
                <div class="lm-videos-header">
                    <h3>Video</h3>
                </div>

                <div class="lm-video-slider" id="lmVideoSliderWrap">
                    <button class="lm-video-nav lm-video-prev" type="button" aria-label="Anterior">&#10094;</button>

                    <div class="lm-video-viewport">
                        <div class="lm-video-track">
                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.35.33.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.10.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.11.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.13.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.15.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.16.mp4" type="video/mp4">
                                </video>
                            </div>

                            <div class="lm-video-slide">
                                <video controls playsinline preload="metadata">
                                    <source src="http://lovemuse.viamentoris.ro/wp-content/uploads/2026/04/WhatsApp-Video-2026-04-16-at-10.36.18.mp4" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </div>

                    <button class="lm-video-nav lm-video-next" type="button" aria-label="Următor">&#10095;</button>
                </div>
            </div>
        `;

        target.parentNode.insertBefore(wrapper, target);

        const slider = document.getElementById('lmVideoSliderWrap');
        if (!slider) return;

        const viewport = slider.querySelector('.lm-video-viewport');
        const track = slider.querySelector('.lm-video-track');
        const prevBtn = slider.querySelector('.lm-video-prev');
        const nextBtn = slider.querySelector('.lm-video-next');

        let originalSlides = Array.from(track.children);
        const totalOriginal = originalSlides.length;
        if (!totalOriginal) return;

        let perView = getPerView();
        let currentIndex = perView;
        let isTransitioning = false;

        function getPerView() {
            if (window.innerWidth <= 767) return 1;
            if (window.innerWidth <= 1024) return 2;
            return 3;
        }

        function pauseAllVideos() {
            slider.querySelectorAll('video').forEach(video => video.pause());
        }

        function removeClones() {
            track.querySelectorAll('.lm-video-clone').forEach(clone => clone.remove());
        }

        function buildInfiniteTrack() {
            removeClones();

            originalSlides = Array.from(track.children).filter(el => !el.classList.contains('lm-video-clone'));
            perView = getPerView();

            const beforeClones = originalSlides.slice(-perView).map(slide => {
                const clone = slide.cloneNode(true);
                clone.classList.add('lm-video-clone');
                return clone;
            });

            const afterClones = originalSlides.slice(0, perView).map(slide => {
                const clone = slide.cloneNode(true);
                clone.classList.add('lm-video-clone');
                return clone;
            });

            beforeClones.forEach(clone => track.insertBefore(clone, track.firstChild));
            afterClones.forEach(clone => track.appendChild(clone));

            currentIndex = perView;
            setPosition(false);
            smartPreload();
        }

        function getSlideFullWidth() {
            const slide = track.querySelector('.lm-video-slide');
            if (!slide) return 0;
            const trackStyles = window.getComputedStyle(track);
            const gap = parseFloat(trackStyles.columnGap || trackStyles.gap || 0);
            return slide.getBoundingClientRect().width + gap;
        }

        function setPosition(animate = true) {
            const moveX = getSlideFullWidth() * currentIndex;
            track.style.transition = animate ? 'transform 0.45s ease' : 'none';
            track.style.transform = 'translateX(-' + moveX + 'px)';
        }

        function smartPreload() {
            const allSlides = Array.from(track.children);
            const allVideos = slider.querySelectorAll('video');

            allVideos.forEach(video => {
                video.preload = 'metadata';
            });

            const preloadCount = perView + 2;

            for (let i = currentIndex; i < currentIndex + preloadCount; i++) {
                const slide = allSlides[i];
                if (!slide) continue;

                const video = slide.querySelector('video');
                if (!video) continue;

                if (video.preload !== 'auto') {
                    video.preload = 'auto';
                    video.load();
                }
            }
        }

        function goToNext() {
            if (isTransitioning) return;
            isTransitioning = true;
            pauseAllVideos();
            currentIndex++;
            setPosition(true);
        }

        function goToPrev() {
            if (isTransitioning) return;
            isTransitioning = true;
            pauseAllVideos();
            currentIndex--;
            setPosition(true);
        }

        nextBtn.addEventListener('click', goToNext);
        prevBtn.addEventListener('click', goToPrev);

        track.addEventListener('transitionend', function () {
            const maxIndexBeforeReset = totalOriginal + perView;

            if (currentIndex >= maxIndexBeforeReset) {
                currentIndex = perView;
                setPosition(false);
            } else if (currentIndex <= -1) {
                currentIndex = totalOriginal + perView - 1;
                setPosition(false);
            }

            isTransitioning = false;
            smartPreload();
        });

        let startX = 0;
        let isDragging = false;

        viewport.addEventListener('pointerdown', function (e) {
            startX = e.clientX;
            isDragging = true;
        });

        function endDrag(e) {
            if (!isDragging) return;
            const diff = e.clientX - startX;
            isDragging = false;

            if (Math.abs(diff) > 50) {
                if (diff < 0) {
                    goToNext();
                } else {
                    goToPrev();
                }
            }
        }

        viewport.addEventListener('pointerup', endDrag);
        viewport.addEventListener('pointerleave', endDrag);
        viewport.addEventListener('pointercancel', endDrag);

        let resizeTimer;
        window.addEventListener('resize', function () {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function () {
                pauseAllVideos();
                buildInfiniteTrack();
            }, 150);
        });

        buildInfiniteTrack();
    });
    </script>
    <?php
}