@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>
                <div class="m-0 fw-bold fs-5">Question Details</div>
            </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="createQuestionForm" novalidate>
                    @csrf
                    <input type="hidden" name="question_type_id" value="{{ $questionType->id }}">

                    <div class="tab-content" id="questionTabsContent">
                        <!-- Details Tab (Step 1) -->
                        <div class="tab-pane fade " id="details" role="tabpanel" aria-labelledby="details-tab">
                            @php
                                $detailsView = "dashboard.questions.tabs.details.{$questionType->id}";
                            @endphp

                            @if (view()->exists($detailsView))
                                @include($detailsView)
                            @else
                                <p class="text-danger">Please Choose Valid Type </p>
                            @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"
                                    id="saveDetailsButton">Save Question</button>
                                <a href="{{ route('questions.index') }}"
                                    class="btn btn-outline-secondary btn-sm radius-8">Cancel</a>
                            </div>

                        </div>

                        <!-- Settings Tab (Step 2) -->
                        <div class="tab-pane fade show active" id="settings" role="tabpanel"
                            aria-labelledby="settings-tab">
                            @include('dashboard.questions.tabs.settings')

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

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

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('questions.store') }}",
                    type: "POST",
                    data: new FormData($('#createQuestionForm')[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