@extends('frontend.master.master')

@push('styles')
<style>

    .layout6-detail-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. Style Wrapper Utama agar jadi satu kesatuan (Hero + Deskripsi dalam satu kotak) */
    .layout6-detail-wrapper {
        background: #fff;
        border-radius: 12px;
        overflow: hidden; /* Agar sudut gambar mengikuti radius */
        box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Opsional: bayangan halus */
    }

    /* 3. Hero Wrapper (Gambar Utama) */
    .brtatl-hero-wrapper {
        position: relative;
        height: 400px;
        overflow: hidden;
        /* HAPUS margin-bottom: 2rem yang ada di kode asli Anda agar nempel dengan deskripsi */
        margin-bottom: 0 !important; 
        border-radius: 12px 12px 0 0; /* Radius hanya di atas */
    }

    .brtatl-hero-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .brtatl-hero-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
    }

    /* 4. Overlay Title (Judul di atas gambar bagian bawah) */
    .brtatl-hero-title-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto; /* Ubah height fix 30% jadi auto agar fleksibel mengikuti teks */
        min-height: 80px;
        background: rgba(24, 109, 133, 0.95); /* Warna background judul */
        z-index: 2;
        display: flex;
        align-items: center;
        padding: 20px 30px; /* Tambah padding agar rapi */
    }

    .brtatl-hero-title-content {
        width: 100%;
    }
    .brtatl-hero-title {
        color: #fff;
        font-size: 1.35rem;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.3;
    }
    .brtatl-hero-date {
        color: rgba(255,255,255,0.9);
        font-size: 0.85rem;
    }
    .brtatl-hero-date i {
        margin-right: 6px;
    }

    /* 5. Deskripsi (Content Body) */
    .layout6-detail-body {
        padding: 2rem; /* Beri jarak teks dari pinggir kotak */
        background: #fff;
    }

    /* --- BAWAAN KODE ANDA (TIDAK DIUBAH) --- */
    
    /* Gallery Slider */
    .brtatl-gallery-section {
        margin-top: 2rem;
        padding: 1rem 0;
    }
    .brtatl-swiper-container {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #f5f5f5;
    }
    .brtatl-swiper {
        width: 100%;
    }
    .brtatl-swiper .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f5f5f5;
    }
    .brtatl-slide-img {
        width: 100%;
        max-height: 400px;
        object-fit: contain;
        display: block;
    }
    /* Navigation arrows */
    .brtatl-swiper-container .swiper-button-prev,
    .brtatl-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;
    }
    .brtatl-swiper-container .swiper-button-prev:hover,
    .brtatl-swiper-container .swiper-button-next:hover {
        background: rgba(128,128,128,0.7);
    }
    .brtatl-swiper-container .swiper-button-prev { left: 0; }
    .brtatl-swiper-container .swiper-button-next { right: 0; }
    .brtatl-swiper-container .swiper-button-prev:after,
    .brtatl-swiper-container .swiper-button-next:after {
        font-family: 'bootstrap-icons';
        font-size: 32px;
        color: #fff;
        font-weight: bold;
    }
    .brtatl-swiper-container .swiper-button-prev:after { content: '\F284'; }
    .brtatl-swiper-container .swiper-button-next:after { content: '\F285'; }
    /* Pagination dots */
    .brtatl-swiper-container .swiper-pagination {
        position: relative;
        bottom: auto;
        margin-top: 15px;
        text-align: center;
    }
    .brtatl-swiper-container .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #ccc;
        opacity: 1;
        margin: 0 4px;
    }
    .brtatl-swiper-container .swiper-pagination-bullet-active {
        background: #186D85;
    }
    
    /* Navigation Prev/Next Post */
    .layout6-navigation {
        padding: 0 2rem 2rem 2rem; /* Masukkan navigasi ke dalam padding card */
        display: flex;
        justify-content: space-between;
    }
    .layout6-nav-link {
        color: #333;
        text-decoration: none;
        font-weight: 500;
    }
    .layout6-nav-link:hover {
        color: #186D85;
    }
    .layout6-nav-link.disabled {
        color: #ccc;
        pointer-events: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .brtatl-hero-wrapper {
            height: 280px;
        }
        .brtatl-hero-title {
            font-size: 1.1rem;
        }
        .brtatl-hero-title-overlay {
            padding: 15px 20px;
        }
        .brtatl-slide-img {
            max-height: 300px;
        }
    }
</style>
@endpush

@section('content')
    <!-- Header with Breadcrumb -->
    <section class="brtatl-detail-header layout6-detail-header">
        <div class="container" style="margin-top:20px">
            <a href="{{ url('/menu/' . $dmenu) }}" class="layout6-breadcrumb">
                <i class="bi bi-chevron-left"></i> {{ $nama_menu ?? 'Berita dan Artikel' }}
            </a>
        </div>
    </section>

    <section class="layout6-detail-content">
        <div class="container">
            <div class="layout6-detail-wrapper">
                <div class="brtatl-hero-wrapper">
                    <div class="brtatl-hero-background">
                        @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="brtatl-hero-bg-img">
                    </div>
                    <div class="brtatl-hero-title-overlay">
                        <div class="brtatl-hero-title-content">
                            <h1 class="brtatl-hero-title">{{ $data->title ?? 'Tidak Ada Konten' }}</h1>
                            <div class="brtatl-hero-date">
                                <i class="bi bi-calendar3"></i>
                                <span>{{ isset($data->scheduled_at) ? \Carbon\Carbon::parse($data->scheduled_at)->format('d F Y') : (isset($data->created_at) ? \Carbon\Carbon::parse($data->created_at)->format('d F Y') : 'Tanggal post') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layout6-detail-body">
                    <div class="layout6-detail-description rich-editor-content">
                        {!! !empty($data->description) ? $data->description : '<p>Tidak Ada Konten</p>' !!}
                    </div>

                    {{-- Gallery Slider --}}
                    @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="brtatl-gallery-section">
                            <div class="brtatl-swiper-container">
                                <div class="swiper brtatl-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="brtatl-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="brtatl-gallery-section">
                            <div class="brtatl-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>

                <div class="layout6-navigation">
                    @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="layout6-nav-link prev">
                            <i class="bi bi-chevron-left"></i> Post sebelumnya
                        </a>
                    @else
                        <span class="layout6-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="layout6-nav-link next">
                            Post selanjutnya <i class="bi bi-chevron-right"></i>
                        </a>
                    @else
                        <span class="layout6-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 brtatSwiper = document.querySelector('.brtatl-swiper');
    if (brtatSwiper) {
        new Swiper('.brtatl-swiper', {
            slidesPerView: 1,
            spaceBetween: 0,
            loop: true,
            grabCursor: true,
            navigation: {
                nextEl: '.brtatl-swiper-container .swiper-button-next',
                prevEl: '.brtatl-swiper-container .swiper-button-prev',
            },
            pagination: {
                el: '.brtatl-swiper-container .swiper-pagination',
                clickable: true,
            },
        });
    }
});
</script>
@endpush