@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-sm-12">
                {!! Form::open(['url' => 'ze/guardarevaluationmultiple', 'method' => 'POST']) !!}
                @csrf

                {{-- Hidden global data --}}
                {!! Form::hidden('form_id', $form_id) !!}
                {!! Form::hidden('id_estudiante', $id_estudiante) !!}
                {!! Form::hidden('periodo_id', $periodo_id) !!}
                {!! Form::hidden('modalidad_id', $modalidad_id) !!}

                {{-- Hidden inputs para enviar las materias-profesores que se están evaluando --}}
                @foreach($columnas as $i => $col)
                    <input type="hidden" name="materias_profesores[{{ $i }}][id_docente]" value="{{ $col->docente_id }}">
                    <input type="hidden" name="materias_profesores[{{ $i }}][cod_mat]" value="{{ $col->materia_id }}">
                    <input type="hidden" name="materias_profesores[{{ $i }}][id_seccion]" value="{{ $col->id_seccion }}">
                @endforeach


                <div class="card shadow-sm p-4">
                    <!--<h3 class="mb-3 text-center">{{ $title }}</h3>-->
                    <p class="text text-center mb-4" style="background-color: #81151a; color: #FFFFFF;">                        
                        <strong>Instrucciones:</strong>  Asigne una calificación del 1 al 5 a cada ítem mencionado, donde 1 representa la calificación más baja y 5 la calificación más alta. Seleccione la casilla N/A (no aplica) cuando no tenga conocimiento sobre el punto evaluado.
                        Por favor, complete la evaluación para cada docente en las asignaturas mostradas a continuación.
                    </p>

                    @if ($form->questions->isEmpty())
                        <div class="alert alert-info text-center">
                            Este formulario no tiene preguntas configuradas aún.
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-bordered align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 30%">Preguntas</th>
                                        @foreach ($columnas as $col)
                                            <th class="text-center">{{ $col->etiqueta }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($form->questions as $question)
                                        <tr>
                                            <td><strong>{{ $loop->iteration }}. {{ $question->question_text }}</strong></td>
                                            @foreach ($columnas as $col)
                                                <td class="text-center">
                                                    @php
                                                        $name = "question_{$question->id}_{$col->docente_id}_{$col->materia_id}";
                                                        $options = is_array($question->options)
                                                            ? $question->options
                                                            : json_decode($question->options ?? '[]', true);
                                                        $options = is_array($options) ? $options : [];
                                                    @endphp

                                                    @switch($question->question_type)
                                                        @case('radio')
                                                            @foreach ($options as $opt)
                                                                <div class="form-check form-check-inline">
                                                                    <input class="form-check-input" type="radio" 
                                                                        name="{{ $name }}" value="{{ $opt }}"
                                                                        {{ old($name) == $opt ? 'checked' : '' }} required>
                                                                    <label class="form-check-label">{{ $opt }}</label>
                                                                </div>
                                                            @endforeach
                                                            @break

                                                        @case('select')
                                                            <select class="form-select form-select-sm" name="{{ $name }}" required>
                                                                <option value="">Seleccione</option>
                                                                @foreach ($options as $opt)
                                                                    <option value="{{ $opt }}" {{ old($name) == $opt ? 'selected' : '' }}>
                                                                        {{ $opt }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @break

                                                        @case('checkbox')
                                                            @foreach ($options as $opt)
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox"
                                                                        name="{{ $name }}[]" value="{{ $opt }}"
                                                                        {{ in_array($opt, old($name, [])) ? 'checked' : '' }}>
                                                                    <label class="form-check-label">{{ $opt }}</label>
                                                                </div>
                                                            @endforeach
                                                            @break

                                                        @case('textarea')
                                                            <textarea class="form-control form-control-sm" name="{{ $name }}" rows="2">{{ old($name) }}</textarea>
                                                            @break

                                                        @default
                                                            <input type="text" class="form-control form-control-sm"
                                                                name="{{ $name }}" value="{{ old($name) }}">
                                                    @endswitch
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif

                    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                        <label for="pregunta1">Mencione cuáles áreas del conocimiento referente a su carrera o de carácter general, le gustaría explorar o profundizar en nuestra casa de estudio </label> 
                        {!! Form::textarea('pregunta1', NULL , $attributes = array('class' => 'form-control', 'id'=>'pregunta1', 'required'=>'required'))!!}   
                       
                    </div>  
                    <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                        <label for="pregunta2">Mencione cuáles aspectos debe mejorar el IUTAR, para continuar con una formación de calidad </label> 
                        {!! Form::textarea('pregunta2', NULL , $attributes = array('class' => 'form-control', 'id'=>'pregunta2', 'required'=>'required'))!!}   
                       
                    </div> 

                    <div class="text-center mt-4">
                        <a class="btn btn-warning" href="{!! URL::to('ze/horario') !!}">Volver</a>
                        @if (!$form->questions->isEmpty())
                            <button type="submit" class="btn btn-success">Enviar Respuestas</button>
                        @endif
                    </div>
                </div>

                {!! Form::close() !!}
            </div>	
		</div>				
	</div>
</div>
@stop
@section('postscript')

@stop