@extends('layouts.menu')

@section('title', 'Inicio Supervisor')

@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>Pase Lista</b></h2>
                        </div>
                    </div>
                </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>
            {{-- 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 width="200px">{{$now}}</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">
                                                <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">
                                                <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>
                        </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>


@stop

@section('scripts')
    <script>
        $(document).ready(function () {
            CrearTabla('tabla_asistencia');

        });
        const protocol = window.location.protocol
        const base_path = protocol + "//" + "pr77.test/"
        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}dashboard/${btoa(fecha)}`)

                    if (fecha != '') {
                        window.location.replace(`${base_path}dashboard/${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 PonerComentario(id, comentario) {
            console.log("Comentario para:" + id + " Tiene: " + comentario)
            $("#idEmpleado").val(id);
            $("#comentario").val(comentario);

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


        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 == "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 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)
                            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) {
                                $("#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 quitaran los dobletes 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 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 () {
                                });
                            }
                        })
                    } 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) {
                        $("#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 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 diaFestivo() {
            console.log(arrayEmpleados)
            var array_festivos = []
            for (i = 0; arrayEmpleados.length - 1; i++) {
                if ($(`#checkbox_${arrayEmpleados[i].id}`).prop('checked') === true) {
                    array_festivos.prop = {
                        'id_empleado': arrayEmpleados[i].id
                    }
                } else {

                }
            }
            console.log(array_festivos)
        }

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

        }

    </script>
@stop