@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">Childhood Autism Rating Scale (CARS-2)</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 CARS-2 consists of 15 items used to identify children with autism and to distinguish them from developmentally disabled children without autism. In addition, it distinguishes mild-to-moderate from severe autism.
Rate the child on each item, based on your observation of the child's behavior. For each item, choose the description that best applies. You may indicate the score that falls between two descriptions by using half-point scoring (1.5, 2.5, 3.5).
    </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.carsStore') }}" 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>Relating to People</h4>
                    <h6 class="mb-4 text-white">Consider the child's behavior when interacting with others, both familiar and unfamiliar adults and peers.</h6>
                    <input type="hidden" name="question" value="Consider the child's behavior when interacting with others, both familiar and unfamiliar adults and peers.">
                
                    @php
                    $options = [
                        '', // Dummy value at index 0
                        'No evidence of difficulty or abnormality in relating to people. Behavior is appropriate for age.',
                        'Mildly abnormal relationships. Child may avoid eye contact, avoid adults, become anxious or fussy with social contact, or be shy, especially with unfamiliar people, in ways that differ from age peers.',
                        'Moderately abnormal relationships. Child shows detachment and seems unaware of adults at times. Specific interactions may need to be enforced. Child\'s response to others is limited.',
                        'Severely abnormal relationships. Child is consistently detached and unaware of what adults are doing. Almost never responds to or initiates social contact.'
                    ];
                    @endphp
                
                    @for ($i = 1; $i <= 4; $i++) <!-- Now the loop correctly maps to array indexes -->
                        <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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor

                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light d-none" id="prevBtn" onclick="navigateQuestion(-1, event)">Previous</button>
                        <button class="btn btn-primary" 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>Imitation</h4>
                    <h6 class="mb-4 text-white">Consider the child's ability to imitate both verbal and non-verbal actions.</h6>
                    <input type="hidden" name="question" value="Consider the child's ability to imitate both verbal and non-verbal actions.">
                
                    
                    @php
                    $options = [
                        '', // Dummy value at index 0
                        'Appropriate imitation. Child can imitate sounds, words, movements appropriate for skill level.',
                        'Mildly abnormal imitation. Child imitates simple behaviors like clapping or single verbal sounds most of the time. May occasionally imitate only after prompting or with delay.',
                        'Moderately abnormal imitation. Child imitates only part of the time and requires significant persistence and help from adults. May often imitate after a delay.',
                        'Severely abnormal imitation. Child rarely or never imitates sounds, words, or movements even with prompting and assistance.'
                    ];
                    @endphp
                
                    @for ($i = 1; $i <= 4; $i++) <!-- Now the loop correctly maps to array indexes -->
                        <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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Emotional Response</h4>
                    <h6 class="mb-4 text-white">Consider how the child responds emotionally to appropriate and inappropriate situations.</h6>
                    <input type="hidden" name="question" value="Consider how the child responds emotionally to appropriate and inappropriate situations.">
                
                    @php
                    $options = [
                        '', // Dummy value at index 0
                        'Age-appropriate and situationally appropriate emotional responses.',
                        'Mildly abnormal emotional responses. Child sometimes exhibits inappropriate type or degree of emotional reaction.',
                        'Moderately abnormal emotional responses. Child shows definite signs of inappropriate type and/or degree of emotional response. Reactions may be inhibited or excessive, unrelated to the situation, or include self-stimulatory behaviors.',
                        'Severely abnormal emotional responses. Responses are seldom appropriate to the situation. Very difficult to change emotional state once established. May show extreme emotions and then switch suddenly.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Body Use</h4>
                    <h6 class="mb-4 text-white">Consider both coordination and appropriateness of body movements.</h6>
                    <input type="hidden" name="question" value="Consider both coordination and appropriateness of body movements.">
                
                    @php
                    $options = [
                        '', // Dummy value at index 0
                        'Age-appropriate body use. Child moves with same ease, agility, and coordination as normal child of same age.',
                        'Mildly abnormal body use. Some minor peculiarities may be present, such as clumsiness, repetitive movements, poor coordination, or rare unusual movements.',
                        'Moderately abnormal body use. Behaviors clearly strange or unusual for a child this age, including unusual finger movements, peculiar postures, staring/picking at body, self-directed aggression, rocking, spinning, finger-wiggling, or toe-walking.',
                        'Severely abnormal body use. Intense or frequent movements of the type described above. These behaviors persist despite attempts to discourage them or involve the child in other activities.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Object Use</h4>
                    <h6 class="mb-4 text-white">Consider the child's interest in and use of toys and other objects.</h6>
                    <input type="hidden" name="question" value="Consider the child's interest in and use of toys and other objects.">
                
                    @php
                    $options = [
                        '', // Dummy value at index 0
                        'Appropriate use of, and interest in, toys and other objects.',
                        'Mildly inappropriate interest in, or use of, toys and other objects. May show atypical interest or play with toys in inappropriate ways (e.g., banging or sucking on toys).',
                        'Moderately abnormal use of and interest in toys/objects. Shows little interest in toys or other objects, or may be preoccupied with using an object or toy in an inappropriate manner. May focus on a small part of a toy, become fascinated with light reflecting off an object, or only activate certain features of a toy.',
                        'Severely abnormal use of and interest in toys/objects. Child may engage in persistent and intense behaviors with objects. Hard to distract from these activities once engaged.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Adaptation to Change</h4>
                    <h6 class="mb-4 text-white">Consider the child's difficulty with transitions, routines, and environmental changes.</h6>
                    <input type="hidden" name="question" value="Consider the child's difficulty with transitions, routines, and environmental changes.">
                
                    @php
                    $options = [
                        '',
                        'Age-appropriate response to change. While child may notice or comment on changes, they accept these changes without undue distress.',
                        'Mildly abnormal adaptation to change. When an adult tries to change tasks, child may continue the same activity or use the same materials, but can be redirected. May become upset or anxious with larger changes.',
                        'Moderately abnormal adaptation to change. Child actively resists changes in routine, tries to continue old activity, and is difficult to distract. May become angry or unhappy when an established routine is altered.',
                        'Severely abnormal adaptation to change. Child shows severe reactions to change. If forced to make a change, may become extremely angry, uncooperative, and refuse to participate in the new activity.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Visual Response</h4>
                    <h6 class="mb-4 text-white">Consider the child's visual attention and looking behaviors.</h6>
                    <input type="hidden" name="question" value="Consider the child's visual attention and looking behaviors.">
                
                    @php
                    $options = [
                        '',
                        'Age-appropriate visual response. Visual behavior is normal and appropriate for age.',
                        'Mildly abnormal visual response. Child may occasionally need reminders to look at objects. May be more interested in looking at mirrors or lighting than peers, may stare, or may avoid looking people in the eye.',
                        'Moderately abnormal visual response. Child frequently avoids looking at people or certain objects and may engage in extreme forms of visual peculiarities such as staring at objects from particular angles or holding objects very close to eyes.',
                        'Severely abnormal visual response. Child consistently avoids looking at people or specific objects or shows extreme forms of other visual peculiarities.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Listening Response</h4>
                    <h6 class="mb-4 text-white">Consider the child's response to both human and non-human sounds.</h6>
                    <input type="hidden" name="question" value="Consider the child's response to both human and non-human sounds.">
                
                    @php
                    $options = [
                        '',
                        'Age-appropriate listening response. Listening behavior is normal and appropriate for age.',
                        'Mildly abnormal listening response. May be inconsistent in response to sound. May need sound repetition to capture attention. May be delayed in responding to sound. May startle or cover ears upon hearing some everyday sounds.',
                        'Moderately abnormal listening response. Child"s responses to sounds vary. Often ignores a sound during initial presentations. May be startled or cover ears when hearing some everyday sounds.',
                        'Severely abnormal listening response. Child over-reacts and/or under-reacts to sounds to an extremely marked degree, regardless of the type of sound.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                    
                    <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" 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>Taste, Smell, and Touch Response and Use</h4>
                    <h6 class="mb-4 text-white">Consider the child's reaction to stimulation of taste, smell, and touch senses.</h6>
                    <input type="hidden" name="question" value="Consider the child's reaction to stimulation of taste, smell, and touch senses.">
                
                    @php
                    $options = [
                        '',
                        'Normal use of and response to these sensory modalities.',
                        'Mildly abnormal use of and response to these sensory modalities. May persist in putting objects in mouth; may smell or taste inedible objects; may ignore or over-react to mild pain that a typical child would express as discomfort.',
                        'Moderately abnormal use of and response to these sensory modalities. May be moderately preoccupied with touching, smelling, or tasting objects or people. May either react too much or too little to pain.',
                        'Severely abnormal use of and response to these sensory modalities. Preoccupied with smelling, tasting, or touching objects more for sensation than exploration. May completely ignore pain or react very strongly to slight discomfort.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Fear or Nervousness</h4>
                    <h6 class="mb-4 text-white">Consider unusual or unexplainable fears, as well as typical fears exhibited atypically.</h6>
                    <input type="hidden" name="question" value="Consider unusual or unexplainable fears, as well as typical fears exhibited atypically.">
                
                    @php
                    $options = [
                        '',
                        'Normal fear or nervousness.',
                        'Mildly abnormal fear or nervousness. Child occasionally shows too much or too little fear compared to typical children of the same age in similar situations.',
                        'Moderately abnormal fear or nervousness. Child shows either significantly more or significantly less fear than would be typical even for a younger child in a similar situation.',
                        'Severely abnormal fear or nervousness. Fears persist even after repeated experience with harmless objects or events. Extremely difficult to calm or comfort the child. May also show lack of appropriate regard for hazards that other children of same age avoid.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Verbal Communication</h4>
                    <h6 class="mb-4 text-white">Consider both the presence or absence of speech and the peculiarities of speech, if present.</h6>
                    <input type="hidden" name="question" value="Consider both the presence or absence of speech and the peculiarities of speech, if present.">
                
                    @php
                    $options = [
                        '',
                        'Normal verbal communication, both age and situation appropriate.',
                        'Mildly abnormal verbal communication. Speech may show overall retardation. Most speech is meaningful, but some echolalia or pronoun reversal may occur. Some peculiar words or jargon may be used occasionally.',
                        'Moderately abnormal verbal communication. Speech may be absent. When present, verbal communication may be a mixture of meaningful and peculiar speech such as echolalia, pronoun reversal, or jargon. Peculiarities include excessive questioning, dwelling on certain topics.',
                        'Severely abnormal verbal communication. Meaningful speech is not used. Child may make infantile squeals, weird or animal-like sounds, complex noise approximating speech, or persistent bizarre use of recognizable words or phrases.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Nonverbal Communication</h4>
                    <h6 class="mb-4 text-white">Consider gestures, posture, facial expressions, and other non-verbal communication.</h6>
                    <input type="hidden" name="question" value="Consider gestures, posture, facial expressions, and other non-verbal communication.">
                
                    @php
                    $options = [
                        '',
                        'Normal use of nonverbal communication, appropriate for age and situation.',
                        'Mildly abnormal use of nonverbal communication. Immature nonverbal communication; may point vaguely, or reach for what is wanted, when a same-age peer would point or gesture more specifically.',
                        'Moderately abnormal use of nonverbal communication. Generally unable to express needs nonverbally. Cannot indicate what is wanted or show through gestures/pointing what is desired.',
                        'Severely abnormal use of nonverbal communication. Only uses bizarre or peculiar gestures which have no apparent meaning, and shows no awareness of the meanings associated with the gestures or facial expressions of others.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Activity Level</h4>
                    <h6 class="mb-4 text-white">Consider the child's energy level and regulation throughout the day.</h6>
                    <input type="hidden" name="question" value="Consider the child's energy level and regulation throughout the day.">
                
                    @php
                    $options = [
                        '',
                        'Normal activity level for age and circumstances.',
                        'Mildly abnormal activity level. May either be slightly restless or somewhat sluggish at times. Activity level only slightly interferes with performance.',
                        'Moderately abnormal activity level. Child may be quite active and difficult to restrain. May have boundless energy and rarely sleep readily at night. Conversely, may be quite lethargic and need significant stimulation to engage.',
                        'Severely abnormal activity level. Child exhibits extremes of activity or inactivity and may shift from one extreme to the other. Hard to manage; extreme energy or extreme lethargy that\'s difficult to change.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>Level and Consistency of Intellectual Response</h4>
                    <h6 class="mb-4 text-white">Consider the overall cognitive functioning and consistency of skills.</h6>
                    <input type="hidden" name="question" value="Consider the overall cognitive functioning and consistency of skills.">
                
                    @php
                    $options = [
                        '',
                        'Intelligence appears normal and reasonably consistent across various areas. Child is as intelligent as typical children of same age.',
                        'Mildly abnormal intellectual functioning. Child is not as smart as typical children of same age; skills appear fairly evenly retarded across all areas.',
                        'Moderately abnormal intellectual functioning. Child is not as smart as typical children of same age; however, child may function nearly normally in one or more intellectual areas.',
                        'Severely abnormal intellectual functioning. While child is not as smart as typical children of same age, may show unusual functioning or ability in specific area or skill(s). May display exceptional rote memory, music or mathematical skills, or excel in puzzle-solving.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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" 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>General Impressions</h4>
                    <h6 class="mb-4 text-white">Consider your overall subjective impression of the child's autistic traits.</h6>
                    <input type="hidden" name="question" value="Consider your overall subjective impression of the child's autistic traits.">
                
                    @php
                    $options = [
                        '',
                        'No autism. Child shows none of the symptoms characteristic of autism.',
                        'Mild autism. Child shows only a few symptoms or only a mild degree of autism.',
                        'Moderate autism. Child shows a number of symptoms or a moderate degree of autism.',
                        'Severe autism. Child shows many symptoms or an extreme degree of autism.'
                    ];
                    @endphp
                
                    @for ($i = 1; $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 }}">
                                {{ $options[$i] }}
                            </label>
                        </div>
                        <hr>
                    @endfor
                
                    <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