@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">Clinical Global Impression (CGI) Scale</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>

    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.cgiStore') }}" 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>Severity of Illness (CGI-S)</h4>
                    <h6 class="mb-4 text-white">Considering your total clinical experience with this particular population, how mentally ill is the patient at this time?</h6>
                    <input type="hidden" name="question" value="Considering your total clinical experience with this particular population, how mentally ill is the patient at this time?">
                    
                    @for ($i = 1; $i <= 7; $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 }}">{{ ['Normal, not at all ill', 'Borderline mentally ill', 'Mildly ill', 'Moderately ill', 'Markedly ill', 'Severely ill', 'Among the most extremely ill patients'][$i - 1] }}</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" d data-question="2">
                    <h4>Global Improvement (CGI-I)</h4>
                    <h6 class="mb-4 text-white">Rate total improvement whether or not, in your judgment, it is due entirely to drug treatment. Compared to the patient's condition at baseline (either at the beginning of treatment or at the beginning of the study), how much has the patient changed?</h6>
                    <input type="hidden" name="question" value="Rate total improvement whether or not, in your judgment, it is due entirely to drug treatment.">
                    
                    @for ($i = 1; $i <= 7; $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 }}">{{ ['Very much improved', 'Much improved', 'Minimally improved', 'No change', 'Minimally worse', 'Much worse', 'Very much worse'][$i - 1] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>
                </div>
                
                <!-- Question 3 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
                    <h4>Efficacy Index (CGI-E)</h4>
                    <h6 class="mb-4 text-white">Therapeutic Effect</h6>
                    <input type="hidden" name="question" value="Therapeutic Effect">
                    
                    @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 }}">{{ ['Marked - vast improvement, complete or nearly complete remission of symptoms', 'Moderate - decided improvement, partial remission of symptoms', 'Minimal - slight improvement which doesn\'t alter status of care', 'Unchanged or worse'][$i - 1] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <!-- Buttons -->
                    <div class="d-flex justify-content-between mt-4">
                        <button class="btn btn-outline-light" onclick="navigateQuestion(-1, event)" id="prevBtn">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>
                </div>


                <!-- Question 4 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
                    <h4>Efficacy Index (CGI-E)</h4>
                    <h6 class="mb-4 text-white">Side Effects</h6>
                    <input type="hidden" name="question" value="Side Effects">
                    
                    @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 }}">{{ ['None', 'Do not significantly interfere with patient\'s functioning', 'Significantly interferes with patient\'s functioning', 'Outweighs therapeutic effect'][$i - 1] }}</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