{{-- 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('q10.submit') }}">

@csrf

@foreach($q10 as $question)

<div class="question-box">

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

{{-- QUESTION 19 --}}

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

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

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

<option value="1">Board members</option>
<option value="2">Clerical and administrative workers</option>
<option value="3">Community and personal service workers</option>
<option value="4">Executives</option>
<option value="5">Labourers</option>
<option value="6">Machinery operators and drivers</option>
<option value="7">Managers</option>
<option value="8">Professionals</option>
<option value="9">Salespersons</option>
<option value="10">Senior Management</option>
<option value="11">Technicians and trades workers</option>

</select>

@endif



{{-- QUESTION 20 --}}

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

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

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

<option value="1">Clerical and Office Support Workers</option>
<option value="2">General Clerical Workers</option>
<option value="3">Inquiry Clerks and Receptionists</option>
<option value="4">Numerical Clerks</option>
<option value="5">Office Managers and Program Administrators</option>
<option value="6">Personal Assistants and Secretaries</option>
<option value="7">Other Clerical and Administrative Workers</option>

</select>

@endif




{{-- QUESTION 21 --}}

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

<select name="21" 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

</div>

@endforeach


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

</form>

</div>

@endsection