@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">CAGE Questionnaire for Alcohol and Drug Use</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.cageStore') }}" 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>CAGE Questionnaire for Alcohol</h4>
                    <h5>Please circle "Yes" or "No" for each question.</h5>
                    <h6 class="mb-4 text-white">Have you ever felt you should Cut down on your drinking?</h6>
                    <input type="hidden" name="question" value="Have you ever felt you should Cut down on your drinking?">
                
                    @for ($i = 0; $i <= 1; $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 }}">
                                {{ ['No', 'Yes'][$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">
                <h4>CAGE Questionnaire for Alcohol</h4>
                    <h6 class="mb-4 text-white">Have people Annoyed you by criticizing your drinking?</h6>
                    <input type="hidden" name="question" value="Have people Annoyed you by criticizing your drinking?">
                
                    @for ($i = 0; $i <= 1; $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 }}">
                                {{ ['No', 'Yes'][$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">
                <h4>CAGE Questionnaire for Alcohol</h4>
                    <h6 class="mb-4 text-white">Have you ever felt bad or Guilty about your drinking?</h6>
                    <input type="hidden" name="question" value="Have you ever felt bad or Guilty about your drinking?">
                
                    @for ($i = 0; $i <= 1; $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 }}">
                                {{ ['No', 'Yes'][$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">
                <h4>CAGE Questionnaire for Alcohol</h4>
                    <h6 class="mb-4 text-white">Have you ever had a drink first thing in the morning to steady your nerves or get rid of a hangover (Eye-opener)?</h6>
                    <input type="hidden" name="question" value="Have you ever had a drink first thing in the morning to steady your nerves or get rid of a hangover (Eye-opener)?">
                
                    @for ($i = 0; $i <= 1; $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', 'Yes'][$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">
                <h4>CAGE Questionnaire Adapted to Include Drugs (CAGE-AID)</h4>
                <h5>Please circle "Yes" or "No" for each question.</h5>
                    <h6 class="mb-4 text-white">Have you ever felt you should Cut down on your drinking or drug use?</h6>
                    <input type="hidden" name="question" value="Have you ever felt you should Cut down on your drinking or drug use?">
                
                    @for ($i = 0; $i <= 1; $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', 'Yes'][$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">
                <h4>CAGE Questionnaire Adapted to Include Drugs (CAGE-AID)</h4>
                    <h6 class="mb-4 text-white">Have people Annoyed you by criticizing your drinking or drug use?</h6>
                    <input type="hidden" name="question" value="Have people Annoyed you by criticizing your drinking or drug use?">
                
                    @for ($i = 0; $i <= 1; $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', 'Yes'][$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">
                <h4>CAGE Questionnaire Adapted to Include Drugs (CAGE-AID)</h4>
                    <h6 class="mb-4 text-white">Have you ever felt bad or Guilty about your drinking or drug use?</h6>
                    <input type="hidden" name="question" value="Have you ever felt bad or Guilty about your drinking or drug use?">
                
                    @for ($i = 0; $i <= 1; $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', 'Yes'][$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">
                <h4>CAGE Questionnaire Adapted to Include Drugs (CAGE-AID)</h4>
                    <h6 class="mb-4 text-white">Have you ever had a drink or used drugs first thing in the morning to steady your nerves or get rid of a hangover (Eye-opener)?</h6>
                    <input type="hidden" name="question" value="Have you ever had a drink or used drugs first thing in the morning to steady your nerves or get rid of a hangover (Eye-opener)?">
                
                    @for ($i = 0; $i <= 1; $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 }}">
                                {{ ['No', 'Yes'][$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