@section('title', $berita->judul)

@extends('Frontend.Layouts.app2')
@section('content')
    {{-- Header Section --}}
    <x-header-section-page title="Detail Berita" breadcrumb-home="Home" breadcrumb-current="Berita" />

    <div class="py-12 bg-gray-50">
        <div class="container mx-auto px-4 lg:px-24">
            
            {{-- Main Article Card --}}
            <article class="bg-white rounded-2xl overflow-hidden shadow-xl border border-gray-200" data-aos="fade-up">
                
                {{-- Meta & Judul Berita --}}
                <div class="p-8 md:p-12 pb-4">
                    <div class="flex items-center gap-3 mb-4" data-aos="fade-up" data-aos-delay="100">
                        <span class="bg-green-600 text-white text-[11px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Berita</span>
                        <span class="text-gray-500 text-sm flex items-center gap-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                            {{ \Carbon\Carbon::parse($berita->tanggal_berita)->translatedFormat('d F Y') }}
                        </span>
                    </div>
                    
                    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-0 font-poppins" data-aos="fade-up" data-aos-delay="200">
                        {{ $berita->judul }}
                    </h1>
                </div>

                {{-- Thumbnail Berita (Foto Utama) --}}
                @if($berita->file_foto)
                <div class="flex justify-center px-8 md:px-12 mt-8 mb-4" data-aos="zoom-in" data-aos-delay="300">
                    <div class="relative group overflow-hidden rounded-xl shadow-md border border-gray-200 w-full max-w-sm bg-gray-100">
                        <img src="{{ asset('storage/berita/' . $berita->file_foto) }}"
                             class="w-full h-auto max-h-[160px] object-cover object-center transition-transform duration-500 group-hover:scale-105" 
                             alt="{{ $berita->judul }}">
                    </div>
                </div>
                @endif

                {{-- Isi Konten Berita --}}
                <div class="p-8 md:p-12 md:px-16 pt-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed berita-content">
                        <?php
                            $content = $berita->content;
                            $baseUrl = url('/');
                            
                            $content = preg_replace('/src="\/(storage\/berita\/content\/[^"]+)"/', 'src="'.$baseUrl.'/$1"', $content);
                            $content = preg_replace('/src="(?!https?:\/\/)(?!data:)(storage\/berita\/content\/[^"]+)"/', 'src="'.$baseUrl.'/$1"', $content);
                            $content = preg_replace('/src="(\.\.\/)*storage\/berita\/content\/([^"]+)"/', 'src="'.$baseUrl.'/storage/berita/content/$2"', $content);
                            $content = preg_replace('/src="\/public\/storage\/berita\/content\/([^"]+)"/', 'src="'.$baseUrl.'/storage/berita/content/$1"', $content);
                            
                            echo $content;
                        ?>
                    </div>

                    {{-- CTA Section --}}
                    <div class="flex items-center flex-col pt-10 mt-8 border-t border-gray-200 clear-both">
                        <div class="w-16 h-1 bg-green-600 rounded-full mb-6"></div>
                        <h2 class="text-center font-poppins text-2xl md:text-3xl font-bold text-green-700 mb-3">
                            Segera Daftar!
                        </h2>
                        <p class="text-center mb-6 text-sm md:text-base max-w-2xl text-gray-600">
                            Wujudkan impian akademik Anda di {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }} dengan program studi unggulan, dosen ahli, dan fasilitas lengkap yang mendukung kesuksesan masa depan.
                        </p>
                        <div class="transform transition-transform hover:scale-105 active:scale-95 duration-300">
                            <x-button url="/pendaftaran">DAFTAR SEKARANG</x-button>
                        </div>
                    </div>
                </div>

                {{-- Footer Share & Back --}}
                <div class="bg-gray-50 p-5 border-t border-gray-200 flex flex-wrap justify-between items-center gap-3 md:px-12 px-8">
                    <div class="flex items-center gap-3">
                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Kembali:</span>
                        <a href="/" class="text-green-600 font-medium text-sm hover:underline transition-all flex items-center gap-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="15 18 9 12 15 6"></polyline>
                            </svg>
                            List Berita
                        </a>
                    </div>
                    <div class="flex gap-4 items-center">
                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider hidden md:inline">Bagikan:</span>
                        <div class="flex gap-3">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" target="_blank" class="text-gray-500 hover:text-blue-600 transition-colors">
                                <i class="fab fa-facebook-f text-lg"></i>
                            </a>
                            <a href="https://api.whatsapp.com/send?text={{ url()->current() }}" target="_blank" class="text-gray-500 hover:text-green-500 transition-colors">
                                <i class="fab fa-whatsapp text-lg"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>

    <style>
        .berita-content {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .berita-content p {
            margin-bottom: 1rem;
            line-height: 1.7;
            font-size: 1rem;
            color: #374151;
        }
        
        /* Clear float untuk CTA */
        .clear-both {
            clear: both;
        }
        
        /* ========== GAMBAR DI KIRI DENGAN JARAK RAPAT ========== */
        .berita-content img {
            float: left;
            max-width: 180px;
            width: 100%;
            height: auto;
            margin-right: 15px;
            margin-top: 1px;
            margin-bottom: 1px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* Untuk teks yang mengelilingi gambar */
        .berita-content p {
            overflow: hidden;
        }
        
        /* Responsive mobile */
        @media (max-width: 768px) {
            .berita-content img {
                float: none;
                max-width: 140px;
                display: block;
                margin: 0 auto 10px auto;
            }
        }
        
        .berita-content h1, 
        .berita-content h2, 
        .berita-content h3, 
        .berita-content h4 {
            font-weight: 700;
            margin-top: 1.25rem;
            margin-bottom: 0.5rem;
            color: #1f2937;
        }
        
        .berita-content h1 { font-size: 1.75rem; }
        .berita-content h2 { font-size: 1.4rem; }
        .berita-content h3 { font-size: 1.2rem; }
        .berita-content h4 { font-size: 1.1rem; }
        
        .berita-content ul, 
        .berita-content ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .berita-content li {
            margin-bottom: 0.2rem;
        }
        
        .berita-content strong {
            font-weight: 700;
            color: #1f2937;
        }
        
        .berita-content a {
            color: #16a34a;
            text-decoration: underline;
        }
        
        .berita-content a:hover {
            color: #15803d;
        }
        
        .berita-content blockquote {
            border-left: 4px solid #16a34a;
            padding-left: 1rem;
            margin: 0.75rem 0;
            font-style: italic;
            color: #4b5563;
            background-color: #f9fafb;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }
        
        .berita-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1rem;
            overflow-x: auto;
            display: block;
        }
        
        .berita-content th, 
        .berita-content td {
            border: 1px solid #e5e7eb;
            padding: 0.5rem;
            text-align: left;
        }
        
        .berita-content th {
            background-color: #f3f4f6;
            font-weight: 600;
        }
        
        .berita-content pre {
            background-color: #1f2937;
            color: #f3f4f6;
            padding: 0.75rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            font-size: 0.85rem;
            margin-bottom: 1rem;
        }
        
        .berita-content code {
            background-color: #f3f4f6;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.85rem;
            font-family: monospace;
        }
        
        .berita-content pre code {
            background-color: transparent;
            padding: 0;
        }
        
        .berita-content hr {
            margin: 1.5rem 0;
            border: none;
            border-top: 1px solid #e5e7eb;
        }
        
        /* Hover effect */
        .berita-content img {
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .berita-content img:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var images = document.querySelectorAll('.berita-content img');
            images.forEach(function(img) {
                img.addEventListener('click', function() {
                    var modal = document.createElement('div');
                    modal.style.position = 'fixed';
                    modal.style.top = '0';
                    modal.style.left = '0';
                    modal.style.width = '100%';
                    modal.style.height = '100%';
                    modal.style.backgroundColor = 'rgba(0,0,0,0.9)';
                    modal.style.zIndex = '9999';
                    modal.style.display = 'flex';
                    modal.style.alignItems = 'center';
                    modal.style.justifyContent = 'center';
                    modal.style.cursor = 'pointer';
                    
                    var modalImg = document.createElement('img');
                    modalImg.src = this.src;
                    modalImg.style.maxWidth = '90%';
                    modalImg.style.maxHeight = '90%';
                    modalImg.style.borderRadius = '8px';
                    modalImg.style.boxShadow = '0 0 20px rgba(0,0,0,0.5)';
                    
                    modal.appendChild(modalImg);
                    document.body.appendChild(modal);
                    
                    modal.addEventListener('click', function() {
                        modal.remove();
                    });
                    
                    document.addEventListener('keydown', function(e) {
                        if (e.key === 'Escape') {
                            if (modal) modal.remove();
                        }
                    });
                });
            });
        });
    </script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection