@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">Young Mania Rating Scale (YMRS)</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 Young Mania Rating Scale (YMRS) is an 11-item clinician-administered scale used to measure the severity of manic symptoms. The scale should be administered by a clinician with clinical experience in bipolar disorder.
The rating of each item is based on the patient's subjective report of their condition over the past 48 hours and the clinician's observations during the interview. For each item, select the rating that best characterizes the patient.
Note: Items 5, 6, 8, and 9 are graded on a 0 to 8 scale (instead of 0 to 4), with 0, 2, 4, 6, and 8 being the only valid scores.
    </p>

    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.ymrsStore') }}" 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">
                <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Elevated Mood</h6>
                <input type="hidden" name="question" value="Elevated 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", "Mildly or possibly increased on questioning", "Definite subjective elevation; optimistic, self-confident; cheerful; appropriate to content", "Elevated; inappropriate to content; humorous", "Euphoric; inappropriate laughter; singing"][$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" 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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Increased Motor Activity-Energy</h6>
                <input type="hidden" name="question" value="Increased Motor Activity-Energy">
            
                @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", "Subjectively increased", "Animated; gestures increased", "Excessive energy; hyperactive at times; restless (can be calmed)", "Motor excitement; continuous hyperactivity (cannot be calmed)"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Sexual Interest</h6>
                <input type="hidden" name="question" value="Sexual Interest">
            
                @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 }}">
                            {{ ["Normal; not increased", "Mildly or possibly increased", "Definite subjective increase on questioning", "Spontaneous sexual content; elaborates on sexual matters; hypersexual by self-report", "Overt sexual acts (toward patients, staff, or interviewer)"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Sleep</h6>
                <input type="hidden" name="question" value="Sleep">
            
                @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 }}">
                            {{ ["Reports no decrease in sleep", "Sleeping less than normal amount by up to one hour", "Sleeping less than normal by more than one hour", "Reports decreased need for sleep", "Denies need for sleep"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Irritability</h6>
                <input type="hidden" name="question" value="Irritability">
            
                @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 }}">
                            {{ ["Absent", "Subjectively increased", "Irritable at times during interview; recent episodes of anger or annoyance on ward", "Frequently irritable during interview; short, curt throughout", "Hostile, uncooperative; interview impossible"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Speech (Rate and Amount)</h6>
                <input type="hidden" name="question" value="Speech (Rate and Amount)">
            
                @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 }}">
                            {{ ["No increase", "Feels talkative", "Increased rate or amount at times, verbose at times", "Push; consistently increased rate and amount; difficult to interrupt", "Pressured; uninterruptible, continuous speech"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Language-Thought Disorder</h6>
                <input type="hidden" name="question" value="Language-Thought Disorder">
            
                @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 }}">
                            {{ ["Absent", "Circumstantial; mild distractibility; quick thoughts", "Distractible; loses goal of thought; changes topics frequently; racing thoughts", "Flight of ideas; tangentiality; difficult to follow; rhyming, echolalia", "Incoherent; communication impossible"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Content</h6>
                <input type="hidden" name="question" value="Content">
            
                @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", "Questionable plans, new interests", "Special projects; hyperreligious", "Grandiose or paranoid ideas; ideas of reference", "Delusions; 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 9 -->
            <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Disruptive-Aggressive Behavior</h6>
                <input type="hidden" name="question" value="Disruptive-Aggressive Behavior">
            
                @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 }}">
                            {{ ["Absent, cooperative", "Sarcastic; loud at times, guarded", "Demanding; threats on ward", "Threatens interviewer; shouting; interview difficult", "Assaultive; destructive; interview impossible"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Appearance</h6>
                <input type="hidden" name="question" value="Appearance">
            
                @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 }}">
                            {{ ["Appropriate dress and grooming", "Minimally unkempt", "Poorly groomed; moderately disheveled; overdressed", "Disheveled; partly clothed; garish makeup", "Completely unkempt; decorated; bizarre garb"][$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">
            <h5>Please select the most appropriate option.</h5>
                <h6 class="mb-4 text-white">Insight</h6>
                <input type="hidden" name="question" value="Insight">
            
                @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 }}">
                            {{ ["Present; admits illness; agrees with need for treatment", "Possibly ill", "Admits behavior change, but denies illness", "Admits possible change in behavior, but denies illness", "Denies any behavior change"][$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