{{-- Este archivo _question_fields.blade.php está diseñado para ser incluido por otros --}}
{{-- Recibe $index (el índice de la pregunta) y $question (el objeto de la pregunta si existe) --}}

<style>
    /* Styles for .question-item */
    .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 */
        }
    }

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

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

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

    /* Styles for .mb-4 */
    .mb-4 {
        margin-bottom: 1rem; /* mb-4 */
    }

    /* Styles for .label-form */
    .label-form {
        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-form {
            color: #d1d5db; /* dark:text-gray-300 */
        }
    }

    /* Styles for .form-input */
    .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 */
    }

    /* Styles for .form-select */
    .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 */
    }
</style>

<div class="question-item" data-index="{{ $index }}">
    @if ($question && isset($question->id))
        {{-- Campo oculto para el ID de la pregunta existente (cuando se edita) --}}
        <input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">
    @endif
    <div class="flex-justify-between-items-center-mb-4">
        <h5 class="h5-question-title">Pregunta #<span class="question-number">{{ $index + 1 }}</span></h5>
        <button type="button" class="btn-remove-question remove-question" aria-label="Close">
            <button type="button" class="remove-question-btn remove-question btn-danger btn-sm" aria-label="Close">
                    X
            </button>
        </button>
    </div>
    <div class="mb-4">
        <label for="question_text_{{ $index }}" class="label-form">Texto de la Pregunta</label>
        <input type="hidden" class="form-input" id="question_id_{{ $index }}" name="questions[{{ $index }}][question_id]" value="{{ old('questions.'.$index.'.question_id', $question->id ?? '') }}" required>
        <input type="text" class="form-input" id="question_text_{{ $index }}" name="questions[{{ $index }}][question_text]" value="{{ old('questions.'.$index.'.question_text', $question->question_text ?? '') }}" required>
    </div>
    <div class="mb-4">
        <label for="question_type_{{ $index }}" class="label-form">Tipo de Pregunta</label>
        <select class="form-select question-type" id="question_type_{{ $index }}" name="questions[{{ $index }}][question_type]" data-index="{{ $index }}" required>
            <option value="text" {{ old('questions.'.$index.'.question_type', $question->question_type ?? '') == 'text' ? 'selected' : '' }}>Texto Corto</option>
            <option value="textarea" {{ old('questions.'.$index.'.question_type', $question->question_type ?? '') == 'textarea' ? 'selected' : '' }}>Texto Largo</option>
            <option value="checkbox" {{ old('questions.'.$index.'.question_type', $question->question_type ?? '') == 'checkbox' ? 'selected' : '' }}>Selección Múltiple (Checkbox)</option>
            <option value="select" {{ old('questions.'.$index.'.question_type', $question->question_type ?? '') == 'select' ? 'selected' : '' }}>Lista Desplegable (Select)</option> <!---->
            <option value="radio" {{ old('questions.'.$index.'.question_type', $question->question_type ?? '') == 'radio' ? 'selected' : '' }}>Opción Múltiple (Radio)</option>
        </select>
    </div>
    <div class="mb-4 options-container" id="options_container_{{ $index }}" style="{{ in_array(old('questions.'.$index.'.question_type', $question->question_type ?? ''), ['radio', 'checkbox', 'select']) ? 'display: block;' : 'display: none;' }}">
        <label for="options_{{ $index }}" class="label-form">Opciones (separadas por coma)</label>
        <input type="text" class="form-input" id="options_{{ $index }}" name="questions[{{ $index }}][options]" placeholder="Ej: Opción A, Opción B, Opción C" value="{{ old('questions.'.$index.'.options', $question->options ?? '') }}">
    </div>
</div>