@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')}}">
  <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">
        <div class="card-header">
  <button class="btn btn-outline-primary" data-bs-toggle="modal"
                data-bs-target="#crear_empleado" >Agregar Nuevo Colaborador</button>
  </div>
  </div>

  <div class="card">
        <div class="card-body">
  <table id="example" class="table">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Cédula</th>
                <th>Sexo</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>

          @foreach($empleados as $empleado)
              <tr>
                  <td>{{$empleado->nombre}}</td>
                  <td>{{$empleado->cedula}}</td>
                  <td>{{$empleado->sexo}}</td>
                  <td>
                      <a class="btn btn-outline-primary" href="/dashboard/editar/empleado/{{$empleado->id}}" >Editar y calificar</a>
                      <a class="btn btn-outline-warning" href="/dashboard/editar/empleadoH/{{$empleado->id}}" >Ver Historial</a>
                  </td>
              </tr>
           @endforeach

        </tbody>
        <tfoot>
        <tr>
                <th>Nombre</th>
                <th>Cédula</th>
                <th>Sexo</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)
            <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>
@endsection
@section('page-script')
  {{-- Page js files --}}

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

    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