{{-- resources/views/public/berita/show.blade.php --}}
@extends('layouts.public')
@section('title', $berita->judul)

@section('content')

@php
    $bgImage = $berita->thumbnail ? asset('storage/berita/' . $berita->thumbnail) : '';
@endphp

<section class="position-relative d-flex align-items-center justify-content-center" style="min-height: 60vh; padding-top: 120px; padding-bottom: 150px; @if($bgImage) background: url('{{ $bgImage }}') center center / cover no-repeat; @else background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%); @endif">
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: linear-gradient(to bottom, rgba(11, 44, 94, 0.7) 0%, rgba(21, 101, 192, 0.9) 100%);"></div>

    <div class="container position-relative text-center text-white" style="z-index: 2;">
        <span class="badge px-4 py-2 rounded-pill mb-4" style="background: var(--accent-gold); color: var(--primary-dark); font-size: 1rem; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);">
            {{ $berita->kategori->nama_kategori ?? 'Umum' }}
        </span>
        
        <h1 class="fw-bold mx-auto mb-4" style="font-size: 3rem; max-width: 1000px; line-height: 1.3; text-shadow: 0 2px 10px rgba(0,0,0,0.3); font-family: 'Cairo', sans-serif;">
            {{ $berita->judul }}
        </h1>
        
        <div class="d-flex justify-content-center flex-wrap gap-4 mt-2" style="color: rgba(255,255,255,0.9); font-weight: 500; font-size: 1.05rem;">
            <span><i class="bi bi-person-circle me-2" style="color: var(--accent-gold);"></i> {{ $berita->author->name ?? 'Admin' }}</span>
            <span><i class="bi bi-calendar-event me-2" style="color: var(--accent-gold);"></i> {{ $berita->created_at->format('d F Y') }}</span>
            <span><i class="bi bi-eye me-2" style="color: var(--accent-gold);"></i> {{ $berita->views }}x Dibaca</span>
        </div>
    </div>
</section>

<section class="section-spacing section-bg-light" style="padding-top: 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="card border-0 shadow-lg rounded-4 overflow-hidden" style="margin-top: -100px; z-index: 3; position: relative;">
                    <div class="card-body p-4 p-md-5 bg-white">
                        <div class="berita-content" style="color: var(--text-dark); font-size: 1.15rem; line-height: 2; font-family: 'Poppins', sans-serif;">
                            {!! $berita->konten !!}
                        </div>

                        <hr style="margin: 4rem 0 2rem; border-color: var(--primary-emerald); opacity: 0.15;">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <a href="{{ route('public.berita') }}" class="btn-daftar text-decoration-none shadow-sm" style="padding: 0.6rem 1.5rem; font-size: 1rem;">
                                <i class="bi bi-arrow-left me-2"></i> Daftar Artikel
                            </a>
                            
                            <div class="d-flex align-items-center gap-3">
                                <span style="color: var(--text-light); font-weight: 600; font-size: 0.95rem;">Bagikan:</span>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($berita->judul . ' ' . url()->current()) }}" target="_blank" class="d-flex align-items-center justify-content-center text-white text-decoration-none rounded-circle shadow-sm hover-lift" style="width: 40px; height: 40px; background: #25D366; transition: transform 0.3s;">
                                    <i class="bi bi-whatsapp"></i>
                                </a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="d-flex align-items-center justify-content-center text-white text-decoration-none rounded-circle shadow-sm hover-lift" style="width: 40px; height: 40px; background: #1877F2; transition: transform 0.3s;">
                                    <i class="bi bi-facebook"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?text={{ urlencode($berita->judul) }}&url={{ urlencode(url()->current()) }}" target="_blank" class="d-flex align-items-center justify-content-center text-white text-decoration-none rounded-circle shadow-sm hover-lift" style="width: 40px; height: 40px; background: #1DA1F2; transition: transform 0.3s;">
                                    <i class="bi bi-twitter"></i>
                                </a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .hover-lift:hover { transform: translateY(-4px); }
    
    .berita-content img { 
        max-width: 100%; 
        height: auto; 
        border-radius: 12px; 
        margin: 1.5rem 0; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    }
    .berita-content p { 
        margin-bottom: 1.5rem; 
        text-align: justify;
    }
    .berita-content h2, 
    .berita-content h3, 
    .berita-content h4 { 
        margin-top: 2.5rem; 
        margin-bottom: 1rem; 
        font-weight: 700; 
        font-family: 'Cairo', sans-serif;
        color: var(--primary-dark); 
    }
    .berita-content blockquote { 
        border-left: 5px solid var(--primary-emerald); 
        padding: 1.2rem 1.5rem; 
        margin: 2rem 0;
        font-style: italic; 
        color: var(--text-dark); 
        background: rgba(21, 101, 192, 0.05); 
        border-radius: 0 12px 12px 0; 
        font-size: 1.2rem;
    }
    .berita-content ul, 
    .berita-content ol { 
        margin-bottom: 1.5rem; 
        padding-left: 2rem; 
    }
    .berita-content li { 
        margin-bottom: 0.5rem; 
    }
    
    @media (max-width: 768px) {
        .berita-content { font-size: 1.05rem; }
    }
</style>
@endsection