@extends('layout.app')
@section('content')
    <style>
        .d-none {
            display: none;
        }

        .profileImage {
            border-radius: 25px !important;
        }

        /* Shake animation for the heart icon */
        @keyframes shake {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-5px);
            }
            50% {
                transform: translateX(5px);
            }
            75% {
                transform: translateX(-5px);
            }
            100% {
                transform: translateX(0);
            }
        }

        .shake-animation {
            animation: shake 0.5s ease-in-out;
        }

        /* Optionally, you can remove the animation after it's complete */
        .shake-animation {
            animation: shake 0.5s ease-in-out;
            animation-fill-mode: forwards;
        }

        .media {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .reply-btn {
            font-size: 0.85rem;
            cursor: pointer;
        }

    </style>


    <section class="chat-page">
        <div class="container">
            <div class="row">
{{--                <div class="col-md-3">--}}

{{--                    <div class="following-card">--}}
{{--                        <figure>--}}
{{--                            <img--}}
{{--                                src="{{\Illuminate\Support\Facades\Auth::user()->getFirstMediaUrl('profile_image') ?? ''}}"--}}
{{--                                class="img-fluid" alt="img" style="width: 170px; height: 160px">--}}
{{--                        </figure>--}}
{{--                        <h2>{{\Illuminate\Support\Facades\Auth::user()->name ?? ''}}</h2>--}}
{{--                        <p>{{\Illuminate\Support\Facades\Auth::user()->title ?? ''}}</p>--}}
{{--                        <ul>--}}
{{--                            <li>--}}
{{--                                <h3>Following</h3>--}}
{{--                                <a href="{{ route('my.following') }}">--}}
{{--                                    <span>{{Auth()->user()->following()->count()}}</span></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <h3>Followers</h3>--}}
{{--                                <a href="{{ route('my.follower') }}">--}}
{{--                                    <span>{{Auth()->user()->followers()->count()}}</span></a>--}}
{{--                            </li>--}}
{{--                            <li><a href="{{route('profile')}}" class="profile-btn">View Profile</a></li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                    @include('components.suggested-users')--}}
{{--                    <div class="help-card">--}}
{{--                        <ul>--}}
{{--                            <li>--}}
{{--                                <a href="#">Help Center</a>--}}
{{--                                <a href="#">About</a>--}}
{{--                                <a href="#">Privacy Policy</a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <a href="#">Community Guidelines</a>--}}
{{--                                <a href="#">Cookies Policy</a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <a href="#">Career</a>--}}
{{--                                <a href="#">Language</a>--}}
{{--                                <a href="#">Copyright Policy</a>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                        <div class="copyrght-chat">--}}
{{--                            <a href="#" class="cht-bold">404 Chats</a>--}}
{{--                            <span><i class="fas fa-copyright"></i>Copyright 2025</span>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="suggestion-card ad-card mt-4 p-0">--}}
{{--                        <div class="d-flex">--}}
{{--                            <h2>ads available</h2>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"--}}
{{--                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                    <i class="far fa-ellipsis-v"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item" href="#">Action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Another action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Something else here</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="ad-wrap">--}}
{{--                            <h2>404 Chats</h2>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}


                <div class="col-md-12">
                    <div class="post-coment static-example" id="staticExample">
                        <div class="cmnt-jhn">
                            <div class="d-flex">
                                <figure>
                                    <img style="    border-radius: 27px;     height: 35px; max-width: 65%!important;" src="{{$chat->user->getFirstMediaUrl('profile_image')}}"
                                         class="img-fluid profileImage"
                                         alt="img">
                                </figure>
                                <div>
                                    <h4>{{$chat->user->name ?? ''}}</h4>
                                    <span><i class="fad fa-clock"></i>{{$chat->created_at->diffForHumans()}}</span>
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                    <i class="far fa-ellipsis-v"></i>
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#">Delete</a>
                                    <a class="dropdown-item" href="#">Report Abuse</a>
                                </div>
                            </div>
                        </div>
                        <div class="senir-wrodpres">
                            <h3>{{$chat->title ?? ''}}</h3>
                            <h6>{{$chat->sub_title ?? ''}}</h6>


                            <p>
                                {!! $chat->description !!}

                            </p>

                        </div>

                        <div class="like-comnt">
                            <ul>
                                <li>
                                    <a href="#" class="like-btn" data-chat-id="{{ $chat->id }}">
                                        <i class="fas fa-heart {{ $chat->likes()->where('user_id', auth()->id())->exists() ? 'text-danger' : '' }}"></i>
                                        Like
                                    </a>
                                    <figure>
                                        <img src="{{ asset('images/likeimg.png') }}" class="img-fluid" alt="img">
                                        <span class="like-count"
                                              id="like-count-{{ $chat->id }}">{{ $chat->likes_count }}</span>
                                    </figure>
                                    <a href="{{route('chat.comment',$chat->id)}}"><i class="fas fa-comment-alt"></i>
                                        Comment {{$chat->comments->count()}}</a>
                                </li>

                            </ul>
                            <div class="view-50">
                                <a href="#"><i class="far fa-eye"></i> Views 50</a>
                            </div>
                        </div>
                    </div>
                    <div class="comments-section mt-4">
                        <h5>Comments ({{ $chat->comments->count() }})</h5>

                        <form id="commentForm">
                            @csrf
                            <input type="hidden" name="parent_id" id="parent_id" value="">
                            <div class="form-group">
                                    <textarea name="comment" class="form-control" rows="2"
                                              placeholder="Add a comment..."></textarea>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    <i class="fas fa-solid fa-comment"></i>
                                </button>
                            </div>
                        </form>

                        <div id="commentsContainer" class="mt-4">
                            @foreach($chat->comments as $comment)
                                @include('chat.partials.single_comment', ['comment' => $comment])
                            @endforeach
                        </div>


                    </div>
                </div>
{{--                <div class="col-md-3">--}}
{{--                    <div class="chat-404">--}}
{{--                        <div class="track">--}}
{{--                            <h2><span>404</span> Chat</h2>--}}
{{--                            <h4> Track Time on Workwise</h4>--}}
{{--                            <p>Pay only for the Hours worked</p>--}}
{{--                        </div>--}}
{{--                        <div class="sign-up">--}}
{{--                            <h4>Sign up</h4>--}}
{{--                            <a href=" #">Learn More</a>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <div class="top-jobs">--}}
{{--                        <div class="heading">--}}
{{--                            <h3>Top Jobs</h3>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="btn btn-secondary dropdown-toggle" type="button"--}}
{{--                                        id="dropdownMenuButton"--}}
{{--                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                    <i class="far fa-ellipsis-v"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item" href="#">Action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Another action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Something else here</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <ul class="job-list">--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                    <div class="top-jobs">--}}
{{--                        <div class="heading">--}}
{{--                            <h3>Most Viewed This Week</h3>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="btn btn-secondary dropdown-toggle" type="button"--}}
{{--                                        id="dropdownMenuButton"--}}
{{--                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                    <i class="far fa-ellipsis-v"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item" href="#">Action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Another action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Something else here</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <ul class="job-list">--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                            <li class="job-item">--}}
{{--                                <div class="job-title">--}}
{{--                                    <h4>Senior Product Designer</h4>--}}
{{--                                    <span>$25/hr</span>--}}
{{--                                </div>--}}
{{--                                <p>Lorem ipsum dolor sit amet,--}}
{{--                                    consectetur adipiscing elit..</p>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                    </div>--}}
{{--                    <div class="suggestion-card">--}}
{{--                        <div class="d-flex">--}}
{{--                            <h2>Most Viewed People</h2>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="btn btn-secondary dropdown-toggle" type="button"--}}
{{--                                        id="dropdownMenuButton"--}}
{{--                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                    <i class="far fa-ellipsis-v"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item" href="javascript:;">Action</a>--}}
{{--                                    <a class="dropdown-item" href="javascript:;">Another action</a>--}}
{{--                                    <a class="dropdown-item" href="javascript:;">Something else here</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <ul>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-1.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Naya</h4>--}}
{{--                                        <span>Graphic Designer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-2.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Atharv</h4>--}}
{{--                                        <span>PHP Developer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-3.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Jai</h4>--}}
{{--                                        <span>Wordpress Developer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-4.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Dhruv</h4>--}}
{{--                                        <span>C &amp; C++ Developer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-5.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Tenzin</h4>--}}
{{--                                        <span>Graphic Designer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                            <li>--}}
{{--                                <div class="jesi-flex">--}}
{{--                                    <figure>--}}
{{--                                        <img src="images/m-6.png" class="img-fluid" alt="img">--}}
{{--                                    </figure>--}}
{{--                                    <div>--}}
{{--                                        <h4>Nila</h4>--}}
{{--                                        <span>PHP Developer</span>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <a href="javascript:;"><i class="fal fa-plus"></i></a>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                        <a href="javascript:;" class="profile-btn">View More</a>--}}
{{--                    </div>--}}
{{--                    <div class="suggestion-card ad-card mt-4 p-0">--}}
{{--                        <div class="d-flex">--}}
{{--                            <h2>ads available</h2>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="btn btn-secondary dropdown-toggle" type="button"--}}
{{--                                        id="dropdownMenuButton"--}}
{{--                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                    <i class="far fa-ellipsis-v"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">--}}
{{--                                    <a class="dropdown-item" href="#">Action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Another action</a>--}}
{{--                                    <a class="dropdown-item" href="#">Something else here</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="ad-wrap">--}}
{{--                            <h2>404 Chats</h2>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </section>





@endsection
@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const checkboxes = document.querySelectorAll('.tag-checkbox');

            checkboxes.forEach(cb => {
                cb.addEventListener('change', () => {
                    const checkedCount = document.querySelectorAll('.tag-checkbox:checked').length;
                    if (checkedCount >= 5) {
                        checkboxes.forEach(c => {
                            if (!c.checked) c.disabled = true;
                        });
                    } else {
                        checkboxes.forEach(c => c.disabled = false);
                    }
                });
            });

            document.querySelectorAll('.toggle-more').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    const moreText = this.previousElementSibling;
                    moreText.classList.toggle('d-none');
                    this.textContent = moreText.classList.contains('d-none') ? 'View More' : 'View Less';
                });
            });

        });

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            attachLikeListeners();
        });

        function attachLikeListeners() {
            document.querySelectorAll('.like-btn').forEach(function (btn) {
                btn.removeEventListener('click', handleLikeClick);
                btn.addEventListener('click', handleLikeClick);
            });
        }

        function handleLikeClick(e) {
            e.preventDefault();

            const btn = e.currentTarget;
            const chatId = btn.getAttribute('data-chat-id');
            const heartIcon = btn.querySelector('i');
            const likeCountEl = document.getElementById('like-count-' + chatId);

            // Add shake animation
            heartIcon.classList.add('shake-animation');

            fetch('{{ url('/like-toggle') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({chat_id: chatId})
            })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'liked') {
                        heartIcon.classList.add('text-danger');
                    } else {
                        heartIcon.classList.remove('text-danger');
                    }

                    likeCountEl.textContent = data.likes_count;

                    // Remove shake after animation
                    setTimeout(() => heartIcon.classList.remove('shake-animation'), 500);
                });
        }

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('commentForm');
            const parentIdInput = document.getElementById('parent_id');
            const commentsContainer = document.getElementById('commentsContainer');
            const textarea = form.querySelector('textarea');

            textarea.addEventListener('keydown', function (e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault(); // prevent new line
                    form.dispatchEvent(new Event('submit')); // trigger form submission
                }
            });
            // Handle comment form submission
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const formData = new FormData(form);
                const chatId = {{ $chat->id }};
                const chatCommentPostUrl = '{{ route("chat.comment.store", ":id") }}'.replace(':id', chatId);
                fetch(`${chatCommentPostUrl}`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: formData
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            if (parentIdInput.value) {
                                // It's a reply, append under the parent
                                const parentComment = document.getElementById('comment-' + parentIdInput.value);
                                let replySection = parentComment.querySelector('.ml-4');
                                if (!replySection) {
                                    replySection = document.createElement('div');
                                    replySection.classList.add('ml-4', 'mt-2');
                                    parentComment.querySelector('.media-body').appendChild(replySection);
                                }
                                replySection.insertAdjacentHTML('beforeend', data.html);
                            } else {
                                // New top-level comment
                                commentsContainer.insertAdjacentHTML('afterbegin', data.html);
                            }

                            form.reset();
                            parentIdInput.value = '';
                        }
                    });
            });

            // Handle reply button
            document.addEventListener('click', function (e) {
                if (e.target.closest('.reply-btn')) {
                    const commentId = e.target.closest('.reply-btn').getAttribute('data-id');
                    parentIdInput.value = commentId;
                    form.scrollIntoView({behavior: 'smooth'});
                    form.querySelector('textarea').focus();
                }
            });
        });
    </script>




@endpush