@component('fragments.modal')
        @slot('idmodal')
        modalNewVariable
        @endslot

        @slot('title')
            Agregar Variable
        @endslot

        @slot('action')
            <form id="nueva_variable" class="ui form" method="POST" action="{{url('incisos/new_variable')}}" role="form" enctype="multipart/form-data">
        @endslot

        @slot('form')
            {{ csrf_field() }}
            <div id="modal-form-variable">
                <div class="row field">
                    <label for="id_clasificador" class="col-sm-3 col-form-label">Clasificador</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <select id="id_clasificador" name="id_clasificador" class="form-control" required>
                            <option value="" selected disabled>--Seleccione--</option>
                            @foreach ($norma_incisos->clasificadores as $clasificador)
                                <option value="{{$clasificador->id_norma_clasificador}}">{{$clasificador->clasificador}}</option>
                            @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row field">
                    <label for="id_opcion" class="col-sm-3 col-form-label">Clasificador opción</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            {{-- Este select determina qué evaluación se muestra en el único bloque
                                 visible de "Evaluación Default". Internamente se conserva un
                                 mapa con la evaluación de cada opción para enviarlo completo
                                 al guardar. --}}
                            <select id="id_opcion" name="id_opcion" class="selectpicker form-control">
                                <option value="" selected disabled>--Seleccione--</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 
                <div class="row field">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-9">
                        <div class="alert alert-info mb-2" role="alert">
                            <strong>Nota:</strong> la evaluación general se conserva por compatibilidad, pero ahora también se guardará la evaluación de cada opción del clasificador en una sola captura.
                        </div>
                    </div>
                </div>
                -->
                <div class="row field">
                    <label for="id_tipo_variable" class="col-sm-3 col-form-label">Evaluación Default</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <div class="radio">    
                                <label><input type="radio" id="evaluacion_default" name="evaluacion_default" value="NA" checked>&nbsp; NA: No Aplica</label>
                            </div>
                            <div class="radio">    
                                <label><input type="radio" id="evaluacion_default" name="evaluacion_default" value="C">&nbsp; C: Cumple</label>
                            </div>
                            <div class="radio">    
                                <label><input type="radio" id="evaluacion_default" name="evaluacion_default" value="NC" >&nbsp; NC: No Cumple</label>
                            </div>
                            <div class="radio">    
                                <label><input type="radio" id="evaluacion_default" name="evaluacion_default" value="*">&nbsp; *: Ver Observaciones</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" id="evaluacion_default" name="evaluacion_default" value="X">&nbsp; X: La prueba no se puede realizar</label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Este hidden almacenará todas las evaluaciones por opción en formato JSON.
                     Así mantenemos una sola sección visible de radios, pero enviamos al backend
                     la evaluación de cada clasificador opción. --}}
                <input type="hidden" id="evaluaciones_por_opcion" name="evaluaciones_por_opcion" value="{}">

                <input type="text" class="form-control" id="id_inciso" name="id_inciso" hidden>

                <div class="form-group row field">
                    <label for="nombre_definido" class="col-sm-3 col-form-label">Nombre de la variable</label>
                    <div class="col-sm-9">
                        <textarea id="nombre_definido" name="nombre_definido" class="summernote"></textarea>
                    </div>
                </div>

                <div class="form-group row field">
                    <label for="orden" class="col-sm-3 col-form-label">Orden</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="orden" name="orden" placeholder="Orden">
                    </div>
                </div>

                <div class="row field">
                    <label for="nota" class="col-sm-3 col-form-label">Nota</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                        <textarea type="text" class="form-control" rows="4" id="nota" name="nota" placeholder="Nota"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row field">
                    <label for="equipo" class="col-sm-3 col-form-label">Utiliza equipo</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <div class="ui toggle checkbox">
                                <input type="checkbox" name="equipo" id="equipo" value="1">
                                <label>Si</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!--
                <div class="row field">
                    <label for="evaluacion_default" class="col-sm-3 col-form-label">Evalucion default (Cumple)</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <div class="ui toggle checkbox">
                                <input type="checkbox" name="evaluacion_cumple" id="evaluacion_cumple" value="1">
                                <label>Si</label>
                            </div>
                        </div>
                    </div>
                </div>
                -->

                <div class="row field">
                    <label for="id_tipo_variable" class="col-sm-3 col-form-label">Tipo</label>
                    <div class="col-sm-9">
                        <div class="form-group">
                            <select id="id_tipo_variable" name="id_tipo_variable" class="selectpicker form-control" data-live-search="true" required>
                            <option value="" selected disabled>--Seleccione--</option>
                            @foreach ($variables as $variable)
                                <option value="{{$variable->id_tipo_variable}}">{{$variable->nombre_tipo}}</option>
                            @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div id="change_tipo_variable">
                </div>

            </div>
        @endslot

        @slot('button')
            <button type="submit" class="btn btn-primary">
                <i class="save icon"></i>Guardar
            </button>
        @endslot
    @endcomponent