@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> LISTADO DE EXÁMENES </b>
    </div>

  </div>
</div>


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

        <form id="formBusquedaExamenes">
          <div class="row">
            <div class="col-md-3">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Seleccione Area</label>
                <select class="form-control" id="areaSelected" ></select>
              </div>
            </div>

             <div class="col-md-3">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Fecha Inicio </label>
                <input type="date" class="form-control" id="finicio" value="{{date('Y-m-d')}}">
              </div>
            </div>


             <div class="col-md-3">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Fecha Fin </label>
              	<input type="date" class="form-control" id="ffin" value="{{date('Y-m-d')}}">
              </div>
            </div>

             <div class="col-md-3">
              <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Estado </label>
                <select class="form-control" id="estadoSelected"  >
                	<option value="4">-- TODAS --</option>
                	<option value="0">EN PROCESO</option>
                	<option value="1">FINALIZADO</option>
                	<option value="2">ANULADOS</option>
                </select>
              </div>
            </div>
          </div>


          <div class="row">

          	 <div class="col-md-3 mt-2">   
                <button class="btn btn-primary" id="btnSeleccionarExamen"><i class="fas fa-search mr-1"></i> Realizar Busqueda</button>
            </div>
          	
          </div>

        </form>

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

<div class="row mt-2">
    <div class="card">
      <h5 class="card-header"><b><i class="fas fa-table"></i> Tablero de Exámenes</b></h5>
      <div class="card-body">


    <!-- En esta parte va la Tabla  -->

    <div class="table-responsive">

      <table id="examenesTable"  class="table table-striped mt-4" style="width:100%">
                    <thead>
                        <tr>
                            <th>N°</th>
                            <th>DETALLE</th>
                            <th>FECHA</th>
                            <th>AREA</th>
                            <th>PUESTO</th>
                            <th>ESTADO</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyExamenes">
                                                
                    </tbody>
      </table>


    </div>

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





<!-- Modal -->
<div class="modal fade" id="ModaleditarExamen" data-bs-backdrop="static" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel"> Editar Exámen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        

       <form id="formEditarExamen">

       	  <div class="row">
       	  	<div class="col-md">
       	  		<input type="hidden" id="idExamenEditar">
       	  	</div>
       	  </div>


          <div class="row">
          				<div class="mb-3">
                          <label for="recipient-name" class="col-form-label">DESCRIPCIÓN:</label>
                          <input type="text" class="form-control" id="descripcionEdit" name="descripcionEdit" >
                        </div>

          </div>

          <div class="row">
          				<div class="mb-3">
                          <label for="recipient-name" class="col-form-label">FECHA INICIO:</label>
                          <input type="date" class="form-control" id="finicioEdit" name="finicioEdit" >
                        </div>

          </div>


          <div class="row">
          				<div class="mb-3">
                          <label for="recipient-name" class="col-form-label">FECHA FIN:</label>
                          <input type="date" class="form-control" id="ffinEdit" name="ffinEdit" >
                        </div>

          </div>

          <div class="row">
          				<div class="mb-3">
                          <label for="recipient-name" class="col-form-label">PUESTO:</label>
                          <select class="form-control" id="puestoSelectedEdit">
			                  <option value="1">GERENCIA GENERAL</option>
			                  <option value="3">JEFE AREA</option>
			                  <option value="4">ASISTENTE</option>
			                  <option value="5">PRACTICANTE</option>
			                </select>
                        </div>

          </div>

       </div>
       <div class="modal-footer">
       		  <button class="btn btn-primary"><i class="fas fa-save"></i> Grabar Exámen</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
       </div>

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



@endsection