@extends("template.layouts.simple.master")
@section('content')
    <div class="page-body">
        @include("master.notification")
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="">
                        <div class="card-header ">

                        </div>
                        <div class="-">
                            <div class="row">
                                @foreach($details as $d)
                                    @php
                                        $date = \Carbon\Carbon::createFromFormat('Y-m-d', $d->scheduling_date_time)->format("d F Y");
                                        $user = \App\Models\User::find($d->entry_by);
                                        $role = $user->getRoleNames()[0];

                                    @endphp
                                    <div class="col-md-3 col-xxl-12 box-col-6">
                                        <div class="card">
                                            <div class="card-header">
                                                <h6 class="fw-bold text-center">{{$d->title}}</h6>
                                            </div>
                                            <div class="blog-box blog-grid">
                                                <div class=" row  text-center">
                                                    @foreach(unserialize($d->video_image) as $i)
                                                        <div class="col-xl-2  col-md-3 col-6"
                                                             itemprop="associatedMedia" itemscope="">
                                                            <a href="{{url("assets/images/news/$i")}}"
                                                               itemprop="contentUrl" data-size="1600x950">
                                                                <embed class="img-thumbnail text-center w-auto h-100"
                                                                       src="{{url("assets/images/news/$i")}}"
                                                                       itemprop="thumbnail" alt="Image description">
                                                            </a>
                                                            @can("download news from news page")
                                                                <a href="{{url("assets/images/news/$i")}}" download="">
                                                                    <i class="fa fa-download text-dark">
                                                                    </i>
                                                                </a>
                                                            @endcan
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="blog-details-main ">
                                                    <ul class="blog-social  text-center">
                                                        <li>{{$date}}</li>
                                                        <li>by: {{$role}}</li>
                                                        <li>{{$d->title}}</li>
                                                    </ul>
                                                    <hr>
                                                    <div class="description_con">
                                                        <h6 class="blog-bottom-details description">{{$d->description}}</h6>
                                                        <h6 class="blog-bottom-details all_description d-none">{{$d->description}}
                                                            <button class="show_less_btn btn-light">Show Less</button>
                                                        </h6>
                                                    </div>
                                                </div>
                                                <hr>
                                                @php

                                                    $comment = $d->getComments()->latest()->first();
                                                    $comment_user  = \App\Models\User::find(isset($comment->comment_by)? $comment->comment_by : "");
                                                    $comment_role = isset($comment_user) ? $comment_user->getRoleNames()[0] : "";
                                                @endphp
                                                @if(isset($comment_user))
                                                    <h6 class="m-l-20">COMMENTS</h6>
                                                    <hr>

                                                    <div class="col-sm-12 m-2 bg-light text-black">
                                                        <div class="overflow-scroll" style="height: 150px">
                                                            <ul class="m-3">
                                                                <li>
                                                                    <div class="media align-self-center d-flex">
                                                                        <img
                                                                            class="img-thumbnail"
                                                                            style="width: 70px;height: 70px"
                                                                            src="{{url("assets/images/users_images/$comment_user->image")}}"
                                                                            alt="Generic placeholder image">
                                                                        <div class="media-body m-l-20">
                                                                            <div
                                                                                class="fw-bold ">{{$comment_user->name}}
                                                                                ({{$comment_role}})
                                                                            </div>
                                                                            <div>{{$comment->comments}}</div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                                @can("view show more comments button in news page")
                                                                    <li class="text-end">
                                                                        <a href="{{route("view-comments")}}"
                                                                           class="text-underline">
                                                                            Show More
                                                                        </a>
                                                                    </li>
                                                                @endcan
                                                            </ul>
                                                        </div>
                                                    </div>
                                                @endif

                                                @can("add news comments")
                                                    <div class="comments_box">
                                                        <div class="input-group m-2">
                                                            <input class="form-control comments_input" type="text"
                                                                   placeholder="Write Comments"
                                                                   aria-label="Recipient's username with two button addons">
                                                            <button class="btn btn-info comments_add_btn"
                                                                    data-news_id="{{$d->id}}"><i
                                                                    class="fa fa-send"></i></button>
                                                        </div>
                                                    </div>
                                                @endcan


                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="row text-end">
                                {{$details->links()}}
                            </div>
                        </div>

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


    </div>
@endsection
{{--@include("")--}}
@section("scripts")
    @include("master.notification_show_hide")
    <script>
        $(document).ready(function () {


            let showChar = 320; // Number of characters to show initially
            let description_box = $('.description');
            $(description_box).each(function (index) {
                show_less_function(showChar, description_box[index]);
            });

            function show_less_function(showChar, element) {
                var content = $(element).html();
                var visibleContent = content.substr(0, showChar);
                if (content.length > 320) {
                    $(element).html(visibleContent + "<button class='text-primary show_more_btn btn-light'> Show More</button>");
                } else {
                    $(element).html(visibleContent);
                }
            }

            $('.show_more_btn').on('click', function (e) {
                e.preventDefault();
                let parent = $(this).closest(".description_con");
                $(parent).find(".all_description").toggleClass("d-none");
                $(parent).find(".description").toggleClass("d-none");
            });

            $(".show_less_btn").click(function () {
                let parent = $(this).closest(".description_con");
                $(parent).find(".all_description").toggleClass("d-none");
                $(parent).find(".description").toggleClass("d-none");
            })


            $(".comments_add_btn").click(function (e) {
                e.preventDefault();
                let news_id = $(this).data("news_id");
                let comment = $(this).closest(".comments_box").find(".comments_input").val()
                $.ajax({
                    url: "{{route("store-comments")}}",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}", // Add the CSRF token to the data
                        news_id,
                        comment,
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.response == 1) {
                            Swal.fire({
                                position: "top-end",
                                icon: "success",
                                title: "Your work has been saved",
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    }
                })


            })
        })
    </script>

@endsection