@extends('layouts.master')

@section('css')
 <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa; /* Default Bootstrap body background */
            color: #212529; /* Default Bootstrap body text color */
        }
        .container {
            width: 100%;
            padding-right: 0.75rem;
            padding-left: 0.75rem;
            margin-right: auto;
            margin-left: auto;
        }
        @media (min-width: 576px) {
            .container {
                max-width: 540px;
            }
        }
        @media (min-width: 768px) {
            .container {
                max-width: 720px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }
        .mt-5 {
            margin-top: 3rem !important;
        }
        h1 {
            font-size: 2.5rem;
            font-weight: 500;
            line-height: 1.2;
            margin-bottom: 0.5rem;
        }
        .lead {
            font-size: 1.25rem;
            font-weight: 300;
            margin-bottom: 1rem;
        }
        hr {
            margin: 1rem 0;
            color: inherit;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            opacity: 0.25;
        }
        .btn {
            display: inline-block;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .btn-secondary {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            color: #fff;
            background-color: #5c636a;
            border-color: #565e64;
        }
        .mb-3 {
            margin-bottom: 1rem !important;
        }
        .alert {
            position: relative;
            padding: 1rem 1rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 0.25rem;
        }
        .alert-danger {
            color: #842029;
            background-color: #f8d7da;
            border-color: #f5c2c7;
        }
        .alert ul {
            margin-bottom: 0;
            padding-left: 1.5rem;
        }
        .mb-4 {
            margin-bottom: 1.5rem !important;
        }
        .form-label {
            margin-bottom: 0.5rem;
        }
        .form-control {
            display: block;
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .form-control:focus {
            color: #212529;
            background-color: #fff;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .form-check {
            display: block;
            min-height: 1.5rem;
            padding-left: 1.5em;
            margin-bottom: 0.125rem;
        }
        .form-check-input {
            float: left;
            margin-left: -1.5em;
        }
        .form-check-label {
            margin-bottom: 0;
        }
        .text-danger {
            color: #dc3545 !important;
        }
        .small {
            font-size: 0.875em !important;
        }
        .mt-1 {
            margin-top: 0.25rem !important;
        }
        .form-select {
            display: block;
            width: 100%;
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            -moz-padding-start: calc(0.75rem - 3px);
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .form-select:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        .alert-info {
            color: #055160;
            background-color: #cff4fc;
            border-color: #b6effb;
        }
        .btn-success {
            color: #fff;
            background-color: #198754;
            border-color: #198754;
        }
        .btn-success:hover {
            color: #fff;
            background-color: #157347;
            border-color: #146c43;
        }
        .mt-3 {
            margin-top: 1rem !important;
        }

        /* Styles for the table layout for radio questions */
        .question-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .question-table th, .question-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        .question-table th {
            background-color: #f2f2f2;
            text-align: center; /* Center align table headers */
        }
        .question-table td.question-text {
            font-weight: bold;
            text-align: left; /* Keep question text left aligned */
        }
        .question-table td.radio-options {
            text-align: center; /* Center align radio buttons */
        }
        .question-table input[type="radio"] {
            margin: 0 5px;
            cursor: pointer;
            transform: scale(1.2); /* Slightly larger radio buttons for better visibility */
        }
    </style>
@stop

@section('content')
@if(Session::has('message_error'))
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
            <div class="alert alert-danger error-msg centrado"><strong>{!! Session::get('message_error') !!}</strong></div>
        </div>
    </div>
    @endif
    @if(Session::has('message_success'))
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
            <div class="alert alert-success success-msg centrado"><strong>{!! Session::get('message_success') !!}</strong></div>
        </div>
    </div>
    <script>
        setTimeout(function() {
            window.location.href = "{{ url('/ze/horario') }}";
        }, 4000);
    </script>
    @endif
<div class="col-lg-12 col-md-12 col-col-sm-12 col-col-xs-12">
	
    <div class="panel panel-default">
        <div class="panel-body">

		<div class="col-lg-12 col-md-12 col-col-sm-12 col-col-xs-12">
			{!! Form::open(['url' => 'ze/guardarevaluation', 'method' => 'POST']) !!}
			    @csrf	

			<div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <label for="Teacher">Teacher</label> 
                {!! Form::hidden('form_id', $form_id , $attributes = array('id'=>'form_id'))!!} 
                {!! Form::hidden('id_estudiante', $id_estudiante , $attributes = array('id'=>'id_estudiante'))!!} 
                {!! Form::hidden('id_docente', $id_docente , $attributes = array('id'=>'id_docente'))!!}  
                {!! Form::hidden('cod_mat', $cod_mat , $attributes = array('id'=>'cod_mat'))!!}  
                {!! Form::hidden('idseccion', $id_seccion , $attributes = array('id'=>'idseccion'))!!}  
                {!! Form::text('Teacher', $docente , $attributes = array('class' => 'form-control data mayuscula','id'=>'Teacher', 'readOnly' => 'readOnly'))!!}  
            </div>
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <label for="Course">Course</label> 
                {!! Form::text('Course', $materia , $attributes = array('class' => 'form-control data mayuscula','id'=>'Course', 'readOnly' => 'readOnly'))!!}  
            </div>
            <div class="row"></div><br><br>
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">


            @php
                // Filter questions to separate radio questions from others
                $radioQuestions = $form->questions->where('question_type', 'radio');
                $otherQuestions = $form->questions->whereIn('question_type', ['text', 'textarea', 'checkbox', 'select']);
            @endphp

            {{-- Render non-radio questions individually --}}
            @forelse ($otherQuestions as $question)
                <div class="mb-4">
                    <label for="question_{{ $question->id }}" class="form-label">
                        <strong>{{ $loop->iteration }}. {{ $question->question_text }}</strong>
                    </label>

                    @if ($question->question_type == 'text')
                        <input type="text" class="form-control" id="question_{{ $question->id }}" name="question_{{ $question->id }}" value="{{ old('question_' . $question->id) }}" required>
                    @elseif ($question->question_type == 'textarea')
                        <textarea class="form-control" id="question_{{ $question->id }}" name="question_{{ $question->id }}" rows="4" required>{{ old('question_' . $question->id) }}</textarea>
                    @elseif ($question->question_type == 'checkbox')
                        <div>
                            @php
                                $options = is_array($question->options) ? $question->options : json_decode($question->options ?? '[]', true);
                                $options = is_array($options) ? $options : [];
                                $oldValues = old('question_' . $question->id, []);
                            @endphp
                            @foreach ($options as $option)
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="question_{{ $question->id }}[]" id="checkbox_{{ $question->id }}_{{ $loop->index }}" value="{{ $option }}" {{ in_array($option, $oldValues) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="checkbox_{{ $question->id }}_{{ $loop->index }}">
                                        {{ $option }}
                                    </label>
                                </div>
                            @endforeach
                            @error('question_' . $question->id)
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    @elseif ($question->question_type == 'select')
                        <select class="form-select" id="question_{{ $question->id }}" name="question_{{ $question->id }}" required>
                            <option value="">Selecciona una opción</option>
                            @php
                                $options = is_array($question->options) ? $question->options : json_decode($question->options ?? '[]', true);
                                $options = is_array($options) ? $options : [];
                            @endphp
                            @foreach ($options as $option)
                                <option value="{{ $option }}" {{ old('question_' . $question->id) == $option ? 'selected' : '' }}>{{ $option }}</option>
                            @endforeach
                        </select>
                    @endif

                    @error('question_' . $question->id)
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            @empty
                {{-- This block will only execute if there are no non-radio questions --}}
            @endforelse

            {{-- Render radio questions in a table --}}
            @if ($radioQuestions->isNotEmpty())
                <h3 class="mt-4 mb-3 text-center">Preguntas de Opción Múltiple</h3>
                <table class="question-table mb-4">
                    <thead>
                        <tr>
                            <th>N°</th>
                            <th>Preguntas</th>
                            @php
                                // Get options from the first radio question to use as table headers
                                $firstRadioQuestionOptions = $radioQuestions->first() ? (is_array($radioQuestions->first()->options) ? $radioQuestions->first()->options : json_decode($radioQuestions->first()->options ?? '[]', true)) : [];
                                $firstRadioQuestionOptions = is_array($firstRadioQuestionOptions) ? $firstRadioQuestionOptions : [];
                            @endphp
                            @foreach ($firstRadioQuestionOptions as $option)
                                <th>{{ $option }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @php $radioCounter = 1; @endphp
                        @foreach($radioQuestions as $question)
                            <tr>
                                <td>{{ $radioCounter++ }}</td>
                                <td class="question-text">{{ $question->question_text }}</td>
                                @php
                                    $options = is_array($question->options) ? $question->options : json_decode($question->options ?? '[]', true);
                                    $options = is_array($options) ? $options : [];
                                @endphp
                                @foreach ($options as $optionValue)
                                    <td class="radio-options">
                                        <input type="radio" name="question_{{ $question->id }}" value="{{ $optionValue }}" {{ old('question_' . $question->id) == $optionValue ? 'checked' : '' }} required>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @foreach ($radioQuestions as $question)
                    @error('question_' . $question->id)
                        <div class="text-danger small mt-1 mb-2">{{ $message }}</div>
                    @enderror
                @endforeach
            @endif

            @if ($form->questions->isEmpty())
                <div class="alert alert-info">
                    Este formulario no tiene preguntas configuradas aún.
                </div>
            @endif
		
			</div>


			    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
						<a class="btn btn-warning btn" href="{!! URL::to('ze/horario') !!}">Volver</a>
						@if (!$form->questions->isEmpty())
				            <button type="submit" class="btn btn-success ">Enviar Respuestas</button>
				        @endif
				</div>
			{!!Form::close()!!}
			
		</div>					
		</div>				
	</div>
</div>
@stop
@section('postscript')

@stop