@extends('layouts.main')

@section('content')
<div class="container">
    <h1>Crear Nueva Pregunta</h1>
    <form action="{{ route('questions.store') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label for="question_text" class="form-label">Texto de la Pregunta</label>
            <input type="text" class="form-control" id="question_text" name="question_text" required>
        </div>
        <div class="mb-3">
            <label for="question_type" class="form-label">Tipo de Pregunta</label>
            <select class="form-control" id="question_type" name="question_type" required>
                <option value="text">Texto</option>
                <option value="radio">Radio</option>
                <option value="checkbox">Checkbox</option>
                <option value="select">Select</option>
                <option value="textarea">Textarea</option>
		<option value="matrix">Matrix</option>
		<option value="date">Fecha</option> 
		<option value="numeric">Numérico</option> 
		<option value="note">Nota</option>
		<option value="range">Rango</option>
		<option value="time">Hora</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="is_required" class="form-label">¿Es Obligatoria?</label>
            <select class="form-control" id="is_required" name="is_required" required>
                <option value="1">Sí</option>
                <option value="0">No</option>
            </select>
        </div>
        <div class="mb-3">
            <label for="question_code" class="form-label">Código de la Pregunta (opcional)</label>
            <input type="text" class="form-control" id="question_code" name="question_code">
        </div>
        <div class="mb-3">
            <label for="style_class" class="form-label">Clase de Estilo CSS (opcional)</label>
            <input type="text" class="form-control" id="style_class" name="style_class">
        </div>
	 <!-- Campos adicionales para pregunta de tipo Matrix -->
        <div id="matrix-fields" style="display:none;">
            <div class="mb-3">
                <label for="matrix_rows" class="form-label">Categorías de la Matriz (separadas por comas)</label>
                <input type="text" class="form-control" id="matrix_rows" name="matrix_rows" placeholder="Ej: Categoria 1, Categoria 2, Categoria 3">
            </div>
            <div class="mb-3">
                <label for="matrix_columns" class="form-label">Opciones de la Matriz (separadas por comas)</label>
                <input type="text" class="form-control" id="matrix_columns" name="matrix_columns" placeholder="Ej: Opcion 1, Opcion 2, Opcion 3">
            </div>
            <div class="mb-3">
            	<label for="input_type" class="form-label">Tipo de Respuesta</label>
        	<select class="form-control" id="input_type" name="input_type">
                    @foreach ($responseTypes as $responseType)
        		<option value="{{ $responseType->type_code }}">
        		    {{ $responseType->description }}
        		</option>
    		    @endforeach
    	        </select>
            </div>

	</div>
	<div class="mb-3">
            <label for="has_other" class="form-label">¿Incluir opción "Otro" con campo de texto?</label>
            <select class="form-control" id="has_other" name="has_other">
            	<option value="0">No</option>
            	<option value="1">Sí</option>
            </select>
    	</div>
        <button type="submit" class="btn btn-primary">Guardar Pregunta</button>
    </form>
</div>

<script>
    document.getElementById('question_type').addEventListener('change', function() {
        if (this.value === 'matrix') {
            document.getElementById('matrix-fields').style.display = 'block';
        } else {
            document.getElementById('matrix-fields').style.display = 'none';
        }
    });
</script>
@endsection