@extends('layouts/contentLayoutMaster')

@section('title', 'Dashboard Analytics')

@section('vendor-style')
  <!-- vendor css files -->
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
@section('page-style')
  <!-- Page css files -->

  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">

  <link rel="stylesheet" type="text/css" href="{{asset('css/base/plugins/forms/pickers/form-flat-pickr.css')}}">

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style:none !important;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
}</style>
  <script src="https://unpkg.com/feather-icons"></script>

  @endsection

@section('content')
<!-- Dashboard Analytics Start -->
<section id="dashboard-analytics">
  <div class="row match-height">
    <!-- Greetings Card starts -->

    <!-- Greetings Card ends -->

    <!-- Subscribers Chart Card starts -->
    <div class="col-lg-3 col-sm-6 col-12">
      <div class="card">
        <div class="card-header flex-column align-items-start pb-0">
          <div class="avatar bg-light-primary p-50 m-0">
            <div class="avatar-content">
              <i data-feather="users" class="font-medium-5"></i>
            </div>
          </div>
          <h2 class="fw-bolder mt-1">{{$ex_empleados}}</h2>
          <a href="/dashboard/analytics/1"><p class="card-text">Ex Colaboradores</p></a>
        </div>

      </div>
    </div>
    <!-- Subscribers Chart Card ends -->

    <!-- Orders Chart Card starts -->
    <div class="col-lg-3 col-sm-6 col-12">
      <div class="card">
        <div class="card-header flex-column align-items-start pb-0">
          <div class="avatar bg-light-warning p-50 m-0">
            <div class="avatar-content">
              <i data-feather="star" class="font-medium-5"></i>
            </div>
          </div>
          <h2 class="fw-bolder mt-1">{{$empleados_calificados}}</h2>
          <a href="/dashboard/analytics/2"> <p class="card-text">Colaboradores Calificados</p></a>
        </div>

      </div>
    </div>
    <!-- Orders Chart Card ends -->

      <!-- Orders Chart Card starts -->
      <div class="col-lg-3 col-sm-6 col-12">
      <div class="card">
        <div class="card-header flex-column align-items-start pb-0">
          <div class="avatar bg-light-info p-50 m-0">
            <div class="avatar-content">
              <i data-feather="search" class="font-medium-5"></i>
            </div>
          </div>
          <h2 class="fw-bolder mt-1">{{$busquedas}}</h2>
          <p class="card-text">Consultas Realizadas</p>
        </div>

      </div>
    </div>
    <!-- Orders Chart Card ends -->


      <!-- Orders Chart Card starts -->
      <div class="col-lg-3 col-sm-6 col-12">
      <div class="card">
        <div class="card-header flex-column align-items-start pb-0">
          <div class="avatar bg-light-success p-50 m-0">
            <div class="avatar-content">
              <i data-feather="check-square" class="font-medium-5"></i>
            </div>
          </div>
          <h2 class="fw-bolder mt-1">∞</h2>
          <p class="card-text">Consultas Disponible</p>
        </div>

      </div>
    </div>
    <!-- Orders Chart Card ends -->
  </div>
  </div>
  <div class="card">
  <form action="/dashboard/buscar_oferta" method="POST">
  {!! csrf_field() !!}
        <div class="card-header">
            Filtros de Busqueda
        </div>
        <div class="card-body">


            <div class="row">

                <div class="col-md-6"><label>Profesión</label>
                <select class="js-example-basic-single" id="mySelect2" name="id_profesion">
                    <option value=""></option>
                    @foreach($categorias as $item)
                        <option value="{{ $item->id }}">{{ $item->nombre }}</option>
                    @endforeach
                </select></div>

                <div class="col-md-6"><label>Provincia</label>
                    <select class="js-example-basic-single" id="mySelect21" name="provincia">
                            <option value="1">Bocas del Toro</option>
                            <option value="2">Cocle</option>
                            <option value="3">Colón</option>
                            <option value="4">Chiriqui</option>
                            <option value="5">Darien</option>
                            <option value="6">Herrera</option>
                            <option value="7">Los Santos</option>
                            <option value="8">Panamá</option>
                            <option value="9">Veraguas</option>
                            <option value="13">Panama Oeste</option>

                    </select>
                  </div>

                </div>


            <br><br>

            <div class="row">


            <div class="col-md-4"><label>Cédula</label>

                    <input type="text" class="form-control" id="basicInput" name="cedula"
                        placeholder="Cédula" />
                </div>
    

            <div class="col-md-4"><label>Sector</label>
            <select class="js-example-basic-single" id="mySelect22" name="id_profesion">
                <option value=""></option>
                @foreach($sectores as $item)
                    <option value="{{ $item->id }}">{{ $item->nombre }}</option>
                @endforeach
            </select></div>

            <div class="col-md-4"><label>Habilidades</label>



         

           
                               
                                <input type="text" class="form-control" id="basicInput" name="habilidades"
                                    placeholder="Habilidades" />
                            </div>
              </div>

            </div>
            <br> <br>
            <div class="col-md-12">
        <div class="row" style="padding:10px">


        <div class="row col-md-6" style="text-align:center;border: 1px solid;margin-left:0px;margin-right:0px">
          <h4>Nivel Academico</h4>
        <div class="col-md-3">
                <input type="checkbox"   name="primaria" class="form-check-input"
                    id="primaria" @if(isset($valores["primaria"])) checked @endif />
                <label class="form-check-label" for="primaria"  >
                    Primaria
                </label>
            </div>

            <div class="col-md-3">
                <input type="checkbox"   name="secundaria" class="form-check-input"
                    id="secundaria" @if(isset($valores["secundaria"])) checked @endif />
                <label class="form-check-label" for="secundaria">
                    Secundaria
                </label>
            </div>
        <div class="col-md-6">
                <input type="checkbox"   name="titulo" class="form-check-input"
                    id="titulo" @if(isset($valores["titulo"])) checked @endif   />
                <label class="form-check-label" for="titulo">
                    Titulo Universitario
                </label>
            </div>
            <br> <br>
        </div>

        <div class="row col-md-6" style="text-align:center;border: 1px solid;margin-left:0px;margin-right:0px">
          <h4>Licencias y permisos</h4>
          <div class="col-md-3">
                <input type="checkbox"   name="idoneidad" class="form-check-input"
                    id="idoneidad" @if(isset($valores["idoneidad"])) checked @endif  />
                <label class="form-check-label" for="idoneidad">
                    Idoneidad
                </label>
            </div>
        <div class="col-md-5">
                <input type="checkbox"  name="licencia" class="form-check-input"
                    id="h" @if(isset($valores["licencia"])) checked @endif  />
                <label class="form-check-label" for="h">
                    Licencia de Conducir
                </label>
            </div>
            <div class="col-md-4">
                <input type="checkbox"   name="carnet_salud" class="form-check-input"
                    id="Salud" @if(isset($valores["carnet_salud"])) checked @endif  />
                <label class="form-check-label" for="Salud">
                    Carnet de Salud
                </label>
            </div>
            <br> <br>
        </div>


        </div></div>
        <br><br>
        <div class="row" style="padding:10px">

        <div class="row col-md-6" style="text-align:center;border: 1px solid;margin-left:0px;margin-right:0px">
          <h4>Formacion Adicional</h4>


            <div class="col-md-4">
                <input type="checkbox"   name="cursos" class="form-check-input"
                    id="Curso" @if(isset($valores["cursos"])) checked @endif  />
                <label class="form-check-label" for="Curso">
                    Curso
                </label>
            </div>
            <br> <br>
        </div>

        <div class="row col-md-6" style="text-align:center;border: 1px solid;margin-left:0px;margin-right:0px">
          <h4>Horarios Disponible</h4>


            <div class="col-md-3">
                <input type="checkbox"   name="matutino" class="form-check-input"
                    id="Matutino" @if(isset($valores["matutino"])) checked @endif  />
                <label class="form-check-label" for="Matutino">
                    Matutino
                </label>
            </div>

            <div class="col-md-3">
                <input type="checkbox"   name="vespertino" class="form-check-input"
                    id="Vespertino" @if(isset($valores["vespertino"])) checked @endif  />
                <label class="form-check-label" for="Vespertino">
                    Vespertino
                </label>
            </div>


            <div class="col-md-3">
                <input type="checkbox"   name="nocturno" class="form-check-input"
                    id="Nocturno" @if(isset($valores["nocturno"])) checked @endif  />
                <label class="form-check-label" for="Nocturno">
                    Nocturno
                </label>
            </div>


            <div class="col-md-3">
                <input type="checkbox"   name="rotativo" class="form-check-input"
                    id="Rotativo" @if(isset($valores["rotativo"])) checked @endif  />
                <label class="form-check-label" for="Rotativo">
                    Rotativo
                </label>
            </div>


            <br> <br>




        </div>





        </div><br><br><br>
        <button type="submit" class="btn btn-outline-primary col-md-12" target="_blanck">Buscar</button>




        <br><br><br>


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

  <div class="card">
        <div class="card-body">
  <table id="example" class="table">
        <thead>
            <tr>
                <th>Codigo</th>
                <th>Nombre</th>
                <th>Cédula</th>
                <th>Profesión</th>
                <th>Puntos</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>

          @foreach($empleados as $empleado)
              <tr>
                  <td>ERC{{$empleado->codigo}}</td>
                  <td>{{$empleado->name}}</td>
                  <td>{{$empleado->ruc}}</td>
                  <td>{{$empleado->nombre}}</td>
                  <td>{{$empleado->puntos}}</td>
                  <td>
                      <a class="btn btn-outline-warning" href="/dashboard/editar_profesion/{{$empleado->id_empleado}}/{{$empleado->id}}" >Ver</a>
                  </td>
              </tr>
           @endforeach

        </tbody>
        <tfoot>
            <tr>
                <th>Codigo</th>
                <th>Nombre</th>
                <th>Cédula</th>
                <th>Profesión</th>
                <th>Puntos</th>
                <th>Acciones</th>
            </tr>
        </tfoot>
    </table>

    </div>
  </div>
            <!-- Vertical modal
            <div class="vertical-modal-ex">
              <button
                type="button"
                class="btn btn-outline-primary"
                data-bs-toggle="modal"
                data-bs-target="#exampleModalCenter"
              >
                Vertically Centered
              </button>
              Modal -->
              <div
                class="modal fade"
                id="exampleModalCenter"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Aviso!</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">
                      <p style="text-align:justify">
                       Su cuenta esta en verificación, podra agregar a sus colaboradores y calificar a los que cumplan con los requisitos
                       , una vez su cuenta sea validada podra utilizar todos los beneficios de la plataforma.
                       <br><br>
                       Saludos,
                      <br><br>
                      EnReglas
                      </p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Aceptar</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            @if($user->validado==2)
            <div
                class="modal fade"
                id="motivos"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Aviso!</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">
                      <p style="text-align:justify">
                       Su cuenta no ha sido verificada por los siguientes motivos:<br><br>
                         {{$motivo->motivo}}
                       <br><br>
                       Saludos,
                      <br><br>
                      EnReglas
                      </p>
                    </div>
                    <div class="modal-footer">
                      <a href="/dashboard/ver_informacion/{{$user->id}}" type="button" class="btn btn-outline-success">Corregir</a>
                      <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Aceptar</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            @endif

            @if($user->validado==1 && $user->pago_aprobado==0 && $user->rol!=1)
            <div
                class="modal fade"
                id="pago"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Proceda al Pago!</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">

                    <form method="POST" action="/probar_envio" id="enviar_pago">
                        {!! csrf_field() !!}

                    </form>

                      <p style="text-align:justify">
                       Su cuenta ha sido verificada, tiene 30 dias para realizar el pago y seguir recibirendo todos los beneficios:<br><br>

                        <!--  <a onclick='document.getElementById("enviar_pago").submit();' type="button" class="btn btn-outline-success col-md-12">Proceder al pago con tarjeta</a></p>-->
                         <a href="/yappy" type="button" class="btn btn-outline-primary col-md-12" style="color:inherit">Proceder al pago con yappy</a><br><br>
                         <a href="/process-transaction" type="button" class="btn btn-outline-info col-md-12" style="color:inherit">Proceder al pago con Tarjeta</a><br><br>
                       Saludos,
                      <br><br>
                      EnReglas
                      </p>
                    </div>
                    <div class="modal-footer">

                      <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Aceptar</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            @endif
            <!-- Vertical modal end-->


                        <!-- Vertical modal
            <div class="vertical-modal-ex">
              <button
                type="button"
                class="btn btn-outline-primary"
                data-bs-toggle="modal"
                data-bs-target="#exampleModalCenter"
              >
                Vertically Centered
              </button>
              Modal -->
              <div
                class="modal fade"
                id="crear_empleado"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Crear Colaborador</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">
                    <div class="col-xl-12 col-md-6 col-12">
                    <form method="POST" action="/dashboard/crear_empleado" id="busqueda_empleado">
                    {!! csrf_field() !!}
                        <div class="mb-1">
                          <label class="form-label" for="basicInput">Cédula </label>

                          <input type="text" class="form-control" id="basicInput" name="cedula" placeholder="Cédula" /><br>
                          <small style="color:red">Colocar guiones</small>
                        </div>
                      </div>

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-outline-primary"  onclick="document.getElementById('busqueda_empleado').submit();" >Aceptar</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>

            <div
                class="modal fade"
                id="buscar_empleado"
                tabindex="-1"
                aria-labelledby="exampleModalCenterTitle"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalCenterTitle">Buscar ex-Colaborador</h5>
                     <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                    </div>
                    <div class="modal-body">
                    <div class="col-xl-12 col-md-6 col-12">
                    <form method="POST" action="/dashboard/buscar_empleado" id="colaborador">
                    {!! csrf_field() !!}
                        <div class="mb-1">
                          <label class="form-label" for="basicInput">Cédula</label>
                          <input type="text" class="form-control" id="basicInput" name="cedula" placeholder="Cédula" />
                        </div>
                      </div>

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-outline-primary"  onclick="document.getElementById('colaborador').submit();" >Aceptar</button>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <!-- Vertical modal end-->
<!-- Dashboard Analytics end -->
@endsection


@section('vendor-script')
  {{-- vendor files --}}

  <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>

  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@endsection
@section('page-script')
  {{-- Page js files --}}

  <script>





$(document).ready(function() {
    var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf' ],
        language: {
           search: "Buscar: "
        }
    } );

    $('#mySelect2').select2();
    $('#mySelect2').val(@if(isset($valores["id_profesion"])){!! $valores["id_profesion"]!!} @else 0 @endif).trigger('change');

    $('#mySelect21').select2();
    $('#mySelect21').val(@if(isset($valores["provincia"])){!! $valores["provincia"]!!} @else 0 @endif).trigger('change');

    $('#mySelect22').select2();
    $('#mySelect22').val(@if(isset($valores["sector"])){!! $valores["sector"]!!} @else 0 @endif).trigger('change');

    $('#mySelect23').select2();
    $('#mySelect23').val(@if(isset($valores["habilidad"])){!! $valores["habilidad"]!!} @else 0 @endif).trigger('change');

    table.buttons().container()
        .appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );</script>
<script>
      feather.replace()
    </script>

@if($user->validado==0)
    <script type="text/javascript">

    $(window).on('load', function() {

      $('#exampleModalCenter').modal('show');
    });
@endif

@if($user->validado==2)
    <script type="text/javascript">

    $(window).on('load', function() {

      $('#motivos').modal('show');
    });
@endif
@if($user->validado==1)
    <script type="text/javascript">

    $(window).on('load', function() {

      $('#pago').modal('show');
    });
@endif
</script>
@include('sweetalert::alert')
@endsection