@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">Hamilton Anxiety Rating Scale (HAM-A)</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>
        This scale is intended to be used by a clinician who has conducted a complete evaluation of the patient. The clinician should assess the extent to which each of the 14 items is present in the patient. Each item is rated on a 5-point scale, ranging from 0 (not present) to 4 (severe). The ratings are based on the clinician's assessment of the patient's condition over the previous week.This scale is intended to be used by a clinician who has conducted a complete evaluation of the patient. The clinician should assess the extent to which each of the 14 items is present in the patient. Each item is rated on a 5-point scale, ranging from 0 (not present) to 4 (severe). The ratings are based on the clinician's assessment of the patient's condition over the previous week.
        </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.ham-aStore') }}" 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>Anxious Mood</h4>
                    <h6 class="mb-4 text-white">Worries, anticipation of the worst, fearful anticipation, irritability.</h6>
                    <input type="hidden" name="question" value="Worries, anticipation of the worst, fearful anticipation, irritability.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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>Tension</h4>
                    <h6 class="mb-4 text-white">Feelings of tension, fatigability, startle response, moved to tears easily, trembling, feelings of restlessness, inability to relax.</h6>
                    <input type="hidden" name="question"
                        value="Feelings of tension, fatigability, startle response, moved to tears easily, trembling, feelings of restlessness, inability to relax.">


                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Fears</h4>
                    <h6 class="mb-4 text-white">Of dark, of strangers, of being left alone, of animals, of traffic, of crowds.</h6>
                    <input type="hidden" name="question"
                        value="Of dark, of strangers, of being left alone, of animals, of traffic, of crowds.">

                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Insomnia</h4>
                    <h6 class="mb-4 text-white">Difficulty in falling asleep, broken sleep, unsatisfying sleep and fatigue on waking, dreams, nightmares, night terrors.</h6>
                    <input type="hidden" name="question"
                        value="Difficulty in falling asleep, broken sleep, unsatisfying sleep and fatigue on waking, dreams, nightmares, night terrors.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Intellectual (Cognitive)</h4>
                    <h6 class="mb-4 text-white">Difficulty in concentration, poor memory.</h6>
                    <input type="hidden" name="question"
                        value="Difficulty in concentration, poor memory.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Depressed Mood</h4>
                    <h6 class="mb-4 text-white">Loss of interest, lack of pleasure in hobbies, depression, early waking, diurnal swing.</h6>
                    <input type="hidden" name="question"
                        value="Loss of interest, lack of pleasure in hobbies, depression, early waking, diurnal swing.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Somatic (Muscular)</h4>
                    <h6 class="mb-4 text-white">Pains and aches, twitching, stiffness, myoclonic jerks, grinding of teeth, unsteady voice, increased muscular tone.</h6>
                    <input type="hidden" name="question"
                        value="Pains and aches, twitching, stiffness, myoclonic jerks, grinding of teeth, unsteady voice, increased muscular tone.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Somatic (Sensory)</h4>
                    <h6 class="mb-4 text-white">Tinnitus, blurred vision, hot and cold flushes, feelings of weakness, pricking sensation.</h6>
                    <input type="hidden" name="question"
                        value="Tinnitus, blurred vision, hot and cold flushes, feelings of weakness, pricking sensation.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Cardiovascular Symptoms</h4>
                    <h6 class="mb-4 text-white">Tachycardia, palpitations, pain in chest, throbbing of vessels, fainting feelings, missing beat.</h6>
                    <input type="hidden" name="question"
                        value="Tachycardia, palpitations, pain in chest, throbbing of vessels, fainting feelings, missing beat.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Respiratory Symptoms</h4>
                    <h6 class="mb-4 text-white">Pressure or constriction in chest, choking feelings, sighing, dyspnea.</h6>
                    <input type="hidden" name="question"
                        value="Pressure or constriction in chest, choking feelings, sighing, dyspnea.">

                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Gastrointestinal Symptoms</h4>
                    <h6 class="mb-4 text-white">Difficulty in swallowing, wind, abdominal pain, burning sensations, abdominal fullness, nausea, vomiting, borborygmi, looseness of bowels, loss of weight, constipation.</h6>
                    <input type="hidden" name="question"
                        value="Difficulty in swallowing, wind, abdominal pain, burning sensations, abdominal fullness, nausea, vomiting, borborygmi, looseness of bowels, loss of weight, constipation.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Genitourinary Symptoms</h4>
                    <h6 class="mb-4 text-white">Frequency of micturition, urgency of micturition, amenorrhea, menorrhagia, development of frigidity, premature ejaculation, loss of libido, impotence.</h6>
                    <input type="hidden" name="question"
                        value="Frequency of micturition, urgency of micturition, amenorrhea, menorrhagia, development of frigidity, premature ejaculation, loss of libido, impotence.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Autonomic Symptoms</h4>
                    <h6 class="mb-4 text-white">Dry mouth, flushing, pallor, tendency to sweat, giddiness, tension headache, raising of hair.</h6>
                    <input type="hidden" name="question" value="Dry mouth, flushing, pallor, tendency to sweat, giddiness, tension headache, raising of hair.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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">
                <h4>Behavior at Interview</h4>
                    <h6 class="mb-4 text-white">Fidgeting, restlessness or pacing, tremor of hands, furrowed brow, strained face, sighing or rapid respiration, facial pallor, swallowing, belching, brisk tendon jerks, dilated pupils, exophthalmos.</h6>
                    <input type="hidden" name="question" value="Fidgeting, restlessness or pacing, tremor of hands, furrowed brow, strained face, sighing or rapid respiration, facial pallor, swallowing, belching, brisk tendon jerks, dilated pupils, exophthalmos.">
                    @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 }}">{{ ['Not present', 'Mild', 'Moderate', 'Severe', 'Very severe, grossly disabling'][$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