@extends('layouts.app')

@section('title')
    Detail Berita | PRAU
@endsection

@section('content')
    <main>
        <section class="section-details-header"></section>
        <section class="section-details-content">
            <div class="container">
                <div class="row">
                    <div class="col p-0 pl-3 pl-lg-0 mt-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mt-5">
                                <li class="breadcrumb-item" aria-current="page">
                                    <a href="{{ route('home') }}">
                                        Home
                                    </a>
                                </li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('news') }}">Berita</a>
                                </li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    Detail Berita
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <!-- Detail Berita -->
                <div class="row">
                    <div class="col-lg-8 pl-lg-0">
                        <div class="card card-details mb-3">
                            <h1>{{ $item->title }}</h1>
                            <p>
                                <span class="source fw-bold">{{ $item->sumber }}</span> •
                                @if ($item->created_at->diffInHours() >= 72)
                                    {{ \Carbon\Carbon::parse($item->created_at)->locale('id')->isoFormat('D MMMM YYYY') }}
                                @else
                                    {{ \Carbon\Carbon::parse($item->created_at)->locale('id')->diffForHumans() }}
                                @endif
                            </p>
                            <div class="gallery">
                                {{-- @if ($item->news_galleries->count())
                                    <div class="xzoom-container">
                                        <img class="xzoom" id="xzoom-default"
                                            src="{{ asset('storage/' . $item->news_galleries->first()->image) }}"
                                            xoriginal="{{ asset('storage/' . $item->news_galleries->first()->image) }}" />
                                        <div class="xzoom-thumbs">
                                            @foreach ($item->news_galleries as $gallery)
                                                <img class="xzoom-gallery" width="128"
                                                    src="{{ asset('storage/' . $gallery->image) }}"
                                                    xpreview="{{ asset('storage/' . $gallery->image) }}" />
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif --}}

                                @if ($item->news_galleries->count())
                                    <div class="xzoom-container">
                                        <img class="xzoom" id="xzoom-default"
                                            src="{{ asset('storage/' . $item->news_galleries->first()->image) }}"
                                            xoriginal="{{ asset('storage/' . $item->news_galleries->first()->image) }}" />
                                        <div class="xzoom-thumbs">
                                            @foreach ($item->news_galleries as $gallery)
                                                <a href="{{ asset('storage/' . $gallery->image) }}">
                                                    <img class="xzoom-gallery" width="128"
                                                        src="{{ asset('storage/' . $gallery->image) }}"
                                                        xpreview="{{ asset('storage/' . $gallery->image) }}" />
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                @php
                                    use League\CommonMark\CommonMarkConverter;

                                    $converter = new CommonMarkConverter([
                                        'html_input' => 'strip', // supaya aman dari HTML
                                        'allow_unsafe_links' => false,
                                    ]);

                                    // Potong per 350 karakter dengan \n, lalu pecah jadi array
                                    $wrappedParagraphs = explode("\n", wordwrap($item->about, 350, "\n"));
                                @endphp

                                @foreach ($wrappedParagraphs as $paragraph)
                                    @php
                                        $html = $converter->convertToHtml($paragraph);
                                    @endphp
                                    <div style="text-align: justify">{!! $html !!}</div>
                                @endforeach

                            </div>
                        </div>
                    </div>

                    {{-- Related News --}}
                    <div class="col-lg-4">
                        <div class="card card-details sticky-top related-news-sticky">
                            <h5 class="mb-4">Berita Terkait</h5>
                            @foreach ($relatedNews as $news)
                                <div class="related-news mb-3">
                                    <a href="{{ route('detailnews', $news->slug) }}" class="text-decoration-none">
                                        @if ($news->news_galleries->first())
                                            <img src="{{ asset('storage/' . $news->news_galleries->first()->image) }}"
                                                class="img-fluid rounded mb-2"
                                                style="height: 120px; width: 100%; object-fit: cover;">
                                        @endif
                                        <h6 class="link-news">{{ Str::limit($news->title, 60, '...') }}</h6>
                                        <small class="text-muted">
                                            {{ $news->created_at->diffForHumans() }}
                                        </small>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    {{-- Related News --}}
                </div>
                <!-- End Detail Berita -->
            </div>
        </section>
    </main>
@endsection

@push('addon-script')
    <script>
        function setNavbarHeight() {
            const navbar = document.getElementById("mainNavbar");
            if (navbar) {
                const height = navbar.offsetHeight;
                document.documentElement.style.setProperty('--navbar-height', `${height}px`);
            }
        }

        document.addEventListener("DOMContentLoaded", setNavbarHeight);
        window.addEventListener("resize", setNavbarHeight);
    </script>
@endpush

@push('prepend-style')
    <link rel="stylesheet" href="{{ url('frontend/libraries/xzoom/dist/xzoom.css') }}" />
@endpush

@push('addon-script')
    <script src="{{ url('frontend/libraries/xzoom/dist/xzoom.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.xzoom, .xzoom-gallery').xzoom({
                zoomWidth: 500,
                title: false,
                tint: '#333',
                Xoffset: 15
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.dropdown-toggle').dropdown();
        });
    </script>
@endpush