@extends('layouts.app')
@section('css')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="{{ asset('assets/custom/css/common/file-manger.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/custom/css/expert-questions/show.css') }}" rel="stylesheet">
@endsection
@section('content')
    @include('components.common.page-header', [
        'pageTitle' => __('labels.expert_question'),
        'actionButton' => [
            'url' => route('expert-questions.index'),
            'text' => __('labels.back_to_list'),
            'icon' => 'fa-arrow-left',
        ],
    ])
    <div class="container-fluid px-4">
        {{-- Header with Title and Actions --}}
        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <h1 class="view-title">{{ $expertQuestion->title }}</h1>
                <div class="d-flex gap-2">
                    <span class="status-badge status-{{ $expertQuestion->status }}">
                        <i
                            class="fas 
                            @if ($expertQuestion->status == 'pending') fa-clock
                            @elseif($expertQuestion->status == 'assigned') fa-user-check
                            @elseif($expertQuestion->status == 'answered') fa-check-circle
                            @elseif($expertQuestion->status == 'closed') fa-lock
                            @elseif($expertQuestion->status == 'rejected') fa-times-circle @endif"></i>
                        {{ __('labels.' . $expertQuestion->status) }}
                    </span>
                    <span class="meta-badge">
                        <i class="far fa-calendar"></i>
                        {{ $expertQuestion->created_at->format('M d, Y') }}
                    </span>
                </div>
            </div>
            <div class="d-flex gap-2">

                @can('update', $expertQuestion)
                    <button type="button" class="btn-action" data-bs-toggle="modal" data-bs-target="#editQuestionModal"
                        title="{{ __('labels.edit_question') }}">
                        <i class="fas fa-edit"></i>
                    </button>
                @endcan

                @can('delete', $expertQuestion)
                    <button type="button" class="btn-action"
                        onclick="deleteRecordFrom('{{ route('expert-questions.destroy', $expertQuestion->id) }}')"
                        title="{{ __('labels.delete') }}">
                        <i class="fas fa-trash"></i>
                    </button>
                @endcan

                <button class="btn-action" onclick="copyToClipboard(window.location.href, this)"
                    title="{{ __('labels.copy_link') }}">
                    <i class="fas fa-link"></i>
                </button>
            </div>
        </div>

        {{-- Two Column Layout for Expert and Asker --}}
        <div class="row g-4 mb-4">
            {{-- Expert Column --}}
            <div class="col-md-6">
                <div class="info-card">
                    <div class="card-header">
                        <small><i class="fas fa-user-tie me-1"></i> {{ __('labels.assigned_expert') }}</small>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-3">
                            <img src="{{ $expertQuestion->expert?->user?->profile_image ?? asset('assets/images/no-img-avatar.png') }}"
                                class="expert-avatar" alt="Expert">
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h6 class="mb-1">
                                            {{ $expertQuestion->expert->user->name ?? __('labels.expert_name') }}</h6>
                                        @if ($expertQuestion->expert?->is_verified)
                                            <span class="expert-tag verified">
                                                <i class="fas fa-check-circle me-1"></i> {{ __('labels.expert_verified') }}
                                            </span>
                                        @endif
                                    </div>
                                    <button class="btn btn-sm btn-link p-0 text-primary"
                                        onclick="window.open('{{route('experts.show',['expert' => $expertQuestion->expert_id]) }}', '_blank')">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </div>

                                <p class="text-muted small mb-1">{{ $expertQuestion->expert->bio ?? '' }}</p>
                                <p class="text-muted small mb-2">{{ $expertQuestion->expert->company ?? '' }}</p>

                                <div class="d-flex gap-3 mt-2">
                                    <div>
                                        <span class="fw-bold">{{ $expertQuestion->expert->total_answers ?? 0 }}</span>
                                        <span class="text-muted small"> {{ __('labels.expert_answers') }}</span>
                                    </div>
                                    <div>
                                        <span class="fw-bold">{{ $expertQuestion->expert->helpful_votes ?? 0 }}</span>
                                        <span class="text-muted small"> {{ __('labels.helpful') }}</span>
                                    </div>
                                    <div>
                                        <span class="fw-bold">{{ $expertQuestion->expert->experience_years ?? 0 }}y</span>
                                        <span class="text-muted small"> {{ __('labels.exp_short') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Asker Column --}}
            <div class="col-md-6">
                <div class="info-card">
                    <div class="card-header">
                        <small><i class="fas fa-user me-1"></i> {{ __('labels.asked_by') }}</small>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-3">
                            <img src="{{ $expertQuestion->asker?->profile_image ?? asset('assets/images/no-img-avatar.png') }}"
                                class="expert-avatar" alt="Expert">
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h6 class="mb-1">
                                            {{ $expertQuestion->asker->name ?? __('labels.unknown_user') }}
                                        </h6>
                                        <small class="text-muted">{{ $expertQuestion->asker->email ?? '' }}</small>
                                    </div>
                                    <button class="btn btn-sm btn-link p-0 text-primary"
                                        onclick="window.open('{{route('users.show',['user' => $expertQuestion->asked_by]) }}', '_blank')">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Meta Information Grid --}}
        <div class="meta-grid mb-4">
            <div class="meta-card">
                <div class="label">
                    <i class="fas fa-tag text-primary"></i> {{ __('labels.category') }}
                </div>
                <div class="value value-1">{{ $expertQuestion->category?->name ?? 'Uncategorized' }}</div>
            </div>

            <div class="meta-card">
                <div class="label">
                    <i class="fas fa-chart-bar me-1 text-primary"></i>
                    {{ __('labels.stats') }}
                </div>
                <div class="value">
                    <div class="stats-horizontal">
                        <div class="stats-horizontal-item">
                            <i class="fas fa-eye text-primary"></i>
                            <div>
                                <span class="stats-horizontal-value">{{ $expertQuestion->views_count ?? 0 }}</span>
                                <span class="stats-horizontal-label">{{ __('labels.views') }}</span>
                            </div>
                        </div>
                        <div class="stats-divider"></div>
                        <div class="stats-horizontal-item">
                            <i class="fas fa-thumbs-up text-success"></i>
                            <div>
                                <span class="stats-horizontal-value" data-exp-question-id="{{ $expertQuestion->id }}"
                                    data-vote-type="upvote" data-counter-type="badge">{{ $expertQuestion->upvote_count ?? 0 }}
                                </span>
                                <span class="stats-horizontal-label">{{ __('labels.helpful_count') }}</span>
                            </div>
                        </div>
                        <div class="stats-divider"></div>
                        <div class="stats-horizontal-item">
                            <i class="fas fa-thumbs-down text-danger"></i>
                            <div>
                                <span class="stats-horizontal-value" data-exp-question-id="{{ $expertQuestion->id }}"
                                    data-vote-type="downvote"
                                    data-counter-type="badge">{{ $expertQuestion->downvote_count ?? 0 }}</span>
                                <span class="stats-horizontal-label">{{ __('labels.not_helpful_count') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Question Details --}}
        <div class="section-card">
            <div class="card-header">
                <h5><i class="fas fa-question-circle text-primary"></i> {{ __('labels.question_details') }}</h5>
            </div>
            <div class="card-body">
                <div class="view-content">
                    {!! nl2br(e($expertQuestion->question)) !!}
                </div>
            </div>
        </div>

        @isset($expertQuestion->assetQuestions)
            @include('components.form.file-manager.uploaded-files', [
                'assets' => $expertQuestion->assetQuestions,
                'readonly' => true,
                'uploadedFileInputName' => 'existing_assets_1',
                'titleLabelHtml' =>
                    '<i class="fas fa-paperclip text-primary"></i> ' .
                    __('labels.question_attachments') .
                    ' <span class="attachment-badge badge-question">' .
                    __('labels.from_questioner') .
                    '</span>',
            ])
        @endisset

        {{-- Answer Section --}}
        <div class="section-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="fas fa-check-circle text-success"></i> {{ __('labels.expert_answer') }}</h5>
                @if ($expertQuestion->answered_at)
                    <small class="text-muted">
                        <i class="far fa-clock me-1"></i>
                        {{ date('M d, Y H:i', strtotime($expertQuestion->answered_at)) }}
                    </small>
                @endif
            </div>
            <div class="card-body">
                @if ($expertQuestion->answer)
                    <div class="answer-wrapper mb-4">
                        <div class="view-content">
                            {!! nl2br(e($expertQuestion->answer)) !!}
                        </div>
                    </div>
                    @isset($expertQuestion->assetAnswers)
                        @include('components.form.file-manager.uploaded-files', [
                            'assets' => $expertQuestion->assetAnswers,
                            'uploadedFileInputName' => 'existing_assets_2',
                            'readonly' => true,
                            'titleLabelHtml' =>
                                '<i class="fas fa-paperclip text-success me-1"></i> ' .
                                __('labels.answer_attachments') .
                                ' <span class="attachment-badge badge-answer">' .
                                __('labels.from_expert') .
                                '</span>',
                        ])
                    @endisset
                @else
                    <div class="text-center py-4 text-muted">
                        <i class="fas fa-clock fa-2x mb-2"></i>
                        <p>{{ __('labels.no_answer_yet') }}</p>
                    </div>
                @endif
                <div class="d-flex justify-content-between align-items-center border-top pt-3">
                    <div class="vote-buttons">
                        @can('vote', $expertQuestion)
                        <button class="btn btn-vote btn-sm me-3 {{ $userVote && $userVote->type == 'upvote' ? 'btn-success active' : 'btn-outline-success' }}"
                            data-exp-question-id="{{ $expertQuestion->id }}" data-vote-type="upvote"
                            data-action="vote-button" onclick="voteExpQuestion(this)">
                            <i class="fas fa-thumbs-up me-1"></i>{{ __('labels.helpful') }}
                        </button>
                        <button class="btn btn-vote btn-sm {{ $userVote && $userVote->type == 'downvote' ? 'btn-danger active' : 'btn-outline-danger' }}"
                            data-exp-question-id="{{ $expertQuestion->id }}" data-vote-type="downvote"
                            data-action="vote-button" onclick="voteExpQuestion(this)">
                            <i class="fas fa-thumbs-down me-1"></i>{{ __('labels.not_helpful') }}
                        </button>
                        @endcan
                    </div>
                    <div>
                        @can('answer', $expertQuestion)
                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                data-bs-target="#answerModal">
                                <i class="fas fa-pen me-1"></i>
                                @if ($expertQuestion->answer)
                                    {{ __('labels.edit_answer') }}
                                @else
                                    {{ __('labels.provide_answer') }}
                                @endif
                            </button>
                        @endcan
                        {{-- <a href="#comment-form" onclick="focusMainCommentForm()" class="btn btn-primary btn-sm">
                            <i class="fas fa-reply me-1"></i>{{ __('labels.reply') }}
                        </a> --}}
                    </div>
                </div>
            </div>
        </div>
        @include('components.meta.stats', [
            'created_at' => $expertQuestion->created_at ?? null,
            'updated_at' => $expertQuestion->updated_at ?? null,
            'answered_at' => $expertQuestion->answered_at ?? null,
            'creater' => $expertQuestion->user->name ?? null,
            'creator_avatar' => $expertQuestion->user->profile_image ?? null,
        ])
    </div>
    @include('pages.expert-questions.partials.edit-answer-modal')
    @include('pages.expert-questions.partials.edit-question-modal')
@endsection

@section('js')
    <script>
        // Thread Lock/Unlock
        window.lang_confirm_lock_thread = "@lang('messages.confirm_lock_thread')";
        window.lang_confirm_unlock_thread = "@lang('messages.confirm_unlock_thread')";
        window.lang_lock_thread_title = "@lang('messages.lock_thread_title')";
        window.lang_unlock_thread_title = "@lang('messages.unlock_thread_title')";
        window.lang_lock = "@lang('messages.lock')";
        window.lang_unlock = "@lang('messages.unlock')";

        // Thread Approve/Unapprove
        window.lang_confirm_approve_thread = "@lang('messages.confirm_approve_thread')";
        window.lang_confirm_unapprove_thread = "@lang('messages.confirm_unapprove_thread')";
        window.lang_approve_thread_title = "@lang('messages.approve_thread_title')";
        window.lang_unapprove_thread_title = "@lang('messages.unapprove_thread_title')";
        window.lang_approve = "@lang('messages.approve')";
        window.lang_unapprove = "@lang('messages.unapprove')";

        // Thread Delete
        window.lang_delete_thread_title = "@lang('messages.delete_thread_title')";
        window.lang_confirm_delete_thread = "@lang('messages.confirm_delete_thread')";

        // Thread Pin/Unpin
        window.lang_confirm_pin_thread = "@lang('messages.confirm_pin_thread')";
        window.lang_confirm_unpin_thread = "@lang('messages.confirm_unpin_thread')";
        window.lang_pin_thread_title = "@lang('messages.pin_thread_title')";
        window.lang_unpin_thread_title = "@lang('messages.unpin_thread_title')";
        window.lang_pin = "@lang('messages.pin')";
        window.lang_unpin = "@lang('messages.unpin')";

        // Mark as Answer
        window.lang_mark_answer_title = "@lang('messages.mark_answer_title')";
        window.lang_confirm_mark_answer = "@lang('messages.confirm_mark_answer')";
        window.lang_mark_answer = "@lang('messages.mark_answer')";

        // Expert Activate/Deactivate
        window.lang_activate_expert_title = "@lang('messages.activate_expert_title')";
        window.lang_deactivate_expert_title = "@lang('messages.deactivate_expert_title')";
        window.lang_activate_expert_text = "@lang('messages.activate_expert_text')";
        window.lang_deactivate_expert_text = "@lang('messages.deactivate_expert_text')";
        window.lang_confirm_activate = "@lang('messages.confirm_activate')";
        window.lang_confirm_deactivate = "@lang('messages.confirm_deactivate')";
        window.lang_activated = "@lang('messages.activated')";
        window.lang_deactivated = "@lang('messages.deactivated')";

        // Expert Verify/Unverify
        window.lang_verify_expert_title = "@lang('messages.verify_expert_title')";
        window.lang_unverify_expert_title = "@lang('messages.unverify_expert_title')";
        window.lang_verify_expert_text = "@lang('messages.verify_expert_text')";
        window.lang_unverify_expert_text = "@lang('messages.unverify_expert_text')";
        window.lang_confirm_verify = "@lang('messages.confirm_verify')";
        window.lang_confirm_unverify = "@lang('messages.confirm_unverify')";
        window.lang_verified = "@lang('messages.verified')";
        window.lang_unverified = "@lang('messages.unverified')";
        window.lang_delete_question_confirmation = "@lang('messages.delete_question_confirmation')"
    </script>
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
    <script src="{{ asset('assets/custom/js/common/file-manger.js') }}"></script>
    <script src="{{ asset('assets/custom/js/expert-questions/show.js') }}?v=2"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initializeFilePond();
        });

        function addLinkField() {
            const container = document.getElementById('links-container');
            const newField = document.createElement('div');
            newField.className = 'input-group mb-2 link-item';
            newField.innerHTML = `
                <input type="url" class="form-control" name="links[]" placeholder="https://example.com">
                <button class="btn btn-outline-danger" type="button" onclick="this.closest('.link-item').remove()">
                    <i class="fas fa-trash"></i>
                </button>
            `;
            container.appendChild(newField);
        }

        function addQuestionLinkField() {
            const container = document.getElementById('question-links-container');
            const newField = document.createElement('div');
            newField.className = 'input-group mb-2 link-item';
            newField.innerHTML = `
                <input type="url" class="form-control" name="links[]" placeholder="https://example.com">
                <button class="btn btn-outline-danger" type="button" onclick="this.closest('.link-item').remove()">
                    <i class="fas fa-trash"></i>
                </button>
            `;
            container.appendChild(newField);
        }
    </script>
@endsection