@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 Depression Rating Scale (HAM-D)</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>
    For each item, select the one response that best characterizes the patient during the past week. This is a clinician-rated scale and should not be given to the patient to fill out.</div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post" action="{{ route('mentalHealth.hamDStore') }}" data-redirect="{{ route('mentalHealth.dashboard') }}">     
<!-- Centered Content with Card and Progress Bar --> 
<div class="d-flex justify-content-center min-vh-75 align-items-center">
    <div class="col-sm-12 col-xl-6">  

        <!-- Progress Bar -->
        <div class="progress mb-4">
  <div class="progress-bar bg-primary" id="progress-bar" role="progressbar" style="width: 0%;" 
       aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
    

<!-- Question 1 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question" data-question="1">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">
    Depressed Mood
    </h6>
    <input type="hidden" name="question" value=" Depressed Mood">
    
    @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 }}">
                {{ ['Absent', 'These feeling states indicated only on questioning', 'These feeling states spontaneously reported verbally', 'Communicates feeling states non-verbally (i.e., through facial expression, posture, voice, and tendency to weep)', 'Patient reports VIRTUALLY ONLY these feeling states in spontaneous verbal and non-verbal communication'][$i] }}
            </label>
        </div>
        <hr>
    @endfor

    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" 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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Feelings of Guilt</h6>
    <input type="hidden" name="question" value="Feelings of Guilt">

    @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 }}">
                {{ ["Absent", "Self-reproach, feels he/she has let people down", "Ideas of guilt or rumination over past errors or sinful deeds", "Present illness is a punishment. Delusions of guilt", "Hears accusatory or denunciatory voices and/or experiences threatening visual hallucinations"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Suicide</h6>
    <input type="hidden" name="question" value="Suicide">

    @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 }}">
                {{ ["Absent", "Feels life is not worth living", "Wishes he/she were dead or any thoughts of possible death to self", "Suicide ideas or gesture", "Attempts at suicide (any serious attempt rates 4)"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Insomnia Early (Difficulty Falling Asleep)</h6>
    <input type="hidden" name="question" value="Insomnia Early">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ["No difficulty falling asleep", "Complains of occasional difficulty falling asleep (i.e., more than 30 minutes)", "Complains of nightly difficulty falling asleep"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Insomnia Middle (Waking During the Night)</h6>
    <input type="hidden" name="question" value="Insomnia Middle">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ["No difficulty", "Patient complains of being restless and disturbed during the night", "Waking during the night – any getting out of bed rates 2 (except for purposes of voiding)"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Insomnia Late (Early Morning Awakening)</h6>
    <input type="hidden" name="question" value="Insomnia Late">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ["No difficulty", "Waking in early hours of the morning but goes back to sleep", "Unable to fall asleep again if he/she gets out of bed"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Work and Activities</h6>
    <input type="hidden" name="question" value="Work and Activities">

    @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 }}">
                {{ ["No difficulty", "Thoughts and feelings of incapacity, fatigue, or weakness related to activities, work, or hobbies", "Loss of interest in activity, hobbies, or work – either directly reported by patient, or indirect in listlessness, indecision, and vacillation", "Decrease in actual time spent in activities or decrease in productivity", "Stopped working because of present illness"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Retardation</h6>
    <input type="hidden" name="question" value="Retardation">

    @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 }}">
                {{ ["Normal speech and thought", "Slight retardation at interview", "Obvious retardation at interview", "Interview difficult", "Complete stupor"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Agitation</h6>
    <input type="hidden" name="question" value="Agitation">

    @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", "Fidgetiness", "Playing with hands, hair, etc.", "Moving about, can't sit still", "Hand wringing, nail biting, hair-pulling, biting of lips"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Anxiety (Psychological)</h6>
    <input type="hidden" name="question" value="Anxiety Psychological">

    @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 }}">
                {{ ["No difficulty", "Subjective tension and irritability", "Worrying about minor matters", "Apprehensive attitude apparent in face or speech", "Fears expressed without questioning"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Anxiety (Somatic)</h6>
    <input type="hidden" name="question" value="Anxiety Somatic">

    @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 }}">
                {{ ["Absent", "Mild", "Moderate", "Severe", "Incapacitating"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Somatic Symptoms (Gastrointestinal)</h6>
    <input type="hidden" name="question" value="Somatic Symptoms Gastrointestinal">

    @for ($i = 0; $i <= 2; $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", "Loss of appetite but eating without encouragement; heavy feelings in abdomen", "Difficulty eating without urging; requests or requires medication for bowels or medication for GI symptoms"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Somatic Symptoms (General)</h6>
    <input type="hidden" name="question" value="Somatic Symptoms General">

    @for ($i = 0; $i <= 2; $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", "Heaviness in limbs, back or head; backaches, headache, muscle aches; loss of energy and fatigability", "Any clear-cut symptom rates 2"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Genital Symptoms</h6>
    <input type="hidden" name="question" value="Genital Symptoms">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ["Absent", "Mild", "Severe"][$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">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Hypochondriasis</h6>
    <input type="hidden" name="question" value="Hypochondriasis">

    @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 }}">
                {{ ["Not present", "Self-absorption (bodily)", "Preoccupation with health", "Frequent complaints, requests for help, etc.", "Hypochondriacal delusions"][$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 16 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Loss of Weight</h6>
    <input type="hidden" name="question" value="Loss of Weight">

    <h6 class="text-white">A. When rating by history:</h6>
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question16" id="question16_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question16_{{ $i }}">
                {{ ["No weight loss", "Probable weight loss associated with present illness", "Definite (according to patient) weight loss", "Not assessed"][$i] }}
            </label>
        </div>
        <hr>
    @endfor

    <h6 class="text-white">B. When actual weight changes are measured:</h6>
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question16" id="question16_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question16_{{ $i }}">
                {{ ["Less than 1 lb (0.5 kg) weight loss in week", "Greater than 1 lb (0.5 kg) weight loss in week", "Greater than 2 lb (1 kg) weight loss in week", "Not assessed"][$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 17 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
    <h2>Assessment Items</h2>
    <h6 class="mb-4 text-white">Insight</h6>
    <input type="hidden" name="question" value="Insight">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ["Acknowledges being depressed and ill", "Acknowledges illness but attributes cause to bad food, climate, overwork, virus, need for rest, etc.", "Denies being ill at all"][$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>
  
  </div>
  </div>
  </form>
  <!-- JavaScript for Navigation -->
  
  @endsection