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

@extends('layouts.dashboard')

@section('content')

<style>

/* =========================
   GLOBAL
========================= */

*{
    box-sizing:border-box;
}

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

.question-box{
    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;
    padding:25px;
    margin-bottom:30px;
    overflow-x:auto;
}

.main-question{
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    color:#111;
}

.sub-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:20px;
    color:#222;
    line-height:30px;
}

/* =========================
   TABLE
========================= */

.question-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

.question-table th{
    background:#f3f3f3;
    padding:12px;
    font-size:14px;
    text-align:center;
    border:1px solid #ddd;
    line-height:20px;
}

.question-table td{
    padding:12px;
    border:1px solid #ddd;
    text-align:center;
}

.question-table tr:nth-child(even){
    background:#fafafa;
}

.question-table td:first-child{
    text-align:left;
    font-size:15px;
    font-weight:500;
    width:40%;
    line-height:24px;
}

/* =========================
   RADIO BUTTON
========================= */

input[type=radio]{
    width:18px;
    height:18px;
    cursor:pointer;
}

/* =========================
   BUTTON
========================= */

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

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

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

.page-wrapper{
    padding:10px;
}

.question-box{
    padding:15px;
    overflow:hidden;
}

.main-question{
    font-size:20px;
    margin-bottom:12px;
}

.sub-title{
    font-size:15px;
    line-height:24px;
    margin-bottom:15px;
}

/* TABLE MOBILE */

.question-table{
    min-width:100%;
    border:none;
}

.question-table thead{
    display:none;
}

.question-table,
.question-table tbody,
.question-table tr,
.question-table td{
    display:block;
    width:100%;
}

.question-table tr{
    border:1px solid #ddd;
    border-radius:10px;
    margin-bottom:20px;
    padding:10px;
    background:#fff;
}

.question-table td{
    border:none;
    text-align:left;
    padding:10px 5px;
}

.question-table td:first-child{
    width:100%;
    font-size:15px;
    font-weight:600;
    margin-bottom:10px;
    line-height:24px;
}

/* RADIO ROW */

.question-table td:not(:first-child){

    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #eee;
    font-size:13px;
    gap:15px;

}

/* LABELS */

.question-table td:nth-child(2)::before{
    content:"Strongly Disagree";
    font-weight:600;
}

.question-table td:nth-child(3)::before{
    content:"Disagree";
    font-weight:600;
}

.question-table td:nth-child(4)::before{
    content:"Somewhat Disagree";
    font-weight:600;
}

.question-table td:nth-child(5)::before{
    content:"Neutral";
    font-weight:600;
}

.question-table td:nth-child(6)::before{
    content:"Somewhat Agree";
    font-weight:600;
}

.question-table td:nth-child(7)::before{
    content:"Agree";
    font-weight:600;
}

.question-table td:nth-child(8)::before{
    content:"Strongly Agree";
    font-weight:600;
}

/* RADIO SIZE */

input[type=radio]{
    width:20px;
    height:20px;
    flex-shrink:0;
}

/* BUTTON */

.submit-btn{
    width:100%;
    padding:15px;
    font-size:16px;
}

}
</style>

<div class="page-wrapper">

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

@csrf

@php

$groupedQuestions = [];

foreach($q6 as $q){

    /*
    MAIN QUESTION
    example => 1
    */

    if(strpos($q->question_id, '.') === false){

        $groupedQuestions[$q->question_id] = [

            'main_id' => $q->question_id,
            'main_question' => $q->question_text,
            'items' => []

        ];

    }

}

/*
SUB QUESTIONS
example => 1.1
*/

foreach($q6 as $q){

    if(strpos($q->question_id, '.') !== false){

        $parts = explode('.', $q->question_id);

        $mainId = $parts[0];

        if(isset($groupedQuestions[$mainId])){

            $groupedQuestions[$mainId]['items'][] = [

                'id' => str_replace('.', '_', $q->question_id),
                'text' => $q->question_text

            ];

        }

    }

}

@endphp
<!-- <pre>
{{ print_r($q6, true) }}
</pre> -->

@foreach($groupedQuestions as $question)

<div class="question-box">

<div class="main-question">
{{ $question['main_id'] }}
</div>

<div class="sub-title">
{{ $question['main_question'] }}
</div>

<table class="question-table">

<thead>
<tr>

<th style="text-align:left;">Questions</th>

<th>Strongly Disagree</th>
<th>Disagree</th>
<th>Somewhat Disagree</th>
<th>Neutral</th>
<th>Somewhat Agree</th>
<th>Agree</th>
<th>Strongly Agree</th>

</tr>
</thead>

<tbody>

@foreach($question['items'] as $item)

<tr>

<td>
{{ $item['text'] }}
</td>

@for($i=1; $i<=7; $i++)

<td>

<input 
type="radio"
name="{{ $item['id'] }}"
value="{{ $i }}"
required
>

</td>

@endfor

</tr>

@endforeach

</tbody>

</table>

</div>

@endforeach


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

</form>

</div>

@endsection