@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">DSM-5 Cross-Cutting Symptom Measure - Adult</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>
           The questions below ask about things that might have bothered you. For each question, circle the number that best describes how much (or how often) you have been bothered by each problem during the past TWO (2) WEEKS.
        </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.dsm5-cross-cuttingStore') }}" 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">
                    <h4>Depression</h4>
                    <h6 class="mb-4 text-white">Little interest or pleasure in doing things?</h6>
                    <input type="hidden" name="question" value="Little interest or pleasure in doing things?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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">
                    <h4>Depression</h4>
                    <h6 class="mb-4 text-white">Feeling down, depressed, or hopeless?</h6>
                    <input type="hidden" name="question" value="Feeling down, depressed, or hopeless?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 3 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
                    <h4>Anger</h4>
                    <h6 class="mb-4 text-white">Feeling more irritated, grouchy, or angry than usual?</h6>
                    <input type="hidden" name="question" value="Feeling more irritated, grouchy, or angry than usual?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 4 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
                    <h4>Mania</h4>
                    <h6 class="mb-4 text-white">Sleeping less than usual, but still have a lot of energy?</h6>
                    <input type="hidden" name="question" value="Sleeping less than usual, but still have a lot of energy?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 5 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
                    <h4>Mania</h4>
                    <h6 class="mb-4 text-white">Starting lots more projects than usual or doing more risky things than usual?</h6>
                    <input type="hidden" name="question" value="Starting lots more projects than usual or doing more risky things than usual?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 6 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
                    <h4>Anxiety</h4>
                    <h6 class="mb-4 text-white">Feeling nervous, anxious, frightened, worried, or on edge?</h6>
                    <input type="hidden" name="question" value="Feeling nervous, anxious, frightened, worried, or on edge?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 7 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
                    <h4>Anxiety</h4>
                    <h6 class="mb-4 text-white">Feeling panic or being frightened?</h6>
                    <input type="hidden" name="question" value="Feeling panic or being frightened?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 8 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
                    <h4>Anxiety</h4>
                    <h6 class="mb-4 text-white">Avoiding situations that make you anxious?</h6>
                    <input type="hidden" name="question" value="Avoiding situations that make you anxious?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 9 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
                    <h4>Somatic Symptoms</h4>
                    <h6 class="mb-4 text-white">Unexplained aches and pains (e.g., head, back, joints, abdomen, legs)?</h6>
                    <input type="hidden" name="question" value="Unexplained aches and pains (e.g., head, back, joints, abdomen, legs)?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 10 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
                    <h4>Somatic Symptoms</h4>
                    <h6 class="mb-4 text-white">Feeling that your illnesses are not being taken seriously enough?</h6>
                    <input type="hidden" name="question" value="Feeling that your illnesses are not being taken seriously enough?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 11 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
                    <h4>Suicidal Ideation</h4>
                    <h6 class="mb-4 text-white">Thoughts of actually hurting yourself?</h6>
                    <input type="hidden" name="question" value="Thoughts of actually hurting yourself?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 12 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
                    <h4>Psychosis</h4>
                    <h6 class="mb-4 text-white">Hearing things other people couldn't hear, such as voices even when no one was around?</h6>
                    <input type="hidden" name="question" value="Hearing things other people couldn't hear, such as voices even when no one was around?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 13 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
                    <h4>Psychosis</h4>
                    <h6 class="mb-4 text-white">Feeling that someone could hear your thoughts, or that you could hear what another person was thinking?</h6>
                    <input type="hidden" name="question" value="Feeling that someone could hear your thoughts, or that you could hear what another person was thinking?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 14 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="14">
                    <h4>Sleep Problems</h4>
                    <h6 class="mb-4 text-white">Problems with sleep that affected your sleep quality overall?</h6>
                    <input type="hidden" name="question" value="Problems with sleep that affected your sleep quality overall?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 15 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
                    <h4>Memory</h4>
                    <h6 class="mb-4 text-white">Problems with memory (e.g., learning new information) or with location (e.g., finding your way home)?</h6>
                    <input type="hidden" name="question" value="Problems with memory (e.g., learning new information) or with location (e.g., finding your way home)?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 16 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
                    <h4>Repetitive Thoughts and Behaviors</h4>
                    <h6 class="mb-4 text-white">Unpleasant thoughts, urges, or images that repeatedly enter your mind?</h6>
                    <input type="hidden" name="question" value="Unpleasant thoughts, urges, or images that repeatedly enter your mind?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 17 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
                    <h4>Repetitive Thoughts and Behaviors</h4>
                    <h6 class="mb-4 text-white">Feeling driven to perform certain behaviors or mental acts over and over again?</h6>
                    <input type="hidden" name="question" value="Feeling driven to perform certain behaviors or mental acts over and over again?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 18 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
                    <h4>Dissociation</h4>
                    <h6 class="mb-4 text-white">Feeling detached or distant from yourself, your body, your physical surroundings, or your memories?</h6>
                    <input type="hidden" name="question" value="Feeling detached or distant from yourself, your body, your physical surroundings, or your memories?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 19 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
                    <h4>Personality Functioning</h4>
                    <h6 class="mb-4 text-white">Not knowing who you really are or what you want out of life?</h6>
                    <input type="hidden" name="question" value="Not knowing who you really are or what you want out of life?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 20 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
                    <h4>Personality Functioning</h4>
                    <h6 class="mb-4 text-white">Not feeling close to other people or enjoying your relationships with them?</h6>
                    <input type="hidden" name="question" value="Not feeling close to other people or enjoying your relationships with them?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 21 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
                    <h4>Substance Use</h4>
                    <h6 class="mb-4 text-white">Drinking at least 4 drinks of any kind of alcohol in a single day?</h6>
                    <input type="hidden" name="question" value="Drinking at least 4 drinks of any kind of alcohol in a single day?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 22 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="22">
                    <h4>Substance Use</h4>
                    <h6 class="mb-4 text-white">Smoking any cigarettes, a cigar, or pipe, or using snuff or chewing tobacco?</h6>
                    <input type="hidden" name="question" value="Smoking any cigarettes, a cigar, or pipe, or using snuff or chewing tobacco?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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 23 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="23">
                    <h4>Substance Use</h4>
                    <h6 class="mb-4 text-white">
                        Using any of the following medicines ON YOUR OWN, that is, without a doctor's prescription, in greater amounts or longer than prescribed? 
                        (e.g., painkillers, stimulants, sedatives or tranquilizers, or drugs like marijuana, cocaine or crack, club drugs, hallucinogens, heroin, inhalants or solvents, or methamphetamine)
                    </h6>
                    <input type="hidden" name="question" value="Using any of the following medicines ON YOUR OWN, that is, without a doctor's prescription, in greater amounts or longer than prescribed?">
                
                    @for ($i = 0; $i <= 4; $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 }}">{{ ['None', 'Slight', 'Mild', 'Moderate', 'Severe'][$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