@extends('layouts/layoutMaster')

@section('title', 'Terms & Condition')

@section('vendor-style')
    @vite(['resources/assets/vendor/libs/quill/typography.scss', 'resources/assets/vendor/libs/highlight/highlight.scss', 'resources/assets/vendor/libs/quill/katex.scss', 'resources/assets/vendor/libs/quill/editor.scss'])

@endsection

@section('vendor-script')

    @vite(['resources/assets/vendor/libs/quill/katex.js', 'resources/assets/vendor/libs/highlight/highlight.js', 'resources/assets/vendor/libs/quill/quill.js'])
@endsection

@section('page-script')
    @vite(['resources/assets/js/faqs.js'])
    <script>
        // window.id = "{{ $course->id ?? '' }}";
        window.csrfToken = "{{ csrf_token() }}";
        window.faqCreateUrl = "{{ route('master-settings-faqs.store') }}";
        window.faqUrl = "{{ route('master-settings-faqs.index') }}";
        window.storeQuestionUrl = "{{ route('questions.store') }}";
        window.updateTopicUrl = "{{ route('master-settings-faqs.update', ':id') }}";
        window.statusQueUpdateUrl = "{{ route('questions.update', ':id') }}";
        window.queDetails = "{{ route('questions.show', ':id') }}";
    </script>
@endsection

@section('content')

    <div class="card shadow-sm border rounded-3 viewDiv">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">FAQ</h5>
            <button type="button" class="btn btn-label-primary waves-effect editFormBtn" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasAddFaq">
                <span class="icon-base ti tabler-plus icon-22px"></span>Add FAQ
            </button>
        </div>

        <div class="card-body">
            <div class="row g-6">
                <div class="col-md">
                    <small class="fw-medium text-uppercase">Frequently Asked Questions</small>
                    <div class="accordion mt-3 accordion-custom-button" id="accordionCustom">
                        @foreach ($topics as $key => $topic)
                            <div class="accordion-item {{ $key == 0 ? 'active' : '' }}">
                                <h2 class="accordion-header d-flex" id="headingCustom{{ $key }}">
                                    <button type="button" class="accordion-button {{ $key == 0 ? '' : 'collapsed' }}"
                                        data-bs-toggle="collapse" data-bs-target="#accordionCustom{{ $key }}"
                                        aria-expanded="false" aria-controls="accordionCustom{{ $key }}">
                                        <div class="col-md-10">
                                            {{ $topic->name }}
                                        </div>
                                    </button>
                                </h2>

                                <div id="accordionCustom{{ $key }}"
                                    class="accordion-collapse collapse {{ $key == 0 ? 'show' : '' }}"
                                    aria-labelledby="headingCustom{{ $key }}" data-bs-parent="#accordionCustom">
                                    <div class="accordion-body">
                                        <div class="d-flex">
                                            <div class="col-md-11">
                                                <b>{{ $topic->name }}</b>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="d-flex flex-row-reverse">
                                                    <div class="d-inline-block me-2">
                                                        <a href="javascript:;"
                                                            class="btn btn-icon btn-text-secondary rounded-pill waves-effect dropdown-toggle hide-arrow"
                                                            data-bs-toggle="dropdown"><i
                                                                class="icon-base ti tabler-dots-vertical"></i></a>
                                                        <ul class="dropdown-menu dropdown-menu-end m-0">
                                                            <li><a href="javascript:;" class="dropdown-item editTopic"
                                                                    data-bs-toggle="offcanvas"
                                                                    data-bs-target="#offcanvasAddFaq"
                                                                    data-topic_id="{{ $topic->id }}"
                                                                    data-topic_name="{{ $topic->name }}">Rename</a></li>
                                                            <li><a href="javascript:;" class="dropdown-item addQa"
                                                                    data-topic_id="{{ $topic->id }}"
                                                                    data-bs-toggle="offcanvas"
                                                                    data-bs-target="#offcanvasAddQuestion">Add Q&A</a></li>
                                                            <div class="dropdown-divider"></div>
                                                            <li><a href="javascript:;"
                                                                    class="dropdown-item text-danger delete-topic"
                                                                    onclick="statusTopicUpdate({{ $topic->id }}, 'deleted')">Delete</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="form-check form-switch mt-2">
                                                        <input class="form-check-input" type="checkbox" role="switch"
                                                            id="toggleSwitch{{ $topic->id }}"
                                                            onChange="statusTopicUpdate({{ $topic->id }}, '{{ ($topic->status === 'active' ? 'inactive' : 'active') . '\'' }})"
                                                            {{ $topic->status == 'active' ? 'checked' : '' }}>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @foreach ($topic->questions as $k => $question)
                                            <div class="accordion mt-3 accordion-custom-button" id="accordionCustom">
                                                <div class="accordion-item border-top">
                                                    <h2 class="accordion-header" id="headingCustomQ{{ $k }}">
                                                        <button type="button" class="accordion-button collapsed"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#accordionCustomQ{{ $k }}"
                                                            aria-expanded="false"
                                                            aria-controls="accordionCustom{{ $k }}">
                                                            <div class="col-md-9">
                                                                <strong>Question:</strong> {{ $question->question }}
                                                            </div>
                                                        </button>
                                                    </h2>
                                                    <div id="accordionCustomQ{{ $k }}"
                                                        class="accordion-collapse collapse"
                                                        data-bs-parent="#accordionTopic{{ $question->id }}">
                                                        <div class="accordion-body py-2 px-4">
                                                            <div class="d-flex">
                                                                <div class="col-md-11">
                                                                    <b>{{ $question->question }}</b>
                                                                </div>
                                                                <div class="col-md-1">
                                                                    <div class="d-flex flex-row-reverse">
                                                                        <div class="d-inline-block me-2">
                                                                            <a href="javascript:;"
                                                                                class="btn btn-icon btn-text-secondary rounded-pill waves-effect dropdown-toggle hide-arrow"
                                                                                data-bs-toggle="dropdown"><i
                                                                                    class="icon-base ti tabler-dots-vertical"></i></a>
                                                                            <ul class="dropdown-menu dropdown-menu-end m-0">
                                                                                <li><a href="javascript:;"
                                                                                        class="dropdown-item editQa"
                                                                                        data-que_id="{{ $question->id }}"
                                                                                        data-bs-toggle="offcanvas"
                                                                                        data-bs-target="#offcanvasAddQuestion">Edit</a>
                                                                                </li>
                                                                                <div class="dropdown-divider"></div>
                                                                                <li><a href="javascript:;"
                                                                                        class="dropdown-item text-danger delete-que"
                                                                                        data-que_id="{{ $question->id }}"
                                                                                        onclick="statusQueUpdate({{ $question->id }}, 'deleted')">Delete</a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                        <div class="form-check form-switch mt-2">
                                                                            <input class="form-check-input" type="checkbox"
                                                                                role="switch"
                                                                                id="toggleSwitch{{ $question->id }}"
                                                                                onChange="statusQueUpdate({{ $question->id }}, '{{ ($question->status === 'active' ? 'inactive' : 'active') . '\'' }})"
                                                                                {{ $question->status == 'active' ? 'checked' : '' }}>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <p><strong>Answer:</strong> {!! $question->answer !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddQuestion"
            aria-labelledby="offcanvasAddFaqLabel">
            <div class="offcanvas-header border-bottom">
                <h5 id="offcanvasAddFaqLabel" class="offcanvas-title">Add New Q&A</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
                <form class="add-new-question pt-0" id="addNewQuestionForm">
                    @csrf
                    <input type="hidden" name="id" id="que_id">
                    <input type="hidden" name="faq_topic_id" id="faq_topic_id">
                    <div class="mb-6 form-control-validation">
                        <label class="form-label" for="add-question">Question</label>
                        <input type="text" class="form-control" id="add-question" placeholder="Enter Question"
                            name="question" aria-label="Enter Question" />
                        <span class="text-danger error_question"></span>
                    </div>
                    <div class="mb-6 form-control-validation">
                        <label class="form-label" for="add-answer">Answer</label>
                        <div class="snow-editor"></div>
                        <textarea class="form-control d-none" name="answer" id="answer" cols="30" rows="5"
                            placeholder="Enter Answer"></textarea>
                        <span class="text-danger error_answer"></span>
                    </div>
                    <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
                    <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
                </form>
            </div>
        </div>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddFaq" aria-labelledby="offcanvasAddFaqLabel">
            <div class="offcanvas-header border-bottom">
                <h5 id="offcanvasAddFaqLabel" class="offcanvas-title">Add FAQ Topic</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
                <form class="add-new-faq pt-0" id="addNewTopicForm">
                    @csrf
                    <input type="hidden" name="id" id="topic_id">
                    <div class="mb-6 form-control-validation">
                        <label class="form-label" for="add-topic-name">Topic</label>
                        <input type="text" class="form-control" id="add-topic-name" placeholder="Enter Topic Name"
                            name="topic_name" aria-label="Enter Topic Name" />
                        <span class="text-danger error_topic_name"></span>
                    </div>
                    <button type="submit" class="btn btn-primary me-3 data-submit">Submit</button>
                    <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Discard</button>
                </form>
            </div>
        </div>
    @endsection