@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 Scale for Suicide Ideation (BSS)</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 the following statement to the patient:

"I'm going to be asking you some questions about thoughts and feelings you may have been having. Some of these questions may be difficult to answer, but please try to answer them as honestly as possible. The information will help us provide you with the best care."

For each item, please select the statement that best represents the patient's thoughts and feelings. Each item contains three options, scored 0, 1, or 2, with higher scores indicating greater suicide risk.
</div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post" action="{{ route('mentalHealth.bssStore') }}" 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">
    <h2>Screening Items</h2>
    <h6 class="mb-4 text-white">
    Wish to Live
    </h6>
    <input type="hidden" name="question" value="Wish to Live">
    
    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Moderate to strong', 'Weak', 'None'][$i] }}
            </label> 
        </div>
        <hr>
    @endfor

    <div class="d-flex justify-content-between mt-4">
        <button class="btn btn-outline-light" id="prevBtn" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>


<!-- Question 2: Wish to Die -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="2">
    <h2>Screening Items</h2>
    <h6 class="mb-4 text-white">
        Wish to Die
    </h6>
    <input type="hidden" name="question" value="Wish to Die">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['None', 'Weak', 'Moderate to strong'][$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: Reasons for Living/Dying -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
    <h2>Screening Items</h2>
    <h6 class="mb-4 text-white">
        Reasons for Living/Dying
    </h6>
    <input type="hidden" name="question" value="Reasons for Living/Dying">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Living outweigh dying', 'About equal', 'Dying outweigh living'][$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: Desire to Make Active Suicide Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
    <h2>Screening Items</h2>
    <h6 class="mb-4 text-white">
        Desire to Make Active Suicide Attempt
    </h6>
    <input type="hidden" name="question" value="Desire to Make Active Suicide Attempt">

    @for ($i = 0; $i <= 2; $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', 'Weak', 'Moderate to strong'][$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: Passive Suicidal Desire -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
    <h2>Screening Items</h2>
    <h6 class="mb-4 text-white">
        Passive Suicidal Desire
    </h6>
    <input type="hidden" name="question" value="Passive Suicidal Desire">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Would take precautions to save life', 'Would leave life/death to chance', 'Would avoid steps necessary to save or maintain life'][$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: Passive Suicidal Desire -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
    Duration of Suicidal Thoughts
    </h6>
    <input type="hidden" name="question" value="Duration of Suicidal Thoughts">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Brief, fleeting periods', 'Longer periods', 'Continuous or almost continuous'][$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: Frequency of Suicidal Ideation -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Frequency of Suicidal Ideation
    </h6>
    <input type="hidden" name="question" value="Frequency of Suicidal Ideation">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Rare, occasional', 'Intermittent', 'Persistent or continuous'][$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: Attitude Toward Suicidal Thoughts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Attitude Toward Suicidal Thoughts
    </h6>
    <input type="hidden" name="question" value="Attitude Toward Suicidal Thoughts">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Rejecting', 'Ambivalent, indifferent', 'Accepting'][$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: Control Over Suicidal Action -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Control Over Suicidal Action
    </h6>
    <input type="hidden" name="question" value="Control Over Suicidal Action">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Has sense of control', 'Unsure about control', 'Has no sense of control'][$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: Deterrents to Active Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Deterrents to Active Attempt
    </h6>
    <input type="hidden" name="question" value="Deterrents to Active Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Would not attempt because of a deterrent', 'Some concern about deterrents', 'Minimal or no concern about deterrents'][$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: Reason for Contemplated Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Reason for Contemplated Attempt
    </h6>
    <input type="hidden" name="question" value="Reason for Contemplated Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['To manipulate environment, get attention, revenge', 'Combination of 0 and 2', 'To escape, solve problems'][$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 12: Method - Specificity/Planning -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Method: Specificity/Planning
    </h6>
    <input type="hidden" name="question" value="Method: Specificity/Planning">

    @for ($i = 0; $i <= 2; $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 considered', 'Considered but details not worked out', 'Details worked out, well formulated'][$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 13: Method - Availability/Opportunity -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Method: Availability/Opportunity
    </h6>
    <input type="hidden" name="question" value="Method: Availability/Opportunity">

    @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 }}">
                {{ ['Method not available, no opportunity', 'Method would take time/effort; opportunity not readily available', 'Method and opportunity available', 'Future opportunity or availability anticipated'][$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 14: Sense of Capability to Carry Out Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="14">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Sense of Capability to Carry Out Attempt
    </h6>
    <input type="hidden" name="question" value="Sense of Capability to Carry Out Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['No courage, too weak, afraid, incompetent', 'Unsure of courage, competence', 'Sure of competence, courage'][$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 15: Expectancy/Anticipation of Actual Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Expectancy/Anticipation of Actual Attempt
    </h6>
    <input type="hidden" name="question" value="Expectancy/Anticipation of Actual Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['No', 'Uncertain, not sure', '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 16: Actual Preparation for Contemplated Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Actual Preparation for Contemplated Attempt
    </h6>
    <input type="hidden" name="question" value="Actual Preparation for Contemplated Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['None', 'Partial (e.g., starting to collect pills)', 'Complete (e.g., had pills, loaded gun)'][$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 17: Suicide Note -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Suicide Note
    </h6>
    <input type="hidden" name="question" value="Suicide Note">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['None', 'Started but not completed, only thought about', 'Completed'][$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 18: Final Acts in Anticipation of Death -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Final Acts in Anticipation of Death
    </h6>
    <input type="hidden" name="question" value="Final Acts in Anticipation of Death">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['None', 'Thought about or made some arrangements', 'Made definite plans or completed arrangements'][$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 19: Deception/Concealment of Contemplated Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
    <h2>Active Suicidal Ideation Items</h2>
    <h6 class="mb-4 text-white">
        Deception/Concealment of Contemplated Attempt
    </h6>
    <input type="hidden" name="question" value="Deception/Concealment of Contemplated Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Revealed ideas openly', 'Held back on revealing', 'Attempted to deceive, conceal, lie'][$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 20: Previous Suicide Attempts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
    <h2>Background Factors</h2>
    <h6 class="mb-4 text-white">
        Previous Suicide Attempts
    </h6>
    <input type="hidden" name="question" value="Previous Suicide Attempts">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['None', 'One', 'More than one'][$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 21: Intent to Die During Last Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
    <h2>Background Factors</h2>
    <h6 class="mb-4 text-white">
        Intent to Die During Last Attempt  
        <br>(Complete only if there was a previous attempt)
    </h6>
    <input type="hidden" name="question" value="Intent to Die During Last Attempt">

    @for ($i = 0; $i <= 2; $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 }}">
                {{ ['Low', 'Moderate, ambivalent', 'High'][$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>
  
  </div>
  </div>
  </form>
  <!-- JavaScript for Navigation -->
  
  @endsection