@extends('user.layouts.app')

@push('style')
<style type="text/css">
   
</style>
@endpush

@section('body_class', 'food_beverages')

@section('content')
<section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}"></div>
    @endforeach
</section>

<div class="banner-inner-content">
    <div class="container">
        <ul class="bread-come">
            <li>
                <a href="/">Home</a>
            </li>
            <li>Food & Beverage</li>
        </ul>
    </div>
</div>

<section class="affiliated-clubs">
    <div class="container">
        <div class="page-title">
            <h4 data-aos="fade-up">FOOD AND BEVERAGE</h4>
            @if(!empty($data))
            <p data-aos="fade-up">{!!$data->description!!}</p>
            @endif
        </div>
    </div>
</section>

<section class="sport-details pt-2">
    <div class="container">
        <div class="sport-details-plate">
            @if(!empty($food_categories_data))

            <div class="sport-nav pt-0 facility-left-tab">
                <ul>
                    @foreach($food_categories_data as $category)
                    <li>
                        <a href="#{{$category->slug}}">{{$category->title}}</a>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="sport-nav-content pt-0 mt-0">
                @foreach($food_categories_data as $category)
                <div class="activeSection" id="{{$category->slug}}">
                    <!-- <div class="section-inner "> -->
                    <div class="section-inner">

                        <div class="title">
                            <h4 data-aos="fade-up">{{$category->title}}</h4>
                        </div>
                        <div class="section-banner">
                            <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset('/storage/distribution/images/food_beverage_categories/' . $category->image) }}" alt="" />
                        </div>
                        <div class="section-description" data-aos="fade-up">
                            <!-- <p>Satiate your appetite with the familiar, wholesome taste of pizzas, pastas, lasagna, Tex-Mex dishes and Asian starters from the renowned Italian food chain.</p> -->
                             <!-- {!!$category->description!!} -->
                             <!-- {!! 
                                strip_tags(
                                    preg_replace('/<p[^>]*>/i', '<p>', $category->description),
                                    '<br><p><ul><li>'
                                ) 
                            !!} -->
                            {!! $category->description !!}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
                    @endif

        </div>
    </div>
</section>

    <a href="{{route('showTimingFacilityPage')}}" class="timing-floatng-btn" target="_blank">
        <img src="{{ asset('images/clock-white.svg') }}" alt="no-img">
    </a>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
    let slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
@endpush