@extends('layouts.web')

@section('content')
<section class="hero-news-section">
    <div class="hero-gradient-bg"></div>
    <div class="hero-gradient-overlay"></div>
    <div class="hero-dots-pattern"></div>
    <div class="hero-circles">
        <div class="hero-circle hero-circle-1"></div>
        <div class="hero-circle hero-circle-2"></div>
        <div class="hero-circle hero-circle-3"></div>
    </div>
    <div class="container text-center text-white py-3 position-relative" style="z-index:3">
        <h1 class="hero-news-title fw-bold mb-3">{{ $news->title }}</h1>
        <p class="hero-news-subtitle mb-3">
            <span class="badge bg-light text-dark me-2">{{ $news->category->name ?? 'Berita' }}</span>
            <span class="opacity-90">{{ $news->published_at ? $news->published_at->format('d F Y') : 'Draft' }}</span>
        </p>
        @php
            $heroExcerpt = \Illuminate\Support\Str::limit(strip_tags($news->content ?? ''), 180);
        @endphp
        @if(!empty($heroExcerpt))
            <p class="hero-news-excerpt m-auto">{{ $heroExcerpt }}</p>
        @endif
    </div>
 </section>
<div class="container-fluid mt-4 news-show-container">
    <style>
        .news-content iframe[src*="youtube.com"],
        .news-content iframe[src*="youtu.be"],
        .news-content iframe[src*="vimeo.com"] {
            display: block;
            width: 100%;
            aspect-ratio: 16/9;
            height: auto;
            border: 0;
        }
    </style>
    <div class="row">
        <!-- Sidebar with recent news -->
        <div class="col-md-3 col-lg-4">
            <div class="card mb-4 news-card">
                <div class="card-header">
                    <h5>Berita Terkini</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach(\App\Models\News::published()->latest()->take(5)->get() as $recentNews)
                            <li class="list-group-item {{ $recentNews->id === $news->id ? 'active' : '' }}">
                                <a href="{{ route('news.show', $recentNews) }}" 
                                   class="text-decoration-none text-dark {{ $recentNews->id === $news->id ? 'fw-semibold' : '' }}">
                                    <div class="d-flex align-items-center">
                                        <div class="recent-news-img-wrapper me-2">
                                            @if($recentNews->image)
                                                <img src="{{ asset('storage/' . $recentNews->image) }}" 
                                                     class="recent-news-thumb" 
                                                     alt="{{ $recentNews->title }}"
                                                     onerror="this.onerror=null; this.src='{{ asset('assets/images/begron/defoult.png') }}';">
                                            @else
                                                <img src="{{ asset('assets/images/begron/defoult.png') }}" 
                                                     class="recent-news-thumb" 
                                                     alt="Default Image">
                                            @endif
                                        </div>
                                        <div class="recent-news-content">
                                            <h6 class="mb-1">{{ \Illuminate\Support\Str::limit($recentNews->title, 50) }}</h6>
                                            <small class="text-muted">
                                                {{ $recentNews->published_at->format('d M Y') }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <!-- Main content -->
        <div class="col-md-9 col-lg-8 content-wrapper">
            <div class="card">
                <div class="news-image-wrapper">
                    @if($news->image)
                        <img src="{{ asset('storage/' . $news->image) }}" 
                             class="card-img-top news-image" 
                             alt="{{ $news->title }}"
                             onerror="this.onerror=null; this.src='{{ asset('assets/images/begron/defoult.png') }}';">
                    @else
                        <img src="{{ asset('assets/images/begron/defoult.png') }}" 
                             class="card-img-top news-image" 
                             alt="Default Image">
                    @endif
                </div>

                <div class="card-body news-content">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('news.index') }}" class="text-decoration-none">Berita</a></li>
                            <li class="breadcrumb-item active">{{ $news->title }}</li>
                        </ol>
                    </nav>

                    <div class="meta-info">
                        <span class="badge bg-primary">{{ $news->category->name ?? 'Uncategorized' }}</span>
                        <span class="text-muted ms-2">
                            <i class="fas fa-calendar"></i> 
                            {{ $news->published_at ? $news->published_at->format('d F Y H:i') : 'Draft' }}
                        </span>
                        <span class="text-muted ms-2">
                            <i class="fas fa-user"></i> 
                            {{ $news->author->name ?? 'Unknown' }}
                        </span>
                        <span class="text-muted ms-2">
                            <i class="fas fa-eye"></i> 
                            {{ $news->views_count ?? 0 }} views
                        </span>
                    </div>

                    <h1 class="card-title mb-4 fw-bold">{{ $news->title }}</h1>

                    <div class="card-text fs-5">
                        @php
                            $html = $news->content ?? '';
                            $normalize = function($url) {
                                $u = trim($url);
                                if (preg_match('#(youtube\.com/watch\?v=|youtu\.be/)([A-Za-z0-9_-]{6,})#', $u, $m)) {
                                    return 'https://www.youtube.com/embed/'.$m[2];
                                }
                                if (preg_match('#youtube\.com/shorts/([A-Za-z0-9_-]{6,})#', $u, $m)) {
                                    return 'https://www.youtube.com/embed/'.$m[1];
                                }
                                if (preg_match('#vimeo\.com/(\d+)#', $u, $m)) {
                                    return 'https://player.vimeo.com/video/'.$m[1];
                                }
                                return null;
                            };
                            $convert = function($input) use ($normalize) {
                                $out = preg_replace_callback('/<a[^>]+href="([^"]+)"[^>]*>[\s\S]*?<\/a>/i', function($m) use ($normalize) {
                                    $e = $normalize($m[1]);
                                    return $e ? '<iframe src="'.e($e).'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : $m[0];
                                }, $input);
                                $pattern = '~((?:https?://)?(?:www\.|m\.)?(?:youtube\.com/watch\?v=[A-Za-z0-9_-]{6,}|youtu\.be/[A-Za-z0-9_-]{6,}|youtube\.com/shorts/[A-Za-z0-9_-]{6,}|vimeo\.com/\d+))~i';
                                $out = preg_replace_callback($pattern, function($m) use ($normalize) {
                                    $e = $normalize($m[1]);
                                    return $e ? '<iframe src="'.e($e).'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : $m[1];
                                }, $out);
                                // Remove code/pre wrappers around pure video URLs
                                $out = preg_replace_callback('/<pre[^>]*>([\s\S]*?)<\/pre>/i', function($m) use ($normalize) {
                                    $text = strip_tags($m[1]);
                                    $text = trim(html_entity_decode($text));
                                    $e = $normalize($text);
                                    return $e ? '<iframe src="'.e($e).'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : $m[0];
                                }, $out);
                                $out = preg_replace_callback('/<code[^>]*>([\s\S]*?)<\/code>/i', function($m) use ($normalize) {
                                    $text = strip_tags($m[1]);
                                    $text = trim(html_entity_decode($text));
                                    $e = $normalize($text);
                                    return $e ? '<iframe src="'.e($e).'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' : $m[0];
                                }, $out);
                                return $out;
                            };
                            $render = \Mews\Purifier\Facades\Purifier::clean($convert($html), 'youtube');
                        @endphp
            {!! $render !!}
        </div>

                    @if($news->featured)
                        <div class="alert alert-info mt-4">
                            <i class="fas fa-star"></i> Berita Unggulan
                        </div>
                    @endif
                </div>

                <div class="border-t p-0">
                    <div class="px-4 py-4 border-b">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <h5 class="m-0 font-bold text-gray-800">Rating & Komentar</h5>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">{{ $totalRatings }} rating</span>
                            </div>
                        </div>
                    </div>

                    <div class="px-4 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                            <div class="col-span-1 flex items-center gap-4">
                                <div>
                                    <div class="text-4xl font-bold text-gray-900">{{ number_format($averageRating, 1) }}</div>
                                    <div class="text-gray-500 text-sm">Berdasarkan {{ $totalRatings }} rating</div>
                                </div>
                                <div class="flex text-amber-400 text-xl">
                                    @for($i=1;$i<=5;$i++)
                                        <i class="fas fa-star {{ $i <= round($averageRating) ? '' : 'text-gray-300' }}"></i>
                                    @endfor
                                </div>
                            </div>
                            <div class="col-span-2 space-y-2">
                                @for($i=5; $i>=1; $i--)
                                    @php
                                        $count = $ratingCounts[$i] ?? 0;
                                        $pct = $totalRatings > 0 ? round(($count / $totalRatings) * 100) : 0;
                                    @endphp
                                    <div class="flex items-center gap-3">
                                        <div class="w-5 text-sm text-gray-600">{{ $i }}</div>
                                        <div class="flex-1 h-2 bg-gray-200 rounded">
                                            <div class="h-2 bg-amber-400 rounded" style="width: {{ $pct }}%"></div>
                                        </div>
                                        <div class="w-6 text-right text-xs text-gray-500">{{ $count }}</div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </div>

                    <hr class="my-0">

                    <div class="px-4 py-4">
                        @auth
                            
                            <form action="{{ route('news.comments.store', $news) }}" method="POST" class="mb-4 js-reply-form">
                                @csrf
                                <div class="rounded-md border border-yellow-200 bg-yellow-50 p-4 mb-3">
                                    <div class="font-semibold text-yellow-800 mb-2">Berikan Rating</div>
                                    <div class="flex items-center gap-2" id="ratingSelector" data-current-rating="{{ $userRating ?? 0 }}" data-rate-url="{{ route('news.rate', $news) }}">
                                        @for($i=1;$i<=5;$i++)
                                            <button type="button" class="p-1" data-value="{{ $i }}">
                                                <i class="fas fa-star text-xl"></i>
                                            </button>
                                        @endfor
                                        <span id="ratingSavedMsg" class="ml-3 text-xs text-green-600 hidden">Tersimpan</span>
                                    </div>
                                    <div class="text-xs text-yellow-700 mt-1">Pilih rating untuk berita ini</div>
                                </div>
                                <div class="rounded-md border border-blue-200 bg-blue-50 p-4">
                                    <div class="font-semibold text-blue-800 mb-2">Tambah Komentar</div>
                                    <textarea name="body" class="w-full border border-blue-200 rounded-md px-3 py-2 bg-white text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="3" placeholder="Bagikan pendapat Anda tentang berita ini..." required></textarea>
                                    <div class="mt-3 flex">
                                        <button type="submit" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition">
                                            <i class="fas fa-comment-dots mr-2"></i>Kirim Komentar
                                        </button>
                                    </div>
                                </div>
                            </form>
                        @else
                            <div class="space-y-3" id="guestCommentArea">
                                <div class="rounded-md border border-yellow-200 bg-yellow-50 p-4">
                                    <div class="font-semibold text-yellow-800 mb-2">Berikan Rating</div>
                                    <div class="flex items-center gap-2 text-gray-300 guest-trigger" id="guestRatingStars">
                                        @for($i=1;$i<=5;$i++)
                                            <button type="button" class="p-1"><i class="fas fa-star text-xl"></i></button>
                                        @endfor
                                    </div>
                                </div>
                                <div class="rounded-md border border-blue-200 bg-blue-50 p-4">
                                    <div class="font-semibold text-blue-800 mb-2">Tambah Komentar</div>
                                    <textarea id="guestCommentTextarea" class="w-full border border-blue-200 rounded-md px-3 py-2 bg-white" rows="3" placeholder="Bagikan pendapat Anda..."></textarea>
                                    <div class="mt-3">
                                        <button type="button" id="guestSubmitBtn" class="inline-flex items-center h-10 px-4 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition">
                                            <i class="fas fa-paper-plane mr-2"></i>Kirim Komentar
                                        </button>
                                    </div>
                                </div>
                                <!-- Guest Identity Modal -->
                                <div id="guestIdentityModal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
                                    <div class="absolute inset-0 bg-black/40"></div>
                                    <div class="relative bg-white rounded-lg shadow-lg w-full max-w-lg mx-4">
                                        <div class="px-5 py-4 border-b flex items-center justify-between">
                                            <h6 class="m-0 font-semibold">Lengkapi Identitas</h6>
                                            <button type="button" class="p-1 text-gray-500 hover:text-gray-700" onclick="document.getElementById('guestIdentityModal').classList.add('hidden')"><i class="fas fa-times"></i></button>
                                        </div>
                                        <div class="px-5 py-5">
                                            <p class="text-sm text-gray-600 mb-4">Masuk terlebih dahulu untuk memberi rating atau menulis komentar.</p>
                                            <a href="{{ route('auth.google.login', ['redirect' => urlencode(request()->fullUrl() . '#comments')]) }}" class="w-full inline-flex items-center justify-center gap-2 h-11 px-4 rounded-md bg-white border border-gray-300 shadow-sm hover:bg-gray-50 transition text-gray-700">
                                                <span class="inline-flex items-center justify-center w-5 h-5">
                                                    <i class="fab fa-google text-red-500"></i>
                                                </span>
                                                <span class="font-medium">Lanjutkan dengan Google</span>
                                            </a>
                                            <div class="mt-4 text-center">
                                                <button type="button" class="inline-flex items-center h-9 px-3 rounded-md border text-gray-600 hover:bg-gray-50" onclick="document.getElementById('guestIdentityModal').classList.add('hidden')">Tutup</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endauth
                    </div>

                    <div class="px-4 pb-4" id="comments">
                        <h6 class="font-semibold mb-3 text-gray-800">Semua Komentar</h6>
                        <div class="space-y-3">
                        @forelse($news->comments as $comment)
                            @php $isRatingOnly = $comment->rating && empty(trim($comment->body ?? '')); @endphp
                            @if($isRatingOnly)
                                @continue
                            @endif
                            @include('partials.news_comment_item', ['comment' => $comment, 'news' => $news])
                        @empty
                            <div class="text-muted">Belum ada komentar.</div>
                        @endforelse
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <a href="{{ route('news.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                        
                        @if(auth()->user() && (auth()->user()->is_admin || auth()->id() == $news->author_id))
                            <div>
                                <a href="{{ route('news.edit', $news) }}" class="btn btn-primary">
                                    <i class="fas fa-edit me-2"></i>Edit Berita
                                </a>
                                <form action="{{ route('news.destroy', $news) }}" method="POST" class="d-inline"
                                      onsubmit="return confirm('Apakah Anda yakin ingin menghapus berita ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">
                                        <i class="fas fa-trash"></i> Hapus
                                    </button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
{{-- Semua CSS sudah dipindahkan ke central.css --}}
@endpush

@push('scripts')
<script src="{{ asset('js/news-rating.js') }}"></script>
<script src="{{ asset('js/news-guest-identity.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.js-reply-toggle').forEach(function(btn){
      btn.addEventListener('click', function(){
        var bubble = btn.closest('.rounded-2xl');
        if (!bubble) return;
        var replyArea = bubble.querySelector('.reply-area');
        if (replyArea) {
          replyArea.classList.toggle('hidden');
        }
        // Ensure replies list for this comment is shown when opening reply form
        var replies = bubble.querySelector('.replies-area');
        if (replies && replies.classList.contains('hidden')) {
          replies.classList.remove('hidden');
          // Also update the toggle button text if present
          var toggleBtn = bubble.querySelector('.js-replies-toggle');
          if (toggleBtn) {
            var closeText = toggleBtn.getAttribute('data-close-text') || 'Tutup balasan';
            toggleBtn.textContent = closeText;
          }
        }
      });
    });
    document.querySelectorAll('.js-replies-toggle').forEach(function(btn){
      btn.addEventListener('click', function(){
        var bubble = btn.closest('.rounded-2xl');
        if (!bubble) return;
        var area = bubble.querySelector('.replies-area');
        if (!area) return;
        var openText = btn.getAttribute('data-open-text') || 'Tampilkan balasan';
        var closeText = btn.getAttribute('data-close-text') || 'Tutup balasan';
        var isHidden = area.classList.contains('hidden');
        if (isHidden) {
          area.classList.remove('hidden');
          btn.textContent = closeText;
        } else {
          area.classList.add('hidden');
          btn.textContent = openText;
        }
      });
    });
    document.querySelectorAll('.js-reply-form').forEach(function(f){
      f.addEventListener('submit', function(){
        try { sessionStorage.setItem('commentScrollY', String(window.scrollY)); } catch(e) {}
      });
    });
    try {
      var y = sessionStorage.getItem('commentScrollY');
      if (y) {
        window.scrollTo({ top: parseInt(y, 10) || 0, left: 0, behavior: 'auto' });
        sessionStorage.removeItem('commentScrollY');
      }
    } catch(e) {}
  });
</script>
@endpush