@extends('layouts.app')

@section('content')
    <div class="content container">
        <div class="bg-white shadow-sm p-3 rounded d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
                @component('components.breadcrumb', [
                    'links' => [
                        ['name' => 'Question Bank', 'url' => ''],
                        ['name' => 'Questions', 'url' => route('questions.index')],
                        ['name' => 'Edit Question', 'url' => ''],
                    ],
                ])
                @endcomponent
            
                
            </div>
            <nav class="nav nav-tabs" id="questionTabs" role="tablist">
                <button class="nav-link active mx-2" id="details-tab" data-bs-toggle="tab" data-bs-target="#details"
                    type="button" role="tab" aria-controls="details" aria-selected="true"><span>1</span> Details</button>
                <button class="nav-link mx-2" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings"
                    type="button" role="tab" aria-controls="settings" aria-selected="false"><span>2</span> Settings</button>
                <button class="nav-link mx-2" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution"
                    type="button" role="tab" aria-controls="solution" aria-selected="false"><span>3</span> Solution</button>
                <button class="nav-link mx-2" id="attachment-tab" data-bs-toggle="tab" data-bs-target="#attachment"
                    type="button" role="tab" aria-controls="attachment" aria-selected="false"><span>4</span> Attachment</button>
            </nav>
        </div>

        @include('layouts.partials.toast')

        <div class="card bg-white shadow-sm mb-4">
            <div class="card-body p-4">
                <form id="updateQuestionForm" action="{{ route('questions.update', $question) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="question_type_id" value="{{ $questionType->id }}">

                    <div class="tab-content" id="questionTabsContent">
                        <div class="tab-pane fade show active" id="details" role="tabpanel">
                            @if ($questionType->id == 1)
                                @include('dashboard.questions.tabs.details.1', ['question' => $question])
                            @elseif ($questionType->id == 2)
                                @include('dashboard.questions.tabs.details.2', ['question' => $question])
                            @elseif ($questionType->id == 3)
                                @include('dashboard.questions.tabs.details.3', ['question' => $question])
                            @elseif ($questionType->id == 4)
                                @include('dashboard.questions.tabs.details.4', ['question' => $question])
                            @elseif ($questionType->id == 5)
                                @include('dashboard.questions.tabs.details.5', ['question' => $question])
                            @elseif ($questionType->id == 6)
                                @include('dashboard.questions.tabs.details.6', ['question' => $question])
                            @elseif ($questionType->id == 7)
                                @include('dashboard.questions.tabs.details.7', ['question' => $question])
                          
                            @endif
                        </div>
                        <div class="tab-pane fade" id="settings" role="tabpanel">
                            @include('dashboard.questions.tabs.settings', ['question' => $question])
                        </div>
                        <div class="tab-pane fade" id="solution" role="tabpanel">
                            @include('dashboard.questions.tabs.solution', ['question' => $question])
                        </div>
                        <div class="tab-pane fade" id="attachment" role="tabpanel">
                            @include('dashboard.questions.tabs.attachment', ['question' => $question])
                        </div>
                    </div>

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">Update Question</button>
                        <a href="{{ route('questions.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ensure CKEditor updates form data before submission
            const form = document.getElementById('updateQuestionForm');
            if (form) {
                form.addEventListener('submit', function(event) {
                    // Update all CKEditor instances
                    for (let instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                    // Uncomment the line below to debug form data
                    // console.log(new FormData(form));
                });
            }
        });
    </script>

    <style>
        .nav-tabs .nav-link {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px 10px 0 0;
            border-bottom: none;
            padding: 10px 20px;
            color: #6c757d;
            font-weight: 500;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .nav-tabs .nav-link.active {
            background-color: #3e61b5;
            color: #ffffff;
            border-color: #fff;
        }

        .nav-tabs .nav-link:hover {
            background-color: #3e61b5;
            color: #ffffff;
            border-color: #fff;
        }
    </style>
@endsection