@php
    $existVote = @$post->votes?->where('user_id', auth()->id())->first();
@endphp
@extends('front.layout.app')

@section('content')
    <div class="innerBan">
        <img src="{{ asset('assets/images/banner.jpg') }}" class="w-100 h-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>QnA</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="qna-page">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12">
                    <a href="{{ route('qna') }}" class="themeBtn bdrbtn">Go Back</a>
                </div>
                <div class="col-md-12">

                    <div class="qna-main">
                        <div class="sub-qna backclr" id="red-pill-portfolio">
                            <ul class="reviewlist">
                                <li>{{ showDateTime(@$post->created_at, 'd M, Y h:i A') }}
                                    {{ diffForHumans($post->created_at) }} </li>
                                <li>|</li>
                                <li> By <span>{{ __(@$post->user?->name) }} </span></li>
                                <li>Posted in <span>theredpillportfolio</span></li>
                            </ul>
                            <a href="{{ route('question.details', $post->id) }}">
                                <h4>{{ __(@$post->title) }}</h4>
                            </a>
                            <p>{!! $post->content !!}</p>
                            <ul class="view-list">
                                {{-- <li>
                                    <i class="fas fa-eye"></i> {{ number_format_short(@$post->views) }}
                                </li>
                                <li> <i class="far fa-comment"></i>
                                    {{ number_format_short(@$post->comments?->count()) }}</li> --}}
                                    <div class="vote-item vote-qty d-flex flex-direction-row ms-2" >
                                        <div class="vote-item-wraper">
                                            <button
                                                class="vote-qty__increment post_vote vote_post @if ($existVote != null && $existVote->like) active-upvote @endif"
                                                data-post-id="{{ $post->id }}" data-post-vote="1">
                                                <i
                                                    class="fa-thumbs-up @if ($existVote != null && $existVote->like) fa-solid @else fa-regular @endif"></i>
                                            </button>
        
                                            <div class="vote-value-container total_post_vote{{ $post->id }}"
                                                data-post-id="{{ $post->id }}">
                                                <h6 class="vote-qty__value">
                                                    {{ __(number_format_short(@$post->votes?->where('like', 1)->count() - @$post->votes?->where('unlike', 1)->count())) }}
                                                </h6>
                                            </div>
                                            <button
                                                class="vote-qty__decrement post_vote @if ($existVote != null && $existVote->unlike) active-downvote @endif"
                                                data-post-id="{{ $post->id }}" data-post-vote="0">
                                                <i
                                                    class="fa-thumbs-down @if ($existVote != null && $existVote->unlike) fa-solid @else fa-regular @endif"></i>
                                            </button>
                                        </div>
                                    </div>
                            </ul>

                        </div>
                        @foreach ($post->comments->where('parent_comment_id', null) as $single_comment)
                            @if ($single_comment->status)
                                <div class="sub-qna mt-5 border rounded">
                                    <div class="single-comment">
                                        @include('front.components.com', [
                                            'single_comment' => $single_comment,
                                            'count' => 0,
                                        ])
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        @if (auth()->user() && auth()->user()->role === 'admin')
                            <div class="single-comment-replay">
                                <div class="auth-info">
                                    <a href="#">
                                        <div class="user-thumb">
                                            <img src="{{ auth()->user()->userImage('profile_image') }}" alt="avatar">
                                        </div>
                                        <p class="post-by">
                                            <span>{{ __(@$post?->user?->name) }}</span>
                                        </p>
                                    </a>
                                </div>
                                <div class="comment-text">
                                    <form>
                                        <div class="form-group">
                                            <input type="text" name="post_id" hidden value="{{ @$post->id }}">
                                            <input type="text" name="parent_comment_id" hidden value="">
                                            <textarea placeholder="" class="form--control form-control comment-replay-field" id="comment-field" name="comment"
                                                onkeypress="singleCommentSubmit(this)"></textarea>
                                            <label class="form--label">
                                                    @lang('Write Your Answer')
                                            </label>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        (function($) {
            "use strict";
            $(document).ready(function() {
                "use strict";
                // Reply comment create

                // post votes
                $(document).on('click', '.post_vote', function() {
                    var auth = @json(auth()->check());
                    if (auth) {
                        var url = "{{ route('post.vote') }}";
                        var token = '{{ csrf_token() }}';
                        var id = $(this).data("post-id");
                        var data = {
                            post_id: id,
                            vote: $(this).data("post-vote"),
                            _token: token
                        }

                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            success: function(data) {
                                $(".total_post_vote" + id).find('h6').text(data);
                            },
                            error: function(data, status, error) {
                                $.each(data.responseJSON.errors, function(key, item) {
                                    Toast.fire({
                                        icon: 'error',
                                        title: item
                                    })
                                });

                            }
                        });
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: 'Please Log into your account'
                        })
                    }
                })

                // comment votes
                $(document).on('click', '.comment_vote', function() {
                    var auth = @json(auth()->check());
                    if (auth) {
                        var url = "{{ route('comment.vote') }}";
                        var token = '{{ csrf_token() }}';
                        var id = $(this).data("comment-id");

                        var data = {
                            comment_id: id,
                            vote: $(this).data("comment-vote"),
                            _token: token
                        }
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            success: function(data) {
                                $(".total_comment_vote" + id).text(data);
                            },
                            error: function(data, status, error) {
                                $.each(data.responseJSON.errors, function(key, item) {
                                    Toast.fire({
                                        icon: 'error',
                                        title: item
                                    })
                                });

                            }
                        });
                    } else {

                        Toast.fire({
                            icon: 'error',
                            title: 'Please Log into your account'
                        })
                    }
                })

                // boorkmark post
                $(".bookmark-button").on('click', function() {
                    var auth = @json(auth()->check());
                    if (auth) {
                        var url = "{{ route('post.bookmark') }}";
                        var token = '{{ csrf_token() }}';
                        var id = $(this).data("post-id");
                        var this_data = $(this);
                        var data = {
                            post_id: id,
                            _token: token
                        }
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: data,
                            success: function(data) {

                                if (data.status && data.status == "saved") {
                                    this_data.addClass("active-bookmark");
                                    var icon = this_data.find("i");
                                    if (icon.hasClass("fa-solid")) {
                                        icon.removeClass("fa-solid")
                                            .addClass("fa-regular");
                                    } else {
                                        icon.removeClass("fa-regular")
                                            .addClass("fa-solid");
                                    }
                                    Toast.fire({
                                        icon: 'success',
                                        title: data.message
                                    })
                                } else {
                                    this_data.removeClass("active-bookmark");
                                    var icon = this_data.find("i");
                                    if (icon.hasClass("fa-solid")) {
                                        icon.removeClass("fa-solid")
                                            .addClass("fa-regular");
                                    } else {
                                        icon.removeClass("fa-regular")
                                            .addClass("fa-solid");
                                    }
                                    Toast.fire({
                                        icon: 'success',
                                        title: data.message
                                    })
                                }
                            },
                            error: function(data, status, error) {
                                $.each(data.responseJSON.errors, function(key, item) {
                                    Toast.fire({
                                        icon: 'error',
                                        title: item
                                    })
                                });
                            }
                        });

                    } else {
                        $(".toast-container").addClass('d-none');
                        Toast.fire({
                            icon: 'error',
                            title: "Please Log into your account."
                        })
                    }


                });

                // report post button
                $(".report_post_button").on('click', function() {
                    var auth = @json(auth()->check());
                    if (auth) {
                        var id = $(this).data("post-id");
                        $(".set_post_modal_post_id").val(id);
                        $(".post_report_modal").modal('show');
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: 'Please Log into your account'
                        })
                    }

                });



            });

        })(jQuery);


        // Single comment create
        function singleCommentSubmit(object) {
            const dataReply = $(object).data('reply');
            const dataEdit = $(object).data('edit');
            if (dataReply != 'reply' && dataEdit != 'edit') {
                $(object).attr('data-comment', 'comment');
            }
            if (event.which == 13 && $(object).data('comment') == 'comment') {
                var data = {
                    post_id: $(object).siblings('input[name=post_id]').val(),
                    parent_comment_id: $(object).siblings('input[name=parent_comment_id]').val(),
                    comment: $(object).val(),
                    _token: '{{ csrf_token() }}'
                }
                $.ajax({
                    type: "POST",
                    url: "{{ route('comment') }}",
                    data: data,
                    success: function(data) {
                        window.location.href  = "{{ route('qna') }}"
                        var SingleCommentReply = $(object).closest(".single-comment-replay");
                        SingleCommentReply.before(` 
                            <div class="sub-qna mt-5 border rounded">
                                <div class="single-comment"> 
                                    ${data.html} 
                                </div>
                            </div>                            
                        `);
                        $(object).val('');
                        $(object).removeAttr('data-comment');

                        var type = "create";
                        postCommentCount(data, type)
                    },
                    error: function(data, status, error) {
                        $.each(data.responseJSON.errors, function(key,
                            item) {
                            Toast.fire({
                                icon: 'error',
                                title: item
                            })
                        });
                    }
                });
                return false;
            }
        }

        function replyComment(object, event) {

            var auth = @json(auth()->check());
            if (auth) {
                // Close all open reply fields
                var allReplayCommentField = $('.replay-comment-field').removeClass('show-comment-field');

                // Find the textarea in the clicked comment
                var findTextarea = $(object).closest(".view-list").siblings(".replay-comment-field-reply").find(
                    'textarea[name=comment]');
                findTextarea.attr('data-action', 'reply');
                findTextarea.val('');

                // Toggle visibility of the current reply field
                $(object).closest(".view-list").siblings(".replay-comment-field-reply").toggleClass("show-comment-field");
            } else {
                Toast.fire({
                    icon: 'error',
                    title: 'Please Log into your account'
                });
            }
        }


        // Reply comment submit
        function ReplyCommentSubmit(object, event) {
            if (event.which == 13 && $(object).data('action') === 'reply') {
                var data = {
                    post_id: $(object).siblings('input[name=post_id]').val(),
                    comment_id: $(object).siblings('input[name=comment_id]').val(),
                    comment: $(object).val(),
                    _token: '{{ csrf_token() }}'
                }
                $.ajax({
                    type: "POST",
                    url: "{{ route('comment.replay') }}",
                    data: data,
                    success: function(data) {
                        alert('hello')
                        var nestedCommentWrapper = $(object).closest(".replay-comment-field").parents(
                            '.nested-comment-wraper');
                        if (nestedCommentWrapper.length < 4) {
                            $(object).closest(".replay-comment-field").parent(
                                '.comment-text').append(`
                                <div class="nested-comment-wraper">
                                    <div class="nested-comment">
                                        ${data.html}
                                    </div>
                                </div>
                            `);
                        }


                        $(object).val('');
                        $(object).closest(".replay-comment-field").toggleClass("show-comment-field");

                        var allNestedComment = $(object).closest(
                            '.replay-comment-field-reply');

                        replyCommentCountCreate(allNestedComment);
                        var type = 'create';
                        postCommentCount(data, type);

                    },
                    error: function(data, status, error) {
                        $.each(data.responseJSON.errors, function(key,
                            item) {
                            Toast.fire({
                                icon: 'error',
                                title: item
                            })
                        });
                    }
                });
            }

            if (event.which == 13 && $(object).data('action') === 'edit') {

                var data = {
                    comment_id: $(object).siblings('input[name=comment_id]').val(),
                    comment: $(object).val(),
                    _token: '{{ csrf_token() }}'
                }
                $.ajax({
                    type: "POST",
                    url: "{{ route('comment.edit') }}",
                    data: data,
                    success: function(data) {
                        var commentText = $(object).closest('.replay-comment-field').parent('.comment-text')
                            .find('p').first();

                        commentText.text(data.comment.comment);

                        $(object).closest(".replay-comment-field").toggleClass("show-comment-field");
                        $(object).removeAttr('data-edit');

                    },
                    error: function(data, status, error) {
                        $.each(data.responseJSON.errors, function(key,
                            item) {
                            Toast.fire({
                                icon: 'error',
                                title: item
                            })
                        });
                    }
                });
            }
        }

        // Reply-comment (comment count) create
        function replyCommentCountCreate(allNestedComment) {
            $.each(allNestedComment.parents('.nested-comment'), function(index,
                value) {
                // reply-comment (comment reply) count create 

                $(value).children('.comment-text').children(
                    '.comment-card-footer').children(
                    '.user-actn').find(
                    '.nestedCommentsCount').text(parseInt($(
                        value).children('.comment-text')
                    .children('.comment-card-footer')
                    .children('.user-actn').find(
                        '.nestedCommentsCount').text()) + 1 + " " + "Reply");
            });


            // single-comment (comment reply) count create 
            allNestedComment.parents(
                    '.single-comment').children('.comment-text')
                .children('.comment-card-footer').children('.user-actn')
                .find('.nestedCommentsCount').text(parseInt(allNestedComment.parents(
                            '.single-comment').children('.comment-text')
                        .children('.comment-card-footer').children(
                            '.user-actn').find('.nestedCommentsCount')
                        .text()) + 1 + " " +
                    "Reply");
        }
        // Number formate
        function number_format_short(postCommentCount) {
            var n_format;
            var suffix = '';
            if (postCommentCount >= 0 && postCommentCount < 1000) {
                // 1 - 999
                n_format = Math.floor(postCommentCount);
                suffix = '';
            } else if (postCommentCount >= 1000 && postCommentCount < 1000000) {
                // 1k-999k
                n_format = Math.floor(postCommentCount / 1000);
                $suffix = 'K+';
            } else if (postCommentCount >= 1000000 && postCommentCount < 1000000000) {
                // 1m-999m
                n_format = Math.floor(postCommentCount / 1000000);
                $suffix = 'M+';
            } else if (postCommentCount >= 1000000000 && postCommentCount < 1000000000000) {
                // 1b-999b
                n_format = Math.floor(postCommentCount / 1000000000);
                $suffix = 'B+';
            } else if (postCommentCount >= 1000000000000) {
                // 1t+
                n_format = Math.floor(postCommentCount / 1000000000000);
                $suffix = 'T+';
            }
            return n_format + suffix + " " + "Comments";
        }
    </script>
@endsection