@extends('front.layouts.newsLayout')

@section('content')
    <main class="main">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="inner-news-view">
                        <div class="inner-news-card col-12">
                            <div class="news-info">
                                <a href="#" class="img-container">
                                    <img src="{{ optional($newsItem)->image ?: asset('end-user/bkamthis.png') }}"
                                        alt="{{ optional($newsItem)->title ?: 'News Image' }}" loading="lazy">
                                </a>
                                <div class="controls">
                                    <button type="button">

                                        <a href="#" @guest onclick="swal('Please login first')" @endguest
                                            class="add-new-to-favorites" data-new-id="{{ optional($newsItem)->id }}">
                                            <i class="fa-regular fa-heart"></i>
                                        </a>



                                        <span>
                                            {{ $newsItem->favorites->count() }}
                                        </span>
                                    </button>
                                    <a href="##comment">
                                        <i class="fa-regular fa-message"></i>
                                        <span>
                                            {{ $newsItem->comments->count() }}
                                        </span>
                                    </a>
                                    <button type="button"
                                        onclick="share_news('{{ route('site.new.show', ['id' => $newsItem->id, 'title' => str_replace(' ', '-', $newsItem->title)]) }}')">
                                        <i class="fa-solid fa-share-nodes"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="news-details">
                                <a href="#" class="title">
                                    {{ $newsItem->title }}
                                </a>
                                <p class="description">
                                    {{ $newsItem->title }}
                                    {{ $newsItem->des }}
                                </p>

                                <div>
                                    <div class="magazine">
                                        <span class="icon">
                                            <i class="fa-solid fa-bolt"></i>
                                        </span>
                                        <a href="#" class="m_src">
                                            {{ $newsItem->domain }}
                                        </a>
                                        <div class="writer">
                                            {{ $newsItem->publisher ?? 'bkamthis' }}
                                        </div>
                                        @php
                                            $date = $newsItem['date'];

                                            if (is_numeric($date)) {
                                                $parsedDate = \Carbon\Carbon::createFromTimestamp($date);
                                            } else {
                                                $parsedDate = \Carbon\Carbon::parse($date);
                                            }
                                        @endphp
                                        <p class="date">
                                            {{ $parsedDate->diffForHumans() }}
                                        </p>
                                    </div>

                                    <a href="{{ $newsItem->link }}" class="read-more" target="_blank">
                                        Read more on {{ $newsItem->domain }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="news-comments" id="comments">
                        <div class="add-comment">
                            <form action="{{ route('site.add.news.comment') }}" method="post">
                                @csrf
                                <input type="hidden" name="news_id" value="{{ optional($newsItem)->id }}" />

                                <textarea type="text" name="comment" id="comment" placeholder="Add a Comment"></textarea>
                                <div class="add">
                                    @if (auth('end-user')->check())
                                        <button type="submit" class="btn theme-btn">
                                            Post
                                        </button>
                                    @else
                                        <a href="{{ route('site.login') }}" class="btn theme-btn">
                                            Post
                                        </a>
                                    @endif
                                </div>
                            </form>
                        </div>
                        <div class="comments-viewer">
                            @foreach ($newsItem->comments->reverse() as $comment)
                                <div class="news-comment">
                                    <div class="user-img">
                                        <img src="{{ optional($comment->user)->image ?: asset('end-user/bkamthis.png') }}"
                                            loading="lazy">

                                        {{-- <span>A</span> --}}
                                    </div>
                                    <div class="user-info">
                                        <div class="head">
                                            <p class="username">
                                                <span>
                                                    {{ $comment->user->name }}
                                                </span>
                                                <span>
                                                    {{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}
                                                </span>
                                            </p>

                                        </div>
                                        <div class="comment">
                                            {{ $comment->comment }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <aside class="col-lg-4 pt-5">
                    @foreach ($latestNews as $new)
                        <a href="{{ route('site.new.show', ['id' => $new->id, 'title' => str_replace(' ', '-', $new->title)]) }}"
                            class="side-news">
                            <img src="{{ optional($new)->image ?: asset('end-user/bkamthis.png') }}"
                                alt="{{ optional($new)->title ?: 'News Image' }}" loading="lazy">

                            <div class="details">
                                <p class="title">
                                    {{ $new->title }}
                                </p>
                                <p style="color: #ff631c">{{ $new->publisher ? $new->publisher : 'bkamthis' }}</p>
                                <p style="color: #ff631c">{{ \Carbon\Carbon::parse($new->date) }}</p>
                            </div>
                        </a>
                    @endforeach
                </aside>
            </div>
        </div>
    </main>
@endsection

@push('js')
    <script>
        function share_news(route) {
            if (navigator.share) {
                navigator
                    .share({
                        title: document.title,
                        text: 'Check out this news!',
                        // TODO: Add object id here
                        url: route,
                    })
                    .then(() => {
                        console.log('Thanks for sharing!');
                    })
                    .catch(console.error);
            }
        }
    </script>
       <script>
        $(document).ready(function() {
            $('.add-new-to-favorites').on('click', function(event) {
                event.preventDefault();

                var newId = $(this).data('new-id');
                var url = "{{ route('site.add-new-remove-favorite', ':newId') }}";
                url = url.replace(':newId', newId);

                var $heartIcon = $(this).find('i');

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(response) {
                        // Handle success
                        $heartIcon.removeClass('far').addClass('fas').css('color', 'red');
                        console.log('Added to favorites successfully');
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                        console.error('Error adding to favorites:', error);
                    }
                });
            });


        });
    </script>
@endpush