@php use Illuminate\Support\Facades\Auth; @endphp
@extends('backend.master')

@section('mainContent')
    {!! generateBreadcrumb() !!}
    <style>
        /* QA icon badges (pin & best) - improved clarity */
        .qa-icon { display:inline-flex; align-items:center; margin-left:6px; }
        .qa-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; box-shadow: 0 8px 22px rgba(2,6,23,0.45); border: 1px solid rgba(255,255,255,0.06); }
        .qa-badge--large { width:36px; height:36px; }
        .qa-badge--small { width:26px; height:26px; }
        /* inline SVGs for crisp icons */
        .qa-icon svg { width:16px; height:16px; color:#fff; display:block; }
        .comments_checklisted .qa-badge--large { width:28px; height:28px; }
        .comments_checklisted .qa-icon svg { width:13px; height:13px; }
        /* spacing for icons next to the user name */
        .tkt_owner_name h4 { display:flex; align-items:center; gap:8px; }
        .list_name h4 { display:flex; align-items:center; gap:6px; }
        /* subtle hover to make icon feel interactive */
        .qa-icon:hover .qa-badge { transform: translateY(-1px) scale(1.06); transition: transform 140ms ease; }

        .qa-badge.qa-badge--large.qa-badge--pin,
        .qa-badge.qa-badge--small.qa-badge--best{
            background: var(--button-hover);
        }

        .comments_checklisted .single_list {
            border: 1px solid rgba(0,0,0,0.1);
            padding: 20px;
            padding-left: inherit;
        }

    </style>
    <section class="admin-visitor-area up_st_admin_visitor">
        <div class="container-fluid p-0">

            <div class="row justify-content-center mt-0">

                <div class="col-lg-12">
                    <div class="white_box_30px">
                        <div class="row">
                            <div class="col-12">
                                <div class="tickets_view_lists mb-20">
                                    <div class="single_tks_view_list ">
                                        <div class="tkt_owner d-flex align-items-center mb-20 justify-content-between">
                                            <div>
                                                <div class="thumb mb-3">
                                                    <img
                                                        src="{{getProfileImage($question->user->image,$question->user->name)}}"
                                                        alt="">
                                                </div>
                                                <div class="tkt_owner_name">
                                                    <h4>{{@$question->user->name}}

                                                        @if($question->is_pinned)
                                                            <span class="qa-icon" title="{{ __('common.Pinned') }}">
                                                                <span class="qa-badge qa-badge--large qa-badge--pin" aria-hidden="true">
                                                                    <!-- inline pin SVG -->
                                                                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg">
                                                                        <path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        @endif
                                                        @if($question->is_best)
                                                            <span class="qa-icon" title="{{ __('common.Best Answer') }}">
                                                                <span class="qa-badge qa-badge--large qa-badge--best" aria-hidden="true">
                                                                    <!-- inline star SVG -->
                                                                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg">
                                                                        <path fill="currentColor" d="M12 .587l3.668 7.431L23.6 9.75l-5.8 5.654L19.335 24 12 19.897 4.665 24 6.2 15.404 0.4 9.75l7.932-1.732L12 .587z" />
                                                                    </svg>
                                                                </span>
                                                            </span>
                                                        @endif

                                                    </h4>
                                                    <p>{{showDate($question->created_at)}}</p>
                                                </div>
                                            </div>
                                            <div class="table_btn_wrap">
                                                <ul>
                                                    <li>
                                                        <div class="dropdown CRM_dropdown">
                                                            <button class="btn btn-secondary dropdown-toggle"
                                                                    type="button"
                                                                    id="dropdownMenu2"
                                                                    data-bs-toggle="dropdown" aria-haspopup="true"
                                                                    aria-expanded="false">
                                                                {{__('common.Action')}}
                                                            </button>
                                                            <div class="dropdown-menu dropdown-menu-right action_dropdown_right"
                                                                 aria-labelledby="dropdownMenu2"
                                                                 x-placement="bottom-end">
                                                                @if(permissionCheck('qa.question.pin'))
                                                                    <form action="{{ route('qa.questions.pin', $question->id) }}" method="POST">
                                                                        @csrf
                                                                        <button class="dropdown-item" type="submit">
                                                                            {{ $question->is_pinned ? __('common.Unpin') : __('common.Pin') }}
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                                @if(permissionCheck('qa.questions.best'))
                                                                    <form action="{{ route('qa.questions.best', $question->id) }}" method="POST">
                                                                        @csrf
                                                                        <button class="dropdown-item" type="submit">
                                                                            {{ $question->is_best ? __('common.Remove Best Answer') : __('common.Mark as Best Answer') }}
                                                                        </button>
                                                                    </form>
                                                                @endif
                                                                @if(permissionCheck('qa.questions.edit'))
                                                                    <a class="dropdown-item"
                                                                       href="{{ route('qa.questions.edit',$question->id)}}">{{__('common.Edit')}}</a>
                                                                @endif
                                                                @if(permissionCheck('qa.questions.delete'))
                                                                    <a class="dropdown-item  "
                                                                       href="{{ route('qa.questions.delete',$question->id)}}">{{__('common.Delete')}}</a>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        {!! $question->text !!}

                                    </div>


                                    <div class="comments_checklisted ">
                                        @foreach($question->child as $key => $message)

                                            <div class="">
                                                <div class="single_list  ">
                                                    <div class="d-flex justify-content-between mb-4">
                                                        <div>
                                                            <div class="thumb list_name">
                                                                <a href="#"><img
                                                                        src="{{getProfileImage($message->user->image,$message->user->name)}}"
                                                                        alt=""></a>
                                                            </div>
                                                            <div class="list_name">
                                                                <h4><a href="#">{{ $message->user->name }} </a>
                                                                    <span>{{$message->created_at->diffForHumans()}}</span>
                                                                    @if($message->is_pinned)
                                                                        <span class="qa-icon" title="{{ __('common.Pinned') }}">
                                                                            <span class="qa-badge qa-badge--small qa-badge--pin" aria-hidden="true">
                                                                                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg">
                                                                                    <path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
                                                                                </svg>
                                                                            </span>
                                                                        </span>
                                                                    @endif
                                                                    @if($message->is_best)
                                                                        <span class="qa-icon" title="{{ __('common.Best Answer') }}">
                                                                            <span class="qa-badge qa-badge--small qa-badge--best" aria-hidden="true">
                                                                                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg">
                                                                                    <path fill="currentColor" d="M12 .587l3.668 7.431L23.6 9.75l-5.8 5.654L19.335 24 12 19.897 4.665 24 6.2 15.404 0.4 9.75l7.932-1.732L12 .587z" />
                                                                                </svg>
                                                                            </span>
                                                                        </span>
                                                                    @endif
                                                                </h4>

                                                            </div>
                                                        </div>

                                                        <div class="table_btn_wrap">
                                                            <ul>
                                                                <li>
                                                                    <div class="dropdown CRM_dropdown">
                                                                        <button
                                                                            class="btn btn-secondary dropdown-toggle"
                                                                            type="button"
                                                                            id="dropdownMenu2"
                                                                            data-bs-toggle="dropdown"
                                                                            aria-haspopup="true"
                                                                            aria-expanded="false">
                                                                            {{__('common.Action')}}
                                                                        </button>
                                                                        <div
                                                                            class="dropdown-menu dropdown-menu-right action_dropdown_right"
                                                                            aria-labelledby="dropdownMenu2"
                                                                            x-placement="bottom-end">
                                                                            @if(permissionCheck('qa.questions.pin'))
                                                                                <form action="{{ route('qa.questions.pin', $message->id) }}" method="POST">
                                                                                    @csrf
                                                                                    <button class="dropdown-item" type="submit">
                                                                                        {{ $message->is_pinned ? __('common.Unpin') : __('common.Pin') }}
                                                                                    </button>
                                                                                </form>
                                                                            @endif
                                                                            @if(permissionCheck('qa.questions.best'))
                                                                                <form action="{{ route('qa.questions.best', $message->id) }}" method="POST">
                                                                                    @csrf
                                                                                    <button class="dropdown-item" type="submit">
                                                                                        {{ $message->is_best ? __('common.Remove Best Answer') : __('common.Mark as Best Answer') }}
                                                                                    </button>
                                                                                </form>
                                                                            @endif
                                                                            @if(permissionCheck('qa.questions.edit'))
                                                                                <a class="dropdown-item"
                                                                                   href="{{ route('qa.questions.edit',$message->id)}}">{{__('common.Edit')}}</a>
                                                                            @endif
                                                                            @if(permissionCheck('qa.questions.delete'))
                                                                                <a class="dropdown-item  "
                                                                                   href="{{ route('qa.questions.delete',$message->id)}}">{{__('common.Delete')}}</a>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>

                                                    <div class="list_name">
                                                        {!! $message->text !!}
                                                    </div>
                                                </div>

                                            </div>

                                        @endforeach

                                        <div id="new_answer">

                                        </div>


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


                            <div class="col-lg-12">
                                @if($typing)
                                    <div id="user_list text-center" class="">
                                        <h3 class="text-center">{{$typing->name}} is typing</h3>
                                    </div>
                                @else
                                    <div id="replyForm" class="">
                                        <form action="{{ route('qa.questions.reply',$question->id) }}" method="POST"
                                              enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="col-12  mb-30">
                                                    <label class="primary_input_label"
                                                           for="">{{ __('courses.Text') }}*</label>
                                                    <textarea name="text" id=""
                                                              class="lms_summernote">{{ old('text') }}</textarea>
                                                </div>


                                                <div class="col-12 text-center">
                                                    <div class="submit_button mt-25">
                                                        <button type="submit" id="submitReply"
                                                                class="primary-btn semi_large2  fix-gr-bg "
                                                                type="button">{{__('courses.Reply')}}</button>
                                                    </div>
                                                </div>
                                            </div>

                                        </form>
                                    </div>

                            </div>
                            @endif

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

                <div class="col-lg-12">
                </div>

            </div>


        </div>
    </section>
    {{--    @include('backend.partials.delete_modal')--}}
@endsection
@push('scripts')

    <input type="hidden" class="notification_channel" value="question-answer-channel">
    <script src="{{assetPath('js/pusher.min.js')}}"></script>
    <script>

        // Pusher.logToConsole = true;
        let typing = {{$typing?1:0}};
        let pusher = new Pusher('{{config('broadcasting.connections.pusher.key')}}', {
            cluster: '{{config('broadcasting.connections.pusher.options.cluster')}}'
        });
        let channel = pusher.subscribe('question-answer-channel');
        channel.bind('new-question-answer{{$question->id}}', function (data) {

            let single = `  <div class="single_list d-flex">
                                <div class="thumb">
                                    <a href="#"><img src="${data.question.img}"  alt=""></a>
                                </div>
                                <div class="list_name">
                                    <h4>
                                        <a href="#">${data.question.name} </a>
                                        <span>${data.question.date}</span>
                                    </h4>
                                        ${data.question.text}
                            </div>
                        </div>`;

            $('#new_answer').append(single)


        });


        channel.bind('pusher:subscription_succeeded', function (data) {
            console.log('ok');
            // console.log(data)

        });

        function makeOnline() {
            if (typing != 1) {
                $.ajax({
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        user_id: "{{Auth::id()}}",
                        question_id: "{{$question->id}}",
                    },
                    url: "{{route('qa.checkOnline')}}",
                    success: function (data) {
                        typing = 1;
                    }
                });
            }
        }

        $(document).ready(function () {
            // exitByAjax();
            // $('.lms_summernote').on('summernote.keydown', function () {
            makeOnline();

            // });

            $('.lms_summernote').on('summernote.keydown', function () {
                makeOnline();
            });

        });


        //document on click
        $(document).on('click', '#submitReply, .dropdown-item', function () {
            typing = 0;
        });

        // $(document).ready(function () {
        //     $('.lms_summernote').on('summernote.init', function () {
        //         $(this).summernote('focus');
        //     });
        //
        // });

        $(document).ready(function () {
            $('.lms_summernote').summernote('focus');
        });


        // $(window).on("pagehide", function () {
        //     exitByAjax();
        // });
        //
        // // Fallback to beforeunload
        // $(window).on("beforeunload", function () {
        //     exitByAjax();
        // });

        $(window).on("unload", function () {
            exitByAjax();
        });

        function exitByAjax() {
            if (typing != 1) {
                return;
            }
            let user_id = "{{ \auth()->id() }}";
            let question_id = "{{ $question->id }}";
            const csrfToken = "{{ csrf_token() }}"; // Get CSRF token

            const url = `{{ route('qa.exitOnline') }}?user_id=${user_id}&question_id=${question_id}`;
            console.log(url)
            if (navigator.sendBeacon) {
                 navigator.sendBeacon(url);
                console.log("Beacon sent successfully.");
            } else {
                // Fallback to synchronous AJAX (POST request)
                $.ajax({
                    url: url,
                    type: "POST",
                    async: false, // Ensures the request completes before the page unloads
                    data: {
                        user_id: user_id,
                        question_id: question_id,
                        _token: csrfToken // CSRF token for Laravel
                    },
                    success: function () {
                        console.log("Synchronous AJAX POST request sent.");
                    },
                    error: function () {
                        console.error("Error with synchronous AJAX POST request.");
                    },
                });
            }
        }




    </script>

@endpush