{{-- resources/views/user/q9.blade.php --}}

@extends('layouts.dashboard')

@section('content')

<style>

*{
    box-sizing:border-box;
}

body{
    background:#f5f7fb;
}

.page-wrapper{
    width:100%;
    max-width:1000px;
    margin:auto;
    padding:20px;
}

.question-box{
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    padding:25px;
    margin-bottom:25px;
}

.question-title{
    font-size:22px;
    font-weight:700;
    color:#111;
    margin-bottom:20px;
    line-height:34px;
}

.custom-select{
    width:100%;
    padding:15px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:15px;
    background:#fff;
    outline:none;
    transition:0.3s;
}

.custom-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.submit-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:15px 35px;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.submit-btn:hover{
    background:#1d4ed8;
}

@media(max-width:768px){

.page-wrapper{
    padding:12px;
}

.question-box{
    padding:18px;
}

.question-title{
    font-size:18px;
    line-height:30px;
}

.custom-select{
    font-size:14px;
    padding:14px;
}

.submit-btn{
    width:100%;
}

}

</style>

<div class="page-wrapper">

<form method="POST" action="{{ route('q11.submit') }}">

@csrf

@foreach($q11 as $question)

<div class="question-box">

<div class="question-title">
{{ $question->question_id }}.
{{ $question->question_text }}
</div>

{{-- QUESTION 22 --}}

@if($question->p_code == 22)

<select name="22" class="custom-select" required>

<option value="">-- Select Option --</option>

<option value="1">less than 3 months</option>
<option value="2">3 - 6 months</option>
<option value="3">6 - 12 months</option>
<option value="4">1 - 2 years</option>
<option value="5">3 years</option>
<option value="6">4 years</option>
<option value="7">5 - 5 years</option>
<option value="8">5 - 10 years</option>
<option value="9">10 - 15 years</option>
<option value="10">15 - 20 years</option>
<option value="11">20 - 25 years</option>
<option value="12">25 - 30 years</option>
<option value="13">more than 30 years</option>
</select>

@endif



{{-- QUESTION 23 --}}

@if($question->p_code == 23)

<select name="23" class="custom-select" required>

<option value="">-- Select Option  --</option>

<option value="1">High school or below</option>
<option value="2">Less than year 12 or equivalent in high school</option>
<option value="3">Year 12 or equivalent in high school</option>
<option value="4">Vocational qualification</option>
<option value="5">Associate Diploma</option>
<option value="6">Undergraduate Diploma</option>
<option value="7">Bachelor Degree (including with honours)</option>
<option value="8">Postgraduate Diploma (includes graduate certificate)</option>
<option value="9">Master’s degree</option>
<option value="10">Doctorate</option>

</select>

@endif




{{-- QUESTION 24 --}}

@if($question->p_code == 24)

<select name="24" class="custom-select" required>
<option value="">-- Select Option  --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Non-binary</option>
<option value="4">Prefer to self describe</option>
<option value="5">Prefer to not disclose</option>

</select>

@endif

</div>

@endforeach


<button type="submit" class="submit-btn">
Submit Survey
</button>

</form>

</div>

@endsection