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

    @slot('title')
        Editar Variable
    @endslot

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

        @slot('form')
            {{ csrf_field() }}
            <div id="modal-form-modify-variable">
                <input type="text" class="form-control" id="id_inciso_x_variable" name="id_inciso_x_variable" hidden>
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                            aria-controls="nav-home" aria-selected="true">Norma Mexicana</a>
                        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                            aria-controls="nav-profile" aria-selected="false">Norma Internacional</a>
                        
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="row field mt-3">
                            <label for="id_norma_clasificador" class="col-sm-3 col-form-label">Clasificador</label>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select id="id_norma_clasificador" name="id_norma_clasificador" class="form-control" required>
                                        <option value="0" 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="form-control selectpicker">
                                        <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 puedes editar en una sola vista la evaluación de cada opción del clasificador.
                                </div>
                            </div>
                        </div>
                        -->
                        <div class="row field">
                            <label 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" name="evaluacion_default" value="NA"> NA: No Aplica</label>
                                    </div>
                                    <div class="radio">    
                                        <label><input type="radio" name="evaluacion_default" value="C"> C: Cumple</label>
                                    </div>
                                    <div class="radio">    
                                        <label><input type="radio" name="evaluacion_default" value="NC"> NC: No Cumple</label>
                                    </div>
                                    <div class="radio">    
                                        <label><input type="radio" name="evaluacion_default" value="*"> *: Ver Observaciones</label>
                                    </div>
                                    <div class="radio">
                                        <label><input type="radio" name="evaluacion_default" value="X"> X: La prueba no se puede realizar</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Este hidden almacenará todas las evaluaciones por opción en formato JSON.
                             La interfaz solo muestra un grupo de radios, pero el backend recibirá
                             el conjunto completo de evaluaciones de las opciones del clasificador. --}}
                        <input type="hidden" id="evaluaciones_por_opcion" name="evaluaciones_por_opcion" value="{}">

                        <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 bloqueo_analista"></textarea>
                            </div>
                        </div>

                        <div class="form-group row field">
                            <label for="nombre_definido" 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="form-control" 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>
                    
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        
                        <div class="form-group row field mt-3">
                            <label for="resultado_default_internacional" class="col-sm-3 col-form-label">Resultado default variable internacional</label>
                            <div class="col-sm-9">
                                <textarea id="resultado_default_internacional" name="resultado_default_internacional" class="summernote"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                
            </div>
        @endslot

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