@extends('layouts.principal')
@section('contenido')

<div class="row">
  <div class="col-md">
    <div class="alert alert-warning" role="alert">
      <b><i class="fas fa-book-reader"></i> CONSTRUCTOR DE EXAMENES </b>
    </div>

  </div>
</div>


<div class="row">
  <div class="col-md">
     <div class="card">
       <div class="card-body">

          
          <div class="row">
            <div class="col-md-4">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Seleccione Area</label>
                <select class="form-control" id="areaSelected" onchange="cambio_area()" ></select>
              </div>
            </div>

             <div class="col-md-5">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Seleccione Exámen</label>
                <select class="examSelected form-control" id="examSelected" onchange="cambio_examen()" >
                </select>
              </div>
            </div>

            <div class="col-md-3 mt-4">
                  
                <button class="btn btn-primary" id="btnSeleccionarExamen"><i class="fas fa-hand-paper"></i> Seleccionar</button>

            </div>
          </div>

      


       </div>
     </div>
  </div>
</div>

<div id="contenedor_definir_parametros" style="display: none;">
  <div class="row mt-2" >
    <div class="col-md">
      <div class="alert alert-info text-center" role="alert">
        
        <div class="row">
          <div class="col-md"><b><span id="areaShow"></span></b></div>
          <div class="col-md"><b><span id="examenShow"></span></b></div>
          <div class="col-md"><b><span id="fechaIniShow"></span></b></div>
          
        </div>
        
      </div>
    </div>
  </div>
</div>




<div class="row mt-1">

  <div class="col-md">
    <div class="card">
    
      <div class="card-body">

        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="conocimiento-tab" data-bs-toggle="tab" data-bs-target="#conocimiento" type="button" role="tab" aria-controls="conocimiento" aria-selected="true">CONOCIMIENTOS</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="habilidad-tab" data-bs-toggle="tab" data-bs-target="#habilidad" type="button" role="tab" aria-controls="habilidad" aria-selected="false">HABILIDADES</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="destreza-tab" data-bs-toggle="tab" data-bs-target="#destreza" type="button" role="tab" aria-controls="destreza" aria-selected="false">DESTREZAS</button>
          </li>

          <li class="nav-item" role="presentation">
            <button class="nav-link" id="conductual-tab" data-bs-toggle="tab" data-bs-target="#conductual" type="button" role="tab" aria-controls="conductual" aria-selected="false">CONDUCTUALES</button>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">

          {{-- Para los conocimientos  --}}
          <div class="tab-pane fade show active mb-2" id="conocimiento" role="tabpanel" aria-labelledby="conocimiento-tab">
            
              <br>

               <form id="formAddCompetenciaExam">
                  <div class="row mt-2">

                        <div class="col-md-6">
                            <select name="" id="select2_competencia" class="form-control"></select>
                        </div>

                            <input type="hidden" id="definirParametros_value" value="0">
                   
                        <div class="col-md-4">
                          <button class="btn btn-primary"><i class="fas fa-plus-circle"></i> Competencia</button>
                        </div>
                     
                  </div>
              </form>
            <br>
            <div class="row">
              <div class="col-md">

                <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                          <th>#</th>
                          <th>Competencia</th>
                          <th>Pregunta</th>
                          <th>Nivel</th>
                          <th>Acciones</th>
                    </thead>
                    <tbody id="tbodyExamenCono">
                      
                    </tbody>
                  </table>
                </div>

              </div>

              <br><br><br><br>
            </div>



          </div>



          {{-- para las habilidades  --}}
          <div class="tab-pane fade" id="habilidad" role="tabpanel" aria-labelledby="habilidad-tab">
            
            <br>

             <form id="formInsertPreguntasHabilidades">

              <div class="row mb-2">
                <div class="col-md-12">
                    <label for="recipient-name" class="col-form-label">AÑADIR COMPETENCIA:</label>
                    <select id="preguntasSelectHabili" class="pregAddHab form-control" name="pregsHab[]" multiple="multiple" style="width: 100%;">
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md">
                  <input type="hidden" id="idSeCompConocimiento_habili" class="form-control">
                  <input type="hidden" id="nivel_habili" class="form-control">
                </div>
              </div>


              <div class="row">
                <div class="col-md text-right">
                  <button class="btn btn-primary"><i class="fas fa-save"></i> Grabar Competencia</button>
                </div>
              </div>
          </form>

              <div class="row mt-2">
                <div class="col-md">
                    <div class="alert alert-info" role="alert">
                      <b> <span><i class="fas fa-table"></i> Listado de Competencias de Habilidades</span></b>
                    </div>
                </div>
              </div>

                <div class="row">
                <div class="col-md">
                    
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                            <th>#</th>
                            <th>DETALLE</th>
                            <th>PUNTAJE</th>
                        </thead>
                        <tbody id="tbodyPreguntasHabili">
                          
                        </tbody>
                       
                      </table>
                    </div>

                    <br><br>

                </div>
              </div>


          </div>

          {{-- para las Destrezas --}}
          <div class="tab-pane fade" id="destreza" role="tabpanel" aria-labelledby="destreza-tab">
            


               {{-- Para las destreazas  --}}
              <br>

               <form id="formAddCompDestrezaExam">
                  <div class="row mt-2">

                        <div class="col-md-6">
                            <select name="" id="select2_destreza" class="form-control"></select>
                        </div>

                            <input type="hidden" id="idExamen_destrezas" value="0">
                   
                        <div class="col-md-4">
                          <button class="btn btn-primary"><i class="fas fa-plus-circle"></i> Competencia</button>
                        </div>
                     
                  </div>
              </form>
            <br>
            <div class="row">
              <div class="col-md">

                <div class="table-responsive">
                  <table class="table table-striped">
                    <thead>
                          <th>#</th>
                          <th>Competencia</th>
                          <th>Nivel</th>
                          <th>Acciones</th>
                    </thead>
                    <tbody id="tbodyExamenDeztresaComp">
                      
                    </tbody>
                  </table>
                </div>

              </div>

              <br><br><br><br>
            </div>
            




          </div>



           {{-- para las conductuales --}}
          <div class="tab-pane fade" id="conductual" role="tabpanel" aria-labelledby="conductual-tab">
            
             <br>

             <form id="formInsertPreguntasConductuales">

              <div class="row mb-2">
                <div class="col-md-12">
                    <label for="recipient-name" class="col-form-label">AÑADIR COMPETENCIA:</label>
                    <select id="preguntasSelectConduct" class="pregAddConduct form-control" name="pregsHab[]" multiple="multiple" style="width: 100%;">
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md">
                  <input type="hidden" id="idSeCompConocimiento_Conduct" class="form-control">
                  <input type="hidden" id="nivel_Conduct" class="form-control">
                </div>
              </div>


              <div class="row">
                <div class="col-md text-right">
                  <button class="btn btn-primary"><i class="fas fa-save"></i> Grabar Competencia</button>
                </div>
              </div>
          </form>

              <div class="row mt-2">
                <div class="col-md">
                    <div class="alert alert-info" role="alert">
                      <b> <span><i class="fas fa-table"></i> Listado de Competencias Conductuales</span></b>
                    </div>
                </div>
              </div>

                <div class="row">
                <div class="col-md">
                    
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                            <th>#</th>
                            <th>DETALLE</th>
                            <th>PUNTAJE</th>
                        </thead>
                        <tbody id="tbodyPreguntasConduct">
                          
                        </tbody>
                       
                      </table>
                    </div>


                </div>
              </div>



            
          </div>
        </div>

     
        </div>
      </div>
    </div>
</div>




<!-- Modal -->
<div class="modal fade" id="ModalInsertarPregunta" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel"> Agregar Preguntas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
           <form id="formInsertPreguntasCono">

              <div class="row mb-2">
                <div class="col-md-12">
                    <label for="recipient-name" class="col-form-label">AÑADIR PREGUNTA:</label>
                    <select id="preguntasSelect" class="pregAdd form-control" name="pregs[]" multiple="multiple" style="width: 100%;">
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md">
                  <input type="hidden" id="idSeCompConocimiento_text" class="form-control">
                  <input type="hidden" id="nivel_text" class="form-control">
                </div>
              </div>


              <div class="row">
                <div class="col-md text-right">
                  <button class="btn btn-primary"><i class="fas fa-save"></i> Grabar Preguntas</button>
                </div>
              </div>
          </form>

              <div class="row mt-2">
                <div class="col-md">
                    <div class="alert alert-info" role="alert">
                      <b> <span><i class="fas fa-table"></i> Listado de Preguntas</span></b>
                    </div>
                </div>
              </div>

                <div class="row">
                <div class="col-md">
                    
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                            <th>#</th>
                            <th>DETALLE</th>
                            <th>PUNTAJE</th>
                        </thead>
                        <tbody id="tbodyPreguntas">
                          
                        </tbody>
                       
                      </table>
                    </div>


                </div>
              </div>


              
            

       </div>
       <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
       </div>
          
    </div>
  </div>
</div>





<!-- Modal -->
<div class="modal fade" id="ModalInsertarPreguntaDestreza" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel"> Agregar Preguntas Destreza</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        
           <form id="formInsertPreguntasDestrezas">

              <div class="row mb-2">
                <div class="col-md-12">
                    <label for="recipient-name" class="col-form-label">AÑADIR PREGUNTA:</label>
                    <select id="preguntasDestrezaSelect" class="form-control" name="preguntasDestrezaSelect"  style="width: 100%;">
                  </select>
                </div>
              </div>

              <div class="row">
                <div class="col-md">
                  <input type="hidden" id="idSeCompDestreza_text" class="form-control">
                </div>
              </div>


              <div class="row">
                <div class="col-md text-right">
                  <button class="btn btn-primary"><i class="fas fa-save"></i> Grabar Preguntas</button>
                </div>
              </div>
          </form>

              <div class="row mt-2">
                <div class="col-md">
                    <div class="alert alert-info" role="alert">
                      <b> <span><i class="fas fa-table"></i> Listado de Preguntas</span></b>
                    </div>
                </div>
              </div>

                <div class="row">
                <div class="col-md">
                    
                    <div class="table-responsive">
                      <table class="table table-striped">
                        <thead>
                            <th>#</th>
                            <th style="width:10px !important;">DETALLE</th>
                            <th>PUNTAJE</th>
                            <th>ACCIÓN</th>
                        </thead>
                        <tbody id="tbodyPreguntasDesd">
                          
                        </tbody>
                       
                      </table>
                    </div>


                </div>
              </div>


              
            

       </div>
       <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
       </div>
          
    </div>
  </div>
</div>



@endsection