@extends('mental.layouts.app')

@section('content')
    <div class="container py-4">
        <!-- Main Header with Right-Aligned Button -->
        <div class="main-header mb-4 d-flex justify-content-between align-items-center">
            <h1 class="h2">State-Trait Anxiety Inventory (STAI)</h1>
            <button type="button" class="btn btn-sm btn-outline-secondary show-view" data-view="dashboard">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </button>
        </div>

        <!-- Instructions Section -->
        <h2 class="h5">Instructions</h2>
        <p>
        A number of statements which people have used to describe themselves are given below. Read each statement and then circle the appropriate number to the right of the statement to indicate how you feel right now, that is, at this moment. There are no right or wrong answers. Do not spend too much time on any one statement but give the answer which seems to describe your present feelings best.
        </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.staiStore') }}" data-redirect="{{ route('mentalHealth.dashboard') }}">
        <!-- Centered Content with Card and Progress Bar -->
        <div class="d-flex justify-content-center min-vh-75 align-items-center">
            <div class="col-sm-12 col-xl-6">

                <!-- Progress Bar -->
                <div class="progress mb-4">
                    <div class="progress-bar bg-primary" id="progress-bar" role="progressbar" style="width: 0%;"
                        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                </div>
 
            
                <!-- Question 1 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question" data-question="1">
               <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel calm</h6>
                    <input type="hidden" name="question" value="I feel calm">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question1"
                                id="question1_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question1_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 2 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="2">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel secure</h6>
                    <input type="hidden" name="question"
                        value="I feel secure">


                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question2"
                                id="question2_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question2_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 3 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am tense</h6>
                    <input type="hidden" name="question"
                        value="I am tense">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question3"
                                id="question3_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question3_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 4 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel strained</h6>
                    <input type="hidden" name="question"
                        value="I feel strained">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question4"
                                id="question4_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question4_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 5 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel at ease</h6>
                    <input type="hidden" name="question"
                        value="I feel at ease">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question5"
                                id="question5_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question5_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 6 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel upset</h6>
                    <input type="hidden" name="question"
                        value="I feel upset">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question6"
                                id="question6_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question6_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 7 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am presently worrying over possible misfortunes</h6>
                    <input type="hidden" name="question"
                        value="I am presently worrying over possible misfortunes">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question7"
                                id="question7_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question7_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 8 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel satisfied</h6>
                    <input type="hidden" name="question"
                        value="I feel satisfied">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question8"
                                id="question8_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question8_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>


                <!-- Question 9 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel frightened</h6>
                    <input type="hidden" name="question"
                        value="I feel frightened">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question9"
                                id="question9_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question9_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 10 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel comfortable</h6>
                    <input type="hidden" name="question"
                        value="I feel comfortable">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question10"
                                id="question10_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question10_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>


                <!-- Question 11 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel self-confident</h6>
                    <input type="hidden" name="question"
                        value="I feel self-confident">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question11"
                                id="question11_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question11_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 12 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel nervous</h6>
                    <input type="hidden" name="question"
                        value="I feel nervous">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question12"
                                id="question12_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question12_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 13 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am jittery</h6>
                    <input type="hidden" name="question" value="I am jittery">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question13"
                                id="question13_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question13_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>






                <!-- Question 14 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="14">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel indecisive</h6>
                    <input type="hidden" name="question"
                        value="I feel indecisive">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question14"
                                id="question14_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question14_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 15 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am relaxed</h6>
                    <input type="hidden" name="question"
                        value="I am relaxed">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question15"
                                id="question15_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question15_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>





                <!-- Question 16 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel content</h6>
                    <input type="hidden" name="question"
                        value="I feel content">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question16"
                                id="question16_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question16_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 17 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am worried</h6>
                    <input type="hidden" name="question"
                        value="I am worried">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question17"
                                id="question17_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question17_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 18 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel confused</h6>
                    <input type="hidden" name="question" value="I feel confused">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question18"
                                id="question18_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question18_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>

                <!-- Question 19 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel steady</h6>
                    <input type="hidden" name="question" value="I feel steady">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question19"
                                id="question19_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question19_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>


                <!-- Question 20 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
                <h2>FORM Y-1 (State Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel pleasant</h6>
                    <input type="hidden" name="question" value="I feel pleasant">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question20"
                                id="question20_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question20_{{ $i }}">{{ ['Not at all', 'Somewhat', 'Moderately so', 'Very much so'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>
                
                </div>
            
             


            
                <!-- Question 21 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel pleasant</h6>
                    <input type="hidden" name="question" value="I feel pleasant">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question21"
                                id="question21_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question21_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>

                <!-- Question 22 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="22">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel nervous and restless</h6>
                    <input type="hidden" name="question" value="I feel nervous and restless">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question22"
                                id="question22_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question22_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 23 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="23">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel satisfied with myself</h6>
                    <input type="hidden" name="question"
                        value="I feel satisfied with myself">


                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question23"
                                id="question23_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question23_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 24 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="24">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I wish I could be as happy as others seem to be</h6>
                    <input type="hidden" name="question"
                        value="I wish I could be as happy as others seem to be">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question24"
                                id="question24_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question24_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 25 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="25">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel like a failure</h6>
                    <input type="hidden" name="question"
                        value="I feel like a failure">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question25"
                                id="question25_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question25_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 26 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="26">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel rested</h6>
                    <input type="hidden" name="question"
                        value="I feel rested">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question26"
                                id="question26_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question26_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>

                <!-- Question 27 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="27">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am "calm, cool, and collected"</h6>
                    <input type="hidden" name="question"
                        value="I am 'calm, cool, and collected'">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question27"
                                id="question27_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question27_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 28 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="28">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel that difficulties are piling up so that I cannot overcome them</h6>
                    <input type="hidden" name="question"
                        value="I feel that difficulties are piling up so that I cannot overcome them">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question28"
                                id="question28_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question28_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 29 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="29">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I worry too much over something that really doesn't matter</h6>
                    <input type="hidden" name="question"
                        value="I worry too much over something that really doesn't matter">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question29"
                                id="question29_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question29_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>


                <!-- Question 30 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="30">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am happy</h6>
                    <input type="hidden" name="question"
                        value="I am happy">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question30"
                                id="question30_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question30_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 31 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="31">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I have disturbing thoughts</h6>
                    <input type="hidden" name="question"
                        value="I have disturbing thoughts">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question31"
                                id="question31_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question31_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>


                <!-- Question 32 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="32">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I lack self-confidence</h6>
                    <input type="hidden" name="question"
                        value="I lack self-confidence">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question32"
                                id="question32_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question32_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 33 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="33">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel secure</h6>
                    <input type="hidden" name="question"
                        value="I feel secure">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question33"
                                id="question33_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question33_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 34 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="34">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I make decisions easily</h6>
                    <input type="hidden" name="question" value="I make decisions easily">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question34"
                                id="question34_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question34_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>






                <!-- Question 35 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="35">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I feel inadequate</h6>
                    <input type="hidden" name="question"
                        value="I feel inadequate">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question35"
                                id="question35_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question35_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>



                <!-- Question 36 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="36">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am content</h6>
                    <input type="hidden" name="question"
                        value="I am content">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question36"
                                id="question36_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question36_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>





                <!-- Question 37 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="37">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">Some unimportant thought runs through my mind and bothers me</h6>
                    <input type="hidden" name="question"
                        value="Some unimportant thought runs through my mind and bothers me">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question37"
                                id="question37_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question37_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 38 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="38">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I take disappointments so keenly that I can't put them out of my mind</h6>
                    <input type="hidden" name="question"
                        value="I take disappointments so keenly that I can't put them out of my mind">

                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question38"
                                id="question38_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question38_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor


                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 39 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="39">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I am a steady person</h6>
                    <input type="hidden" name="question" value="I am a steady person">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question39"
                                id="question39_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question39_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>

                <!-- Question 40 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="40">
                <h2>FORM Y-2 (Trait Anxiety)</h2>
                    <h6 class="mb-4 text-white">I get in a state of tension or turmoil as I think over my recent concerns and interests</h6>
                    <input type="hidden" name="question" value="I get in a state of tension or turmoil as I think over my recent concerns and interests">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question40"
                                id="question40_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question40_{{ $i }}">{{ ['Almost never', 'Sometimes', 'Often', 'Almost always'][$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                    <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" id="nextBtnfinel" onclick="navigateQuestion(1, event)">Next</button>
                        <button type="submit" class="btn btn-success d-none" id="submitBtn">Submit</button>
                    </div>
                </div>
           


            </div>

        </div>
    </form>
    <!-- JavaScript for Navigation -->
@endsection