sekolah_adiwiyata/resources/views/kegiatan_detail.blade.php

@extends('layouts.appNew')
@section('title',@$title)
@section('content')
<section id="kegiatan" class="py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <!-- Activity Grid -->
        <div id="activity-grid" class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-8">
            <div class="activity-card group bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-full fade-in">
                <div class="relative h-100 overflow-hidden">
                    <?php
				        $image = json_decode($kegiatan->image);
				    ?>
                    <div id="carousel" class="relative w-full mx-auto">
                    <!-- Images -->
                        <div class="overflow-hidden rounded-xl relative">
                            <div id="carousel-inner" class="flex transition-transform duration-500">
                                @foreach ($image as $img)
                                    <div class="w-full flex-shrink-0">
                                        <img src="{{ asset($img) }}" class="w-full lg:w-[100%] vh-100 rounded-[10px] object-cover" alt="Image">
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Prev button -->
                        <button id="prevBtn" class="absolute left-2 top-1/2 -translate-y-1/2 bg-gray-800/60 text-white p-2 rounded-full"> ‹ </button>

                        <!-- Next button -->
                        <button id="nextBtn" class="absolute right-2 top-1/2 -translate-y-1/2 bg-gray-800/60 text-white p-2 rounded-full"> › </button>

                        <!-- Indicators -->
                        <div id="indicators" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex space-x-2">
                            @foreach ($image as $index => $img)
                                <button class="w-3 h-3 rounded-full {{ $index === 0 ? 'bg-white' : 'bg-gray-400' }}"></button>
                            @endforeach
                        </div>
                    </div>
                    {{-- <img src="" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" alt="SMAN 42: Peduli Bumi &amp; Lingkungan"> --}}
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-600 text-white">
                            {{ $kegiatan->kategori }}
                        </span>
                    </div>
                </div>
                <div class="p-6 flex flex-col flex-grow">
                    <div class="flex items-center text-slate-400 text-xs font-semibold mb-3">
                        <span class="material-symbols-outlined text-sm mr-1">calendar_today</span> {{ date('D',strtotime($kegiatan->created_at)) }}, {{ date('d M Y',strtotime($kegiatan->created_at)) }}
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 mb-2 leading-tight group-hover:text-green-600 transition">{{ $kegiatan->judul }}</h3>
                    <div class="text-sm opacity-[50%] mt-5">
                        {!!$kegiatan->body !!}
                    </div>
                </div>
            </div>
        </div>

        <div id="activity-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mt-10">
            @foreach($lainnya as $dataKeg)
            <?php
                $image = json_decode($dataKeg->image);
            ?>
            <div class="activity-card group bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-full fade-in">
                <div class="relative h-48 overflow-hidden">
                    <img src="{{ asset($image[0]) }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" alt="SMAN 42: Peduli Bumi &amp; Lingkungan">
                    <div class="absolute top-4 left-4">
                        <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-green-600 text-white">
                            {{ $dataKeg->kategori }}
                        </span>
                    </div>
                </div>
                <div class="p-6 flex flex-col flex-grow">
                    <div class="flex items-center text-slate-400 text-xs font-semibold mb-3">
                        <span class="material-symbols-outlined text-sm mr-1">calendar_today</span> {{ date('D',strtotime($dataKeg->created_at)) }}, {{ date('d M Y',strtotime($dataKeg->created_at)) }}
                    </div>
                    <h3 class="text-lg font-bold text-slate-900 mb-2 leading-tight group-hover:text-green-600 transition">{{ $dataKeg->judul }}</h3>
                    <a href="{{ url('kegiatan/'.$dataKeg->slug) }}" class="flex items-center justify-between group/btn py-2 text-green-600 font-bold text-sm">
                        <span>Lihat Selengkapnya</span>
                        <span class="material-symbols-outlined group-hover/btn:translate-x-1 transition">arrow_forward</span>
                    </a>
                </div>
            </div>
            @endforeach
        
        </div>
    </section>
@endsection
@section('js')
<script>
        function shareToFacebook() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.querySelector('h1').textContent);
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank', 'noopener,noreferrer,width=600,height=400');
        }

        function shareToTwitter() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.querySelector('h1').textContent);
            window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank', 'noopener,noreferrer,width=600,height=400');
        }

        function shareToWhatsApp() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.querySelector('h1').textContent);
            window.open(`https://wa.me/?text=${title}%20${url}`, '_blank', 'noopener,noreferrer');
        }

        function shareToLinkedIn() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.querySelector('h1').textContent);
            window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank', 'noopener,noreferrer,width=600,height=400');
        }
    </script>
    <script>
    const carouselInner = document.getElementById("carousel-inner");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");
    const indicators = document.querySelectorAll("#indicators button");
    const totalSlides = indicators.length;

    let currentIndex = 0;

    function updateCarousel() {
        carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;

        indicators.forEach((dot, idx) => {
            dot.classList.toggle("bg-white", idx === currentIndex);
            dot.classList.toggle("bg-gray-400", idx !== currentIndex);
        });
    }

    prevBtn.addEventListener("click", () => {
        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
        updateCarousel();
    });

    nextBtn.addEventListener("click", () => {
        currentIndex = (currentIndex + 1) % totalSlides;
        updateCarousel();
    });

    indicators.forEach((dot, idx) => {
        dot.addEventListener("click", () => {
            currentIndex = idx;
            updateCarousel();
        });
    });
</script>

@endsection