@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> EVALUACIÓN DE DESEMPEÑO POR COMPETENCIAS </b>
    </div>

    <input type="hidden" class="form-control" id="idExamenTomado" value="{{$idExamenTomado}}">
    <input type="hidden" class="form-control" id="idExamen" value="{{$query[0]->idExamen}}">
  </div>
</div>

<div class="row">
  <div class="col-md">
   
   <div class="row">
     <div class="col-md">
       <table class="table">
         <thead>
           <th>{{strtoupper($query[0]->area)}}</th>
           <th>{{strtoupper($query[0]->puesto)}}</th>
           <th>{{$query[0]->fechaInicial}}</th>
           <th>{{$query[0]->fechaFin}}</th>
          
         </thead>
       </table>
     </div>
   </div>

  </div>
</div>



<div class="row">
  

  <div class="col-md">
    
       <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">
            
             <div class="row mt-3" >
               <div class="col-md">


                <div id="contenedorConocimiento">

                     <div class="card">
                      <div class="card-header">
                        Evaluación Sección Conocimientos
                      </div>
                      <div class="card-body">
                        <p style="font-size: 5x;"><b>TABLA DE APLICACIÓN O CUERPO DEL INSTRUMENTO DE EVALUACIÓN</b></p>

                        <div class="row">
                          <div class="col-md">
                            <p style="color: red; font-weight:bolder;">Elija la letra que corresponda a la afirmación presentada</p>
                          </div>
                        </div>


                          <form  id="formInserRespExamCono">      

                            <div id="tbodyPregExamConoci">
                              
                            </div>

                             <br><br>

                        <button class="btn btn-primary">Enviar Respuestas</button>  

                          </form>



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

               

               </div>
             </div>


          </div>



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

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


          

                <div id="contenedorHabilidad">

                        <form id="formInsertRespExamSecHab">
                
                          <div class="card">
                              <div class="card-header">
                                Evaluación Sección Habilidades
                              </div>
                              <div class="card-body">
                                <p><b>TABLA DE APLICACIÓN O CUERPO DEL INSTRUMENTO DE EVALUACIÓN</b></p>
                               
                               <br>

                                <div class="table-responsive">
                                  <table class="table table-striped">
                                    <thead>
                                      <th>ITEM</th>
                                      <th>COMPETENCIAS</th>
                                      <th>NIVEL</th>
                                      <th>OBSERVACIONES</th>
                                    </thead>

                                    <tbody id="tbodyDesExamHab">


                                     
                                      
                                    </tbody>
                                  </table>
                                </div>



                                <br><br>

                                <button class="btn btn-primary" id="btnRespHabilidad">Enviar Respuestas</button>
                              </div>
                          </div>
                          </form>
                  
                </div>

            
              </div>
            </div>




            


          </div>

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


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

                <div id="contenedorDestreza">

                        <div class="row">
                          <div class="col-md-12">

                            <form id="formInsertRespExamSecDes">
                            
                              <div class="card">
                                  <div class="card-header">
                                    Evaluación Sección Destrezas
                                  </div>
                                  <div class="card-body">
                                    <p><b>TABLA DE APLICACIÓN O CUERPO DEL INSTRUMENTO DE EVALUACIÓN</b></p>
                                   
                                   <br>

                                  {{-- <div class="table-responsive"> --}}

                                    <div class="row" style="font-weight: bolder; font-size: 12px; text-align: center;">
                                      <div class="col-md-2">ITEM</div>
                                      <div class="col-md-4">ACTIVIDADES</div>
                                      <div class="col-md-3">CUMPLE</div>
                                      <div class="col-md-3">OBSERVACIONES</div>
                                    </div>

                                    <hr>

                                          <div id="tbodyExamDestre">

                                          </div>

                                     


                                      <br><br>

                                      <button class="btn btn-primary">Enviar Respuestas</button>

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

               

             
            




          </div>



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


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


                <div id="contenedorConductual">

                       <form id="formInsertRespExamSecCondu">
                
                        <div class="card">
                            <div class="card-header">
                              Evaluación Sección Conductual
                            </div>
                            <div class="card-body">
                              <p><b>TABLA DE APLICACIÓN O CUERPO DEL INSTRUMENTO DE EVALUACIÓN</b></p>
                             
                             <br>

                              <div class="table-responsive">
                                <table class="table table-striped">
                                  <thead>
                                    <th>ITEM</th>
                                    <th>COMPETENCIAS</th>
                                    <th>NIVEL</th>
                                    <th>OBSERVACIONES</th>
                                  </thead>

                                  <tbody id="tbodyDesExamCondu">


                                   
                                    
                                  </tbody>
                                </table>
                              </div>



                              <br><br>

                              <button class="btn btn-primary">Enviar Respuestas</button>
                            </div>
                        </div>
                        </form>
                  
                </div>

               
              </div>
            </div>

              

           

            
          </div>
        </div>

     
        </div>
      </div>


      <div id="contenedorfinalizar" style="display: none;">
         <div class="row mt-4">

          <div class="container-fluid mt-2">
            <input type="hidden" class="form-control" id="idExamenTomado_enviar">
            <div class="row">
              <div class="col-md text-center">
                  <button class="btn btn-primary" onclick="finalizarExamen()"><i class="far fa-check-circle mr-1"></i> Finalizar Exámen</button>
              </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>



@endsection