@extends('layout.guest')

@section('content')
    {{-- Latest news --}}
    <div class="my-hijau-content-header">
        <div class="my-hijau-page-title">
            <div class="container">
                <h2 class="text-right">Latest News</h2>
            </div>
        </div>
        <div class="my-hijau-featured-image"
            style="background-image: url({{ image('aboutus/insideslider-about-1200x149.jpg') }})">
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="latest-news py-10">
        <div class="row mx-10">
            @foreach ($latestNews as $item)
                <div class="col-md-4">
                    <div class="news-container">
                        <img src="{{ asset('storage/' . $item->image) }}" class="img-fluid rounded" alt="{{ $item->title }}">
                        <div class="news-content">
                            <div class="news-date py-2">
                                <span class="text-muted fw-semibold">{{ $item->created_at->format('M d, Y') ?? '-' }}</span>
                            </div>
                            <p class="news-title">
                                {{ $item->title }}
                            </p>
                            <p class="news-content">
                                @php
                                    $content = strip_tags($item->content);
                                @endphp
                                @if (strlen($content) > 100)
                                    {{ substr($content, 0, 100) . '...' }}
                                    <!-- <a href="javascript:;" onclick="readMore(this)"><span class="ml-2 text-dark">[Read More]</span></a> -->
                                    <a href="{{ route('latest-news.show', $item->id) }}"><span class="ml-2 text-dark">[Read More]</span></a>
                                @else
                                    {{ $content }}
                                @endif
                            </p>
                            {{-- 
                                @if (strlen($item->content) > 100)
                                    <p class="news-content-more" style="display: none;">
                                        {!! nl2br(e($item->content)) !!}
                                        <a href="javascript:;" onclick="readLess(this)"><span class="ml-2 text-dark">[Read Less]</span></a>
                                        @if ($item->url)
                                            <a href="{{ $item->url }}" target="_blank"><span class="ml-2 text-dark">Link</span></a>
                                        @endif
                                    </p>
                                @endif
                                 --}}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function readMore(element) {
            $(element).parent().parent().find('.news-content-more').show();
            $(element).parent().parent().find('.news-content').hide();
        }

        function readLess(element) {
            $(element).parent().parent().find('.news-content-more').hide();
            $(element).parent().parent().find('.news-content').show();
        }
    </script>
@endsection