@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">Add 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="#">Add Question</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dashboard_main-body">
            <form action="{{ route('questions.store') }}" method="POST">
                @csrf
                <div class="accordion-list question_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">
                                    <div class="form-group full-w">
                                        <label class="form-label">
                                            Select Question Type
                                        </label>
                                        <select class="form-control question_type" placeholder="Select Question Type ">
                                            <option value="" hidden selected>
                                                Select Question Type
                                            </option>
                                            <option value="Open ended Questions">
                                                Open ended Questions
                                            </option>
                                            <option value="Yes or No Question">
                                                Yes or No Question
                                            </option>
                                            <option value="Multiple Choices (Multi select)" data-value="multi_choice">
                                                Multiple Choices
                                                (Multi select)
                                            </option>
                                            <option value="Multiple Choice (Single Select)" data-value="multi_choice">
                                                Multiple Choice
                                                (Single Select)
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group full-w">
                                        <label class="form-label">
                                            Write Question here
                                        </label>
                                        <input type="text" class="form-control question_title_input"
                                            placeholder="Write Question here" />
                                    </div>
                                    <div class="form-group full-w tags-wrapper" style="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="tags" id="tagsList" />
                                    </div>
                                </div>
                                <div class="form-buttons">
                                    <button type="button" class="btn btn-secondary addNewBtn">
                                        Save & Add New
                                    </button>
                                    <button type="reset" class="btn btn-reset">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Questions Preview
                            <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="questions-list">
                                </div>
                                <div class="form-buttons">
                                    <button type="submit" class="btn btn-primary">
                                        Save All
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>




            @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

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
        integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
    </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";
            }
        });
    </script>

    <script>
        const removeBtns = document.querySelectorAll(".remove-q");

        removeBtns.forEach((remove) => {
            remove.addEventListener("click", () => {
                const option = remove.closest(".question-item");
                const container = remove.closest(".accordion-body");
                option.remove();

                if (container) {
                    container.style.maxHeight =
                        container.scrollHeight + "px";
                }
            });
        });
    </script>
@endsection