@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">Beck Anxiety Inventory (BAI)</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>
            Below is a list of common symptoms of anxiety. Please carefully read each item in the list. Indicate how much
            you have been bothered by that symptom during the past month, including today, by circling the number in the
            corresponding space in the column next to each symptom.
        </p>
    </div>
    <form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post"
        action="{{ route('mentalHealth.baiStore') }}" 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">Numbness or tingling</h6>
                    <input type="hidden" name="question" value="Numbness or tingling">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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">Feeling hot</h6>
                    <input type="hidden" name="question"
                        value="Feeling hot">


                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Wobbliness in legs</h6>
                    <input type="hidden" name="question"
                        value="Wobbliness in legs">

                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Unable to relax</h6>
                    <input type="hidden" name="question"
                        value="Unable to relax">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Fear of worst happening</h6>
                    <input type="hidden" name="question"
                        value="Fear of worst happening">
                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Dizzy or lightheaded</h6>
                    <input type="hidden" name="question"
                        value="Dizzy or lightheaded">
                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Heart pounding/racing</h6>
                    <input type="hidden" name="question"
                        value="Heart pounding/racing">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Unsteady</h6>
                    <input type="hidden" name="question"
                        value="Unsteady">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Terrified or afraid</h6>
                    <input type="hidden" name="question"
                        value="Terrified or afraid">
                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Nervous</h6>
                    <input type="hidden" name="question"
                        value="Nervous">

                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Feeling of choking</h6>
                    <input type="hidden" name="question"
                        value="Feeling of choking">
                    @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', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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">Hands trembling</h6>
                    <input type="hidden" name="question"
                        value="Hands trembling">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" 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">
                    <h6 class="mb-4 text-white">Shaky/unsteady</h6>
                    <input type="hidden" name="question" value="Shaky/unsteady">
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" 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">
                    <h6 class="mb-4 text-white">Fear of losing control</h6>
                    <input type="hidden" name="question"
                        value="Fear of losing control">
                    @for ($i = 0; $i <= 3; $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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" 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">
                    <h6 class="mb-4 text-white">Difficulty in breathing	</h6>
                    <input type="hidden" name="question"
                        value="Difficulty in breathing">

                    @for ($i = 0; $i <= 3; $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 at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" 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">
                    <h6 class="mb-4 text-white">Fear of dying</h6>
                    <input type="hidden" name="question"
                        value="Fear of dying">
                    @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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" 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">
                    <h6 class="mb-4 text-white">Scared</h6>
                    <input type="hidden" name="question"
                        value="Scared">

                    @for ($i = 0; $i <= 3; $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 }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>

                    </div>
                </div>




                <!-- Question 18 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
                    <h6 class="mb-4 text-white">Indigestion</h6>
                    <input type="hidden" name="question" value="Indigestion">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question18"
                                id="question18_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question18_{{ $i }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>

                <!-- Question 19 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
                    <h6 class="mb-4 text-white">Faint/lightheaded</h6>
                    <input type="hidden" name="question" value="Faint/lightheaded">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question19"
                                id="question19_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question19_{{ $i }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>


                <!-- Question 20 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
                    <h6 class="mb-4 text-white">Face flushed</h6>
                    <input type="hidden" name="question" value="Face flushed">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question20"
                                id="question20_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question20_{{ $i }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">Previous</button>
                        <button class="btn btn-primary" id="nextBtn" onclick="navigateQuestion(1, event)">Next</button>
                    </div>

                </div>



                <!-- Question 21 -->
                <div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
                    <h6 class="mb-4 text-white">Hot/cold sweats</h6>
                    <input type="hidden" name="question" value="Hot/cold sweats">
                    @for ($i = 0; $i <= 3; $i++)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="question21"
                                id="question21_{{ $i }}" value="{{ $i }}">
                            <label class="form-check-label text-white"
                                for="question21_{{ $i }}">{{ ['Not at all', 'Mildly, but it didn"t bother me much', 'Moderately, it wasn"t pleasant at times', 'Severely, it bothered me a lot'][$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)">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