@push('styles')
@vite('resources/css/plugins/shshaw/flipster.css')
@vite('resources/css/gallery-slide-show.css')
@endpush
<div class="section_inner" id="business_opportunity">
    <div class="container-fluid mt-0" >
        <div class="row">
            <div class="col-12 d-flex justify-content-center">
                <div class="vl">
                    <h1 class="name super-h1">
                        BUSINESS OPPORTUNITY
                    </h1>
                    <h3 class="dgizmo-text-color">All of the Digital Platform and Virtual Technology business ideas are just endless!</h3>
                </div>
            </div>
            <div class="col-12 mt-5">
                <img src="{{Vite::asset('resources/images/dgizmo/business_opportunity.png')}}" alt="">
            </div>
            <div class="col-12 mt-5">
                <div class="container">
                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/ecommerce.png')}}" >
                    </div>

                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/business.png')}}" >
                    </div>

                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/EVENTSANDCONFERENCES.png')}}" >
                    </div>

                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/REALESTATE.png')}}" >
                    </div>

                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/DIGITALADVERTISING.png')}}" >
                    </div>

                    <div class="mySlides">
                        <img src="{{Vite::asset('resources/images/dgizmo/business/EDUCATION.png')}}" >
                    </div>

                    <a class="prev" onclick="plusSlides(-1)">❮</a>
                    <a class="next" onclick="plusSlides(1)">❯</a>

                    <div class="caption-container">
                        <p id="caption"></p>
                    </div>

                    <div class="row">
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/ecommerce.png')}}" style="width:100%; height:100%" onclick="currentSlide(1)" alt="E-COMMERCE">
                        </div>
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/business.png')}}" style="width:100%; height:100%" onclick="currentSlide(2)" alt="BUSINESS">
                        </div>
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/EVENTSANDCONFERENCES.png')}}" style="width:100%; height:100%" onclick="currentSlide(3)" alt="EVENT & CONFERENCES">
                        </div>
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/REALESTATE.png')}}" style="width:100%; height:100%" onclick="currentSlide(4)" alt="REALESTATE">
                        </div>
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/DIGITALADVERTISING.png')}}" style="width:100%; height:100%" onclick="currentSlide(5)" alt="DIGITAL ADVERTISING">
                        </div>
                        <div class="column">
                            <img class="demo cursor" src="{{Vite::asset('resources/images/dgizmo/business/EDUCATION.png')}}" style="width:100%; height:100%" onclick="currentSlide(6)" alt="EDUCATION">
                        </div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
@vite('resources/js/plugins/shshaw/flipster.js')
<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("demo");
      let captionText = document.getElementById("caption");
      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";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }
</script>
@endpush