@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="settings-tab" data-bs-toggle="tab" data-bs-target="#settings"
                    type="button" role="tab" aria-controls="settings" aria-selected="false">
                    Question Details</button>
                <button class="nav-link mx-2" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button"
                    role="tab" aria-controls="details" aria-selected="true">
                    Question Content</button>


            </nav>
        </div>

        @include('components.alert')

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

                    <div class="tab-content" id="questionTabsContent">
                        <div class="tab-pane fade" 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 class="mt-4 d-flex gap-2 align-items-center justify-content-end">
                                <button type="submit" class="btn btn-outline-primary btn-sm radius-8">Update
                                    Question</button>
                                <a href="{{ route('questions.index') }}"
                                    class="btn btn-outline-secondary btn-sm radius-8">Cancel</a>
                            </div>
                        </div>
                        <div class="tab-pane fade show active" id="settings" role="tabpanel">
                            @include('dashboard.questions.tabs.settings', ['question' => $question])

                            <div class="text-end">
                                <button type="button" class="btn btn-outline-success btn-sm radius-8" id="nextToDetailsTab"
                                    data-bs-target="#details">
                                    Next
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <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
@push('scripts')
    <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();
                    }
                });
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const nextButton = document.getElementById('nextToDetailsTab');
            nextButton.addEventListener('click', function(e) {
                e.preventDefault();
                const detailsTab = new bootstrap.Tab(document.getElementById('details-tab'));
                detailsTab.show();
            });


            $('#updateQuestionForm').on('submit', function(e) {
                e.preventDefault();

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('questions.update', $question->id) }}",

                    type: "POST",
                    data: new FormData($('#updateQuestionForm')[0]),
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.status === 'success') {
                            toastr.success(response.message);
                            setTimeout(function() {
                                window.location.href = "{{ route('questions.index') }}";
                            }, 1500);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                toastr.error(value[0]);
                            });
                        } else {
                            let res = xhr.responseJSON;
                             let message = res?.error || res?.message || 'Something went wrong!';
                            toastr.error(message);
                        }
                    }
                });

            });

        });
    </script>
@endpush