@extends('layout')

@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">View Question</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('questions.index') }}">Questions</a></li>
                    <li><a href="#">View Question</a></li>
                </ul>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="accordion-list">
                <div class="accordion-item">
                    <h3 class="accordion-title">
                        Question Information
                        <span class="icon">
                            <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                class="svg" />
                        </span>
                    </h3>

                    <div class="accordion-body">
                        <div class="body-content">
                            <div class="form-grid">

                                {{-- Question Type --}}
                                <div class="form-group {{ ! $question->options_count ? 'full-w' : '' }}">
                                    <label class="form-label">Question Type</label>
                                    <input type="text" class="form-control" value="{{ $question->type }}" readonly>
                                </div>
                                 {{-- Options Count --}}
                                 @if ($question->options_count)
                                     <div class="form-group">
                                         <label class="form-label">Options Count</label>
                                         <input type="text" class="form-control" value="{{ $question->options_count }}"
                                             readonly>
                                     </div>
                                 @endif
                                {{-- Question Text --}}
                                <div class="form-group full-w">
                                    <label class="form-label">Question</label>
                                    <input type="text" class="form-control" value="{{ $question->question }}" readonly>
                                </div>

                                {{-- Answers (if applicable) --}}
                                @if (in_array($question->type, [
                                        'Multiple Choices (Multi select)',
                                        'Multiple Choice (Single Select)',
                                        'Yes or No Question',
                                    ]))
                                    <div class="form-group full-w">
                                        <label class="form-label">Answers</label>
                                        @php
                                            $answers = json_decode($question->answer ?? '[]');
                                        @endphp
                                        @if (!empty($answers))
                                            <div id="tagsContainer" class="tag-container">

                                                @foreach ($answers as $ans)
                                                    <span class="tag"> {{ $ans }} </span>
                                                @endforeach
                                            </div>
                                        @else
                                            <p style="color: #6c757d;">No answers available.</p>
                                        @endif
                                    </div>
                                @endif

                               
                            </div>

                            <div class="form-buttons">
                                <a href="{{ route('questions.edit', $question->id) }}" class="btn btn-primary">
                                    Edit Question
                                </a>
                                <a href="{{ route('questions.index') }}" class="btn btn-reset">Back to List</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>
@endsection