@extends('layouts.menu')

@section('title', 'Inicio')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Pre - Nómina</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">
                        <!--<h4><b>
                                    <a href="{{route('prenomina',base64_encode($fechaAnterior))}}" class="ico-amarillo"><i
                                                class="fa-solid fa-circle-chevron-left"></i></a>
                                    {{$fecha->isoFormat('D')}} de {{$fecha->monthName}}
                                del {{$fecha->isoFormat('YYYY')}}
                        @if($fechaPosterior)
                            <a href="{{route('prenomina',base64_encode($fechaPosterior))}}"
                                           class="ico-amarillo"><i class="fa-solid fa-circle-chevron-right"></i></a>
                                    @endif
                                </b></h4>-->
                            <h5><b>{{$fecha->isoFormat('D')}} de {{$fecha->monthName}}
                                    del {{$fecha->isoFormat('YYYY')}}</b></h5>
                        </div>
                    </div>
                </div>
                <div class="col-2 list-group" style="justify-content: end;">
                    <select name="tipo_nomina" id="tipo_nomina" class="form-control">
                        <option value="">Seleccione tipo nomina</option>
                        <option value="1">Quincenal</option>
                        <option value="2">Mensual</option>
                    </select>
                    <input type="hidden" id="fecha_actual" value="{{base64_encode($fecha->format('Y-m-d'))}}">
                    <a class="btn btn-lg btn-primary" onclick="generarNomina()">
                        <i class="fa-solid fa-file-contract"></i>
                        Generar
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="input-group mb-3">
                        <span class="input-group-text">
                        <a href="{{route('prenomina',base64_encode($fechaAnterior))}}" class="ico-amarillo">
                            <i class="fa-solid fa-circle-chevron-left"></i>
                        </a></span>
                        <input type="text" class="form-control" id="calendario" onclick="date()">
                        @if($fechaPosterior)
                            <span class="input-group-text">
                            <a href="{{route('prenomina',base64_encode($fechaPosterior))}}"
                               class="ico-amarillo"><i class="fa-solid fa-circle-chevron-right"></i></a>
                            </span>
                        @endif
                    </div>

                </div>
                <div class="col-md-4">
                </div>
            </div>
        </div>
        <div class="card-body">
            {{-- Filtros --}}
            <div class="row">
                <div class="col-sm-6 col-md-4 col-lg-2 my-2" style=" display: flex;  justify-content: end; ">
                </div>
                <h3 class="fs-title-secondary"><i class="fas fa-filter"></i> Filtros:
                </h3>
                <hr class="separator">
                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Servicios
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($servicios as $servicio)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox" name="servicios"
                                               id="servicio_{{str_replace(' ', '_', $servicio)}}"
                                               onChange="filtrar_tabla()" value="{{$servicio}}">
                                        <label class="form-check-label fontS12"
                                               for="servicio_{{str_replace(' ', '_', $servicio)}}"> {{$servicio}} </label>
                                    </div>
                                </li>
                            @endforeach

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

                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Puertas
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($puertas as $puerta)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox"
                                               id="puerta_{{str_replace(' ', '_', $puerta)}}" name="puertas"
                                               onChange="filtrar_tabla()" value="{{$puerta}}">
                                        <label class="form-check-label fontS12"
                                               for="puerta_{{str_replace(' ', '_', $puerta)}}"> {{$puerta}} </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4 col-md-3 col-lg-1 my-2">
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            Turnos
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark" style="max-height: 300px; overflow: auto;">
                            @foreach ($turnos as $turno)
                                <li class="mx-2">
                                    <div class="d-flex align-items-center dropdown-item">
                                        <input class="filtros mr-2" type="checkbox"
                                               id="turno_{{str_replace(' ', '_', $turno)}}" name="turnos"
                                               onChange="filtrar_tabla()" value="{{$turno}}">
                                        <label class="form-check-label fontS12"
                                               for="turno_{{str_replace(' ', '_', $turno)}}"> {{$turno}} </label>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

            </div>
            <br>
            <div class="row">

                <form action="">
                    <div class="col-md-2">
                        <select name="turnos_lista" id="turnos_lista" class="form-control">
                            <option value="">Seleccione un turno</option>
                            @foreach($turnos as $turno)
                                @if(!empty($turno))
                                    <option value="{{$turno}}">{{$turno}}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="opciones" id="opciones" class="form-control">
                            <option value="{{$opcion->id}}" selected>{{$opcion->concepto}}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary form-control" onclick="asistenciaDiaFestivo()">
                            Asistencia
                        </button>
                    </div>
                </form>
            </div>
            <br>
            {{-- Tabla de Asistencia --}}

            <div class="table-responsive mt-2" style="overflow-x: clip;">
                <table id="tabla_asistencia" class="table table-striped compact">
                    <thead class="table-dark">
                    <tr>
                        <th width="20px">ID</th>
                        <th>
                            Lista
                        </th>
                        <th>Servicio</th>
                        <th>Puerta</th>
                        <th>Elemento</th>
                        <th>Turno</th>
                        <th>Puesto</th>
                        <th>Sueldo Quincenal</th>
                        <th>Bono</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($empleados as $key => $empleado)
                        <tr>
                            <td>{{$empleado->id}}</td>
                            <td align="center">
                                <div style="display: flex; justify-content: space-evenly;">
                                    <div id="contenedorAsistencia_{{$empleado->id}}">
                                        @if ($empleado->dias_laborados)
                                            <div class="btn-group dropend">
                                                <button type="button" class="card-asistencia dropdown-toggle"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span style="Color:{{$empleado->dias_laborados->color}};"><b>{{$empleado->dias_laborados->nomenclatura?$empleado->dias_laborados->nomenclatura:'A '}}</b></span>
                                                    - {{$empleado->dias_laborados->concepto}}
                                                </button>

                                                <ul class="dropdown-menu dropdown-menu-dark">
                                                    @foreach ($opciones as $opcion)
                                                        <li><a class="dropdown-item"
                                                               onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','{{$empleado->id}}')"><span
                                                                        style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span>
                                                                - {{$opcion->concepto}}</a></li>
                                                    @endforeach
                                                </ul>


                                            </div>
                                    </div>
                                    @if($empleado->dias_laborados->comentario)

                                        <i class="fa-solid fa-comment-dots fa-2x ico-green"
                                           onclick="PonerComentario('{{$empleado->id}}','{{$empleado->dias_laborados->comentario}}')"></i>

                                    @else

                                        <i class="fa-solid fa-comment-dots fa-2x ico-amarillo"
                                           onclick="PonerComentario('{{$empleado->id}}','')"></i>


                                    @endif
                                    @else
                                        @if(isset($empleado->opcionBaja))
                                            <div class="card-asistencia">
                                                <span><b>{{$empleado->opcionBaja}}</b></span>
                                            </div>
                                        @elseif(isset($empleado->opcionAlta))
                                            <div class="card-asistencia">
                                                <span><b>{{$empleado->opcionAlta}}</b></span>
                                            </div>
                                        @else
                                            <div class="btn-group dropend">
                                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle"
                                                        data-bs-toggle="dropdown" aria-expanded="false"
                                                        style="width: 130px;">
                                                    Acción
                                                </button>

                                                <ul class="dropdown-menu dropdown-menu-dark">
                                                    @foreach ($opciones as $opcion)
                                                        <li><a class="dropdown-item"
                                                               onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','{{$empleado->id}}')"><span
                                                                        style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span>
                                                                - {{$opcion->concepto}}</a></li>
                                                    @endforeach
                                                </ul>

                                            </div>
                                        @endif
                                </div>

                                <i class="fa-solid fa-comment-dots fa-2x ico-amarillo"
                                   onclick="PonerComentario('{{$empleado->id}}')"></i>

                @endif
            </div>
            </td>
            <td>{{$empleado->servicio}}</td>
            <td>{{$empleado->puerta}}</td>
            <td>{{$empleado->nombre}} {{$empleado->apellido_paterno}} {{$empleado->apellido_materno}}</td>
            <td>{{$empleado->turno}}</td>
            <td>{{$empleado->puesto}} </td>
            <td>$ {{number_format($empleado->sueldo_quincenal, 2, '.', ','); }} </td>
            <td>$ {{number_format($empleado->bono, 2, '.', ','); }} </td>

            </tr>
            @endforeach
            </tbody>
            </table>
        </div>

    </div>
    </div>


    <!-- Modal Agregar comentario -->
    <div class="modal fade " id="asignarComentario" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content bg-light">
                <div class="modal-header card-header-pr77 pb-2 pt-4">
                    <h5 class="modal-title" id="exampleModalLabel" style="font-weight: 700;"><i
                                class="fa-regular fa-comment-dots"></i> Asignar Comentario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form enctype="multipart/form-data" action="{{route('inicio.asignarComentario')}}" method="post">
                    @csrf
                    <div class="modal-body">
                        <input hidden id="idEmpleado" name="idEmpleado"/>
                        <input hidden id="fecha" name="fecha" value="{{$fecha}}"/>
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="comentario" class="form-label">Comentario</label>
                                <textarea type="text" class="form-control" id="comentario" name="comentario"
                                          rows="3"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="file" class="form-control" id="evidencia" name="evidencia">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary btn-lg" onclick="$('#Loader').fadeIn();">
                            <i class="fa-solid fa-floppy-disk"></i>
                            Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal Comentario Obligatorio Baja -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Motivo de la baja</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="accion_baja">
                    <input type="hidden" id="fecha_baja">
                    <input type="hidden" id="empleado_baja">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="" class="text-danger">*Comentario:</label>
                            <textarea class="form-control" id="comentario_obligatorio" name="comentario_obligatorio"
                                      cols="20" rows="10" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4 mb-0">
                            <label for="check" class="form-label"></label>
                            <div class="input-group mb-3">
                                Reintegrarse:
                                <div class="form-check checkbox-pr77">
                                    <input class="form-check-input" type="checkbox" value="SI" id="check"
                                           name="check">
                                    <label class="form-check-label" for="check"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="comentario_obligario_button" class="btn btn-primary"
                            style="display: none;" onclick="baja()">Guardar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Autorizacion Doblete -->
    <div class="modal fade" id="doblete_autorizado" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="doblete_autorizado_label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="doblete_autorizado_label">Autorizacion Doblete</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" value="{{$fecha}}" id="fecha_movimiento_autorizacion"
                           name="fecha_movimiento_autorizacion">
                    <input type="hidden" id="id_empleado_doblete_autorizar" name="id_empleado_doblete_autorizar">
                    <input type="hidden" id="tipo_doblete" name="tipo_doblete">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="">Autoriza</label>
                            <input type="text" class="form-control" name="autoriza" id="autoriza"
                                   onkeydown="cuenta_autoriza()" onkeyup="cuenta_autoriza()" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="autoriza_doblete_button" class="btn btn-primary"
                            style="display: none;" onclick="autorizaDoblete()">Guardar
                    </button>
                    <button type="button" class="btn btn-danger" onclick="cerrarModal()">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            //('tabla_asistencia');
            //notifications()
            CrearTabla('tabla_asistencia')
            setTimeout(function () {
                notifications()
            }, 2000)
        });
        const protocol = window.location.origin
        const base_path = protocol + "/"
        var checkbox = '';

        function date() {
            $('#calendario').pickadate({
                //Traduccion meses y dias
                monthsFull: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                weekdaysFull: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
                weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],

                // Botones
                today: 'Hoy',
                clear: 'Limpiar',
                close: 'Cerrar',

                // Etiquetas de accesibilidad
                labelMonthNext: 'Siguiente mes',
                labelMonthPrev: 'Mes anterior',
                labelMonthSelect: 'Seleccione un mes',
                labelYearSelect: 'Seleccione un año',

                //Formatio hora
                format: 'yyyy-mm-dd',
                selectMonths: true,
                selectYears: true,
                max: true,

                onSet: function (context) {
                    fecha = document.getElementById("calendario").value
                    console.log(context)
                    console.log(`${base_path}prenomina/${btoa(fecha)}`)

                    if (fecha != '') {
                        window.location.replace(`${base_path}prenomina/${btoa(fecha)}`)
                    }
                }
            });

            //


        }

        $('#check').change(function () {
            if ($(this).prop('checked') == true) {
                checkbox = 'SI';
            }
            else {
                checkbox = 'NO';
            }
        });

        function cuenta() {
            //console.log($('#comentario_obligatorio').val().length)
            if ($('#comentario_obligatorio').val().length >= 20) {
                $('#comentario_obligario_button').css("display", "")
            } else {
                $('#comentario_obligario_button').css("display", "none")
            }
        }

        function cuenta_autoriza() {
            if ($('#autoriza').val().length >= 18) {
                $('#autoriza_doblete_button').css("display", "")
            } else {
                $('#autoriza_doblete_button').css("display", "none")
            }
        }

        function generarNomina() {
            let tipo_nomina = document.getElementById('tipo_nomina').value
            let fecha = document.getElementById('fecha_actual').value
            window.location.replace(`/generarNomina/${fecha}/${tipo_nomina}`)
        }

        function PonerComentario(id, comentario) {
            console.log("Comentario para:" + id + " Tiene: " + comentario)
            $("#idEmpleado").val(id);
            $("#comentario").val(comentario);

            $("#asignarComentario").modal('toggle');
        }

        function cerrarModal() {
            $('#doblete_autorizado').modal('hide')
        }

        function autorizaDoblete() {
            let fecha = document.getElementById('fecha_movimiento_autorizacion').value
            let empleado = document.getElementById('id_empleado_doblete_autorizar').value
            let nombre_autoriza = document.getElementById('autoriza').value
            let tipo = document.getElementById('tipo_doblete').value
            fetch("{{route('inicio.autorizar_doblete')}}", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    empleado: empleado,
                    autorizo: nombre_autoriza,
                    fecha: fecha,
                    tipo: tipo,
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                    $("#Loader").fadeOut();
                    document.getElementById('fecha_movimiento_autorizacion').value = ""
                    document.getElementById('id_empleado_doblete_autorizar').value = ""
                    document.getElementById('autoriza').value = ""
                    $("#doblete_autorizado").modal('hide')
                    if (response.status == true) {
                        console.log('wdadwaw')
                        let opcionesAsistencias = "";
                        @foreach ($opciones as $opcion)
                            opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                        @endforeach
                        $("#contenedorAsistencia_" + response.id_empleado).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.incidencia.color};"><b>${response.incidencia.nomenclatura}</b></span> - ${response.incidencia.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                    }
                });


        }

        function Accion(fecha, accion, empleado) {
            // $("#Loader").fadeIn();
            if (accion == "Adicional") {
                adicional(fecha, accion, empleado)
            } else if (accion == "Falta") {
                console.log(`El empleado ${empleado} tiene ${accion} el dia ${fecha}`);
                falta(fecha, accion, empleado)
            } else if (accion == "Retardos") {
                console.log(`El empleado ${empleado} tiene ${accion} el dia ${fecha}`);
                retardo(fecha, accion, empleado)
            } else if (accion == "Baja") {
                $('#staticBackdrop').modal('show')
                document.getElementById('accion_baja').value = accion
                document.getElementById('fecha_baja').value = fecha
                document.getElementById('empleado_baja').value = empleado
            } else {
                otrasAcciones(fecha, accion, empleado)
            }
        }

        function retardo(fecha, accion, empleado) {
            fetch("{{route('inicio.checarRetardos')}}", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    empleado: empleado,
                    fecha: fecha,
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                    if (response.status == 'suspension') {
                        Swal.fire({
                            title: 'Se encontraron 2 retardos',
                            text: "Mas el retardo que se desea asignar hace un total de 3 retardos por lo cual se suspendera al elemento",
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#808080',
                            confirmButtonText: 'Si, proceder!',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                fetch("{{route('Inicio.asignarAccion')}}", {
                                    headers: {
                                        "Content-Type": "application/json",
                                        "Accept": "application/json",
                                        "X-Requested-With": "XMLHttpRequest",
                                        "X-CSRF-Token": '{{csrf_token()}}',
                                    },
                                    method: "post",
                                    credentials: "same-origin",
                                    body: JSON.stringify({
                                        empleado: empleado,
                                        accion: 'Falta',
                                        fecha: fecha
                                    })
                                }).then(res => res.json())
                                    .catch(function (error) {
                                        console.error('Error:', error);
                                        swal("Error", "Intente de nuevo mas tarde!", "error");
                                    })
                                    .then(function (response) {
                                        console.log(response)
                                        if (response.error) {
                                            $("#Loader").fadeOut();
                                            setTimeout(function () {
                                                Swal.fire({
                                                    title: 'Error!',
                                                    html: response.error,
                                                    icon: 'error',
                                                    timer: 2000,
                                                    timerProgressBar: true,
                                                    confirmButtonText: 'Entendido',
                                                    confirmButtonColor: '#F1C40F'
                                                }).then((result) => {
                                                    if (result.isConfirmed || result.isDismissed) {

                                                    }
                                                });
                                            }, 500);
                                            //location.reload()
                                        }
                                        if (response.success) {
                                            $("#Loader").fadeOut();
                                            let opcionesAsistencias = "";
                                            @foreach ($opciones as $opcion)
                                                opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                            @endforeach
                                            $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                        }
                                    })
                                setTimeout(function () {
                                    fetch("{{route('Inicio.asignarAccionEspecifica')}}", {
                                        headers: {
                                            "Content-Type": "application/json",
                                            "Accept": "application/json",
                                            "X-Requested-With": "XMLHttpRequest",
                                            "X-CSRF-Token": '{{csrf_token()}}',
                                        },
                                        method: "post",
                                        credentials: "same-origin",
                                        body: JSON.stringify({
                                            empleado: empleado,
                                            accion: 'Retardo Falta',
                                            fecha: fecha
                                        })
                                    }).then(res => res.json())
                                        .catch(function (error) {
                                            console.error('Error:', error);
                                            swal("Error", "Intente de nuevo mas tarde!", "error");
                                        })
                                        .then(function (response) {
                                            console.log(response)
                                            if (response.error) {
                                                $("#Loader").fadeOut();
                                                setTimeout(function () {
                                                    Swal.fire({
                                                        title: 'Error!',
                                                        html: response.error,
                                                        icon: 'error',
                                                        timer: 2000,
                                                        timerProgressBar: true,
                                                        confirmButtonText: 'Entendido',
                                                        confirmButtonColor: '#F1C40F'
                                                    }).then((result) => {
                                                        if (result.isConfirmed || result.isDismissed) {

                                                        }
                                                    });
                                                }, 500);
                                                //location.reload()
                                            }
                                            if (response.success) {
                                                $("#Loader").fadeOut();
                                                let opcionesAsistencias = "";
                                                @foreach ($opciones as $opcion)
                                                    opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                                @endforeach
                                                $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                            }
                                        })
                                }, 500)
                            }
                        })
                    } else if (response.status == 'baja') {
                        Swal.fire({
                            title: 'Se encontraron 3 retardos',
                            text: "Mas el retardo que se desea asignar hace un total de 4 retardos por lo cual es baja del elemento",
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#808080',
                            confirmButtonText: 'Si, proceder!',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                fetch("{{route('Inicio.asignarAccion')}}", {
                                    headers: {
                                        "Content-Type": "application/json",
                                        "Accept": "application/json",
                                        "X-Requested-With": "XMLHttpRequest",
                                        "X-CSRF-Token": '{{csrf_token()}}',
                                    },
                                    method: "post",
                                    credentials: "same-origin",
                                    body: JSON.stringify({
                                        empleado: empleado,
                                        accion: 'Baja',
                                        fecha: fecha,
                                        comentario: 'Dado de baja por 4 retardos acumulados',
                                    })
                                }).then(res => res.json())
                                    .catch(function (error) {
                                        console.error('Error:', error);
                                        swal("Error", "Intente de nuevo mas tarde!", "error");
                                    })
                                    .then(function (response) {
                                        console.log(response)
                                        if (response.error) {
                                            $("#Loader").fadeOut();
                                            setTimeout(function () {
                                                Swal.fire({
                                                    title: 'Error!',
                                                    html: response.error,
                                                    icon: 'error',
                                                    timer: 2000,
                                                    timerProgressBar: true,
                                                    confirmButtonText: 'Entendido',
                                                    confirmButtonColor: '#F1C40F'
                                                }).then((result) => {
                                                    if (result.isConfirmed || result.isDismissed) {

                                                    }
                                                });
                                            }, 500);
                                            //location.reload()
                                        }
                                        if (response.success) {
                                            $("#Loader").fadeOut();
                                            let opcionesAsistencias = "";
                                            @foreach ($opciones as $opcion)
                                                opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                            @endforeach
                                            $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                        }
                                    })
                            }
                        })
                    } else {
                        fetch("{{route('Inicio.asignarAccion')}}", {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "X-Requested-With": "XMLHttpRequest",
                                "X-CSRF-Token": '{{csrf_token()}}',
                            },
                            method: "post",
                            credentials: "same-origin",
                            body: JSON.stringify({
                                empleado: empleado,
                                accion: accion,
                                fecha: fecha
                            })
                        }).then(res => res.json())
                            .catch(function (error) {
                                console.error('Error:', error);
                                swal("Error", "Intente de nuevo mas tarde!", "error");
                            })
                            .then(function (response) {
                                console.log(response)
                                if (response.error) {
                                    $("#Loader").fadeOut();
                                    setTimeout(function () {
                                        Swal.fire({
                                            title: 'Error!',
                                            html: response.error,
                                            icon: 'error',
                                            timer: 2000,
                                            timerProgressBar: true,
                                            confirmButtonText: 'Entendido',
                                            confirmButtonColor: '#F1C40F'
                                        }).then((result) => {
                                            if (result.isConfirmed || result.isDismissed) {

                                            }
                                        });
                                    }, 500);
                                    //location.reload()
                                }
                                if (response.success) {
                                    $("#Loader").fadeOut();
                                    let opcionesAsistencias = "";
                                    @foreach ($opciones as $opcion)
                                        opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                    @endforeach
                                    $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                }

                            })
                    }
                })
        }

        function adicional(fecha, accion, empleado) {
            Swal.fire({
                title: 'Ingresa el monto adicional para este dia',
                input: 'text',
                inputLabel: 'Precio adicional',
                inputValue: "0",
                showCancelButton: true,
                inputValidator: (value) => {
                    console.log(value * 1)
                    if (value * 1 != value) {
                        return 'Escribe un número'
                    }
                },
                confirmButtonText: 'Aceptar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#F1C40F'
            }).then((result) => {
                console.log(result);
                if (result.isConfirmed) {
                    fetch("{{route('Inicio.asignarAccion')}}", {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-Requested-With": "XMLHttpRequest",
                            "X-CSRF-Token": '{{csrf_token()}}',
                        },
                        method: "post",
                        credentials: "same-origin",
                        body: JSON.stringify({
                            empleado: empleado,
                            accion: accion,
                            fecha: fecha,
                            costo: result.value
                        })
                    }).then(res => res.json())
                        .catch(function (error) {
                            console.error('Error:', error);
                            swal("Error", "Intente denuevo mas tarde!", "error");
                        })
                        .then(function (response) {
                            console.log(response)
                            console.log('hola')
                            if (response.error) {
                                $("#Loader").fadeOut();
                                setTimeout(function () {
                                    Swal.fire({
                                        title: 'Error!',
                                        html: response.error,
                                        icon: 'error',
                                        timer: 2000,
                                        timerProgressBar: true,
                                        confirmButtonText: 'Entendido',
                                        confirmButtonColor: '#F1C40F'
                                    }).then((result) => {
                                        if (result.isConfirmed || result.isDismissed) {
                                            //console.log('se cerro')
                                        }
                                    });
                                }, 500);
                            }
                            if (response.success) {
                                console.log('wadwadwadw')
                                $("#Loader").fadeOut();
                                let opcionesAsistencias = "";
                                @foreach ($opciones as $opcion)
                                    opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                @endforeach
                                $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
                <div class="btn-group" >
                <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
                </button>
                <ul class="dropdown-menu dropdown-menu-dark">
                ${opcionesAsistencias}
                </ul>
                </div>`);
                            }

                        }).finally(function () {
                    });
                }
            });
        }

        function falta(fecha, accion, empleado) {
            fetch("{{route('inicio.checarDobletes')}}", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    empleado: empleado,
                    fecha: fecha,
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                    if (response.status == true) {
                        Swal.fire({
                            title: 'Se encontraron dobletes',
                            text: "Se quitara un doblete por falta",
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#808080',
                            confirmButtonText: 'Si, proceder!',
                            cancelButtonText: 'Cancelar'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                fetch("{{route('Inicio.asignarAccion')}}", {
                                    headers: {
                                        "Content-Type": "application/json",
                                        "Accept": "application/json",
                                        "X-Requested-With": "XMLHttpRequest",
                                        "X-CSRF-Token": '{{csrf_token()}}',
                                    },
                                    method: "post",
                                    credentials: "same-origin",
                                    body: JSON.stringify({
                                        empleado: empleado,
                                        accion: accion,
                                        fecha: fecha
                                    })
                                }).then(res => res.json())
                                    .catch(function (error) {
                                        console.error('Error:', error);
                                        swal("Error", "Intente de nuevo mas tarde!", "error");
                                    })
                                    .then(function (response) {
                                        console.log(response)
                                        if (response.error) {
                                            $("#Loader").fadeOut();
                                            setTimeout(function () {
                                                Swal.fire({
                                                    title: 'Error!',
                                                    html: response.error,
                                                    icon: 'error',
                                                    timer: 2000,
                                                    timerProgressBar: true,
                                                    confirmButtonText: 'Entendido',
                                                    confirmButtonColor: '#F1C40F'
                                                }).then((result) => {
                                                    if (result.isConfirmed || result.isDismissed) {

                                                    }
                                                });
                                            }, 500);
                                            //location.reload()
                                        }
                                        if (response.success) {
                                            $("#Loader").fadeOut();
                                            let opcionesAsistencias = "";
                                            @foreach ($opciones as $opcion)
                                                opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                            @endforeach
                                            $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                        }

                                    }).finally(function () {
                                });
                            }
                        })
                    } else {
                        fetch("{{route('Inicio.asignarAccion')}}", {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "X-Requested-With": "XMLHttpRequest",
                                "X-CSRF-Token": '{{csrf_token()}}',
                            },
                            method: "post",
                            credentials: "same-origin",
                            body: JSON.stringify({
                                empleado: empleado,
                                accion: accion,
                                fecha: fecha
                            })
                        }).then(res => res.json())
                            .catch(function (error) {
                                console.error('Error:', error);
                                swal("Error", "Intente denuevo mas tarde!", "error");
                            })
                            .then(function (response) {
                                console.log(response)
                                if (response.error) {
                                    $("#Loader").fadeOut();
                                    setTimeout(function () {
                                        Swal.fire({
                                            title: 'Error!',
                                            html: response.error,
                                            icon: 'error',
                                            timer: 2000,
                                            timerProgressBar: true,
                                            confirmButtonText: 'Entendido',
                                            confirmButtonColor: '#F1C40F'
                                        }).then((result) => {
                                            if (result.isConfirmed || result.isDismissed) {

                                            }
                                        });
                                    }, 500);
                                    //location.reload()
                                }
                                if (response.success) {
                                    $("#Loader").fadeOut();
                                    let opcionesAsistencias = "";
                                    @foreach ($opciones as $opcion)
                                        opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                                    @endforeach
                                    $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                                }

                            }).finally(function () {
                        });
                    }
                })
        }

        function otrasAcciones(fecha, accion, empleado) {
            fetch("{{route('Inicio.asignarAccion')}}", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    empleado: empleado,
                    accion: accion,
                    fecha: fecha
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                    swal("Error", "Intente denuevo mas tarde!", "error");
                })
                .then(function (response) {
                    console.log(response)
                    if (response.error_doblete) {
                        $("#Loader").fadeOut();
                        document.getElementById('id_empleado_doblete_autorizar').value = response.id_empleado
                        document.getElementById('tipo_doblete').value = response.tipo
                        Swal.fire({
                            title: 'Error!',
                            html: response.error_doblete,
                            icon: 'error',
                            showCancelButton: true,
                            reverseButtons: true,
                            cancelButtonText: 'Entendido',
                            cancelButtonColor: '#F1C40F',
                            confirmButtonText: 'Autorizar',
                            confirmButtonColor: '#f19261'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $('#doblete_autorizado').modal('show')
                            } else if (result.isDenied) {

                            }
                        });

                        //location.reload()
                    }
                    if (response.success) {
                        $("#Loader").fadeOut();
                        let opcionesAsistencias = "";
                        @foreach ($opciones as $opcion)
                            opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                        @endforeach
                        $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                    }

                });
        }

        function baja() {
            $('#staticBackdrop').modal('hide')
            var fecha = document.getElementById('fecha_baja').value
            var accion = document.getElementById('accion_baja').value
            var empleado = document.getElementById('empleado_baja').value
            var comentario_baja = $('#comentario_obligatorio').val()
            fetch("{{route('Inicio.asignarAccion')}}", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "post",
                credentials: "same-origin",
                body: JSON.stringify({
                    empleado: empleado,
                    accion: accion,
                    fecha: fecha,
                    comentario: comentario_baja,
                    reintegracion: checkbox,
                })
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                    swal("Error", "Intente denuevo mas tarde!", "error");
                })
                .then(function (response) {
                    console.log(response)
                    if (response.error) {
                        $("#Loader").fadeOut();
                        setTimeout(function () {
                            Swal.fire({
                                title: 'Error!',
                                html: response.error,
                                icon: 'error',
                                timer: 2000,
                                timerProgressBar: true,
                                confirmButtonText: 'Entendido',
                                confirmButtonColor: '#F1C40F'
                            }).then((result) => {
                                if (result.isConfirmed || result.isDismissed) {

                                }
                            });
                        }, 500);
                    }
                    if (response.success) {
                        $("#Loader").fadeOut();
                        let opcionesAsistencias = "";
                        @foreach ($opciones as $opcion)
                            opcionesAsistencias += `<li><a class="dropdown-item" onclick="Accion('{{$fecha}}','{{$opcion->concepto}}','${empleado}')"><span style="Color:{{$opcion->color}};"><b>{{$opcion->nomenclatura}}</b></span> - {{$opcion->concepto}}</a></li>`;
                        @endforeach
                        $("#contenedorAsistencia_" + response.Accion.id_empleados).html(`
              <div class="btn-group" >
              <button type="button" class="card-asistencia dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <span style="Color:${response.Accion.color};"><b>${response.Accion.nomenclatura}</b></span> - ${response.Accion.concepto}
              </button>
              <ul class="dropdown-menu dropdown-menu-dark">
              ${opcionesAsistencias}
              </ul>
              </div>`);
                    }

                });
        }

        function asistenciaDiaFestivo() {
            let turno = document.getElementById('turnos_lista').value
            let id = document.getElementById('opciones').value
            if (turno != '') {
                Swal.fire({
                    title: 'Esta seguro?',
                    text: "Se colocara asistencia dia festivo a todo aquel que tenga el turno que selecciono",
                    icon: 'warning',
                    toast: true,
                    showCancelButton: true,
                    cancelButtonColor: '#808080',
                    confirmButtonColor: '#e62e1b',
                    confirmButtonText: 'Si, proceder!',
                    cancelButtonText: 'Cancelar',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch("{{route('inicio.asistencias_turnos')}}", {
                            headers: {
                                "Content-Type": "application/json",
                                "Accept": "application/json",
                                "X-Requested-With": "XMLHttpRequest",
                                "X-CSRF-Token": '{{csrf_token()}}',
                            },
                            method: "post",
                            credentials: "same-origin",
                            body: JSON.stringify({
                                turno: turno,
                                id: id
                            })
                        }).then(res => res.json())
                            .catch(function (error) {
                                console.log(error)
                            })
                            .then(function (response) {
                                console.log(response)
                                location.reload()
                            })
                    }
                });
            } else {
                message(true, 'warning', 1500, 'No ha selecciona ningun turno')
            }

        }

        function filtrar_tabla() {
            var table = $('#tabla_asistencia').dataTable();
            var servicios = $('input:checkbox[name="servicios"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //filter in column 0, with an regex, no smart filtering, no inputbox,not case sensitive
            //console.log("----------estados------------");
            //console.log(estados);
            table.fnFilter(servicios, 2, true, false, false, false);
            var puertas = $('input:checkbox[name="puertas"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //console.log("----------conceptos------------");
            //console.log(conceptos);
            table.fnFilter(puertas, 3, true, false, false, false);
            var turnos = $('input:checkbox[name="turnos"]:checked').map(function () {
                return this.value;
            }).get().join('|');
            //console.log("----------conceptos------------");
            //console.log(conceptos);
            table.fnFilter(turnos, 5, true, false, false, false);

        }

        function notifications() {
            let fecha_param = document.getElementById('fecha_actual').value
            fetch(`/notification/${fecha_param}`, {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "get",
                credentials: "same-origin",
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                });
        }
    </script>
@stop