@extends('frontend.master.master')

@push('styles')
<style>
    /* Gallery Slider - Fixed Structure */
    .agenda-gallery-section {
        margin-top: 2rem;
        padding: 1rem 0;
    }
    .agenda-swiper-container {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #f5f5f5;
    }
    .agenda-swiper {
        width: 100%;
    }
    .agenda-swiper .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
    }
    .agenda-slide-img {
        width: 100%;
        max-height: 400px;
        object-fit: contain;
        display: block;
    }
    /* Navigation arrows - full height gray bars with chevron icons */
    .agenda-swiper-container .swiper-button-prev,
    .agenda-swiper-container .swiper-button-next {
        background: rgba(128,128,128,0.5);
        width: 50px;
        height: 100%;
        top: 0;
        margin-top: 0;
        border-radius: 0;
        transition: background 0.3s ease;
    }
    .agenda-swiper-container .swiper-button-prev:hover,
    .agenda-swiper-container .swiper-button-next:hover {
        background: rgba(128,128,128,0.7);
    }
    .agenda-swiper-container .swiper-button-prev {
        left: 0;
    }
    .agenda-swiper-container .swiper-button-next {
        right: 0;
    }
    .agenda-swiper-container .swiper-button-prev:after,
    .agenda-swiper-container .swiper-button-next:after {
        font-family: 'bootstrap-icons';
        font-size: 32px;
        color: #fff;
        font-weight: bold;
    }
    .agenda-swiper-container .swiper-button-prev:after {
        content: '\F284';
    }
    .agenda-swiper-container .swiper-button-next:after {
        content: '\F285';
    }
    /* Pagination dots */
    .agenda-swiper-container .swiper-pagination {
        position: relative;
        bottom: auto;
        margin-top: 15px;
        text-align: center;
    }
    .agenda-swiper-container .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #ccc;
        opacity: 1;
        margin: 0 4px;
    }
    .agenda-swiper-container .swiper-pagination-bullet-active {
        background: #186D85;
    }
</style>
@endpush

@section('content')
    <!-- Agenda Detail Header with Pattern Background -->
    <section class="layout5-detail-header">
        <div class="container">
            <a href="{{ url('/menu/' . $dmenu) }}" class="layout5-breadcrumb">
                <i class="bi bi-chevron-left"></i> {{ $nama_menu ?? 'Agenda' }}
            </a>
        </div>
    </section>

    <!-- Content Section -->
    <section class="layout5-detail-content">
        <div class="container">
            <div class="layout5-detail-wrapper">
                <!-- Title -->
                <h1 class="layout5-detail-title">{{ $data->title ?? 'Tidak Ada Konten' }}</h1>

                <!-- Main Image (Thumbnail) -->
                <div class="layout5-detail-image">
                    @php
                        // Use web-optimized version if exists, fallback to original
                        $picturePath = $data->picture ?? 'noimage.png';
                        $webOptimizedPath = public_path('storage/' . $picturePath . '_web.jpg');
                        $imageSrc = file_exists($webOptimizedPath) 
                            ? asset('storage/' . $picturePath . '_web.jpg') 
                            : asset('storage/' . $picturePath);
                    @endphp
                    <img src="{{ $imageSrc }}" 
                         alt="{{ $data->title ?? 'Tidak Ada Konten' }}" 
                         class="img-fluid">
                </div>

                <!-- Description -->
                <div class="layout5-detail-description rich-editor-content">
                    {!! !empty($data->description) ? $data->description : '<p>Tidak Ada Konten</p>' !!}
                
                    {{-- Gallery Slider - Multi Foto Section --}}
                @php
                    // Support both field names: multifoto and gallery_photos
                    $galleryField = $data->multifoto ?? $data->gallery_photos ?? null;
                    $gallery = [];
                    if ($galleryField) {
                        if (is_string($galleryField)) {
                            $decoded = json_decode($galleryField, true);
                            $gallery = is_array($decoded) ? $decoded : [];
                        } elseif (is_array($galleryField)) {
                            $gallery = $galleryField;
                        }
                    }
                    $hasGallery = !empty($gallery) && count($gallery) > 0;
                @endphp
                
                @if($hasGallery)
                    <div class="agenda-gallery-section">
                        <div class="agenda-swiper-container">
                            <div class="swiper agenda-swiper">
                                <div class="swiper-wrapper">
                                    @foreach($gallery as $idx => $photo)
                                        @php
                                            // Use web-optimized version if exists, fallback to original
                                            $webOptimizedPath = public_path('storage/' . $photo . '_web.jpg');
                                            $galleryImgSrc = file_exists($webOptimizedPath) 
                                                ? asset('storage/' . $photo . '_web.jpg') 
                                                : asset('storage/' . $photo);
                                        @endphp
                                        <div class="swiper-slide">
                                            <img src="{{ $galleryImgSrc }}" 
                                                 class="agenda-slide-img" 
                                                 alt="Gallery {{ $idx + 1 }}">
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                @endif

                {{-- Video Section --}}
                @php
                    $videoUrl = $data->video_url ?? '';
                    $isEmbed = $videoUrl && (strpos($videoUrl, 'youtube.com') !== false || strpos($videoUrl, 'youtu.be') !== false || strpos($videoUrl, 'vimeo.com') !== false);
                @endphp
                @if($videoUrl)
                    <div class="agenda-gallery-section">
                        <div class="agenda-swiper-container">
                            <div class="ratio ratio-16x9">
                                @if($isEmbed)
                                    <iframe src="{{ $videoUrl }}" frameborder="0" allowfullscreen></iframe>
                                @else
                                    <video src="{{ asset('storage/' . $videoUrl) }}" controls style="width: 100%; height: 100%;"></video>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
                </div>

                <!-- Navigation -->
                <div class="layout5-navigation mt-5">
                    @if(isset($prevPost))
                        <a href="{{ route('layout.detail', ['url' => $url, 'slug' => \Illuminate\Support\Str::slug($prevPost->title ?? 'post')]) }}?id_data={{ urlencode(Crypt::encrypt($prevPost->id)) }}" class="layout5-nav-link prev">
                            <i class="bi bi-chevron-left"></i> Post sebelumnya
                        </a>
                    @else
                        <span class="layout5-nav-link prev disabled">
                            <i class="bi bi-chevron-left"></i> Post sebelumnya
                        </span>
                    @endif
                    
                    @if(isset($nextPost))
                        <a href="{{ route('layout.detail', ['url' => $url, 'slug' => \Illuminate\Support\Str::slug($nextPost->title ?? 'post')]) }}?id_data={{ urlencode(Crypt::encrypt($nextPost->id)) }}" class="layout5-nav-link next">
                            Post selanjutnya <i class="bi bi-chevron-right"></i>
                        </a>
                    @else
                        <span class="layout5-nav-link next disabled">
                            Post selanjutnya <i class="bi bi-chevron-right"></i>
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Swiper for gallery
    var agendaSwiper = document.querySelector('.agenda-swiper');
    if (agendaSwiper) {
        new Swiper('.agenda-swiper', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            grabCursor: true,
            navigation: {
                nextEl: '.agenda-swiper-container .swiper-button-next',
                prevEl: '.agenda-swiper-container .swiper-button-prev',
            },
            pagination: {
                el: '.agenda-swiper-container .swiper-pagination',
                clickable: true,
            },
        });
    }
});
</script>
@endpush