@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">General Health Questionnaire (GHQ-12)</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>
        Please read this carefully: We would like to know how your health has been in general over the past few weeks. Please answer ALL the questions by circling the answer which you think most nearly applies to you. Remember that we want to know about present and recent complaints, not those you had in the past. It is important that you try to answer ALL the questions. Thank you for your cooperation.
        </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.ghq-12Store') }}" 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">
                    <h6 class="mb-4 text-white">Been able to concentrate on whatever you're doing?</h6>
                    <input type="hidden" name="question" value="Been able to concentrate on whatever you're doing?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['Better than usual', 'Same as usual', 'Less than usual', 'Much less than usual'][$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">
                    <h6 class="mb-4 text-white">Lost much sleep over worry?</h6>
                    <input type="hidden" name="question" value="Lost much sleep over worry?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$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 3 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
                    <h6 class="mb-4 text-white">Felt that you are playing a useful part in things?</h6>
                    <input type="hidden" name="question" value="Felt that you are playing a useful part in things?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['More so than usual', 'Same as usual', 'Less useful than usual', 'Much less useful'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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">
                    <h6 class="mb-4 text-white">Felt capable of making decisions about things?</h6>
                    <input type="hidden" name="question" value="Felt capable of making decisions about things?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['More so than usual', 'Same as usual', 'Less so than usual', 'Much less capable'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 5 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
                    <h6 class="mb-4 text-white">Felt constantly under strain?</h6>
                    <input type="hidden" name="question" value="Felt constantly under strain?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 6 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
                    <h6 class="mb-4 text-white">Felt you couldn't overcome your difficulties?</h6>
                    <input type="hidden" name="question" value="Felt you couldn't overcome your difficulties?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 7 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
                    <h6 class="mb-4 text-white">Been able to enjoy your normal day-to-day activities?</h6>
                    <input type="hidden" name="question" value="Been able to enjoy your normal day-to-day activities?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['More so than usual', 'Same as usual', 'Less so than usual', 'Much less than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 8 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
                    <h6 class="mb-4 text-white">Been able to face up to your problems?</h6>
                    <input type="hidden" name="question" value="Been able to face up to your problems?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['More so than usual', 'Same as usual', 'Less able than usual', 'Much less able'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 9 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
                    <h6 class="mb-4 text-white">Been feeling unhappy and depressed?</h6>
                    <input type="hidden" name="question" value="Been feeling unhappy and depressed?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 10 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
                    <h6 class="mb-4 text-white">Been losing confidence in yourself?</h6>
                    <input type="hidden" name="question" value="Been losing confidence in yourself?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 11 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
                    <h6 class="mb-4 text-white">Been thinking of yourself as a worthless person?</h6>
                    <input type="hidden" name="question" value="Been thinking of yourself as a worthless person?">
                
                    @for ($i = 0; $i <= 3; $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 at all', 'No more than usual', 'Rather more than usual', 'Much more than usual'][$i] }}</label>
                        </div>
                        <hr>
                    @endfor
                
                    <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 12 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
                    <h6 class="mb-4 text-white">Been feeling reasonably happy, all things considered?</h6>
                    <input type="hidden" name="question" value="Been feeling reasonably happy, all things considered?">
                
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['More so than usual', 'About same as usual', 'Less so than usual', 'Much less than usual'][$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