@extends('layouts.main')

@section('container')

<!-- symbols for warning resources-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<!-- script starts here -->
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>

</head>

<!-- css resources -->
<link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bottom-bar.css" rel="stylesheet" type="text/css" media="all" />

<!-- this div is for the laptop picture -->
<div class="img"></div>

<!-- messages for answer error -->
@if (count($errors) > 0)
  <div class="alert alert-danger alert-block">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
      <use xlink:href="#exclamation-triangle-fill"/>
    </svg>
    {{ __('messages.notanswered') }}
    <ul>
      @foreach ($errors->all() as $error)
        <li>
          {{ $error }}
        </li>
      @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
@endif

<!-- messages for success answer -->
@if ($message = Session::get('answered'))
  <div class="alert alert-success alert-block">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
			<use xlink:href="#check-circle-fill"/></svg>
    <strong>{{ $message }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
@endif

<!-- messages redirect from empty result page -->
@if ($message = Session::get('nodata'))
  <div class="alert alert-warning alert-block">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
			<use xlink:href="#exclamation-triangle-fill"/>
    </svg>
    <strong>{{ $message }}</strong>
    <h5>{{ __('messages.notest') }}</h5>
  </div>
@endif

<!-- view for the test -->
<div class="container quiz">
  @auth

  <!-- form starts here -->
  <form action="/test" method="post">
    @csrf

    <!-- items for first page -->
    <div id="first">

    <!-- header part -->
      <div class="header">
        <h1>Profile survey</h1>
        <h5>{{ __('messages.subtitle1') }}</h5>

        <!-- progress bar -->
        <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

      </div>

      <!-- question part - business type-->
      <div class="business_type form-group" name="business_type">
        <div class="business_type_section">
          <div class="container business_type_section_question">
            <label class="title type" for="business_type">{{ __('messages.type') }} </label><br>

            <!-- answer part -->
            <div class="business_type_section_answer">
              
              <!-- startup -->
              <label for="startup">
                <input type="radio" id="startup" name="business_type" value="Startup">
                Startup
              </label><br>

              <!-- small company -->
              <label for="small industry">
                <input type="radio" id="small industry" name="business_type" value="Small Industry">
                {{ __('messages.size1') }}
              </label><br>

              <!-- medium company -->
              <label for="medium industry">
                <input type="radio" id="medium industry" name="business_type" value="Medium Industry">
                {{ __('messages.size2') }}
              </label><br>

              <!-- large company -->
              <label for="large industry">
                <input type="radio" id="large industry" name="business_type" value="Large Industry">
                {{ __('messages.size3') }}
              </label><br>

            </div>
          </div>
        </div>
      </div>
      <!-- navigation button part -->
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('second','first');">Next</button>
      </a>
    </div>
    
    <!-- items for second page -->
    <div id="second" style="display:none">

      <!-- header part -->
      <div class="header">
        <h1>Profile survey</h1>
        <h5>{{ __('messages.subtitle1') }}</h5>

        <!-- progress bar -->
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

      </div>

        <!-- question part -->
        <div class="business_field" name="business_field">
          <div class="business_field_section">
            <div class="container business_field_section_question">
              <label class="title" for="business_field">{{ __('messages.field') }}</label><br>

              <!-- answer part -->
              <div class="business_field_section_answer">
                <label for="agricultur">
                  <input type="radio" id="agricultur" name="business_field" value="Agriculture">
                  {{ __('messages.field1') }}
                </label><br>
                <label for="mining">
                  <input type="radio" id="mining" name="business_field" value="Mining">
                  {{ __('messages.field2') }}
                </label><br>
                <label for="manufactur">
                  <input type="radio" id="manufactur" name="business_field" value="Manufacturing">
                  {{ __('messages.field3') }}
                </label><br>
                <label for="construction">
                  <input type="radio" id="construction" name="business_field" value="Construction">
                  {{ __('messages.field4') }}
                </label><br>
                <label for="trade">
                  <input type="radio" id="trade" name="business_field" value="Trade">
                  {{ __('messages.field5') }}
                </label><br>
                <label for="finance">
                  <input type="radio" id="finance" name="business_field" value="Financial Service">
                  {{ __('messages.field6') }}
                </label><br>
                <label for="service">
                  <input type="radio" id="service" name="business_field" value="Personal Service">
                  {{ __('messages.field7') }}
                </label><br>
                <label for="public">
                  <input type="radio" id="public" name="business_field" value="Public Service">
                  {{ __('messages.field8') }}
                </label><br>
                <label for="tour">
                  <input type="radio" id="tour" name="business_field" value="Tourism Service">
                  {{ __('messages.field9') }}
                </label><br> 
                <label for="micro">
                  <input type="radio" id="micro" name="business_field" value="Micro Business">
                  {{ __('messages.field10') }}
                </label><br>
              </div>
              <!-- end of asnwer part -->
            </div>
          </div>
        </div>

        <!-- navigation button part -->
        <a href="#">
          <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('first','second');">Back</button>
        </a>
        <a href="#">
          <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('third','second');">Next</button>
        </a>
      </div>
        
    <!-- items for third page -->
    <div class="thirdpage" id="third" style="display:none">

    <!-- header part -->
    <div class="header">
      <h1>Survey Questions (External Environment)</h1>
      <h5>{{ __('messages.subtitle2') }}</h5>

      <!-- progress bar -->
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      
    </div>

    <!-- question number 1 -->
    <div class="quest1">
      <label class="title-question" for="quest1">1. {{ __('messages.quest1') }}</label><br>
      <span class="d-flex justify-content-evenly question_answer">
      <a>{{ __('messages.less_likely') }}</a>
      <span>
        <input type="radio" id="quest1_1" name="quest1" value="1">
        <label for="quest1_1">1</label>
      </span>
      <span>
        <input type="radio" id="quest1_2" name="quest1" value="2">
        <label for="quest1_2">2</label>
      </span>
      <span>
        <input type="radio" id="quest1_3" name="quest1" value="3">
        <label for="quest1_3">3</label>
      </span>
      <span>
        <input type="radio" id="quest1_4" name="quest1" value="4">
        <label for="quest1_4">4</label>
      </span>
      <span>
        <input type="radio" id="quest1_5" name="quest1" value="5">
        <label for="quest1_5">5</label>
      </span>
      <span>
        <input type="radio" id="quest1_6" name="quest1" value="6">
        <label for="quest1_6">6</label>
      </span>
      <a>{{ __('messages.most_likely') }}</a>
    </span>
  </div>

  <!-- question number 2 -->
  <div class="quest2">
    <label class="title-question" for="quest2">2. {{ __('messages.quest2') }}</label><br>
    <span class="d-flex justify-content-evenly question_answer">
      <a>{{ __('messages.less_likely') }}</a>
      <span>
        <input type="radio" id="quest2_1" name="quest2" value="1">
        <label for="quest2_1">1</label>
      </span>
      <span>
        <input type="radio" id="quest2_2" name="quest2" value="2">
        <label for="quest2_2">2</label>
      </span>
      <span>
        <input type="radio" id="quest2_3" name="quest2" value="3">
        <label for="quest2_3">3</label>
      </span>
      <span>
        <input type="radio" id="quest2_4" name="quest2" value="4">
        <label for="quest2_4">4</label>
      </span>
      <span>
        <input type="radio" id="quest2_5" name="quest2" value="5">
        <label for="quest2_5">5</label>
      </span>
      <span>
      <input type="radio" id="quest2_6" name="quest2" value="6">
      <label for="quest2_6">6</label>
    </span>
    <a>{{ __('messages.most_likely') }}</a>
  </span>
</div>

  <!-- question number 3 -->
  <div class="quest3">
    <label class="title-question" for="quest3">3. {{ __('messages.quest3') }}</label><br>
    <span class="d-flex justify-content-evenly question_answer">
      <a>{{ __('messages.less_likely') }}</a>
      <span>
              <input type="radio" id="quest3_1" name="quest3" value="1">
              <label for="quest3_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest3_2" name="quest3" value="2">
              <label for="quest3_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest3_3" name="quest3" value="3">
              <label for="quest3_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest3_4" name="quest3" value="4">
              <label for="quest3_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest3_5" name="quest3" value="5">
              <label for="quest3_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest3_6" name="quest3" value="6">
              <label for="quest3_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 4 -->
      <div class="quest4">
        <label class="title-question" for="quest4">4. {{ __('messages.quest4') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest4_1" name="quest4" value="1">
              <label for="quest4_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest4_2" name="quest4" value="2">
              <label for="quest4_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest4_3" name="quest4" value="3">
              <label for="quest4_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest4_4" name="quest4" value="4">
              <label for="quest4_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest4_5" name="quest4" value="5">
              <label for="quest4_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest4_6" name="quest4" value="6">
              <label for="quest4_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- navigation button part -->
      <a href="#">
      <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('second','third');">Back</button>
    </a>
      <a href="#">
      <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('fourth','third');">Next</button>
    </a>
  </div>

  <!-- items for the fourth page -->
  <div class="fourthpage" id="fourth" style="display:none">

  <!-- header part  -->
  <div class="header">
      <h1>Survey Questions (Internal Environment)</h1>
      <h5>{{ __('messages.subtitle2') }}</h5>

      <!-- progress bar -->
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

    </div>

    <!-- question number 5 -->
    <div class="quest5">
      <label class="title-question" for="quest5">5. {{ __('messages.quest5') }}</label><br>
      <span class="d-flex justify-content-evenly question_answer">
        <a>{{ __('messages.less_likely') }}</a>
        <span>
          <input type="radio" id="quest5_1" name="quest5" value="1">
          <label for="quest5_1">1</label>
        </span>
          <span>
              <input type="radio" id="quest5_2" name="quest5" value="2">
              <label for="quest5_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest5_3" name="quest5" value="3">
              <label for="quest5_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest5_4" name="quest5" value="4">
              <label for="quest5_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest5_5" name="quest5" value="5">
              <label for="quest5_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest5_6" name="quest5" value="6">
              <label for="quest5_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 6 -->
      <div class="quest6">
        <label class="title-question" for="quest6">6. {{ __('messages.quest6') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest6_1" name="quest6" value="1">
              <label for="quest6_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest6_2" name="quest6" value="2">
              <label for="quest6_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest6_3" name="quest6" value="3">
              <label for="quest6_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest6_4" name="quest6" value="4">
              <label for="quest6_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest6_5" name="quest6" value="5">
              <label for="quest6_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest6_6" name="quest6" value="6">
              <label for="quest6_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 7 -->
      <div class="quest7">
        <label class="title-question" for="quest7">7. {{ __('messages.quest7') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest7_1" name="quest7" value="1">
              <label for="quest7_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest7_2" name="quest7" value="2">
              <label for="quest7_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest7_3" name="quest7" value="3">
              <label for="quest7_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest7_4" name="quest7" value="4">
              <label for="quest7_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest7_5" name="quest7" value="5">
              <label for="quest7_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest7_6" name="quest7" value="6">
              <label for="quest7_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 8 -->
      <div class="quest8">
        <label class="title-question" for="quest8">8. {{ __('messages.quest8') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest8_1" name="quest8" value="1">
              <label for="quest8_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest8_2" name="quest8" value="2">
              <label for="quest8_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest8_3" name="quest8" value="3">
              <label for="quest8_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest8_4" name="quest8" value="4">
              <label for="quest8_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest8_5" name="quest8" value="5">
              <label for="quest8_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest8_6" name="quest8" value="6">
              <label for="quest8_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- navigation button part -->
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('third','fourth');">Back</button>
      </a>
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('fifth','fourth');">Next</button>
      </a>
    </div>
      
  <!-- items for the fifth page -->
  <div class="fifthpage" id="fifth" style="display:none">

  <!-- header part -->
  <div class="header">
      <h1>Survey Questions (Behavioural Aspect)</h1>
      <h5>{{ __('messages.subtitle2') }}</h5>

      <!-- progress bar -->
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

  </div>

  <!-- question number 9 -->
  <div class="quest9">
        <label class="title-question" for="quest9">9. {{ __('messages.quest9') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest9_1" name="quest9" value="1">
              <label for="quest9_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest9_2" name="quest9" value="2">
              <label for="quest9_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest9_3" name="quest9" value="3">
              <label for="quest9_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest9_4" name="quest9" value="4">
              <label for="quest9_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest9_5" name="quest9" value="5">
              <label for="quest9_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest9_6" name="quest9" value="6">
              <label for="quest9_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 10 -->
      <div class="quest10">
        <label class="title-question" for="quest10">10. {{ __('messages.quest10') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest10_1" name="quest10" value="1">
              <label for="quest10_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest10_2" name="quest10" value="2">
              <label for="quest10_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest10_3" name="quest10" value="3">
              <label for="quest10_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest10_4" name="quest10" value="4">
              <label for="quest10_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest10_5" name="quest10" value="5">
              <label for="quest10_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest10_6" name="quest10" value="6">
              <label for="quest10_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 11 -->
      <div class="quest11">
        <label class="title-question" for="quest11">11. {{ __('messages.quest11') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest11_1" name="quest11" value="1">
              <label for="quest11_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest11_2" name="quest11" value="2">
              <label for="quest11_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest11_3" name="quest11" value="3">
              <label for="quest11_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest11_4" name="quest11" value="4">
              <label for="quest11_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest11_5" name="quest11" value="5">
              <label for="quest11_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest11_6" name="quest11" value="6">
              <label for="quest11_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 12 -->
      <div class="quest12">
        <label class="title-question" for="quest12">12. {{ __('messages.quest12') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest12_1" name="quest12" value="1">
              <label for="quest12_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest12_2" name="quest12" value="2">
              <label for="quest12_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest12_3" name="quest12" value="3">
              <label for="quest12_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest12_4" name="quest12" value="4">
              <label for="quest12_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest12_5" name="quest12" value="5">
              <label for="quest12_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest12_6" name="quest12" value="6">
              <label for="quest12_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- navigation button part -->
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('fourth','fifth');">Back</button>
      </a>
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('sixth','fifth');">Next</button>
      </a>
    </div>
      
  <!-- items for the sixth page -->
  <div class="sixthpage" id="sixth" style="display:none">

  <!-- header part -->
  <div class="header">
      <h1>Survey Questions (Cognitive Aspects)</h1>
      <h5>{{ __('messages.subtitle2') }}</h5>

      <!-- progress bar -->
      <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

  </div>

  <!-- question number 13 -->
  <div class="quest13">
        <label class="title-question" for="quest13">13. {{ __('messages.quest13') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest13_1" name="quest13" value="1">
              <label for="quest13_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest13_2" name="quest13" value="2">
              <label for="quest13_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest13_3" name="quest13" value="3">
              <label for="quest13_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest13_4" name="quest13" value="4">
              <label for="quest13_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest13_5" name="quest13" value="5">
              <label for="quest13_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest13_6" name="quest13" value="6">
              <label for="quest13_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 14 -->
      <div class="quest14">
        <label class="title-question" for="quest14">14. {{ __('messages.quest14') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest14_1" name="quest14" value="1">
              <label for="quest14_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest14_2" name="quest14" value="2">
              <label for="quest14_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest14_3" name="quest14" value="3">
              <label for="quest14_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest14_4" name="quest14" value="4">
              <label for="quest14_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest14_5" name="quest14" value="5">
              <label for="quest14_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest14_6" name="quest14" value="6">
              <label for="quest14_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 15 -->
      <div class="quest15">
        <label class="title-question" for="quest15">15. {{ __('messages.quest15') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest15_1" name="quest15" value="1">
              <label for="quest15_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest15_2" name="quest15" value="2">
              <label for="quest15_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest15_3" name="quest15" value="3">
              <label for="quest15_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest15_4" name="quest15" value="4">
              <label for="quest15_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest15_5" name="quest15" value="5">
              <label for="quest15_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest15_6" name="quest15" value="6">
              <label for="quest15_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- question number 16 -->
      <div class="quest16">
        <label class="title-question" for="quest16">16. {{ __('messages.quest16') }}</label><br>
        <span class="d-flex justify-content-evenly question_answer">
            <a>{{ __('messages.less_likely') }}</a>
            <span>
              <input type="radio" id="quest16_1" name="quest16" value="1">
              <label for="quest16_1">1</label>
            </span>
            <span>
              <input type="radio" id="quest16_2" name="quest16" value="2">
              <label for="quest16_2">2</label>
            </span>
            <span>
              <input type="radio" id="quest16_3" name="quest16" value="3">
              <label for="quest16_3">3</label>
            </span>
            <span>
              <input type="radio" id="quest16_4" name="quest16" value="4">
              <label for="quest16_4">4</label>
            </span>
            <span>
              <input type="radio" id="quest16_5" name="quest16" value="5">
              <label for="quest16_5">5</label>
            </span>
            <span>
              <input type="radio" id="quest16_6" name="quest16" value="6">
              <label for="quest16_6">6</label>
            </span>
            <a>{{ __('messages.most_likely') }}</a>
          </span>
      </div>

      <!-- back button -->
      <a href="#">
        <button id="nav_btn" type="button" class="btn btn-secondary" onclick="return show('fifth','sixth');">Back</button>
      </a>

      <!-- submit button -->
      <input class="btn btn-secondary submit" type="submit" name="submit" value="Submit">

    </div>
  </form>
  @else

  <!-- guest view -->
  <div class="container guest">
    <p>{{ __('messages.guest1') }} <a href="/login">{{ __('messages.testlogin') }}</a> 
    {{ __('messages.guest2') }} <a href="/register">{{ __('messages.testregister') }}</a> {{ __('messages.guest3') }}</p>
  </div>

  @endauth
  
</div>
@include('part.bottom')
@endsection