@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">Eating Disorder Examination Questionnaire (EDE-Q 6.0)</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>
    The following questions are concerned with the past four weeks (28 days) only. Please read each question carefully. Please answer all the questions. Thank you.
    
    </p>
</div>
<form id="questionForm" onsubmit="submitForm(event)" class="ajax-form forms-sample" method="post" action="{{ route('mentalHealth.edeqStore') }}" 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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you been deliberately trying to limit the amount of food you eat to influence your shape or weight (whether or not you have succeeded)?
    </h6>
    <input type="hidden" name="question" value="Have you been deliberately trying to limit the amount of food you eat to influence your shape or weight (whether or not you have succeeded)?">
    
    @for ($i = 0; $i <= 6; $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 days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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">
<h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you gone for long periods of time (8 waking hours or more) without eating anything at all in order to influence your shape or weight?
    </h6>
    <input type="hidden" name="question" value="Have you gone for long periods of time (8 waking hours or more) without eating anything at all in order to influence your shape or weight?">
    
    @for ($i = 0; $i <= 6; $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 days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you tried to exclude from your diet any foods that you like in order to influence your shape or weight (whether or not you have succeeded)?
    </h6>
    <input type="hidden" name="question" value="Have you tried to exclude from your diet any foods that you like in order to influence your shape or weight (whether or not you have succeeded)?">
    
    @for ($i = 0; $i <= 6; $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 days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you tried to follow definite rules regarding your eating (for example, a calorie limit) in order to influence your shape or weight (whether or not you have succeeded)?
    </h6>
    <input type="hidden" name="question" value="Have you tried to follow definite rules regarding your eating (for example, a calorie limit) in order to influence your shape or weight (whether or not you have succeeded)?">
    
    @for ($i = 0; $i <= 6; $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 days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you had a definite desire to have an empty stomach with the aim of influencing your shape or weight?
    </h6>
    <input type="hidden" name="question" value="Have you had a definite desire to have an empty stomach with the aim of influencing your shape or weight?">
    
    @for ($i = 0; $i <= 6; $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 days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you had a definite desire to have a totally flat stomach?
    </h6>
    <input type="hidden" name="question" value="Have you had a definite desire to have a totally flat stomach?">
    
    @for ($i = 0; $i <= 6; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question6" id="question6_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question6_{{ $i }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Has thinking about food, eating or calories made it very difficult to concentrate on things you are interested in (for example, working, following a conversation, or reading)?
    </h6>
    <input type="hidden" name="question" value="Has thinking about food, eating or calories made it very difficult to concentrate on things you are interested in (for example, working, following a conversation, or reading)?">
    
    @for ($i = 0; $i <= 6; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question7" id="question7_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question7_{{ $i }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Has thinking about shape or weight made it very difficult to concentrate on things you are interested in (for example, working, following a conversation, or reading)?
    </h6>
    <input type="hidden" name="question" value="Has thinking about shape or weight made it very difficult to concentrate on things you are interested in (for example, working, following a conversation, or reading)?">
    
    @for ($i = 0; $i <= 6; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question8" id="question8_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question8_{{ $i }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you had a definite fear of losing control over eating?
    </h6>
    <input type="hidden" name="question" value="Have you had a definite fear of losing control over eating?">
    
    @for ($i = 0; $i <= 6; $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 }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you had a definite fear that you might gain weight?
    </h6>
    <input type="hidden" name="question" value="Have you had a definite fear that you might gain weight?">
    
    @for ($i = 0; $i <= 6; $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 }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="11">
<h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you felt fat?
    </h6>
    <input type="hidden" name="question" value="Have you felt fat?">
    
    @for ($i = 0; $i <= 6; $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 }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="12">
<h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days) only.</h2>
    <h6 class="mb-4 text-white">
        Have you had a strong desire to lose weight?
    </h6>
    <input type="hidden" name="question" value="Have you had a strong desire to lose weight?">
    
    @for ($i = 0; $i <= 6; $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 }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="13">
    <h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Over the past 28 days, how many times have you eaten what other people would regard as an unusually large amount of food (given the circumstances)?
    </h6>
    <input type="hidden" name="question" id="question13" value="Over the past 28 days, how many times have you eaten what other people would regard as an unusually large amount of food (given the circumstances)?">
    
    <div class="form-group">
        <input type="number" name="question13" class="form-control" placeholder="Enter number" min="0">
    </div>
    
    <!-- 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" 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">
<h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        ...On how many of these times did you have a sense of having lost control over your eating (at the time that you were eating)?
    </h6>
    <input type="hidden" name="question" value="...On how many of these times did you have a sense of having lost control over your eating (at the time that you were eating)?">
    
    <div class="form-group">
        <input type="number" name="question14" class="form-control" placeholder="Enter number" min="0">
    </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 15 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="15">
    <h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Over the past 28 days, on how many DAYS have such episodes of overeating occurred (i.e., you have eaten an unusually large amount of food and have had a sense of loss of control at the time)?
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, on how many DAYS have such episodes of overeating occurred (i.e., you have eaten an unusually large amount of food and have had a sense of loss of control at the time)?">
    
    <div class="form-group">
        <input type="number" name="question15" class="form-control" placeholder="Enter number" min="0">
    </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 16 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="16">
    <h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Over the past 28 days, how many times have you made yourself sick (vomit) as a means of controlling your shape or weight?
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, how many times have you made yourself sick (vomit) as a means of controlling your shape or weight?">
    
    <div class="form-group">
        <input type="number" name="question16" class="form-control" placeholder="Enter number" min="0">
    </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 17 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="17">
    <h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Over the past 28 days, how many times have you taken laxatives as a means of controlling your shape or weight?
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, how many times have you taken laxatives as a means of controlling your shape or weight?">
    
    <div class="form-group">
        <input type="number" name="question17" class="form-control" placeholder="Enter number" min="0">
    </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 18 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="18">
    <h2>Please fill in the appropriate number in the boxes on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Over the past 28 days, how many times have you exercised in a "driven" or "compulsive" way as a means of controlling your weight, shape or amount of fat, or to burn off calories?
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, how many times have you exercised in a 'driven' or 'compulsive' way as a means of controlling your weight, shape or amount of fat, or to burn off calories?">
    
    <div class="form-group">
        <input type="number" name="question18" class="form-control" placeholder="Enter number" min="0">
    </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 19 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="19">
<h2>Please circle the appropriate number. Please note that for these questions the term "binge eating" means eating what others would regard as an unusually large amount of food for the circumstances, accompanied by a sense of having lost control over eating.</h2>
    <h6 class="mb-4 text-white">
    Over the past 28 days, on how many days have you eaten in secret (i.e., furtively)? ...Do not count episodes of binge eating.
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, on how many days have you eaten in secret (i.e., furtively)? ...Do not count episodes of binge eating.">
    
    @for ($i = 0; $i <= 6; $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 }}">
                {{ ['No days', '1-5 days', '6-12 days', '13-15 days', '16-22 days', '23-27 days', 'Every day'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="20">
<h2>Please circle the appropriate number. Please note that for these questions the term "binge eating" means eating what others would regard as an unusually large amount of food for the circumstances, accompanied by a sense of having lost control over eating.</h2>
    <h6 class="mb-4 text-white">
    On what proportion of the times that you have eaten have you felt guilty (felt that you've done wrong) because of its effect on your shape or weight? ...Do not count episodes of binge eating.
    </h6>
    <input type="hidden" name="question" value="On what proportion of the times that you have eaten have you felt guilty (felt that you've done wrong) because of its effect on your shape or weight? ...Do not count episodes of binge eating.">
    
    @for ($i = 0; $i <= 6; $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 of the times', 'A few of the times', 'Less than half', 'Half of the times', 'More than half', 'Most of the time', 'Every time'][$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 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="21">
<h2>Please circle the appropriate number. Please note that for these questions the term "binge eating" means eating what others would regard as an unusually large amount of food for the circumstances, accompanied by a sense of having lost control over eating.</h2>
    <h6 class="mb-4 text-white">
    Over the past 28 days, how concerned have you been about other people seeing you eat? ...Do not count episodes of binge eating.
    </h6>
    <input type="hidden" name="question" value="Over the past 28 days, how concerned have you been about other people seeing you eat? ...Do not count episodes of binge eating.">
    
    @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', 'Slightly', 'Moderately', 'Markedly'][$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 22 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="22">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Has your weight influenced how you think about (judge) yourself as a person?
    </h6>
    <input type="hidden" name="question" value="Has your weight influenced how you think about (judge) yourself as a person?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question22" id="question22_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question22_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 23 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="23">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        Has your shape influenced how you think about (judge) yourself as a person?
    </h6>
    <input type="hidden" name="question" value="Has your shape influenced how you think about (judge) yourself as a person?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question23" id="question23_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question23_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 24 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="24">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        How much would it have upset you if you had been asked to weigh yourself once a week (no more, or less, often) for the next four weeks?
    </h6>
    <input type="hidden" name="question" value="How much would it have upset you if you had been asked to weigh yourself once a week (no more, or less, often) for the next four weeks?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question24" id="question24_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question24_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 25 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="25">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        How dissatisfied have you been with your weight?
    </h6>
    <input type="hidden" name="question" value="How dissatisfied have you been with your weight?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question25" id="question25_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question25_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 26 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="26">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        How dissatisfied have you been with your shape?
    </h6>
    <input type="hidden" name="question" value="How dissatisfied have you been with your shape?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question26" id="question26_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question26_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 27 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="27">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        How uncomfortable have you felt seeing your body (for example, seeing your shape in the mirror, in a shop window reflection, while undressing or taking a bath or shower)?
    </h6>
    <input type="hidden" name="question" value="How uncomfortable have you felt seeing your body (for example, seeing your shape in the mirror, in a shop window reflection, while undressing or taking a bath or shower)?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question27" id="question27_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question27_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 28 -->
<div class="bg-secondary border border-white rounded h-100 p-4 question d-none" data-question="28">
    <h2>Please circle the appropriate number on the right. Remember that the questions only refer to the past four weeks (28 days).</h2>
    <h6 class="mb-4 text-white">
        How uncomfortable have you felt about others seeing your shape or figure (for example, in communal changing rooms, when swimming, or wearing tight clothes)?
    </h6>
    <input type="hidden" name="question" value="How uncomfortable have you felt about others seeing your shape or figure (for example, in communal changing rooms, when swimming, or wearing tight clothes)?">
    
    @for ($i = 0; $i <= 3; $i++)
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="question28" id="question28_{{ $i }}" value="{{ $i }}">
            <label class="form-check-label text-white" for="question28_{{ $i }}">
                {{ ['Not at all','Slightly','Moderately','Markedly'][$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 