{{-- VIEW SAMPLE --}}
@extends('layouts.menu')

@section('tittle')
    ANUNCIOS
@endsection

{{-- <style>
    body {
        zoom: 85%;
    }
</style> --}}

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="page-sub-header">
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><b class="menu-item-head" id="anunciosMenu"><span
                                class="badge badge-pill badge-warning text-white">ANUNCIOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="asignarMenu"><span
                                class="badge badge-pill badge-info text-white">ASIGNAR ANUNCIOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="asignadosMenu"><span
                                class="badge badge-pill badge-success text-white">ANUNCIOS ASIGNADOS</span></b></li>
                </ul>
            </div>

            {{-- CREAR ANUNCIO SECTION --}}
            <div class="crearAnunciosSection">
                <div class="card card-table comman-shadow shadow-lg bg-anuncios">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">ANUNCIOS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                                <a href="#" type="button" class="btn btn-primary" data-toggle="modal" id="btnNuevo"
                                    title="Crear Nuevo" alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="anunciosTable" class="table table-hover table-center table-bordered table-striped"
                                style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Anuncio</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Fecha Inicio</th>
                                        <th class="text-center">Fecha Final</th>
                                        <th class="text-center text-wrap">Confirma Asistencia</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">URL / Enlace Anuncio</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ASIGNAR ANUNCION SECTION --}}
            <div class="asignAnunciosSection">
                <div class="card card-table comman-shadow shadow-lg bg-anuncios d-flex justify-content-between">
                    <div class="card-body">

                        <div class="row d-flex justify-content-around">

                            {{-- LIST ANUNCIOS ASIGNAR --}}
                            <div class="col-lg-8">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="page-title">LISTADO ANUNCIOS DISPONIBLES</h3>
                                    </div>
                                    <div class="col-lg-3 text-end float-end ms-auto download-grp">
                                        <label>Desde</label>
                                        <input type="date" id="periodoInicio"
                                            class="form-control form-control-sm pickedDate" value="{{ $date1 }}">
                                    </div>
                                    <div class="col-lg-3 text-end float-end ms-auto download-grp">
                                        <label>Hasta</label>
                                        <input type="date" id="periodoFinal"
                                            class="form-control form-control-sm pickedDate" value="{{ $date }}">
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="table-responsive">
                                        <table id="listAnuncios"
                                            class="table table-hover table-center table-bordered table-striped"
                                            style="width: 100%">

                                            <tfoot class="table-active" style="display: table-header-group;">
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Anuncio</th>
                                                    <th class="text-center">Descripción</th>
                                                    <th class="text-center">Fecha Inicio</th>
                                                    <th class="text-center">Fecha Final</th>
                                                    <th class="text-center text-wrap">Confirma Asistencia</th>
                                                    <th>
                                                        <div class="form-group">
                                                            <button
                                                                type="submit"class="btn btn-sm btn-warning"id="markAllAnuncios">Todos/Ninguno</button>
                                                        </div>
                                                    </th>
                                                    <th>Marcado</th>
                                                </tr>
                                            </tfoot>

                                            <thead class="thead-light">
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Anuncio</th>
                                                    <th class="text-center">Descripción</th>
                                                    <th class="text-center">Fecha Inicio</th>
                                                    <th class="text-center">Fecha Final</th>
                                                    <th class="text-center text-wrap">Confirma Asistencia</th>
                                                    <th style="width: 10%">Marcar</th>
                                                    <th>Marcado</th>
                                                </tr>
                                            </thead>

                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            {{-- LIST GRUPOS DISPONIBLES --}}
                            <div class="gruposSection">
                                <div class="col-lg-3">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h3 class="page-title">LISTADO GRUPOS DISPONIBLES</h3>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-12 text-start float-end ms-auto download-grp"
                                            style="margin-bottom: 2%">
                                            <label>Asignar a</label>
                                            <select name="anuncioOption" id="anuncioOption"
                                                class="form-select form-select-sm selectControls anunciosOption gruposOption">
                                                <option value="grupos" selected>GRUPOS</option>
                                                <option value="usuarios">EMPLEADOS</option>
                                            </select>
                                        </div>
                                        <br>
                                        <div class="table-responsive">
                                            <table id="listGrupos"
                                                class="table table-hover table-center table-bordered table-striped"
                                                style="width:100%">

                                                <tfoot class="table-active" style="display: table-header-group;">
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th class="text-center text-wrap">Grupo</th>
                                                        <th>
                                                            <div class="form-group">
                                                                <button
                                                                    type="submit"class="btn btn-sm btn-warning"id="markAllGrupos">Todos/Ninguno</button>
                                                            </div>
                                                        </th>
                                                        <th>Marcado</th>
                                                    </tr>
                                                </tfoot>

                                                <thead class="thead-light">
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th class="text-center">Grupo</th>
                                                        <th style="width: 10%">Marcar</th>
                                                        <th>Marcado</th>
                                                    </tr>
                                                </thead>

                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="usuariosSection">
                                <div class="col-lg-3">
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <h3 class="page-title">LISTADO EMPLEADOS DISPONIBLES</h3>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-lg-12 text-end float-end ms-auto download-grp"
                                            style="margin-bottom: 2%">
                                            <label>Asignar a</label>
                                            <select name="anuncioOption" id="anuncioOption"
                                                class="form-select form-select-sm selectControls anunciosOption empleadosOption">
                                                <option value="usuarios" selected>EMPLEADOS</option>
                                                <option value="grupos">GRUPOS</option>
                                            </select>
                                        </div>
                                        <br>
                                        <div class="table-responsive">
                                            <table id="listUsuarios"
                                                class="table table-hover table-center table-bordered table-striped"
                                                style="width: 100%; zoom: 80%;">

                                                <tfoot class="table-active" style="display: table-header-group;">
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th class="text-center text-wrap">Empleado</th>
                                                        <th>
                                                            <div class="form-group">
                                                                <button
                                                                    type="submit"class="btn btn-sm btn-warning"id="markAllGruposUsuarios">Todos/Ninguno</button>
                                                            </div>
                                                        </th>
                                                        <th>Marcado</th>
                                                    </tr>
                                                </tfoot>

                                                <thead class="thead-light">
                                                    <tr>
                                                        <th class="text-center">#</th>
                                                        <th class="text-center text-wrap">Empleado</th>
                                                        <th style="width: 10%">Marcar</th>
                                                        <th>Marcado</th>
                                                    </tr>
                                                </thead>

                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                        <br>
                        <hr>
                        <div class="row">
                            <button type="button" class="btn btn-primary" id="btnAsignar">Guardar</button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ANUNCIOS ASIGNADOS --}}
            <div class="anunciosAsignadosSection">
                <div class="card card-table comman-shadow shadow-lg bg-anuncios">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title" id="asignados-title">ANUNCIOS ASIGNADOS - GRUPOS</h3>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Ver Por</label>
                                <select name="asignadosView" id="asignadosView"
                                    class="form-select form-select-sm selectControls asignadosView">
                                    <option value="grupos" selected>GRUPOS</option>
                                    <option value="usuarios">EMPLEADOS</option>
                                </select>
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Desde</label>
                                <input type="date" id="periodoInicioAsignado"
                                    class="form-control form-control-sm pickedDateAsignado" value="{{ $date1 }}">
                            </div>
                            <div class="col-lg-2 text-end float-end ms-auto download-grp">
                                <label>Hasta</label>
                                <input type="date" id="periodoFinalAsignado"
                                    class="form-control form-control-sm pickedDateAsignado" value="{{ $date }}">
                            </div>
                        </div>
                        <br>

                        <div class="gruposAsignadosSection">
                            <div class="table-responsive">
                                <table id="gruposAsignadosTable"
                                    class="table table-hover table-center table-bordered table-striped"
                                    style="width:100%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">ID Grupo</th>
                                            <th class="text-center">Grupo</th>
                                            <th class="text-center">ID Anuncio</th>
                                            <th class="text-center">Anuncio</th>
                                            <th class="text-center">Descripción</th>
                                            <th class="text-center">Fecha Inicio</th>
                                            <th class="text-center">Fecha Final</th>
                                            <th class="text-center text-wrap">Confirma Asistencia</th>
                                            <th class="text-center text-wrap">Fecha Hora Enviado</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="empleadosAsignadosSection">
                            <div class="table-responsive">
                                <table id="empleadosAsignadosTable"
                                    class="table table-hover table-center table-bordered table-striped"
                                    style="width:100%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">ID Empleado</th>
                                            <th class="text-center">Empleado</th>
                                            <th class="text-center">ID Anuncio</th>
                                            <th class="text-center">Anuncio</th>
                                            <th class="text-center">Descripción</th>
                                            <th class="text-center">Fecha Inicio</th>
                                            <th class="text-center">Fecha Final</th>
                                            <th class="text-center text-wrap">Confirma Asistencia</th>
                                            <th class="text-center text-wrap">Fecha Hora Enviado</th>
                                            <th class="text-center">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>

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

    <input type="hidden" id="hidden_value" class="hidden_value" name="hidden_value">


    {{-- MODAL CREATE AND EDIT ANUNCIO --}}
    <div class="modal fade" id="modalAnuncios" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <input type="hidden" id="txtFx">
                    <input type="hidden" id="varAnuncioID">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Anuncio: </label>
                                    <input type="text" name="anuncio" placeholder="Título del Anuncio..."
                                        class="form-control form-control-sm inputControls" id="txtAnuncio">
                                </div>
                                <div class="text-right d-flex justify-content-end">
                                    <input class="form-check-input" type="checkbox" value="0"
                                        id="asistenciaConfirmCheck">
                                    <label class="form-check-label" for="asistenciaConfirmCheck"
                                        style="margin-right: 2%">
                                        <b> Necesita Confirmar Asistencia </b>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label>Fecha Inicio</label>
                                    <input type="date" id="date1"
                                        class="form-control form-control-sm inputControls">
                                </div>
                                <div class="form-group">
                                    <label>Fecha Final</label>
                                    <input type="date" id="date2"
                                        class="form-control form-control-sm inputControls">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Descripcion: </label>
                                    <textarea name="descripcion" id="descripcion" class="form-control form-control-sm inputControlsTXT" cols="20"
                                        rows="3" style="height: 145px"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label for="">URL / Enlace: </label>
                                    <input type="text" name="url" placeholder="Enlace del Anuncio..."
                                        class="form-control form-control-sm inputControls" id="txtURL">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-secondary" id="btnCancelar"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL REPLICAR ANUNCIO --}}
    <div class="modal fade" id="modalAnunciosReplica" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title modalTitleReplicar" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <input type="hidden" id="txtFx">
                    <input type="hidden" id="varAnuncioID">
                    <input type="hidden" id="varGrupo">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Anuncio: </label>
                                    <input type="text" name="anuncio" placeholder="Título del Anuncio..."
                                        class="form-control form-control-sm inputControls" id="txtAnuncioReplica"
                                        readonly>
                                </div>
                                <div class="text-right d-flex justify-content-end">
                                    <input class="form-check-input" type="checkbox" value="0"
                                        id="asistenciaConfirmCheckReplica">
                                    <label class="form-check-label" for="asistenciaConfirmCheckReplica"
                                        style="margin-right: 2%">
                                        <b> Necesita Confirmar Asistencia </b>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label>Fecha Inicio</label>
                                    <input type="date" id="date1Replica"
                                        class="form-control form-control-sm inputControlsReplica">
                                </div>
                                <div class="form-group">
                                    <label>Fecha Final</label>
                                    <input type="date" id="date2Replica"
                                        class="form-control form-control-sm inputControlsReplica">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Descripcion: </label>
                                    <textarea name="descripcionReplica" id="descripcionReplica" class="form-control form-control-sm inputControlsTXT"
                                        cols="20" rows="3" style="height: 145px"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label for="">URL / Enlace: </label>
                                    <input type="text" name="url" placeholder="Enlace del Anuncio..."
                                        class="form-control form-control-sm inputControls" id="txtURLReplica">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" id="btnGuardarReplicar" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-secondary" id="btnCancelarReplicar"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- MODAL ASISTENCIAS --}}
    <div class="modal fade" id="modalAsistencias" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="table-responsive">
                            <table id="tableAsistencias"
                                class="table table-hover table-center table-bordered table-striped" style="width:100%">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="text-center">Empleado</th>
                                        <th class="text-center">Asistencia</th>
                                        <th class="text-center">Comentario</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btnCerrar" id="btnCerrarAsistencias"
                            data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    div.dt-buttons {
        float: left;
    }

    div.dataTables_filter {
        float: left;
    }
</style>

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#anunciosIT, #anunciosIT').addClass('active');

            var buttons = "fBrtlip";

            $("#asistenciaConfirmCheck").click(function() {
                var x = $("#asistenciaConfirmCheck").is(":checked");

                if (x == true) {
                    $("#asistenciaConfirmCheck").val(1);
                } else if (x == false) {
                    $("#asistenciaConfirmCheck").val(0);
                }
            });
            $("#asistenciaConfirmCheckReplica").click(function() {
                var x = $("#asistenciaConfirmCheckReplica").is(":checked");

                if (x == true) {
                    $("#asistenciaConfirmCheckReplica").val(1);
                } else if (x == false) {
                    $("#asistenciaConfirmCheckReplica").val(0);
                }
            });

            $('.asignAnunciosSection').css('display', 'none');
            $('.anunciosAsignadosSection').css('display', 'none');
            $('.gruposAsignadosSection').css('display', 'contents');
            $('.empleadosAsignadosSection').css('display', 'none');

            $('#anunciosMenu').click(function(e) {
                e.preventDefault();

                $('.crearAnunciosSection').css('display', 'contents');
                $('.asignAnunciosSection').css('display', 'none');
                $('.anunciosAsignadosSection').css('display', 'none');

                $('.gruposSection').css('display', 'none');
                $('.usuariosSection').css('display', 'none');
            });
            $('#asignarMenu').click(function(e) {
                e.preventDefault();

                $('.crearAnunciosSection').css('display', 'none');
                $('.asignAnunciosSection').css('display', 'contents');
                $('.anunciosAsignadosSection').css('display', 'none');

                $('.gruposSection').css('display', 'contents');
                $('.usuariosSection').css('display', 'none');
                //$('.anunciosOption').val('grupos').change();
                $('#hidden_value').val(0);
                $('.gruposOption').val('grupos').change();
            });
            $('#asignadosMenu').click(function(e) {
                e.preventDefault();

                $('.crearAnunciosSection').css('display', 'none');
                $('.asignAnunciosSection').css('display', 'none');
                $('.anunciosAsignadosSection').css('display', 'contents');

                $('.gruposSection').css('display', 'none');
                $('.usuariosSection').css('display', 'none');
            });

            $('#hidden_value').val(0);

            $('.anunciosOption').change(function(e) {
                e.preventDefault();

                var option = $(this).val();

                if (option == "grupos") {
                    $('.gruposSection').css('display', 'contents');
                    $('.usuariosSection').css('display', 'none');
                    $('#hidden_value').val(0);
                    $('.gruposOption').val('grupos').change();
                } else {
                    $('.gruposSection').css('display', 'none');
                    $('.usuariosSection').css('display', 'contents');
                    $('#hidden_value').val(1);
                    $('.empleadosOption').val('usuarios').change();
                }
            });
            $('#asignadosView').change(function(e) {
                e.preventDefault();

                var option = $(this).val();

                if (option == "grupos") {
                    $('.gruposAsignadosSection').css('display', 'contents');
                    $('.empleadosAsignadosSection').css('display', 'none');
                    $('#asignados-title').text('ANUNCIOS ASIGNADOS - GRUPO');
                } else {
                    $('.gruposAsignadosSection').css('display', 'none');
                    $('.empleadosAsignadosSection').css('display', 'contents');
                    $('#asignados-title').text('ANUNCIOS ASIGNADOS - EMPLEADOS');
                }
            });

            var anunciosTable = $("#anunciosTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                dom: 'frtlip',
                ajax: {
                    url: "{{ url('/api/list/anuncios') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_anuncio"
                    },
                    {
                        data: "anuncio"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: "fecha_inicio"
                    },
                    {
                        data: "fecha_final"
                    },
                    {
                        data: "confirma_asistencia",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "0") {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">NO CONFIRMA ASISTENCIA</span>';
                            } else if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">CONFIRMAR ASISTENCIA</span>';
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">SIN DEFINIR</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "estado",
                        render: function(data, type, row) {
                            var badge = "";
                            if (data == "1") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "2") {
                                badge +=
                                    '<span class="badge badge-pill badge-success">ACTIVO</span>';
                            } else if (data == "3") {
                                badge +=
                                    '<span class="badge badge-pill badge-danger">ANULADO</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "url"
                    },
                    {
                        data: "confirma_asistencia",
                        className: "text-center",
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == "0") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnDelete' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button></div></div>";
                            } else if (data == "1") {
                                badge +=
                                    "<div class='text-center'><div class='btn-group'><button class='btn btn-info text-white btn-sm btnViewAsistencias' title='Ver Asistencias' alt='Ver Asistencias'><i class='material-icons'>visibility</i></button><button class='btn btn-primary btn-sm btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-danger btn-sm btnDelete' title='Cambiar Estado' alt='Cambiar Estado'><i class='material-icons'>change_circle</i></button></div></div>";
                            } else {
                                badge +=
                                    '<span class="badge badge-pill badge-dark">SIN DEFINIR</span>';
                            }

                            return badge;
                        },
                    },
                ],
                order: [
                    [0, "desc"]
                ]
            });

            listAnuncios();
            anunciosAsignados();

            $('.pickedDate').change(function(e) {
                e.preventDefault();

                listAnuncios();
            });
            $('.pickedDateAsignado').change(function(e) {
                e.preventDefault();

                anunciosAsignados();
            });

            function listAnuncios() {
                var periodoInicio = $('#periodoInicio').val();
                var periodoFinal = $('#periodoFinal').val();

                $("#listAnuncios").DataTable().clear().destroy();

                var listAnuncios = $("#listAnuncios").DataTable({
                    initComplete: function() {
                        console.log('table created');

                        $('#markedAnuncios').on('change', function() {
                            listAnuncios.column(6).search(this.value).draw();
                        });
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    ajax: {
                        url: "{{ url('/api/date/range/list/anuncios') }}" + "/" + periodoInicio + "/" +
                            periodoFinal,
                    },
                    dom: buttons,
                    buttons: [{
                        text: '<select class="form-select form-select-sm" name="markedAnuncios" id="markedAnuncios"><option value="">Ver Todos</option><option value="0">Sin Marcar</option><option value="1">Marcados</option></select>',
                        className: 'btn btn-info',
                    }],
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_anuncio"
                        },
                        {
                            data: "anuncio",
                            className: "text-wrap"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_inicio"
                        },
                        {
                            data: "fecha_final"
                        },
                        {
                            data: "confirma_asistencia",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">NO CONFIRMA ASISTENCIA</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">CONFIRMAR ASISTENCIA</span>';
                                } else {
                                    badge +=
                                        '<span class="badge badge-pill badge-dark">SIN DEFINIR</span>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: 'programado',
                            width: '15%',
                            className: 'text-center',
                            render: function(data, type, row) {
                                var badge = "";

                                if (data == 1) {
                                    badge +=
                                        '<input class="form-check-input checkOptionAnuncios" id="checkOption" type="checkbox" value="' +
                                        data + '" checked>';
                                } else {
                                    badge +=
                                        '<input class="form-check-input checkOptionAnuncios" id="checkOption" type="checkbox" value="0">';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "value0"
                        },
                    ],
                    columnDefs: [{
                        targets: [7],
                        visible: false,
                        searchable: true,
                    }],
                    order: [
                        [0, "asc"]
                    ]
                });
            }

            function anunciosAsignados() {
                var periodoInicio = $('#periodoInicioAsignado').val();
                var periodoFinal = $('#periodoFinalAsignado').val();

                $("#gruposAsignadosTable").DataTable().clear().destroy();
                $("#empleadosAsignadosTable").DataTable().clear().destroy();

                var gruposAsignadosTable = $("#gruposAsignadosTable").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    dom: 'frtlip',
                    ajax: {
                        url: "{{ url('/api/date/range/asignados/anuncios') }}" + "/" + periodoInicio + "/" +
                            periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "id_grupo"
                        },
                        {
                            data: "nombre_grupo",
                            width: "10%",
                            className: "text-wrap"
                        },
                        {
                            data: "id_anuncio"
                        },
                        {
                            data: "anuncio"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_inicio"
                        },
                        {
                            data: "fecha_final"
                        },
                        {
                            data: "confirma_asistencia",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">NO CONFIRMA ASISTENCIA</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">CONFIRMAR ASISTENCIA</span>';
                                } else {
                                    badge +=
                                        '<span class="badge badge-pill badge-dark">SIN DEFINIR</span>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fecha_hora_enviado"
                        },
                        {
                            defaultContent: "<div class='text-center'><button class='btn btn-info text-white btn-sm btnReplicarAnuncio' data-aos='fade-in' type='button' title='Replicar' alt='Replicar'><i class='material-icons'>content_copy</i></button><button class='btn btn-danger btn-sm btnDeleteAnuncio' data-aos='fade-in' type='button' title='Eliminar' alt='Eliminar'><i class='material-icons'>delete</i></button></div></div>",
                        },
                    ],
                    columnDefs: [{
                        targets: [1, 3],
                        visible: false,
                        searchable: true,
                    }],
                    order: [
                        [1, "asc"]
                    ]
                });

                var empleadosAsignadosTable = $("#empleadosAsignadosTable").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    dom: 'frtlip',
                    ajax: {
                        url: "{{ url('/api/date/range/usuarios/asignados/anuncios') }}" + "/" +
                            periodoInicio + "/" + periodoFinal,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_secuencia"
                        },
                        {
                            data: "PKUsuario"
                        },
                        {
                            data: "Nombre",
                            width: "10%",
                            className: "text-wrap"
                        },
                        {
                            data: "id_anuncio"
                        },
                        {
                            data: "anuncio"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "fecha_inicio"
                        },
                        {
                            data: "fecha_final"
                        },
                        {
                            data: "confirma_asistencia",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">NO CONFIRMA ASISTENCIA</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">CONFIRMAR ASISTENCIA</span>';
                                } else {
                                    badge +=
                                        '<span class="badge badge-pill badge-dark">SIN DEFINIR</span>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "fecha_hora_enviado"
                        },
                        {
                            defaultContent: "<div class='text-center'><button class='btn btn-danger btn-sm btnDeleteAnuncioEmpleado' data-aos='fade-in' type='button' title='Eliminar' alt='Eliminar'><i class='material-icons'>delete</i></button></div></div>",
                        },
                    ],
                    columnDefs: [{
                        targets: [1, 3],
                        visible: false,
                        searchable: true,
                    }],
                    order: [
                        [1, "asc"]
                    ]
                });
            }

            var listGrupos = $("#listGrupos").DataTable({
                initComplete: function() {
                    console.log('table created');

                    $('#markedGrupos').on('change', function() {
                        listGrupos.column(3).search(this.value).draw();
                    });
                },
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                dom: buttons,
                ajax: {
                    url: "{{ url('/api/list/grupos') }}",
                },
                buttons: [{
                    text: '<select class="form-select form-select-sm" name="markedGrupos" id="markedGrupos"><option value="">Ver Todos</option><option value="0">Sin Marcar</option><option value="1">Marcados</option></select>',
                    className: 'btn btn-info',
                }],
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_grupo"
                    },
                    {
                        data: "nombre"
                    },
                    {
                        data: 'programado',
                        width: '15%',
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == 1) {
                                badge +=
                                    '<input class="form-check-input checkOptionGrupos" id="checkOption" type="checkbox" value="' +
                                    data + '" checked>';
                            } else {
                                badge +=
                                    '<input class="form-check-input checkOptionGrupos" id="checkOption" type="checkbox" value="0">';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "value0"
                    },
                ],
                columnDefs: [{
                    targets: [3],
                    visible: false,
                    searchable: true,
                }],
            });

            var listUsuarios = $("#listUsuarios").DataTable({
                initComplete: function() {
                    console.log('table created');

                    $('#markedUsuarios').on('change', function() {
                        listUsuarios.column(3).search(this.value).draw();
                    });
                },
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                dom: buttons,
                ajax: {
                    url: "{{ url('/api/configuraciones/list/module/users') }}" + "/" + 16,
                },
                buttons: [{
                    text: '<select class="form-select form-select-sm" name="markedUsuarios" id="markedUsuarios"><option value="">Ver Todos</option><option value="0">Sin Marcar</option><option value="1">Marcados</option></select>',
                    className: 'btn btn-info',
                }],
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "PKUsuario"
                    },
                    {
                        data: "fullName",
                        className: "text-wrap"
                    },
                    {
                        data: 'programado',
                        width: '15%',
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == 1) {
                                badge +=
                                    '<input class="form-check-input checkOptionUsuarios" id="checkOptionUser" type="checkbox" value="' +
                                    data + '" checked>';
                            } else {
                                badge +=
                                    '<input class="form-check-input checkOptionUsuarios" id="checkOptionUser" type="checkbox" value="0">';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "value0"
                    },
                ],
                columnDefs: [{
                    targets: [3],
                    visible: false,
                    searchable: true,
                }],
                order: [1, "asc"]
            });

            function assignAnuncio(id_anuncio, primary_key) {

                return {
                    id_anuncio: id_anuncio,
                    primary_key: primary_key,
                }

            }

            // ASSIGN ANUNCIOS
            $('#btnAsignar').click(function(e) {
                e.preventDefault();

                var conteoAnuncios = 0,
                    conteo = 0;

                var opcion = $('#hidden_value').val();
                var assignedAnuncios = [];

                if ($('#hidden_value').val() == 0) {
                    text = "Grupos";
                    textS = "Grupo";
                } else {
                    text = "Empleados";
                    textS = "Empleado";
                }

                Swal.fire({
                    title: "Estás seguro de asignar los Anuncios seleccionados a los " + text +
                        " seleccionados?",
                    text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        var urlAPI = "{{ url('/api/assign/anuncios/grupos') }}";

                        if ($('#hidden_value').val() == 0) {
                            // GRUPOS
                            console.log('grupos');
                            const listAnuncios = $('#listAnuncios').DataTable().column(0).data();
                            const listGrupos = $('#listGrupos').DataTable().column(0).data();

                            for (let j = 0; j < listAnuncios.length; j++) {
                                var dataAnuncios = $("#listAnuncios").DataTable().row(j).data();

                                if (dataAnuncios['value0'] == 1) {
                                    conteoAnuncios += 1;

                                    for (var i = 0; i < listGrupos.length; i++) {
                                        var dataGrupos = $("#listGrupos").DataTable().row(i).data();

                                        if (dataGrupos['value0'] == 1) {
                                            conteo += 1;

                                            assignedAnuncios.push(assignAnuncio(dataAnuncios[
                                                'id_anuncio'], dataGrupos['id_grupo']));
                                        }
                                    }
                                }
                            }
                        } else if ($('#hidden_value').val() == 1) {
                            // EMPLEADOS
                            console.log('empleados');
                            const listAnuncios = $('#listAnuncios').DataTable().column(0).data();
                            const listUsuarios = $('#listUsuarios').DataTable().column(0).data();

                            for (let j = 0; j < listAnuncios.length; j++) {
                                var dataAnuncios = $("#listAnuncios").DataTable().row(j).data();

                                if (dataAnuncios['value0'] == 1) {
                                    conteoAnuncios += 1;

                                    for (var i = 0; i < listUsuarios.length; i++) {
                                        var dataEmpleados = $("#listUsuarios").DataTable().row(i)
                                            .data();

                                        if (dataEmpleados['value0'] == 1) {
                                            conteo += 1;

                                            assignedAnuncios.push(assignAnuncio(dataAnuncios[
                                                'id_anuncio'], dataEmpleados[
                                                'PKUsuario']));
                                        }
                                    }
                                }
                            }

                        }

                        console.log(assignedAnuncios + ' ' + conteoAnuncios + ' ' + conteo);

                        if (conteoAnuncios >= 1 && conteo >= 1) {
                            try {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader('X-CSRF-Token',
                                                $(
                                                    'meta[name="csrf-token"]'
                                                ).attr('content'));
                                        }
                                    },
                                    url: urlAPI,
                                    method: "POST",
                                    data: {
                                        assignedAnuncios: assignedAnuncios,
                                        opcion: opcion
                                    },
                                    method: "POST",
                                    async: false,
                                    success: function(data) {
                                        if (data.save == 1) {
                                            if (data.conteo >= 1) {
                                                Swal.fire("", "Anuncios Asignados! - " +
                                                    data.conteo + " " + textS +
                                                    " o varios ya tenian anuncios asignados!",
                                                    "success");
                                            } else {
                                                Swal.fire("", "Anuncios Asignados!",
                                                    "success");
                                            }

                                            listAnuncios();
                                            anunciosAsignados();

                                            /* DESMARK ALL SELECTED ITEMS */
                                            const groupsTableClear = $('#listGrupos')
                                                .DataTable().column(0).data();

                                            for (var i = 0; i < groupsTableClear
                                                .length; i++) {
                                                $("#listGrupos").DataTable().cell(i, 2)
                                                    .data("0");
                                                $("#listGrupos").DataTable().cell(i, 3)
                                                    .data("0");
                                            }

                                            const usuariosTableClear = $(
                                                '#listUsuarios').DataTable().column(
                                                0).data();

                                            for (var i = 0; i < usuariosTableClear
                                                .length; i++) {
                                                $("#listUsuarios").DataTable().cell(i,
                                                    2).data("0");
                                                $("#listUsuarios").DataTable().cell(i,
                                                    3).data("0");
                                            }

                                        }
                                    }
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }
                        } else {
                            Swal.fire("", "Debes seleccionar al menos un Anuncio y un " + textS +
                                "!",
                                "warning");
                        }
                    }
                });

            });

            /* START EVENTS && FUNCTIONS TO MARK ITEMS ON TABLES */
            $(document).on("change", ".checkOptionAnuncios", function() {
                fila = $(this).closest("tr");

                table = $("#listAnuncios").DataTable();

                var one = fila.find('.checkOptionAnuncios').is(":checked");
                if (one == true) {
                    fila.find('.checkOptionAnuncios').val(1);
                    table.cell(fila, 6).data(1);
                    table.cell(fila, 7).data(1);
                } else if (one == false) {
                    fila.find('.checkOptionAnuncios3').val(0);
                    table.cell(fila, 6).data(0);
                    table.cell(fila, 7).data(0);
                }
            });
            $(document).on("change", ".checkOptionGrupos", function() {
                fila = $(this).closest("tr");

                table = $("#listGrupos").DataTable();

                var one = fila.find('.checkOptionGrupos').is(":checked");
                if (one == true) {
                    fila.find('.checkOptionGrupos').val(1);
                    table.cell(fila, 2).data(1);
                    table.cell(fila, 3).data(1);
                } else if (one == false) {
                    fila.find('.checkOptionGrupos').val(0);
                    table.cell(fila, 2).data(0);
                    table.cell(fila, 3).data(0);
                }
            });
            $(document).on("change", ".checkOptionUsuarios", function() {
                fila = $(this).closest("tr");

                table = $("#listUsuarios").DataTable();

                var one = fila.find('.checkOptionUsuarios').is(":checked");
                if (one == true) {
                    fila.find('.checkOptionUsuarios').val(1);
                    table.cell(fila, 2).data(1);
                    table.cell(fila, 3).data(1);
                } else if (one == false) {
                    fila.find('.checkOptionUsuarios').val(0);
                    table.cell(fila, 2).data(0);
                    table.cell(fila, 3).data(0);
                }
            });
            $(document).on("click", "#markAllAnuncios", function(e) {
                e.preventDefault();

                const idTable = $('#listAnuncios').DataTable().column(0).data();

                for (var i = 0; i < idTable.length; i++) {
                    var data = $("#listAnuncios").DataTable().row(i).data();

                    if (data['value0'] == 0) {
                        $("#listAnuncios").DataTable().cell(i, 6).data("1");
                        $("#listAnuncios").DataTable().cell(i, 7).data("1");
                    } else if (data['value0'] == 1) {
                        $("#listAnuncios").DataTable().cell(i, 6).data("0");
                        $("#listAnuncios").DataTable().cell(i, 7).data("0");
                    }

                }
            });
            $(document).on("click", "#markAllGrupos", function(e) {
                e.preventDefault();

                const idTable = $('#listGrupos').DataTable().column(0).data();

                for (var i = 0; i < idTable.length; i++) {
                    var data = $("#listGrupos").DataTable().row(i).data();

                    if (data['value0'] == 0) {
                        $("#listGrupos").DataTable().cell(i, 2).data("1");
                        $("#listGrupos").DataTable().cell(i, 3).data("1");
                    } else if (data['value0'] == 1) {
                        $("#listGrupos").DataTable().cell(i, 2).data("0");
                        $("#listGrupos").DataTable().cell(i, 3).data("0");
                    }

                }
            });
            $(document).on("click", "#markAllGruposUsuarios", function(e) {
                e.preventDefault();

                const idTable = $('#listUsuarios').DataTable().column(0).data();

                for (var i = 0; i < idTable.length; i++) {
                    var data = $("#listUsuarios").DataTable().row(i).data();

                    if (data['value0'] == 0) {
                        $("#listUsuarios").DataTable().cell(i, 2).data("1");
                        $("#listUsuarios").DataTable().cell(i, 3).data("1");
                    } else if (data['value0'] == 1) {
                        $("#listUsuarios").DataTable().cell(i, 2).data("0");
                        $("#listUsuarios").DataTable().cell(i, 3).data("0");
                    }

                }
            });
            /* END   EVENTS && FUNCTIONS TO MARK ITEMS ON TABLES */

            /* OPEN MODAL NUEVO ANUNCIO */
            $('#btnNuevo').click(function(e) {
                e.preventDefault();

                $('#txtFx').val(0);
                $('#varID').val(0);

                $(".modal-header").css("background-color", "#17a2b8");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Crear Nuevo Anuncio");
                $("#modalAnuncios").modal("show");
            });

            /* HIDE MODAL */
            $('#btnCancelar').click(function(e) {
                e.preventDefault();

                $('.inputControls').val('');
                $('.inputControlsTXT').val('');
                $("#modalAnuncios").modal("hide");
            });
            /* HIDE REPLICAR MODAL */
            $('#btnCancelarReplicar').click(function(e) {
                e.preventDefault();

                $('.inputControls').val('');
                $('.inputControlsTXT').val('');
                $("#modalAnunciosReplica").modal("hide");
            });
            /* HIDE MODAL */
            $('#btnCerrarAsistencias').click(function(e) {
                e.preventDefault();

                $("#modalAsistencias").modal("hide");
            });

            /* GUARDAR OR EDITAR ANUNCIO */
            $('#btnGuardar').click(function(e) {
                e.preventDefault();

                var txtFx = $('#txtFx').val();

                var varID = $('#varAnuncioID').val();
                var txtAnuncio = $('#txtAnuncio').val();
                var txtURL = $('#txtURL').val();
                var asistenciaConfirmCheck = $('#asistenciaConfirmCheck').val();
                var descripcion = $('#descripcion').val();
                var date1 = $('#date1').val();
                var date2 = $('#date2').val();

                if (!$('#txtAnuncio').val() || !$('#descripcion').val() || !$('#date1').val() || !$(
                        '#date2').val()) {
                    Swal.fire("", "Debes llener todos los campos!", "warning");
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token',
                                        $(
                                            'meta[name="csrf-token"]'
                                        ).attr('content'));
                                }
                            },
                            url: "{{ url('/api/save/edit/anuncio') }}",
                            data: {
                                txtFx: txtFx,
                                varID: varID,
                                txtAnuncio: txtAnuncio,
                                txtURL: txtURL,
                                asistenciaConfirmCheck: asistenciaConfirmCheck,
                                date1: date1,
                                date2: date2,
                                descripcion: descripcion
                            },
                            method: "POST",
                            success: function(data) {
                                if (data.save == 1) {
                                    if (txtFx == 0) {
                                        Swal.fire("", "Anuncio Creado!", "success");
                                    } else {
                                        Swal.fire("", "Anuncio Editado!", "success");
                                    }

                                    console.log(data.last_id);

                                    $("#modalAnuncios").modal("hide");
                                    $('.inputControls').val('');
                                    $('.inputControlsTXT').val('');

                                    anunciosTable.ajax.reload(null, false);
                                    listAnuncios();
                                }
                            }
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }
                }

            });

            /* OPEN MODAL FOR REPLICAR */
            $(document).on("click", ".btnReplicarAnuncio", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                id_secuencia = $.trim(fila.find("td:eq(0)").text());
                groupName = $.trim(fila.find("td:eq(1)").text());
                anuncio = $.trim(fila.find("td:eq(2)").text());
                descripcion = $.trim(fila.find("td:eq(3)").text());
                date1 = $.trim(fila.find("td:eq(4)").text());
                date2 = $.trim(fila.find("td:eq(5)").text());
                confirmCheck = $.trim(fila.find("td:eq(6)").text());

                var data = $("#gruposAsignadosTable").DataTable().row(fila).data();
                var groupID = data['id_grupo'];

                $('#varGrupo').val(groupID);

                if (confirmCheck == "NO CONFIRMA ASISTENCIA") {
                    x = 0;
                    $("#asistenciaConfirmCheckReplica").val(0);
                    $("#asistenciaConfirmCheckReplica").prop("checked", false);
                } else if (confirmCheck == "CONFIRMAR ASISTENCIA") {
                    x = 1;
                    $("#asistenciaConfirmCheckReplica").val(1);
                    $("#asistenciaConfirmCheckReplica").prop("checked", true);
                }

                $('#txtAnuncioReplica').val(anuncio);
                $('#descripcionReplica').val(descripcion);

                $(".modal-header").css("background-color", "#f44336");
                $(".modalTitleReplicar").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modalTitleReplicar").text("Replicar Anuncio: " + anuncio);
                $("#modalAnunciosReplica").modal("show");
            });

            $('#btnGuardarReplicar').click(function(e) {
                e.preventDefault();

                var varGrupo = $('#varGrupo').val();
                var txtAnuncio = $('#txtAnuncioReplica').val();
                var descripcion = $('#descripcionReplica').val();
                var date1 = $('#date1Replica').val();
                var date2 = $('#date2Replica').val();
                var txtURL = $('#txtURLReplica').val();
                var asistenciaConfirmCheck = $('#asistenciaConfirmCheckReplica').val();

                if (!$('#txtAnuncioReplica').val() || !$('#descripcionReplica').val() || !$('#date1Replica')
                    .val() || !$('#date2Replica').val()) {
                    Swal.fire("", "Debes llener todos los campos!", "warning");
                } else {

                    Swal.fire({
                        title: "Estás seguro de Replicar este Anuncio: " + txtAnuncio + "?",
                        text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            try {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader('X-CSRF-Token',
                                                $(
                                                    'meta[name="csrf-token"]'
                                                ).attr('content'));
                                        }
                                    },
                                    async: false,
                                    url: "{{ url('/api/save/edit/anuncio') }}",
                                    data: {
                                        txtFx: 0,
                                        varID: 0,
                                        varGrupo: varGrupo,
                                        txtAnuncio: txtAnuncio,
                                        txtURL: txtURL,
                                        descripcion: descripcion,
                                        date1: date1,
                                        date2: date2,
                                        asistenciaConfirmCheck: asistenciaConfirmCheck,
                                    },
                                    method: "POST",
                                    success: function(data) {
                                        if (data.save == 1) {

                                            try {
                                                $.ajax({
                                                    beforeSend: function(xhr,
                                                        type) {
                                                        if (!type
                                                            .crossDomain) {
                                                            xhr.setRequestHeader(
                                                                'X-CSRF-Token',
                                                                $(
                                                                    'meta[name="csrf-token"]'
                                                                )
                                                                .attr(
                                                                    'content'
                                                                ));
                                                        }
                                                    },
                                                    async: false,
                                                    url: "{{ url('/api/replicar/anuncios/grupos') }}",
                                                    data: {
                                                        varGrupo: varGrupo,
                                                        varAnuncio: data
                                                            .last_id,
                                                        opcion: 0
                                                    },
                                                    method: "POST",
                                                    success: function(data) {
                                                        if (data.save ==
                                                            1) {
                                                            Swal.fire("",
                                                                "Anuncio Replicado!",
                                                                "success"
                                                            );

                                                            $("#modalAnunciosReplica")
                                                                .modal(
                                                                    "hide");
                                                            $('.inputControls')
                                                                .val('');
                                                            $('.inputControlsTXT')
                                                                .val('');

                                                            anunciosTable
                                                                .ajax
                                                                .reload(
                                                                    null,
                                                                    false);
                                                            listAnuncios();
                                                        }
                                                    }
                                                });
                                            } catch (error) {
                                                Swal.fire("", "Error: " + error,
                                                    "error");
                                            }

                                        }
                                    }
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }
                        }
                    });


                }

            });

            /* OPEN MODAL FOR EDIT */
            $(document).on("click", ".btnEdit", function(e) {
                e.preventDefault();

                $('#txtFx').val(1);

                fila = $(this).closest("tr");

                id_anuncio = $.trim(fila.find("td:eq(0)").text());
                anuncio = $.trim(fila.find("td:eq(1)").text());
                descripcion = $.trim(fila.find("td:eq(2)").text());
                date1 = $.trim(fila.find("td:eq(3)").text());
                date2 = $.trim(fila.find("td:eq(4)").text());
                confirmCheck = $.trim(fila.find("td:eq(5)").text());

                if (confirmCheck == "NO CONFIRMA ASISTENCIA") {
                    x = 0;
                    $("#asistenciaConfirmCheck").val(0);
                    $("#asistenciaConfirmCheck").prop("checked", false);
                } else if (confirmCheck == "CONFIRMAR ASISTENCIA") {
                    x = 1;
                    $("#asistenciaConfirmCheck").val(1);
                    $("#asistenciaConfirmCheck").prop("checked", true);
                }

                $('#varAnuncioID').val(id_anuncio);
                $('#txtAnuncio').val(anuncio);
                $('#descripcion').val(descripcion);
                $('#date1').val(date1);
                $('#date2').val(date2);

                $(".modal-header").css("background-color", "#f44336");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Editar Anuncio: " + anuncio);
                $("#modalAnuncios").modal("show");
            });

            /* CHANGE ANUNCIO STATUS */
            $(document).on("click", ".btnDelete", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                id_anuncio = $.trim(fila.find("td:eq(0)").text());
                anuncio = $.trim(fila.find("td:eq(1)").text());


                Swal.fire({
                    title: "Estás Seguro de Cambiar el Estado de este Anuncio: " + anuncio + "?",
                    text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/enable/disable/anuncio') }}",
                                data: {
                                    varID: id_anuncio
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 3) {
                                        Swal.fire("", "Anuncio Anulado!", "success");
                                    } else {
                                        Swal.fire("", "Anuncio Habilitado!", "success");
                                    }
                                    anunciosTable.ajax.reload(null, false);
                                    listAnuncios();
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });

            /* VIEW ASISTENCIAS */
            $(document).on("click", ".btnViewAsistencias", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                id_anuncio = $.trim(fila.find("td:eq(0)").text());
                anuncio = $.trim(fila.find("td:eq(1)").text());


                $("#tableAsistencias").DataTable().clear().destroy();

                var tableAsistencias = $("#tableAsistencias").DataTable({
                    initComplete: function() {
                        console.log('table created');
                    },
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    ajax: {
                        url: "{{ url('/api/list/asistencias/anuncio') }}" + "/" + id_anuncio,
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "nombre",
                            className: "text-wrap"
                        },
                        {
                            data: "asistencia",
                            className: "text-center",
                            render: function(data, type, row) {
                                var badge = "";
                                if (data == "0") {
                                    badge +=
                                        '<span class="badge badge-pill badge-warning">PENDIENTE</span>';
                                } else if (data == "1") {
                                    badge +=
                                        '<span class="badge badge-pill badge-success">ASISTENCIA CONFIRMADA</span>';
                                } else {
                                    badge +=
                                        '<span class="badge badge-pill badge-danger">ASISTENCIA RECHAZADA</span>';
                                }

                                return badge;
                            },
                        },
                        {
                            data: "comentario",
                            className: "text-wrap"
                        }
                    ],
                    order: [
                        [1, "asc"]
                    ]
                });

                $(".modal-header").css("background-color", "#b81742");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Listado Asistencias del Anuncio: " + anuncio);
                $("#modalAsistencias").modal("show");
            });

            /* DELETE ANUNCIO ASSIGNED */
            $(document).on("click", ".btnDeleteAnuncio", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                id_secuencia = $.trim(fila.find("td:eq(0)").text());
                grupo = $.trim(fila.find("td:eq(1)").text());
                anuncio = $.trim(fila.find("td:eq(2)").text());

                var data = $("#gruposAsignadosTable").DataTable().row(fila).data();
                var id_grupo = data['id_grupo'];
                var id_anuncio = data['id_anuncio'];

                Swal.fire({
                    title: "Estás Seguro de Eliminar el Anuncio: " + anuncio +
                        " asignado al grupo " + grupo + "?",
                    text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/delete/anuncio/grupo') }}",
                                data: {
                                    id_secuencia: id_secuencia,
                                    grupo: grupo,
                                    anuncio: anuncio,
                                    id_grupo: id_grupo,
                                    id_anuncio: id_anuncio
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("", "Anuncio Eliminado!", "success");
                                        anunciosAsignados();
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });

            /* DELETE ANUNCIO EMPLEADO ASSIGNED */
            $(document).on("click", ".btnDeleteAnuncioEmpleado", function(e) {
                e.preventDefault();

                fila = $(this).closest("tr");

                id_secuencia = $.trim(fila.find("td:eq(0)").text());
                empleado = $.trim(fila.find("td:eq(1)").text());
                anuncio = $.trim(fila.find("td:eq(2)").text());

                var data = $("#empleadosAsignadosTable").DataTable().row(fila).data();
                var PKUsuario = data['PKUsuario'];
                var id_anuncio = data['id_anuncio'];

                Swal.fire({
                    title: "Estás Seguro de Eliminar el Anuncio: " + anuncio +
                        " asignado al empleado " + empleado + "?",
                    text: "Al confirmar debes esperar el mensaje de finalización para poder continuar!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        try {
                            $.ajax({
                                beforeSend: function(xhr, type) {
                                    if (!type.crossDomain) {
                                        xhr.setRequestHeader('X-CSRF-Token',
                                            $(
                                                'meta[name="csrf-token"]'
                                            ).attr('content'));
                                    }
                                },
                                url: "{{ url('/api/delete/anuncio/empleado') }}",
                                data: {
                                    id_secuencia: id_secuencia,
                                    empleado: empleado,
                                    anuncio: anuncio,
                                    PKUsuario: PKUsuario,
                                    id_anuncio: id_anuncio
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("", "Anuncio Eliminado!", "success");
                                        anunciosAsignados();
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });


        });
    </script>
@endsection