@extends('layouts.master')

@section('css')
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; /* bg-gray-100 */
            color: #1f2937; /* text-gray-900 */
        }
        /* Dark mode styles */
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #111827; /* dark:bg-gray-900 */
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }

        .min-h-screen {
            min-height: 100vh;
        }
        .flex {
            display: flex;
        }
        .flex-col {
            flex-direction: column;
        }
        .items-center {
            align-items: center;
        }
        .justify-center {
            justify-content: center;
        }
        .py-12 {
            padding-top: 3rem; /* 48px */
            padding-bottom: 3rem; /* 48px */
        }
        .px-4 {
            padding-left: 1rem; /* 16px */
            padding-right: 1rem; /* 16px */
        }
        .sm\:px-6 {
            /* On small screens and up */
            @media (min-width: 640px) {
                padding-left: 1.5rem; /* 24px */
                padding-right: 1.5rem; /* 24px */
            }
        }
        .lg\:px-8 {
            /* On large screens and up */
            @media (min-width: 1024px) {
                padding-left: 2rem; /* 32px */
                padding-right: 2rem; /* 32px */
            }
        }

        .main-container {
            max-width: 64rem; /* max-w-4xl */
            width: 100%; /* w-full */
            background-color: #ffffff; /* bg-white */
            padding: 2rem; /* p-8 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
        }
        @media (min-width: 1024px) {
            .main-container {
                max-width: 1280px; /* lg:max-w-screen-xl */
            }
        }
        @media (min-width: 1280px) {
            .main-container {
                max-width: 1536px; /* xl:max-w-screen-2xl */
            }
        }
        @media (prefers-color-scheme: dark) {
            .main-container {
                background-color: #1f2937; /* dark:bg-gray-800 */
            }
        }

        .h1-title {
            font-size: 12; /* text-3xl */
            font-weight: 700; /* font-bold */
            text-align: center; /* text-center */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .flex-start-mb-6 {
            display: flex;
            justify-content: flex-start; /* justify-start */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .btn-back {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem; /* px-4 py-2 */
            background-color: #4b5563; /* bg-gray-600 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            outline: none; /* focus:outline-none */
            transition: background-color 0.15s ease-in-out;
        }
        .btn-back:hover {
            background-color: #374151; /* hover:bg-gray-700 */
        }
        .btn-back:focus {
            ring-width: 2px; /* focus:ring-2 */
            ring-color: #6b7280; /* focus:ring-gray-500 */
            ring-offset-width: 2px; /* focus:ring-offset-2 */
        }
        @media (prefers-color-scheme: dark) {
            .btn-back:focus {
                ring-offset-color: #1f2937; /* dark:focus:ring-offset-gray-800 */
            }
        }

        .icon-mr-2 {
            height: 1.25rem; /* h-5 */
            width: 1.25rem; /* w-5 */
            margin-right: 0.5rem; /* mr-2 */
        }

        .alert-error {
            background-color: #fee2e2; /* bg-red-100 */
            border-color: #f87171; /* border-red-400 */
            color: #b91c1c; /* text-red-700 */
            padding: 0.75rem 1rem; /* px-4 py-3 */
            border-radius: 0.25rem; /* rounded */
            position: relative; /* relative */
            margin-bottom: 1rem; /* mb-4 */
        }
        @media (prefers-color-scheme: dark) {
            .alert-error {
                background-color: #7f1d1d; /* dark:bg-red-800 */
                border-color: #ef4444; /* dark:border-red-700 */
                color: #fecaca; /* dark:text-red-200 */
            }
        }
        .alert-error ul {
            list-style-type: disc; /* list-disc */
            list-style-position: inside; /* list-inside */
        }

        .mb-4 {
            margin-bottom: 1rem; /* 16px */
        }
        .mb-6 {
            margin-bottom: 1.5rem; /* 24px */
        }

        .label-style {
            display: block;
            font-size: 12; /* text-sm */
            font-weight: 500; /* font-medium */
            color: #374151; /* text-gray-700 */
            margin-bottom: 0.25rem; /* mb-1 */
        }
        @media (prefers-color-scheme: dark) {
            .label-style {
                color: #d1d5db; /* dark:text-gray-300 */
            }
        }

        .form-input {
            display: block;
            width: 100%; /* w-full */
            border-radius: 0.375rem; /* rounded-md */
            border-width: 1px;
            border-color: #d1d5db; /* border-gray-300 */
            background-color: #ffffff; /* bg-white */
            color: #1f2937; /* text-gray-900 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            font-size: 12; /* sm:text-sm */
            padding: 0.5rem 0.75rem; /* Default padding for inputs */
        }
        @media (prefers-color-scheme: dark) {
            .form-input {
                border-color: #4b5563; /* dark:border-gray-600 */
                background-color: #374151; /* dark:bg-gray-700 */
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }
        .form-input:focus {
            border-color: #3b82f6; /* focus:border-blue-500 */
            outline: none;
            box-shadow: 0 0 0 1px #3b82f6; /* focus:ring-blue-500 */
        }

        .form-textarea {
            display: block;
            width: 100%; /* w-full */
            border-radius: 0.375rem; /* rounded-md */
            border-width: 1px;
            border-color: #d1d5db; /* border-gray-300 */
            background-color: #ffffff; /* bg-white */
            color: #1f2937; /* text-gray-900 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            font-size: 12; /* sm:text-sm */
            padding: 0.5rem 0.75rem; /* Default padding for textareas */
        }
        @media (prefers-color-scheme: dark) {
            .form-textarea {
                border-color: #4b5563; /* dark:border-gray-600 */
                background-color: #374151; /* dark:bg-gray-700 */
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }
        .form-textarea:focus {
            border-color: #3b82f6; /* focus:border-blue-500 */
            outline: none;
            box-shadow: 0 0 0 1px #3b82f6; /* focus:ring-blue-500 */
        }

        .hr-style {
            margin-top: 1.5rem; /* my-6 */
            margin-bottom: 1.5rem; /* my-6 */
            border-color: #e5e7eb; /* border-gray-200 */
        }
        @media (prefers-color-scheme: dark) {
            .hr-style {
                border-color: #374151; /* dark:border-gray-700 */
            }
        }

        .h2-questions {
            font-size: 12; /* text-2xl */
            font-weight: 600; /* font-semibold */
            text-align: center; /* text-center */
            margin-bottom: 1.5rem; /* mb-6 */
        }

        .question-item {
            background-color: #f9fafb; /* bg-gray-50 */
            padding: 1.5rem; /* p-6 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
            margin-bottom: 1rem; /* mb-4 */
        }
        @media (prefers-color-scheme: dark) {
            .question-item {
                background-color: #374151; /* dark:bg-gray-700 */
            }
        }

        .question-header {
            display: flex;
            justify-content: space-between; /* justify-between */
            align-items: center; /* items-center */
            margin-bottom: 1rem; /* mb-4 */
        }

        .question-title {
            font-size: 12; /* text-lg */
            font-weight: 500; /* font-medium */
            color: #1f2937; /* text-gray-900 */
        }
        @media (prefers-color-scheme: dark) {
            .question-title {
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }

        .remove-question-btn {
            color: #9ca3af; /* text-gray-400 */
            outline: none; /* focus:outline-none */
            transition: color 0.15s ease-in-out;
        }
        .remove-question-btn:hover {
            color: #4b5563; /* hover:text-gray-600 */
        }
        @media (prefers-color-scheme: dark) {
            .remove-question-btn:hover {
                color: #d1d5db; /* dark:hover:text-gray-300 */
            }
        }
        .remove-question-btn svg {
            height: 1.5rem; /* h-6 */
            width: 1.5rem; /* w-6 */
        }

        .form-select {
            display: block;
            width: 100%; /* w-full */
            border-radius: 0.375rem; /* rounded-md */
            border-width: 1px;
            border-color: #d1d5db; /* border-gray-300 */
            background-color: #ffffff; /* bg-white */
            color: #1f2937; /* text-gray-900 */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            font-size: 12; /* sm:text-sm */
            padding: 0.5rem 0.75rem; /* Default padding for selects */
        }
        @media (prefers-color-scheme: dark) {
            .form-select {
                border-color: #4b5563; /* dark:border-gray-600 */
                background-color: #374151; /* dark:bg-gray-700 */
                color: #f9fafb; /* dark:text-gray-100 */
            }
        }
        .form-select:focus {
            border-color: #3b82f6; /* focus:border-blue-500 */
            outline: none;
            box-shadow: 0 0 0 1px #3b82f6; /* focus:ring-blue-500 */
        }

        .options-container {
            /* display: none; handled by JS */
        }

        .flex-justify-between-items-center-mt-6 {
            display: flex;
            justify-content: space-between; /* justify-between */
            align-items: center; /* items-center */
            margin-top: 1.5rem; /* mt-6 */
        }

        .btn-add-question {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem; /* px-4 py-2 */
            /*background-color: #2563eb;  bg-blue-600 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            outline: none; /* focus:outline-none */
            transition: background-color 0.15s ease-in-out;
        }
        .btn-add-question:hover {
            background-color: #1d4ed8; /* hover:bg-blue-700 */
        }
        .btn-add-question:focus {
            ring-width: 2px; /* focus:ring-2 */
            ring-color: #3b82f6; /* focus:ring-blue-500 */
            ring-offset-width: 2px; /* focus:ring-offset-2 */
        }
        @media (prefers-color-scheme: dark) {
            .btn-add-question:focus {
                ring-offset-color: #1f2937; /* dark:focus:ring-offset-gray-800 */
            }
        }

        .btn-save-form {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem; /* px-4 py-2 */
            background-color: #059669; /* bg-green-600 */
            color: #ffffff; /* text-white */
            font-weight: 600; /* font-semibold */
            border-radius: 0.375rem; /* rounded-md */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            outline: none; /* focus:outline-none */
            transition: background-color 0.15s ease-in-out;
        }
        .btn-save-form:hover {
            background-color: #047857; /* hover:bg-green-700 */
        }
        .btn-save-form:focus {
            ring-width: 2px; /* focus:ring-2 */
            ring-color: #10b981; /* focus:ring-green-500 */
            ring-offset-width: 2px; /* focus:ring-offset-2 */
        }
        @media (prefers-color-scheme: dark) {
            .btn-save-form:focus {
                ring-offset-color: #1f2937; /* dark:focus:ring-offset-gray-800 */
            }
        }
    </style>
@stop

@section('content')
@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>
@endif
@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
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
	{!! Form::open(['url' => 'evaluacion/actualizarpreguntas/'.$id, 'method' => 'POST']) !!}
	<input type="hidden" name="_token" value="{!! csrf_token() !!}">
	
	<div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 @if($errors->has('title')){!!'has-error'!!} @endif">
		<label for="title">Titulo</label>
		{!! Form::text('title', $encuesta->title , $attributes = array('class' => 'form-control mayuscula', 'id'=>'title','required' => 'required', 'readonly' => 'readonly'))!!}
		<div class="text-danger">
			@if($errors->has('title'))   {!! $errors->first('title') !!}    @else {!! "&nbsp;" !!} @endif
		</div>
	</div>
	<div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 @if($errors->has('descripci&oacute;n')){!!'has-error'!!} @endif">
		<label for="descripcion">Descripción</label>
		<input type="hidden" name="form_id" value="{{ $encuesta->id }}">
		{!! Form::text('descripcion', $encuesta->description , $attributes = array('class' => 'form-control mayuscula', 'id'=>'descripcion','required' => 'required', 'readonly' => 'readonly'))!!}
		<div class="text-danger">
			@if($errors->has('descripci&oacute;n'))   {!! $errors->first('descripci&oacute;n') !!}    @else {!! "&nbsp;" !!} @endif
		</div>
	</div>
    <div class="form-group col-lg-8 col-md-8 col-sm-12 col-xs-12 @if($errors->has('tipo')){!!'has-error'!!} @endif">
        <label for="tipo">Tipo</label>
        {!! Form::select('tipo',[0 => "Presencial", 2 => "Semipresencial", 3 => "Virtual"],$encuesta->modalidad_id, $attributes =  array('class' => 'form-control','id'=>'tipo'))!!}
        <div class="text-danger">
            @if($errors->has('tipo'))   {!! $errors->first('tipo') !!}    @else {!! "&nbsp;" !!} @endif
        </div>
    </div>
	<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
	<h2 class="h2-questions">Preguntas</h2>
                <div id="questions-container">
                    <!-- Aquí se añadirán las preguntas dinámicamente -->
                   @if (old('questions'))
		                @foreach (old('questions') as $index => $oldQuestion)
		                    @include('evaluaciond._question_fields', [
		                        'index' => $index,
		                        'question' => (object) $oldQuestion
		                    ])
		                @endforeach
		            @elseif(isset($questions) && count($questions) > 0)
		                @foreach ($questions as $index => $question)
		                    @include('evaluaciond._question_fields', [
		                        'index' => $index,
		                        'question' => $question
		                    ])
		                @endforeach
		            @else
		                @include('evaluaciond._question_fields', [
		                    'index' => 0,
		                    'question' => null
		                ])
		            @endif
                </div>

                <div class="flex-justify-between-items-center-mt-6">
                    
                    
                </div>
     </div>
	
	
	<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
		<button type="button" class="btn-add-question btn-warning	" id="add-question">            
            Agregar Pregunta
        </button>
		{!!Form::submit('Guardar',array('class' => 'btn btn-success'))!!}
	</div>
	{!!Form::close()!!}
</div>

@stop

@section('postscript')
<!-- Incluyo Javascript de la libreria Datatable -->

{!! Html::script('js/solonumerosypunto.js') !!}

<script type="text/javascript" language="javascript">
$(document).ready(function(){

});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
        let questionIndex = {{ old('questions') ? count(old('questions')) : 1 }};

        document.getElementById('add-question').addEventListener('click', function() {
            const container = document.getElementById('questions-container');
            const newQuestionHtml = `
                <div class="question-item" data-index="${questionIndex}">
                    <div class="question-header">
                        <h5 class="question-title">Pregunta #<span class="question-number">${questionIndex + 1}</span></h5>
                        <button type="button" class="remove-question-btn remove-question btn-danger btn-sm" aria-label="Close">
                            	X
                        </button>
                    </div>
                    <div class="mb-4">
                        <label for="question_text_${questionIndex}" class="label-style">Texto de la Pregunta</label>
            			<input type="hidden" class="form-input" id="question_id_${questionIndex}" name="questions[${questionIndex}][question_id]" >
                        <input type="text" class="form-input" id="question_text_${questionIndex}" name="questions[${questionIndex}][question_text]" required>
                    </div>
                    <div class="mb-4">
                        <label for="question_type_${questionIndex}" class="label-style">Tipo de Pregunta</label>
                        <select class="form-select question-type" id="question_type_${questionIndex}" name="questions[${questionIndex}][question_type]" data-index="${questionIndex}" required>
                           <option value="text">Texto Corto</option>
                            <option value="textarea">Texto Largo</option>
                            <option value="checkbox">Selección Múltiple (Checkbox)</option>
                            <option value="select">Lista Desplegable (Select)</option>  <!---->

                            <option value="radio">Opción Múltiple (Radio)</option>	
                        </select>
                    </div>
                    <div class="mb-4 options-container" id="options_container_${questionIndex}" style="display: none;">
                        <label for="options_${questionIndex}" class="label-style">Opciones (separadas por coma)</label>
                        <input type="text" class="form-input" id="options_${questionIndex}" name="questions[${questionIndex}][options]" placeholder="Ej: Opción A, Opción B, Opción C">
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', newQuestionHtml);
            questionIndex++;
            attachEventListeners(); // Re-adjuntar eventos para los nuevos elementos
            updateQuestionNumbers(); // Actualizar números de pregunta
        });

        function attachEventListeners() {
            document.querySelectorAll('.question-type').forEach(select => {
                select.removeEventListener('change', handleQuestionTypeChange); // Evitar duplicados
                select.addEventListener('change', handleQuestionTypeChange);
                handleQuestionTypeChange.call(select); // Trigger change on load for existing elements
            });

            document.querySelectorAll('.remove-question').forEach(button => {
                button.removeEventListener('click', handleRemoveQuestion); // Evitar duplicados
                button.addEventListener('click', handleRemoveQuestion);
            });
        }

        function handleQuestionTypeChange() {
            const index = this.dataset.index;
            const optionsContainer = document.getElementById(`options_container_${index}`);
            if (['radio', 'checkbox', 'select'].includes(this.value)) {
                optionsContainer.style.display = 'block';
            } else {
                optionsContainer.style.display = 'none';
                document.getElementById(`options_${index}`).value = ''; // Limpiar opciones si el tipo cambia
            }
        }

        function handleRemoveQuestion() {
            if (confirm('¿Estás seguro de eliminar esta pregunta?')) {
                this.closest('.question-item').remove();
                updateQuestionNumbers(); // Actualizar números de pregunta después de eliminar
            }
        }

        function updateQuestionNumbers() {
            document.querySelectorAll('.question-item').forEach((item, idx) => {
                item.querySelector('.question-number').textContent = idx + 1;
                const oldIndex = item.dataset.index;
                item.dataset.index = idx;
                item.querySelectorAll('[name^="questions"]').forEach(input => {
                    const oldName = input.getAttribute('name');
                    const newName = oldName.replace(`[${oldIndex}]`, `[${idx}]`);
                    input.setAttribute('name', newName);
                    const oldId = input.getAttribute('id');
                    if (oldId) {
                        const newId = oldId.replace(`_${oldIndex}`, `_${idx}`);
                        input.setAttribute('id', newId);
                    }
                });
                item.querySelectorAll('label').forEach(label => {
                    const oldFor = label.getAttribute('for');
                    if (oldFor) {
                        const newFor = oldFor.replace(`_${oldIndex}`, `_${idx}`);
                        label.setAttribute('for', newFor);
                    }
                });
            });
            questionIndex = document.querySelectorAll('.question-item').length;
        }

        // Adjuntar eventos al cargar la página por primera vez y asegurar números correctos
        attachEventListeners();
        updateQuestionNumbers();
    </script>
@stop