@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>
                <h5 class="m-0 fw-bold">Question Details</h5>
            </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 action="{{ route('questions.store') }}" method="POST" 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 show active" 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>

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

                        <!-- Solution Tab (Step 3) -->
                        <div class="tab-pane fade" id="solution" role="tabpanel" aria-labelledby="solution-tab">
                            @include('dashboard.questions.tabs.solution')
                        </div>

                        <!-- Attachment Tab (Step 4) -->
                        <div class="tab-pane fade" id="attachment" role="tabpanel" aria-labelledby="attachment-tab">
                            @include('dashboard.questions.tabs.attachment')
                        </div>
                    </div>


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

                </form>
            </div>
        </div>
    </div>

    <script></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

<script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>