@extends('layouts.app')
@section('title', $post->judul.' – SD Negeri 4 Keling')

@section('content')

{{-- Page Hero --}}
<div
    class="sd-page-hero"
    style="
        background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),    
            rgba(0,0,0,.30),
            rgba(0,0,0,.05)
        ),
        url('{{ (isset($heroImages['berita-acara']) ? $heroImages['berita-acara']->url : asset('images/buatberita.jpeg')) }}');
        background-size:cover;
        background-position:center;
    "
>
    <div class="sd-page-hero-inner">
        <p class="sd-page-breadcrumb">
            <a href="{{ route('home') }}">Beranda</a> &nbsp;/&nbsp;
            <a href="{{ route('berita-acara') }}">Berita &amp; Acara</a> &nbsp;/&nbsp;
            <span>Detail</span>
        </p>
        <h1 class="sd-page-title">{{ $post->judul }}</h1>
        <p class="sd-page-subtitle">{{ $post->tanggal->translatedFormat('d F Y') }} &nbsp;·&nbsp; {{ ucfirst($post->type) }}</p>
        <div class="sd-page-accent"></div>
    </div>
</div>

<div class="sd-page-body">
    <div class="sd-detail-layout sd-reveal" style="display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start">

        {{-- Artikel --}}
        <div>
            @if($post->gambar)
            <img src="{{ str_starts_with($post->gambar,'http') ? $post->gambar : asset($post->gambar) }}"
                 alt="{{ $post->judul }}"
                 style="width:100%;height:380px;object-fit:cover;margin-bottom:28px">
            @else
            <div style="width:100%;height:260px;display:flex;align-items:center;justify-content:center;margin-bottom:28px;background:linear-gradient(135deg,#f6f8ff 0%,#eef2ff 100%)">
                <i class="bi {{ $post->type === 'acara' ? 'bi-calendar-event' : 'bi-newspaper' }}" style="font-size:3rem;color:var(--biru);opacity:.35"></i>
            </div>
            @endif

            @if($post->video && $post->video_file)
            <div class="sd-video-embed-wrap" style="margin-bottom:28px">
                <video controls style="width:100%;max-height:480px;background:#000;display:block">
                    <source src="{{ asset($post->video_file) }}" type="video/mp4">
                    Browser Anda tidak mendukung pemutaran video.
                </video>
            </div>
            @elseif($post->video && $post->video_url)
                @php
                    // Ekstrak ID video YouTube dari berbagai format URL yang mungkin
                    preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]{6,})/', $post->video_url, $ytMatch);
                    $ytId = $ytMatch[1] ?? null;
                @endphp
                @if($ytId)
                <div class="sd-video-embed-wrap" style="margin-bottom:28px;position:relative;padding-top:56.25%">
                    <iframe src="https://www.youtube.com/embed/{{ $ytId }}"
                            style="position:absolute;inset:0;width:100%;height:100%;border:0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                </div>
                @else
                <div style="margin-bottom:20px;font-size:.85rem;color:var(--biru)">
                    <i class="bi bi-camera-video-fill"></i>
                    <a href="{{ $post->video_url }}" target="_blank" rel="noopener noreferrer" style="color:var(--biru);font-weight:600">Lihat video kegiatan ini</a>
                </div>
                @endif
            @endif

            <p style="font-size:.92rem;font-weight:300;color:var(--teks-abu);line-height:1.95;white-space:pre-line">{{ $post->konten ?: $post->deskripsi }}</p>

            <div style="margin-top:28px;padding-top:20px;border-top:2px solid var(--abu)">
                <a href="{{ route('berita-acara') }}" style="font-size:.85rem;font-weight:600;color:var(--biru)">
                    &larr; Kembali ke Berita &amp; Acara
                </a>
            </div>
        </div>

        {{-- Sidebar --}}
        <div>
            <div class="sd-inner-card" style="margin-bottom:16px">
                <h4 style="font-size:.88rem;font-weight:700;color:var(--biru);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--abu)">
                    Info Kegiatan
                </h4>
                <div style="display:flex;flex-direction:column;gap:10px">
                    <div style="display:flex;gap:10px;font-size:.83rem">
                        <i class="bi bi-calendar3" style="color:var(--biru);flex-shrink:0;margin-top:2px"></i>
                        <span style="color:var(--teks-abu)">{{ $post->tanggal->translatedFormat('d F Y') }}</span>
                    </div>
                    <div style="display:flex;gap:10px;font-size:.83rem">
                        <i class="bi bi-tag-fill" style="color:var(--biru);flex-shrink:0;margin-top:2px"></i>
                        <span style="color:var(--teks-abu)">{{ ucfirst($post->type) }}</span>
                    </div>
                    <div style="display:flex;gap:10px;font-size:.83rem">
                        <i class="bi bi-geo-alt-fill" style="color:var(--biru);flex-shrink:0;margin-top:2px"></i>
                        <span style="color:var(--teks-abu)">Halaman SD Negeri 4 Keling</span>
                    </div>
                </div>
            </div>

            <div class="sd-inner-card">
                <h4 style="font-size:.88rem;font-weight:700;color:var(--biru);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--abu)">
                    Berita Lainnya
                </h4>
                <div style="display:flex;flex-direction:column;gap:14px">
                    @forelse($lainnya as $item)
                    <a href="{{ route('berita-acara.detail', $item->id) }}"
                       style="display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid var(--abu);padding-bottom:12px">
                        <div style="flex:1">
                            <p style="font-size:.83rem;font-weight:600;color:var(--teks);line-height:1.4;margin-bottom:3px">{{ $item->judul }}</p>
                            <p style="font-size:.72rem;font-weight:300;color:var(--teks-abu)">{{ $item->tanggal->translatedFormat('d M Y') }}</p>
                        </div>
                    </a>
                    @empty
                    <p style="font-size:.8rem;color:var(--teks-abu)">Belum ada berita lain.</p>
                    @endforelse
                </div>
            </div>
        </div>

    </div>
</div>

@endsection