@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>

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


@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-6 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">{{$vistas}}</h2>
                    <p class="card-text">Visitas al perfil</p>
                </div>

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

        <!-- Orders Chart Card starts -->
        <div class="col-lg-6 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="search" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="fw-bolder mt-1">{{$busqueda}}</h2>
                    <p class="card-text">Busquedas del perfil</p>
                </div>

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

        <!-- Orders Chart Card starts -->
       <!--   <div class="col-lg-4 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="star" class="font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="fw-bolder mt-1">0</h2>
                    <p class="card-text">Puntuación</p>
                </div>

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



    </div>
    </div>
    <div class="card">
        <div class="card-header">
            @if(($user->validado==1 && $user->pago_aprobado==1) || count($profesiones)<3)
            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#crear_empleado">Agregar
                Nueva Profesión</button>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="example" class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>

                        <th>Puntos</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>

                @foreach($profesiones as $profesion)
              <tr>
                            <td>{{ $profesion->nombre }}</td>
                            <td>{{ $profesion->puntos }}</td>
                            <td>
                                <a class="btn btn-outline-warning"
                                    href="/dashboard/editar_profesion/{{ $profesion->id }}">Editar</a>
                            </td>
                            </tr>
                            @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>Nombre</th>
                        <th>Puntos</th>
                        <th>Acciones</th>
                    </tr>
                </tfoot>
            </table>

        </div>
    </div>





    <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">Nueva Profesión</h5>
                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
                </div>
                <div class="modal-body">

                    <form method="POST" action="/dashboard/crear_empleado_profesion" id="busqueda_empleado">
                        {!! csrf_field() !!}

                        <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>


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

            </div>
        </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>


    @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>
    @endif

    @if($user->validado==1 && $user->pago_aprobado!=1 && count($profesiones)>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">
                            Debe realizar el pago de <strong>$1.98</strong> para utilizar la plataforma:<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>

    @endif




    <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>

$('#mySelect2').select2({
        dropdownParent: $('#crear_empleado')
    });

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

            table.buttons().container()
                .appendTo('#example_wrapper .col-md-6:eq(0)');
        });

    </script>

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

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

      $('#pago').modal('show');
    });
</script>

@endif
    @include('sweetalert::alert')
    @endsection