@extends('layouts.landing')

@section('title')
    Comment Section
@endsection

@section('content')

<div class="modal custom-open fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 100%; height: 100%; margin: 0; border-radius: 0">
        <div class="modal-content p-2" style="height: 100%; border-radius: 0;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="background: #fff;">
                <div class="row">
                    <div class="col-12 col-lg-8 col-xl-8">
                        <div class="pt-2">
                            {{-- <div id="recipeCarousels" class="carousel d-flex slide w-100" data-ride="carousel" style="margin: 0">
                                <div class="carousel-inner w-100" role="listbox">
                                    @if(count($photos) > 0)
                                        @foreach($photos as $photo)
                                            <div class="carousel-item">
                                                <div class="col-12 pe-2 ps-2">
                                                    <img src="{{url('storage/'.$photo)}}" alt="image" class=" w-100 rounded-3" style="object-fit: cover">
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <a class="carousel-control-prev w-auto" href="#recipeCarousels" role="button" data-slide="prev">
                                    <span class="bg-dark border border-dark rounded-circle" aria-hidden="true">
                                        <i class="mdi mdi-chevron-left px-2" style="font-size: 28px"></i>
                                    </span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next w-auto" href="#recipeCarousels" role="button" data-slide="next">
                                    <span class=" bg-dark border border-dark rounded-circle" aria-hidden="true">
                                        <i class="mdi mdi-chevron-right px-2" style="font-size: 28px"></i>
                                    </span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div> --}}
                            <div id="myCarousel" class="carousel slide" data-bs-ride="carousel" style="margin: 0">
                                <ol class="carousel-indicators">
                                    @php
                                        $photos = json_decode($feed->photo_path);
                                        if($photos) {
                                            $photo_count = count($photos);
                                        }
                                    @endphp
                                    @if(count($photos) > 0)
                                        @php
                                            $photo_no = 0;
                                        @endphp
                                        @foreach ($photos as $photo)
                                            <li data-bs-target="#myCarousel" data-bs-slide-to="{{$photo_no}}" class="{{$photo[0] ? 'active' : ''}}"></li>
                                            @php
                                                $photo_no++;
                                            @endphp
                                        @endforeach
                                    @endif
                                </ol>
                                <div class="carousel-inner">
                                    @if(count($photos) > 0)
                                        @foreach ($photos as $photo)
                                            <div class="carousel-item {{$photo[0] ? 'active' : ''}}">
                                                <img src="{{url('storage/'.$photo)}}" alt="image" class=" w-100 d-block rounded-3" style="object-fit: cover">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </a>
                                <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </a>
                            </div>

                        </div>
                    </div>
                    <div class="col-12 col-lg-4 col-xl-4">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-header border-bottom-xs">
                                <div class="row">
                                    <div class="col">
                                        <div class="d-flex">
                                            @php
                                                $user = App\Models\User::where('id', $feed->user_id)->first();
                                            @endphp
                                            <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                            <div class="pl-2">
                                                <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                <p class="text-muted font-xssss"><i class="feather-clock"></i> Following</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="dropdown user-drop">
                                            <a class="dropdown-togle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                <i class="fe fe-more-vertical"></i>
                                            </a>
                                            <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                <div class="card-body p-0 d-flex">
                                                    <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                    <a href="#!">
                                                        <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                    </a>
                                                </div>
                                                <div class="card-body p-0 d-flex">
                                                    <i class="mdi mdi-delete text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                    <a href="#!">
                                                        <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Delete</h6>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body mt-4 border-bottom-xs custom-comment-h">
                                @php
                                    $comments = App\Models\Comment::where('feed_id', $feed->id)->get();
                                @endphp
                                @forelse ($comments as $comment)
                                    <div class="row my-2">
                                        <div class="col">
                                            <div class="d-flex">
                                                @php
                                                    $user = App\Models\User::where('id', $comment->user_id)->first();
                                                @endphp
                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-4">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p class="comment-text">
                                                        {{$comment->comment_body}}
                                                    </p>
                                                    <time class="comment-time">
                                                        {{$comment->created_at->diffForHumans()}}
                                                    </time>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="mdi mdi-heart-outline"></i>
                                        </div>
                                    </div>
                                @empty

                                @endforelse
                            </div>
                            <div class="card-body my-4">
                                <form id="comment-post{{$feed->id}}">
                                    @csrf
                                    <div class="row border-top-xs pt-4" id="comment-box{{$feed->id}}">
                                        <div class="col-auto">
                                            <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                        </div>
                                        <div class="col ms-n2">
                                            <label class="visually-hidden">Add a comment</label>
                                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                            <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                            <textarea name="comment_body" id="comment-body{{$feed->id}}" onkeyup="commentPost('comment-body{{$feed->id}}', 'comment-btn{{$feed->id}}')" class="form-control" data-autosize rows="1" placeholder="Add a comment.."></textarea>
                                        </div>
                                        <div class="col-auto align-self-end">
                                            <div class="text-muted mb-2">
                                                <button class="text-color font-xss post_comment{{$feed->id}}" id="comment-btn{{$feed->id}}" style="opacity: .3; cursor: unset" disabled>
                                                    Comment
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#commentModal').modal('show');
    });
</script>
@endsection