@extends('layouts.master')
@section('contain')
    {{-- title --}}
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="card-title">News Feed Detail</h4>
        </div>
        <div class="col-md-7 align-self-center text-right">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                    {{-- <li class="breadcrumb-item active">User Table</li> --}}
                    <li><a href="{{ route('newsfeed.index') }}" class="breadcrumb-item active">Back</a></li>
                </ol>
            </div>
        </div>
    </div>
    {{-- end title --}}
    <style>
        .content {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .avatar {
            margin-right: 10px;
        }

        .avatar img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .user h5 {
            margin: 0;
            font-size: 16px;
        }

        .is-mute {
            font-size: 14px;
            color: #777;
        }

        .content-comment {
            flex-grow: 1;
        }

        .content-footer {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .content-footer button {
            background: none;
            border: none;
            cursor: pointer;
            color: #777;
            margin-right: 10px;
        }

        .rate {
            display: flex;
            align-items: center;
        }

        .rate .value {
            margin: 0 10px;
            font-size: 18px;
        }

        .value.green {
            color: green;
        }

        .value.red {
            color: red;
        }
    </style>
    <style>
        .carousel-inner {
            width: 100%;
            max-width: 800px;
            /* Fixed maximum width for the container */
            margin: auto;
        }

        .media-item {
            object-fit: contain;
            /* Ensures the content is contained within the container without cutting off */
            width: 100%;
            height: 100%;
            max-height: 400px;
            /* Adjust as needed */
        }

        .carousel-item img,
        .carousel-item video {
            width: 100%;
            height: auto;
            max-height: 250px;
        }
    </style>

    <div class="row justify-content-center">
        <!-- Replace with your dynamic content -->
        <div class="col-md-8 mb-3">
            <div class="card ">
                <!-- Carousel for multiple media items -->
                <div id="mediaCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner mt-4" style="width: 100%; max-width: 800px; margin: auto;">
                        @foreach ($news_feed->media as $media)
                            <div class="carousel-item @if ($loop->first) active @endif">
                                @if ($media->media_type === 'image')
                                    <img src="{{ $media->media ? env('MEDIA_URL') . $media->media : asset('images/placeholderimage.png') }}"
                                        class="d-block w-100 media-item" alt="Image">
                                @elseif($media->media_type === 'video')
                                    <video class="d-block w-100 media-item" controls>
                                        <source src="{{ $media->media ? env('MEDIA_URL') . $media->media : '#' }}"
                                            type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    <button class="carousel-control-prev" type="button" data-bs-target="#mediaCarousel"
                        data-bs-slide="prev" style="width: 2%;">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button style="width: 2%;" class="carousel-control-next" type="button" data-bs-target="#mediaCarousel"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Post Description</h5>
                    <p class="card-text">{!! $news_feed->description ?? 'N/A' !!}</p>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="row align-items-center">
                                <div class="col">

                                    <i class="fas fa-user"></i> Reach: <strong>{{ $news_feed->reach_count }}</strong>
                                </div>
                                <div class="col">
                                    <i class="fas fa-thumbs-up"></i> Likes: <strong>{{ $news_feed->likes_count }}</strong>
                                </div>
                                <div class="col">
                                    {{-- <i class="fas fa-comments"></i> Comments: <strong>10</strong> --}}
                                    <a href="#commentsCollapse" class="btn btn-link" data-bs-toggle="collapse"
                                        role="button" aria-expanded="false" aria-controls="commentsCollapse">Toggle
                                        Comments <strong>{{ $news_feed->comments_count }}</strong></a>
                                </div>
                            </div>
                        </li>
                    </ul>

                    <!-- Comment Input Field -->
                    <div class="collapse" id="commentsCollapse">
                        <div class="card card-body">
                            @foreach ($news_feed->comments as $comment)
                                <div class="content">
                                    <div class="avatar">
                                        <img
                                            src="{{ $comment->user->profile_image ? env('MEDIA_URL') . $comment->user->profile_image : asset('images/placeholderprofile.png') }}">
                                    </div>
                                    <div class="content-comment">
                                        <div class="user">
                                            <h5>{{ $news_feed->user_name }}</h5>
                                            <span class="is-mute">{{ $comment->created_at->format('d F Y') }}</span>
                                        </div>
                                        <p>{{ $comment->message ?? '-' }}</p>
                                        {{-- <div class="content-footer">
                                        <button class="btn btn-outline"><i
                                                class="ri-share-forward-fill"></i>Reply</button>
                                        <button class="btn"><i class="ri-more-fill"></i></button>
                                    </div> --}}
                                    </div>
                                    <div class="rate">
                                        <button class="btn"><i class="ri-arrow-down-s-line"></i></button>
                                        {{-- <div class="value green">7</div> --}}
                                        <button class="btn"><i class="ri-arrow-up-s-line"></i></button>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- Repeat for other posts -->
    </div>

    <script>
        // $(document).ready(function() {
        //     var exampleUrl = "https://www.example.com";
        //     var errorMessage = "this field is required and  enter a valid HTTP URL. Example: " + exampleUrl;
        //     $('#exampleInputEmail111').parsley().on('field:error', function() {
        //         var errorElement = $(this.$element).closest('.form-group').find(
        //             '.parsley-errors-list.filled');
        //         errorElement.html(errorMessage);
        //     });
        // });
    </script>
@endsection