@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">Trauma Screening Questionnaire (TSQ)</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 consider the following reactions which sometimes occur after a traumatic event. This questionnaire asks about your personal reactions to the traumatic event which you experienced. Please indicate (Yes/No) whether or not you have experienced any of the following at least twice in the past week.
    </p>
</div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post" action="{{ route('mentalHealth.tsqStore') }}" 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>Re-experiencing symptoms</h2>
    <h6 class="mb-4 text-white">
    Upsetting thoughts or memories about the event that have come into your mind against your will
    </h6>
    <input type="hidden" name="question" value="Upsetting thoughts or memories about the event that have come into your mind against your will">
    
    @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 }}">
                {{ ['Yes', 'No'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="2">
    <h2>Re-experiencing symptoms</h2>
    <h6 class="mb-4 text-white">
        Upsetting dreams about the event
    </h6>
    <input type="hidden" name="question" value="Upsetting dreams about the event">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Re-experiencing symptoms</h2>
    <h6 class="mb-4 text-white">
        Acting or feeling as though the event were happening again
    </h6>
    <input type="hidden" name="question" value="Acting or feeling as though the event were happening again">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Re-experiencing symptoms</h2>
    <h6 class="mb-4 text-white">
        Feeling upset by reminders of the event
    </h6>
    <input type="hidden" name="question" value="Feeling upset by reminders of the event">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Re-experiencing symptoms</h2>
    <h6 class="mb-4 text-white">
        Bodily reactions (such as fast heartbeat, stomach churning, sweatiness, dizziness) when reminded of the event
    </h6>
    <input type="hidden" name="question" value="Bodily reactions (such as fast heartbeat, stomach churning, sweatiness, dizziness) when reminded of the event">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Arousal symptoms</h2>
    <h6 class="mb-4 text-white">
        Difficulty falling or staying asleep
    </h6>
    <input type="hidden" name="question" value="Difficulty falling or staying asleep">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Arousal symptoms</h2>
    <h6 class="mb-4 text-white">
        Irritability or outbursts of anger
    </h6>
    <input type="hidden" name="question" value="Irritability or outbursts of anger">

    @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 }}">
                {{ ['Yes', 'No'][$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">
    <h2>Arousal symptoms</h2>
    <h6 class="mb-4 text-white">
        Difficulty concentrating
    </h6>
    <input type="hidden" name="question" value="Difficulty concentrating">

    @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 }}">
                {{ ['Yes', 'No'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="9">
    <h2>Arousal symptoms</h2>
    <h6 class="mb-4 text-white">
        Heightened awareness of potential dangers to yourself and others
    </h6>
    <input type="hidden" name="question" value="Heightened awareness of potential dangers to yourself and others">

    @for ($i = 0; $i <= 1; $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 }}">
                {{ ['Yes', 'No'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="10">
    <h2>Arousal symptoms</h2>
    <h6 class="mb-4 text-white">
        Being jumpy or being startled at something unexpected
    </h6>
    <input type="hidden" name="question" value="Being jumpy or being startled at something unexpected">

    @for ($i = 0; $i <= 1; $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 }}">
                {{ ['Yes', 'No'][$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