@include('htmlpage.frontent.layout.app')
<!-- Start Page Banner Area -->
<div class="page-banner-area-product bg-11 pt-100">
    <div class="container">
        <div class="page-banner-content">
            <h2>

                {{ $product->page_name }}

            </h2>
            <ul>
                <li>
                    <a href="index.html">

                        Home
                    </a>
                </li>
                <li>
                    <span>Products</span>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End Page Banner Area -->
<!-- Start Product Details Area -->
<section class="product-details-area ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="slider" class="owl-carousel product-slider">
                    <div class="item">
                        <img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->alt }}">
                    </div>
                    @foreach ($galleries as $gallery)
                        <div class="item">
                            <img src="{{ asset('storage/' . $gallery->image_path) }}">
                        </div>
                    @endforeach

                </div>
                <div id="thumb" class="owl-carousel product-thumb">
                    <div class="item">
                        <img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->alt }}">
                    </div>
                    @foreach ($galleries as $gallery)
                        <div class="item">
                            <img src="{{ asset('storage/' . $gallery->image_path) }}" alt="">
                        </div>
                    @endforeach

                </div>
            </div>
            <div class="col-md-6">
                <div class="product-dtl">
                    <div class="product-info">
                        <h1 class="product-name">{{ $product->page_name }}</h1>
                    </div>

                    {!! $product->content !!}
                    <p class="pb-4">Visit <a href="https://www.intersurgical.com/" target="_blank">
                            <img src="{{ asset('images/intersurgical-logo.png') }}" alt="" width="100"></a>
                        for further
                        information.</p>
                </div>
                @if ($product->youtube_url)
                    <div class="row youtube">
                        <div class="col-md-6">
                            <h5>Precision and Innovation: Watch {{ $product->page_name }} in Action</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="video-container">
                                <img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->alt }}">
                                <div class="play-button" onclick="playVideo()">
                                    <span>&#9658;</span> <!-- Play icon -->
                                </div>
                                <iframe id="video-frame" width="600" height="315" src=""
                                    title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
                                    style="display: none;"></iframe>
                            </div>
                        </div>
                    </div>
                @else
                    <!-- Optional: Add an alternative content or message if the video URL is null -->
                    <p>No video available.</p>
                @endif

            </div>
        </div>

        <div class="row text-center pt-5">
            <a href="/products">
                <p><img src="{{ asset('images/previous.gif') }}" alt="" width="100px"></p>
            </a>
        </div>
    </div>

</section>
<!-- End Product Details Area -->
@include('htmlpage.frontent.layout.footer')
<script>
    $(document).ready(function() {
        var slider = $("#slider");
        var thumb = $("#thumb");
        var slidesPerPage = 4; //globaly define number of elements per page
        var syncedSecondary = true;
        slider.owlCarousel({
            items: 1,
            slideSpeed: 2000,
            nav: false,
            autoplay: false,
            dots: false,
            loop: true,
            responsiveRefreshRate: 200
        }).on('changed.owl.carousel', syncPosition);
        thumb
            .on('initialized.owl.carousel', function() {
                thumb.find(".owl-item").eq(0).addClass("current");
            })
            .owlCarousel({
                items: slidesPerPage,
                dots: false,
                nav: true,
                item: 4,
                smartSpeed: 200,
                slideSpeed: 500,
                slideBy: slidesPerPage,
                navText: [
                    '<svg width="18px" height="18px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
                    '<svg width="25px" height="25px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'
                ],
                responsiveRefreshRate: 100
            }).on('changed.owl.carousel', syncPosition2);

        function syncPosition(el) {
            var count = el.item.count - 1;
            var current = Math.round(el.item.index - (el.item.count / 2) - .5);
            if (current < 0) {
                current = count;
            }
            if (current > count) {
                current = 0;
            }
            thumb
                .find(".owl-item")
                .removeClass("current")
                .eq(current)
                .addClass("current");
            var onscreen = thumb.find('.owl-item.active').length - 1;
            var start = thumb.find('.owl-item.active').first().index();
            var end = thumb.find('.owl-item.active').last().index();
            if (current > end) {
                thumb.data('owl.carousel').to(current, 100, true);
            }
            if (current < start) {
                thumb.data('owl.carousel').to(current - onscreen, 100, true);
            }
        }

        function syncPosition2(el) {
            if (syncedSecondary) {
                var number = el.item.index;
                slider.data('owl.carousel').to(number, 100, true);
            }
        }
        thumb.on("click", ".owl-item", function(e) {
            e.preventDefault();
            var number = $(this).index();
            slider.data('owl.carousel').to(number, 300, true);
        });


        $(".qtyminus").on("click", function() {
            var now = $(".qty").val();
            if ($.isNumeric(now)) {
                if (parseInt(now) - 1 > 0) {
                    now--;
                }
                $(".qty").val(now);
            }
        })
        $(".qtyplus").on("click", function() {
            var now = $(".qty").val();
            if ($.isNumeric(now)) {
                $(".qty").val(parseInt(now) + 1);
            }
        });
    });
</script>
<script>
    function playVideo() {
        const iframe = document.getElementById('video-frame');
        iframe.src = "{{ $product->youtube_url }}"; // Set the video URL
        iframe.style.display = 'block'; // Show the iframe
        document.querySelector('.play-button').style.display = 'none'; // Hide the play button
    }
</script>