@extends('frontend.layouts.app')

@section('content')
    <div class="default_detail_section social_main">
        <div class="container-fluid">
            <div class="socialMedia_section_detail">
                <!-- 3D Slideshow Section -->
                <section id="slideshow">
                    <div class="entire-content">
                        <div class="content-carrousel">
                            @foreach ( $services as $service )
                                @if ($service->services_status!=="NACT")
                                    <figure class="shadowbox">
                                        <img src="{{ asset('assets/frontend/images/cloud.png') }}" />
                                        <div class="slider_text">
                                            <h4 class="slider_heading">
                                                {{$service->services_title}}
                                            </h4>
                                            <p class="slider_para">
                                                {{$service->services_description}}
                                            </p>
                                        </div>
                                    </figure>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <button id="back-to-top-btn">↑</button>
@endsection

@section('footer_scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var shadowbox = document.querySelectorAll(".slider_text");
            shadowbox.forEach(function(element) {
                element.addEventListener("click", function() {
                    var sliderHeading = this.querySelector(".slider_heading");
                    var sliderPara = this.querySelector(".slider_para");
                    if (sliderHeading.style.display !== "none") {
                        sliderHeading.style.display = "none";
                        sliderPara.style.display = "block";
                    } else {
                        sliderHeading.style.display = "block";
                        sliderPara.style.display = "none";
                    }
                });
            });
        });
    </script>
    <!-- scrooll script end  -->
@endsection