@extends('frontend.master.master')

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

@section('content')
    <!-- 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 ?? 'Kembali' }}
            </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>

                <!-- Date Info -->
                @if(isset($data->date1))
                    <div class="layout5-detail-date">
                        <i class="bi bi-calendar3"></i>
                        <span>
                            {{ \Carbon\Carbon::parse($data->date1)->format('d F Y') }}
                            @if(isset($data->date2))
                                - {{ \Carbon\Carbon::parse($data->date2)->format('d F Y') }}
                            @endif
                        </span>
                    </div>
                @endif

                <!-- Main Image (Thumbnail) -->
                <div class="layout5-detail-image">
                    @php
                        $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
                        $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="layout-gallery-section">
                            <div class="layout-swiper-container">
                                <div class="swiper layout-swiper">
                                    <div class="swiper-wrapper">
                                        @foreach($gallery as $idx => $photo)
                                            @php
                                                $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="layout-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="layout-gallery-section">
                            <div class="layout-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
    if (document.querySelector('.layout-swiper')) {
        new Swiper('.layout-swiper', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    }
});
</script>
@endpush