@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">Columbia-Suicide Severity Rating Scale (C-SSRS)</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>Ask questions that are in bold. Questions with bullets are follow-up questions to gain more information if needed. 
</p></div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form-new forms-sample" method="post" action="{{ route('mentalHealth.cSsrsStore') }}" 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>Wish to be Dead</h2>
    <h6 class="mb-4 text-white">
    Have you wished you were dead or wished you could go to sleep and not wake up?
    </h6>
    <input type="hidden" name="question" value="Have you wished you were dead or wished you could go to sleep and not wake up?">

    @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" id="prevBtn" onclick="navigateQuestion(-1, event)">Previous</button>
        <button class="btn btn-primary" onclick="navigateQuestion(1, event)">Next</button>
    </div>
</div>



<!-- Question 2: Active Suicidal Thoughts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="2">
    <h2>Active Suicidal Thoughts</h2>
    <h6 class="mb-4 text-white">
        Have you actually had any thoughts of killing yourself?
    </h6>
    <input type="hidden" name="question" value="Have you actually had any thoughts of killing yourself?">

    @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: Suicidal Thoughts with Method -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="3">
    <h2>Suicidal Thoughts with Method</h2>
    <h6 class="mb-4 text-white">
        Have you been thinking about how you might do this?
    </h6>
    <input type="hidden" name="question" value="Have you been thinking about how you might do this?">

    @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: Suicidal Intent (without Specific Plan) -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="4">
    <h2>Suicidal Intent (without Specific Plan)</h2>
    <h6 class="mb-4 text-white">
        Have you had these thoughts and had some intention of acting on them?
    </h6>
    <input type="hidden" name="question" value="Have you had these thoughts and had some intention of acting on them?">

    @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: Suicidal Intent with Specific Plan -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="5">
    <h2>Suicidal Intent with Specific Plan</h2>
    <h6 class="mb-4 text-white">
        Have you started to work out or worked out the details of how to kill yourself? Do you intend to carry out this plan?
    </h6>
    <input type="hidden" name="question" value="Have you started to work out or worked out the details of how to kill yourself? Do you intend to carry out this plan?">

    @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: Frequency of Suicidal Thoughts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="6">
    <h2>Frequency of Suicidal Thoughts</h2>
    <h6 class="mb-4 text-white">
        How many times have you had these thoughts?
    </h6>
    <input type="hidden" name="question" value="How many times have you had these thoughts?">

    @for ($i = 1; $i <= 5; $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 }}">
                {{ ['Less than once a week', 'Once a week', '2-5 times a week', 'Daily or almost daily', 'Many times each day'][$i-1] }}
            </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: Duration of Suicidal Thoughts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="7">
    <h2>Duration of Suicidal Thoughts</h2>
    <h6 class="mb-4 text-white">
        When you have these thoughts, how long do they last?
    </h6>
    <input type="hidden" name="question" value="When you have these thoughts, how long do they last?">

    @for ($i = 1; $i <= 5; $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 }}">
                {{ ['Fleeting - few seconds or minutes', 'Less than 1 hour / some of the time', '1-4 hours / a lot of time', '4-8 hours / most of day', 'More than 8 hours / persistent or continuous'][$i-1] }}
            </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: Controllability of Suicidal Thoughts -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="8">
    <h2>Controllability of Suicidal Thoughts</h2>
    <h6 class="mb-4 text-white">
        Could/can you stop thinking about killing yourself or wanting to die if you want to?
    </h6>
    <input type="hidden" name="question" value="Could/can you stop thinking about killing yourself or wanting to die if you want to?">

    @for ($i = 0; $i <= 5; $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 }}">
                {{ ['Does not attempt to control thoughts', 'Easily able to control thoughts', 'Can control thoughts with little difficulty', 'Can control thoughts with some difficulty', 'Can control thoughts with a lot of difficulty', 'Unable to control thoughts'][$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: Deterrents to Suicide -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
    <h2>Deterrents to Suicide</h2>
    <h6 class="mb-4 text-white">
        Are there things - anyone or anything (e.g., family, religion, pain of death) - that stopped you from wanting to die or acting on thoughts of suicide?
    </h6>
    <input type="hidden" name="question" value="Are there things - anyone or anything (e.g., family, religion, pain of death) - that stopped you from wanting to die or acting on thoughts of suicide?">

    @for ($i = 0; $i <= 5; $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 }}">
                {{ ['Does not apply', 'Deterrents definitely stopped you from attempting suicide', 'Deterrents probably stopped you', 'Uncertain that deterrents stopped you', 'Deterrents most likely did not stop you', 'Deterrents definitely did not stop you'][$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: Reasons for Suicidal Ideation -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
    <h2>Reasons for Suicidal Ideation</h2>
    <h6 class="mb-4 text-white">
        What sort of reasons did you have for thinking about wanting to die or killing yourself?
    </h6>
    <input type="hidden" name="question" value="What sort of reasons did you have for thinking about wanting to die or killing yourself?">

    @for ($i = 0; $i <= 5; $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 }}">
                {{ ['Does not apply', 'Completely to get attention, revenge or a reaction from others', 'Mostly to get attention, revenge or a reaction from others', 'Equally to get attention, revenge or a reaction from others and to end/stop the pain', 'Mostly to end or stop the pain', 'Completely to end or stop the pain'][$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: Actual Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
    <h2>Actual Attempt</h2>
    <input type="hidden" name="question" value="Have you made a suicide attempt? Have you done anything to harm yourself? Have you done anything dangerous where you could have died?">
    <h6 class="mb-4 text-white">
        Have you made a suicide attempt? Have you done anything to harm yourself? Have you done anything dangerous where you could have died?
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question11" id="question11_yes" value="yes" onclick="toggleDetails(true)">
        <label class="form-check-label text-white" for="question11_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question11" id="question11_no" value="no" onclick="toggleDetails(false)">
        <label class="form-check-label text-white" for="question11_no">No</label>
    </div>

    <!-- Additional Questions (Hidden Initially) -->
    <div id="attemptDetails" style="display: none;">
        <div class="mt-3">
            <label for="attempt_description_1" class="text-white">What did you do?</label>
            <textarea class="form-control" id="attempt_description_1" name="attempt_description_1" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="attempt_description_2" class="text-white">Did you______ as a way to end your life?</label>
            <textarea class="form-control" id="attempt_description_2" name="attempt_description_2" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="attempt_description_3" class="text-white">Did you want to die (even a little) when you_____?</label>
            <textarea class="form-control" id="attempt_description_3" name="attempt_description_3" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="attempt_description_4" class="text-white">Were you trying to end your life when you _____?</label>
            <textarea class="form-control" id="attempt_description_4" name="attempt_description_4" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="attempt_description_5" class="text-white">Or did you think it was possible you could have died from_____?</label>
            <textarea class="form-control" id="attempt_description_5" name="attempt_description_5" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="attempt_description_6" class="text-white">
                Or did you do it purely for other reasons, not at all to end your life or kill yourself?
            </label>
            <textarea class="form-control" id="attempt_description_6" name="attempt_description_6" rows="3"></textarea>
        </div>

  
    </div>

    <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: Interrupted Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
    <h2>Interrupted Attempt</h2>
    <input type="hidden" name="question" value="Has there been a time when you started to do something to end your life but someone or something stopped you before you actually did anything?">
    <h6 class="mb-4 text-white">
        Has there been a time when you started to do something to end your life but someone or something stopped you before you actually did anything?
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question12" id="question12_yes" value="yes" onclick="toggleInterruptedDetails(true)">
        <label class="form-check-label text-white" for="question12_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question12" id="question12_no" value="no" onclick="toggleInterruptedDetails(false)">
        <label class="form-check-label text-white" for="question12_no">No</label>
    </div>

    <!-- Additional Questions (Hidden Initially) -->
    <div id="interruptedDetails" style="display: none;">
        <div class="mt-3">
            <label for="interrupted_description_1" class="text-white">What did you do?</label>
            <textarea class="form-control" id="interrupted_description_1" name="interrupted_description_1" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="interrupted_description_2" class="text-white">Did you______ as a way to end your life?</label>
            <textarea class="form-control" id="interrupted_description_2" name="interrupted_description_2" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="interrupted_description_3" class="text-white">Did you want to die (even a little) when you_____?</label>
            <textarea class="form-control" id="interrupted_description_3" name="interrupted_description_3" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="interrupted_description_4" class="text-white">Were you trying to end your life when you _____?</label>
            <textarea class="form-control" id="interrupted_description_4" name="interrupted_description_4" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="interrupted_description_5" class="text-white">Or did you think it was possible you could have died from_____?</label>
            <textarea class="form-control" id="interrupted_description_5" name="interrupted_description_5" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="interrupted_description_6" class="text-white">
                Or did you do it purely for other reasons, not at all to end your life or kill yourself (like to relieve stress, feel better, get sympathy, or get something else to happen)?
            </label>
            <textarea class="form-control" id="interrupted_description_6" name="interrupted_description_6" rows="3"></textarea>
        </div>
    </div>

    <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: Aborted or Self-Interrupted Attempt -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
    <h2>Aborted or Self-Interrupted Attempt</h2>
    <input type="hidden" name="question" value="Has there been a time when you started to do something to try to end your life but you stopped yourself before you actually did anything?">
    <h6 class="mb-4 text-white">
        Has there been a time when you started to do something to try to end your life but you stopped yourself before you actually did anything?
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question13" id="question13_yes" value="yes" onclick="toggleAbortedDetails(true)">
        <label class="form-check-label text-white" for="question13_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question13" id="question13_no" value="no" onclick="toggleAbortedDetails(false)">
        <label class="form-check-label text-white" for="question13_no">No</label>
    </div>

    <!-- Additional Questions (Hidden Initially) -->
    <div id="abortedDetails" style="display: none;">
        <div class="mt-3">
            <label for="aborted_description_1" class="text-white">What did you do?</label>
            <textarea class="form-control" id="aborted_description_1" name="aborted_description_1" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="aborted_description_2" class="text-white">Did you______ as a way to end your life?</label>
            <textarea class="form-control" id="aborted_description_2" name="aborted_description_2" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="aborted_description_3" class="text-white">Did you want to die (even a little) when you_____?</label>
            <textarea class="form-control" id="aborted_description_3" name="aborted_description_3" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="aborted_description_4" class="text-white">Were you trying to end your life when you _____?</label>
            <textarea class="form-control" id="aborted_description_4" name="aborted_description_4" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="aborted_description_5" class="text-white">Or did you think it was possible you could have died from_____?</label>
            <textarea class="form-control" id="aborted_description_5" name="aborted_description_5" rows="3"></textarea>
        </div>

        <div class="mt-3">
            <label for="aborted_description_6" class="text-white">
                Or did you do it purely for other reasons, not at all to end your life?
            </label>
            <textarea class="form-control" id="aborted_description_6" name="aborted_description_6" rows="3"></textarea>
        </div>
    </div>

    <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: Preparatory Acts or Behavior -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="14">
    <h2>Preparatory Acts or Behavior</h2>
    <input type="hidden" name="question" value="Have you taken any steps towards making a suicide attempt or preparing to kill yourself (such as collecting pills, getting a gun, giving valuables away or writing a suicide note)?">
    <h6 class="mb-4 text-white">
        Have you taken any steps towards making a suicide attempt or preparing to kill yourself (such as collecting pills, getting a gun, giving valuables away or writing a suicide note)?
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question14" id="question14_yes" value="yes" onclick="togglePreparatoryDetails(true)">
        <label class="form-check-label text-white" for="question14_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question14" id="question14_no" value="no" onclick="togglePreparatoryDetails(false)">
        <label class="form-check-label text-white" for="question14_no">No</label>
    </div>

    <!-- Optional Additional Details (Hidden Initially) -->
    <div id="preparatoryDetails" style="display: none;">
       <div class="mt-3">
         <label for="preparatory_description" class="text-white">Please describe what steps you took</label>
         <textarea class="form-control" id="preparatory_description" name="preparatory_description" rows="3"></textarea>
       </div>
    </div>

    <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: Non-Suicidal Self-Injurious Behavior -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
    <h2>Non-Suicidal Self-Injurious Behavior</h2>
    <input type="hidden" name="question" value="Have you engaged in any self-injurious behavior without intent to die? (e.g., cutting, burning, etc.)">
    <h6 class="mb-4 text-white">
        Have you engaged in any self-injurious behavior without intent to die? (e.g., cutting, burning, etc.)
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question15" id="question15_yes" value="yes" onclick="toggleSelfInjuryDetails(true)">
        <label class="form-check-label text-white" for="question15_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question15" id="question15_no" value="no" onclick="toggleSelfInjuryDetails(false)">
        <label class="form-check-label text-white" for="question15_no">No</label>
    </div>

    <!-- Optional Additional Details (Hidden Initially) -->
    <div id="selfInjuryDetails" style="display: none;">
       <div class="mt-3">
         <label for="selfinjury_description" class="text-white">Please describe the behavior and frequency</label>
         <textarea class="form-control" id="selfinjury_description" name="selfinjury_description" rows="3"></textarea>
       </div>
    </div>

    <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: Suicide -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
    <h2>Suicide</h2>
    <input type="hidden" name="question" value="Have you ever attempted suicide?">
    <h6 class="mb-4 text-white">
        Have you ever attempted suicide?
    </h6>

    <!-- Yes/No Options -->
    <div class="form-check">
        <input class="form-check-input" type="radio" name="question16" id="question16_yes" value="yes" onclick="toggleSuicideDetails(true)">
        <label class="form-check-label text-white" for="question15_yes">Yes</label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" name="question16" id="question16_no" value="no" onclick="toggleSuicideDetails(false)">
        <label class="form-check-label text-white" for="question16_no">No</label>
    </div>

    <!-- Optional Additional Details (Hidden Initially) -->
    <div id="suicideDetails" style="display: none;">
       <div class="mt-3">
         <label for="suicide_description" class="text-white">Please describe your experience</label>
         <textarea class="form-control" id="suicide_description" name="suicide_description" rows="3"></textarea>
       </div>
    </div>

    <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: Most Recent/Most Lethal Attempt Details -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
    <h2>Most Recent/Most Lethal Attempt Details</h2>
    <input type="hidden" name="question" value="Most Recent/Most Lethal Attempt Details: Date of attempt and actual lethality/medical damage">
    <h6 class="mb-4 text-white">
        Please provide the details of your most recent or most lethal attempt.
    </h6>
    
    <!-- Actual Lethality/Medical Damage Options -->
    <div class="form-group mt-3">
        <label class="text-white">Actual lethality/Medical damage:</label>
        @for ($i = 0; $i <= 5; $i++)
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="question17" id="question_{{ $i }}" value="{{ $i }}">
                <label class="form-check-label text-white" for="question_{{ $i }}">
                    @if ($i == 0)
                        No physical damage or very minor physical damage (e.g., surface scratches)
                    @elseif ($i == 1)
                        Minor physical damage (e.g., lethargic speech; first-degree burns; mild bleeding; sprains)
                    @elseif ($i == 2)
                        Moderate physical damage; medical attention needed (e.g., conscious but sleepy, somewhat responsive; second-degree burns; bleeding of major vessel)
                    @elseif ($i == 3)
                        Moderately severe physical damage; medical hospitalization and likely intensive care required (e.g., comatose with reflexes intact; third-degree burns less than 20% of body; extensive blood loss but can recover; major fractures)
                    @elseif ($i == 4)
                        Severe physical damage; medical hospitalization with intensive care required (e.g., comatose without reflexes; third-degree burns over 20% of body; extensive blood loss with unstable vital signs; major damage to a vital area)
                    @elseif ($i == 5)
                        Death
                    @endif
                </label>
            </div>
            <hr>
        @endfor
    </div>
    
    <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: Potential Lethality -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
    <h2>Potential Lethality</h2>
    <h6 class="mb-4 text-white">
    Potential lethality: Only answer if actual lethality=0 Likely lethality of actual attempt if no medical damage (the following examples, while having no actual medical damage, had potential for very serious lethality: put gun in mouth and pulled the trigger but gun fails to fire so no medical damage; laying on train tracks with oncoming train but pulled away before run over)
    </h6>
    <input type="hidden" name="question" value="Potential lethality: Only answer if actual lethality=0 Likely lethality of actual attempt if no medical damage (the following examples, while having no actual medical damage, had potential for very serious lethality: put gun in mouth and pulled the trigger but gun fails to fire so no medical damage; laying on train tracks with oncoming train but pulled away before run over)">

    @for ($i = 0; $i <= 2; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question18" id="question_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question_{{ $i }}">
                {{ ['Behavior not likely to result in injury', 'Behavior likely to result in injury but not likely to cause death', 'Behavior likely to result in death despite available medical care'][$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 
<!-- JavaScript -->
<script>
    function toggleDetails(show) {
        document.getElementById("attemptDetails").style.display = show ? "block" : "none";
    }

    function toggleAbortedDetails(show) {
        document.getElementById("abortedDetails").style.display = show ? "block" : "none";
    }

  
    function toggleInterruptedDetails(show) {
         document.getElementById("interruptedDetails").style.display = show ? "block" : "none";
    }

    function togglePreparatoryDetails(show) {
         document.getElementById("preparatoryDetails").style.display = show ? "block" : "none";
    }
    function toggleSuicideDetails(show) {
         document.getElementById("suicideDetails").style.display = show ? "block" : "none";
    }

    function toggleSelfInjuryDetails(show) {
         document.getElementById("selfInjuryDetails").style.display = show ? "block" : "none";
    }
</script>
