@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">Edit 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="#">Edit Question</a></li>
                </ul>
            </div>
        </div>

        <div class="dashboard_main-body">
            {{-- Error messages --}}
            @if ($errors->any())
                <div
                    style="background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; border-radius: 6px; padding: 15px; margin-bottom: 20px;">
                    <strong>Whoops!</strong> There were some problems with your input:
                    <ul style="margin-top: 10px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('questions.update', $question->id) }}" method="POST">
                @csrf
                @method('PUT')

                <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 full-w">
                                        <label class="form-label">Select Question Type</label>
                                        <select name="type" class="form-control question_type" required>
                                            <option value="" hidden>Select Question Type</option>
                                            <option value="Open ended Questions"
                                                {{ $question->type === 'Open ended Questions' ? 'selected' : '' }}>
                                                Open ended Questions
                                            </option>
                                            <option value="Yes or No Question"
                                                {{ $question->type === 'Yes or No Question' ? 'selected' : '' }}>
                                                Yes or No Question
                                            </option>
                                            <option value="Multiple Choices (Multi select)" data-value="multi_choice"
                                                {{ $question->type === 'Multiple Choices (Multi select)' ? 'selected' : '' }}>
                                                Multiple Choices (Multi select)
                                            </option>
                                            <option value="Multiple Choice (Single Select)" data-value="multi_choice"
                                                {{ $question->type === 'Multiple Choice (Single Select)' ? 'selected' : '' }}>
                                                Multiple Choice (Single Select)
                                            </option>
                                        </select>
                                    </div>

                                    {{-- Question Text --}}
                                    <div class="form-group full-w">
                                        <label class="form-label">Write Question here</label>
                                        <input type="text" name="question" class="form-control question_title_input"
                                            placeholder="Write Question here" required
                                            value="{{ old('question', $question->question) }}" />
                                    </div>

                                    {{-- Multiple Choice Options --}}
                                    <div class="form-group full-w tags-wrapper"
                                        style="{{ in_array($question->type, ['Multiple Choices (Multi select)', 'Multiple Choice (Single Select)']) ? 'display:block;' : 'display:none;' }}">
                                        <label class="form-label">Add Options</label>
                                        <input type="text" id="tagInput" class="form-control" placeholder="Choices" />
                                        <span class="form-hint">
                                            <img src="{{ asset('assets/images/icons/info.svg') }}" alt="icon"
                                                class="svg" />
                                            Press Enter to add an option
                                        </span>
                                        <div id="tagsContainer" class="tag-container"></div>
                                        <input type="hidden" name="answers" id="tagsList"
                                            value="{{ implode(',', json_decode($question->answer ?? '[]')) }}" />
                                    </div>
                                </div>

                                <div class="form-buttons">
                                    <button type="submit" class="btn btn-primary">Update Question</button>
                                    <a href="{{ route('questions.index') }}" class="btn btn-reset">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </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>

    <script>
        const selectEl = document.querySelector(".question_type");
        const previewEl = document.querySelector(".tags-wrapper");
        const accordionBody = previewEl.closest(".accordion-body");

        selectEl.addEventListener("change", function() {
            const selectedOption = this.options[this.selectedIndex];
            const dataValue = selectedOption.getAttribute("data-value");

            if (dataValue === "multi_choice") {
                previewEl.style.display = "block";
            } else {
                previewEl.style.display = "none";
            }
            if (accordionBody) {
                accordionBody.style.maxHeight = accordionBody.scrollHeight + "px";
            }
        });

        // Initialize tags for edit mode
        const existingTags = "{{ implode(',', json_decode($question->answer ?? '[]')) }}".split(',').filter(Boolean);
        const tagsContainer = document.getElementById('tagsContainer');
        const tagsListInput = document.getElementById('tagsList');
        const tagInput = document.getElementById('tagInput');
        let tags = existingTags;

        function renderTags() {
            tagsContainer.innerHTML = '';
            tags.forEach(tag => {
                const span = document.createElement('span');
                span.className = 'tag';
                span.textContent = tag;

                const removeBtn = document.createElement('span');
                removeBtn.className = 'remove-tag';
                removeBtn.innerHTML = '&times;';
                removeBtn.addEventListener('click', () => {
                    tags = tags.filter(t => t !== tag);
                    updateTagsInput();
                    renderTags();
                });

                span.appendChild(removeBtn);
                tagsContainer.appendChild(span);
            });
        }

        function updateTagsInput() {
            tagsListInput.value = tags.join(',');
        }

        tagInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && this.value.trim() !== '') {
                e.preventDefault();
                const newTag = this.value.trim();
                if (!tags.includes(newTag)) {
                    tags.push(newTag);
                    updateTagsInput();
                    renderTags();
                    this.value = '';
                }
            }
        });

        renderTags();
    </script>
@endsection