@extends('layouts.webLayoutMaster')

@section('meta')
<meta name="description"
    content="Tuscany's culinary and wine delights: regional food, wine tasting in Florence, wine stores, wine&bar, bar and wine, and exclusive wine tours.">
<meta name="keywords"
    content="tuscany region food, tuscany italy food, tuscany food, tuscany country food, wine tasting, wine store, wine tasting florence, wine&bar, bar and wine, wine tour">
@endsection

@section('canonical')
<link rel="canonical" href="https://www.vino-tasting.com/tuscany-foods">
@endsection

@section('title')
- Tuscany Foods
@endsection

@section('css')
<style>
    .transition {
        transition: all 350ms ease-in-out;
    }

    .r-3-2 {
        width: 100%;
        padding-bottom: 66.667%;
        background-color: #ddd;
    }

    .image-holder {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* Main Styles */
    .gallery-wrapper {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .gallery-tuscane {
        position: relative;
        white-space: nowrap;
        font-size: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
    }

    .item-wrapper {
        cursor: pointer;
        width: 20%;
        display: inline-block;
        background-color: white;
    }



    .gallery-item {
        opacity: 0.5;
    }

    .gallery-item.active {
        opacity: 1;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1em;
    }

    .move-btn {
        display: inline-block;
        width: 50%;
        border: none;
        color: #ccc;
        background-color: transparent;
        padding: 0.2em 1.5em;
    }

    .move-btn:first-child {
        border-right: none;
    }

    .move-btn.left {
        cursor: w-resize;
    }

    .move-btn.right {
        cursor: e-resize;
    }
</style>
@endsection

@section('content')
<section class="">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center  py-5">
                <h1 class="heading text-uppercase">Tuscany Foods</h1>
                <ul class="list-unstyled breadcrumbs text-dark">
                    <li><a class="text-dark" href="{{ route('home') }}">Home</a></li>
                    <li>/</li>
                    <li>Tuscany Foods</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<section class="mb-4">
    <div class="container ">
        <h1 class="heading text-center">The Story of Tuscany Food Making</h1>
        <div class="feature">
            <figure class="featured-item image-holder r-3-2 transition"></figure>
        </div>
        <div class="gallery-wrapper">
            <div class="gallery-tuscane">
                <div class="item-wrapper">
                    <figure class="gallery-item image-holder r-3-2 active transition"></figure>
                </div>
                <div class="item-wrapper">
                    <figure class="gallery-item image-holder r-3-2 transition"></figure>
                </div>
                <div class="item-wrapper">
                    <figure class="gallery-item image-holder r-3-2 transition"></figure>
                </div>
                <div class="item-wrapper">
                    <figure class="gallery-item image-holder r-3-2 transition"></figure>
                </div>
                <div class="item-wrapper">
                    <figure class="gallery-item image-holder r-3-2 transition"></figure>
                </div>
            </div>
        </div>
        <div class="controls" hidden>
            <button class="move-btn left">&larr;</button>
            <button class="move-btn right">&rarr;</button>
        </div>

    </div>
</section>

<script>
    $(document).ready(function () {
        var gallery = document.querySelector('.gallery-tuscane');
        var galleryItems = document.querySelectorAll('.gallery-item');
        var numOfItems = gallery.children.length;
        var itemWidth = 23; // percent: as set in css

        var featured = document.querySelector('.featured-item');

        var leftBtn = document.querySelector('.move-btn.left');
        var rightBtn = document.querySelector('.move-btn.right');
        var leftInterval;
        var rightInterval;
        var autoSlideInterval;

        var scrollRate = 0.2;
        var left;

        function selectItem(e) {
            if (e.target.classList.contains('active')) return;

            featured.style.backgroundImage = e.target.style.backgroundImage;

            for (var i = 0; i < galleryItems.length; i++) {
                if (galleryItems[i].classList.contains('active'))
                    galleryItems[i].classList.remove('active');
            }
            e.target.classList.add('active');
            // Reset auto-slide interval
            clearInterval(autoSlideInterval);
            startAutoSlide();
        }

        function galleryWrapLeft() {
            var first = gallery.children[0];
            gallery.removeChild(first);
            gallery.style.left = -itemWidth + '%';
            gallery.appendChild(first);
            gallery.style.left = '0%';
        }

        function galleryWrapRight() {
            var last = gallery.children[gallery.children.length - 1];
            gallery.removeChild(last);
            gallery.insertBefore(last, gallery.children[0]);
            gallery.style.left = '-23%';
        }

        function moveLeft() {
            left = left || 0;

            leftInterval = setInterval(function () {
                gallery.style.left = left + '%';

                if (left > -itemWidth) {
                    left -= scrollRate;
                } else {
                    left = 0;
                    galleryWrapLeft();
                }
            }, 1);
        }

        function moveRight() {
            //Make sure there is element to the leftd
            if (left > -itemWidth && left < 0) {
                left = left - itemWidth;

                var last = gallery.children[gallery.children.length - 1];
                gallery.removeChild(last);
                gallery.style.left = left + '%';
                gallery.insertBefore(last, gallery.children[0]);
            }

            left = left || 0;

            leftInterval = setInterval(function () {
                gallery.style.left = left + '%';

                if (left < 0) {
                    left += scrollRate;
                } else {
                    left = -itemWidth;
                    galleryWrapRight();
                }
            }, 1);
        }

        function stopMovement() {
            clearInterval(leftInterval);
            clearInterval(rightInterval);
        }

        leftBtn.addEventListener('mouseenter', moveLeft);
        leftBtn.addEventListener('mouseleave', stopMovement);
        rightBtn.addEventListener('mouseenter', moveRight);
        rightBtn.addEventListener('mouseleave', stopMovement);

        function autoSlide() {
            var activeIndex = Array.prototype.indexOf.call(galleryItems, document.querySelector(
                '.gallery-item.active'));
            var nextIndex = (activeIndex + 1) % galleryItems.length;
            var nextItem = galleryItems[nextIndex];

            selectItem({
                target: nextItem
            });
        }

        function startAutoSlide() {
            autoSlideInterval = setInterval(autoSlide, 3000); // Change slide every 3 seconds
        }

        // Start auto-slide when the page loads
        startAutoSlide();

        //Start this baby up
        (function init() {
            var images = [
                "{{ asset('images/website/foods/1.webp') }}",
                "{{ asset('images/website/foods/2.webp') }}",
                "{{ asset('images/website/foods/3.webp') }}",
                "{{ asset('images/website/foods/4.webp') }}",
                "{{ asset('images/website/foods/5.webp') }}"

            ];

            //Set Initial Featured Image
            featured.style.backgroundImage = 'url(' + images[0] + ')';

            //Set Images for Gallery and Add Event Listeners
            for (var i = 0; i < galleryItems.length; i++) {
                galleryItems[i].style.backgroundImage = 'url(' + images[i] + ')';
                galleryItems[i].addEventListener('click', selectItem);
            }
        })();
    });
</script>


<section class="p-0 py-5">
    <div class="container">
        <h3 class="heading text-center">The Art of Tuscany Food Making</h3>
        <video width="100%" height="auto" autoplay loop muted class="header-video">
            <source src="{{ asset('videos/website/tuskany-food.mp4') }}" type="video/mp4">
        </video>
    </div>
</section>

<section class="img-bg-8">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center  py-5">
                <div class="row justify-content-between">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="{{ asset('images/website/1-1.webp') }}" class="d-block w-100" alt="">
                                </div>
                                <div class="carousel-item">
                                    <img src="{{ asset('images/website/4-1.webp') }}" class="d-block w-100" alt="">
                                </div>
                                <div class="carousel-item">
                                    <img src="{{ asset('images/website/1-1.webp') }}" class="d-block w-100" alt="">
                                </div>
                                <div class="carousel-item">
                                    <img src="{{ asset('images/website/4-1.webp') }}" class="d-block w-100" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-12 py-5">
                        <div class="card p-4">
                            <div class="card-head text-center ">
                                <h2 class="m-0 title fontpinyon text-red-cus">Your Choice </h2>
                                <h3 class="m-0">Red or White? </h3>
                            </div>
                            <div class="card-body text-start">
                                <ul>
                                    <li class="cus-icon-dash">Vernaccia di San Gimignano</li>
                                    <li class="cus-icon-dash">Chianti Classico - Riserva</li>
                                    <li class="cus-icon-dash">Chianti Classico</li>
                                    <li class="cus-icon-dash">Brunello di Montalcino</li>
                                </ul>
                            </div>
                            <div class=" text-center">
                                <a href="{{ route('shop') }}"
                                    class="btn-cus lg-round text-uppercase text-center w-60">Shop
                                    Now</a>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    var myCarousel = document.querySelector('#carouselExampleControls')
                    var carousel = new bootstrap.Carousel(myCarousel, {
                        interval: 3000,
                        wrap: false
                    })
                </script>

            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script>
    document.querySelectorAll('.thumbnail').forEach(item => {
        item.addEventListener('mouseover', event => {
            const hoverSrc = item.getAttribute('data-hover-src');
            if (hoverSrc) {
                item.setAttribute('data-original-src', item.src);
                item.src = hoverSrc;
            }
        });
        item.addEventListener('mouseout', event => {
            const originalSrc = item.getAttribute('data-original-src');
            if (originalSrc) {
                item.src = originalSrc;
            }
        });
    });
</script>
@endsection