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

@section('tittle')
    GESTIÓN DOCUMENTOS
@endsection

@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="manualesMenu"><span
                                class="badge badge-pill badge-warning text-white">DOCUMENTOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="asignarMenu"><span
                                class="badge badge-pill badge-info text-white">ASIGNAR DOCUMENTOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="asignadosMenu"><span
                                class="badge badge-pill badge-success text-white">DOCUMENTOS ASIGNADOS</span></b></li>
                </ul>
            </div>

            {{-- ASIGNAR MANUALES --}}
            <div class="crearManualSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">GESTIÓN DOCUMENTOS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                                <a href="#" type="button" class="btn btn-primary" id="btnNuevo" title="Crear Nuevo"
                                    alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="manualesTable" 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">Documento</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">URL / Enlace Documento</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Grupo</th>
                                        <th class="text-center">Estado</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- ASIGNAR MANUALES SECTION --}}
            <div class="asignManualesSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">

                        <div class="row">

                            {{-- LIST MANUALES ASIGNAR --}}
                            <div class="col-lg-8">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h3 class="page-title">LISTADO DOCUMENTOS DISPONIBLES</h3>
                                    </div>
                                </div>
                                <br>
                                <div class="row">
                                    <div class="table-responsive">
                                        <table id="listManuales"
                                            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">Documento</th>
                                                    <th class="text-center">Descripción</th>
                                                    <th class="text-center">Tipo</th>
                                                    <th>
                                                        <div class="form-group">
                                                            <button type="submit"class="btn btn-sm btn-warning"
                                                                id="markAllManuales">Todos/Ninguno</button>
                                                        </div>
                                                    </th>
                                                    <th>Marcado</th>
                                                </tr>
                                            </tfoot>

                                            <thead class="thead-light">
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Documento</th>
                                                    <th class="text-center">Descripción</th>
                                                    <th class="text-center">Tipo</th>
                                                    <th style="width: 10%">Marcar</th>
                                                    <th>Marcado</th>
                                                </tr>
                                            </thead>

                                            <tbody>

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

                            {{-- LIST GRUPOS DISPONIBLES --}}
                            <div class="col-lg-4">
                                <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="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">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>

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

            {{-- MANUALES ASIGNADOS --}}
            <div class="manualesAsignadosSection">
                <div class="card card-table comman-shadow shadow-lg bg-manuales">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">DOCUMENTOS ASIGNADOS</h3>
                            </div>
                            <div class="col-auto text-end float-end ms-auto download-grp">
                                <label for="" class="form-label">Filtrar Grupo:</label>
                                <select class="form-select form-select-sm" name="groupFilterAsignados"
                                    id="groupFilterAsignados">
                                    <option selected value="">TODOS</option>
                                    @foreach ($gruposData as $grupos)
                                        <option value="{{ $grupos->nombre }}">{{ $grupos->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="asignadosTable" 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">Grupo</th>
                                        <th class="text-center">Documento</th>
                                        <th class="text-center">Descripción</th>
                                        <th class="text-center">Tipo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

        </div>
    </div>



    {{-- MODAL CREATE AND EDIT MANUAL --}}
    <div class="modal fade" id="modalManuales" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static">
        <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="varManualID">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Documento: </label>
                                    <input type="text" name="manual" placeholder="Nombre del Documento..."
                                        class="form-control form-control-sm inputControls" id="txtManual">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Tipo Documento: </label>
                                    <select type="text" class="form-select form-select-sm selectControls"
                                        name="tipoDocumento" id="tipoDocumento">
                                        <option value="0">Seleccione una opción</option>
                                        @foreach ($tiposData as $tipo)
                                            <option value="{{ $tipo->pk_tipo }}">{{ $tipo->descripcion_tipo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">Área: </label>
                                    <select type="text" class="form-select form-select-sm selectControls"
                                        name="areaDocumento" id="areaDocumento">
                                        <option value="#">Seleccione una opción</option>
                                        @foreach ($gruposDataNew as $grupo)
                                            <option value="{{ $grupo->id_grupo }}">{{ $grupo->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row">
                                <div class="form-group">
                                    <label for="">URL / Enlace Documento: </label>
                                    <input type="text" name="url" placeholder="Enlace del Documento..."
                                        class="form-control form-control-sm inputControls" id="txtURL">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="">Descripcion: </label>
                                <textarea name="descripcion" id="descripcion" class="form-control form-control-sm inputControlsTXT" cols="20"
                                    rows="3"></textarea>
                            </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>

    @foreach ($correosData as $correo)
        <input type="text" id="fxValidate"
            class="form-control form-control-sm validateCorreo txtCorreo{{ $correo->count }}"
            value="{{ $correo->correo }}" hidden>
    @endforeach
@endsection

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

            var buttons = "Brtlip";

            $('.asignManualesSection').css('display', 'none');
            $('.manualesAsignadosSection').css('display', 'none');

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

                $('.crearManualSection').css('display', 'contents');
                $('.asignManualesSection').css('display', 'none');
                $('.manualesAsignadosSection').css('display', 'none');
            });
            $('#asignarMenu').click(function(e) {
                e.preventDefault();

                $('.crearManualSection').css('display', 'none');
                $('.asignManualesSection').css('display', 'contents');
                $('.manualesAsignadosSection').css('display', 'none');
            });
            $('#asignadosMenu').click(function(e) {
                e.preventDefault();

                $('.crearManualSection').css('display', 'none');
                $('.asignManualesSection').css('display', 'none');
                $('.manualesAsignadosSection').css('display', 'contents');
            });

            var manualesTable = $("#manualesTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/created/manuales') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_manual",
                        width: '8%',
                    },
                    {
                        data: "nombre_manual",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        width: "50%",
                        className: "text-wrap"
                    },
                    {
                        data: "url",
                        //width: "20%",
                        className: "text-wrap"
                    },
                    {
                        data: 'tipo_documento',
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == 21) {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">MANUAL</span>';
                            } else if (data == 22) {
                                badge +=
                                    '<span class="badge badge-pill badge-info">PROCESO</span>';
                            } else if (data == 23) {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">POLÍTICA</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "grupoNombre",
                        className: "text-wrap text-center"
                    },
                    {
                        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",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info btn-sm viewManual" title="Ver Manual"><i class="material-icons text-white">visibility</i></a><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>';

                            return badge;
                        },
                    },
                    {
                        data: "tipo_documento"
                    }
                ],
                columnDefs: [{
                        targets: [8],
                        visible: false,
                        searchable: true,
                    },
                    {
                        width: "20%",
                        targets: 3
                    },
                ],
            });

            var asignadosTable = $("#asignadosTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/get/all/manuales') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_secuencia",
                        width: '8%',
                    },
                    {
                        data: "nombre_grupo"
                    },
                    {
                        data: "nombre_manual"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: 'tipo_documento',
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == 21) {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">MANUAL</span>';
                            } else if (data == 22) {
                                badge +=
                                    '<span class="badge badge-pill badge-info">PROCESO</span>';
                            } else if (data == 23) {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">POLÍTICA</span>';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "url",
                        render: function(data, type, row) {
                            var badge = "";

                            badge += '<div class="text-center"><div class="btn-group"><a href="' +
                                data +
                                '" target="_blank"><button class="btn btn-info text-white btn-sm viewManual" title="Ver Manual"><i class="material-icons">visibility</i></button></a><button class="btn btn-danger btn-sm btnDeleteManual" data-aos="fade-in" type="button" title="Eliminar" alt="Eliminar"><i class="material-icons">delete</i></button></div></div>';

                            return badge;
                        },
                    }
                ],
            });

            $('#groupFilterAsignados').change(function(e) {
                e.preventDefault();

                asignadosTable.column(1).search($.trim(this.value), true, false).draw();
            });

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

                    $('#markedManuales').on('change', function() {
                        listManuales.column(5).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/get/created/manuales') }}",
                },
                dom: buttons,
                buttons: [{
                    text: '<select class="form-select form-select-sm" name="markedManuales" id="markedManuales"><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_manual",
                        width: '8%',
                    },
                    {
                        data: "nombre_manual",
                        className: "text-wrap"
                    },
                    {
                        data: "descripcion",
                        className: "text-wrap"
                    },
                    {
                        data: 'tipo_documento',
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

                            if (data == 21) {
                                badge +=
                                    '<span class="badge badge-pill badge-warning">MANUAL</span>';
                            } else if (data == 22) {
                                badge +=
                                    '<span class="badge badge-pill badge-info">PROCESO</span>';
                            } else if (data == 23) {
                                badge +=
                                    '<span class="badge badge-pill badge-primary">POLÍTICA</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 checkOptionManuales" id="checkOption" type="checkbox" value="' +
                                    data + '" checked>';
                            } else {
                                badge +=
                                    '<input class="form-check-input checkOptionManuales" id="checkOption" type="checkbox" value="0">';
                            }

                            return badge;
                        },
                    },
                    {
                        data: "value0"
                    },
                ],
                columnDefs: [{
                    targets: [5],
                    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,
                }],
            });

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

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

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

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

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

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

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

                var varID = $('#varManualID').val();
                var txtManual = $.trim($('#txtManual').val());
                var descripcion = $.trim($('#descripcion').val());
                var tipoDocumento = $('#tipoDocumento').val();
                var areaDocumento = $('#areaDocumento').val();
                var tipoDocumentoText = $("#tipoDocumento option:selected").text();
                var url = $.trim($('#txtURL').val());

                var count = 0;
                var count_validate = 0;

                $('.validateCorreo').each(function() {
                    count += 1;

                    var text = $.trim($('.txtCorreo' + count).val());

                    if (url.indexOf(text) >= 0) {
                        count_validate += 1;
                    }
                });

                if (!$('#txtManual').val() || !$('#descripcion').val() || !$('#txtURL').val() ||
                    tipoDocumento == 0 || count_validate == 0 || areaDocumento == "#") {
                    Swal.fire("", "Debes llener todos los campos o debes ingresar una URL Válida!",
                        "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/manual') }}",
                            data: {
                                txtFx: txtFx,
                                varID: varID,
                                txtManual: txtManual,
                                descripcion: descripcion,
                                tipoDocumento: tipoDocumento,
                                areaDocumento: areaDocumento,
                                tipoDocumentoText: tipoDocumentoText,
                                url: url
                            },
                            method: "POST",
                            success: function(data) {
                                if (data.save == 1) {
                                    if (txtFx == 0) {
                                        Swal.fire("", tipoDocumentoText + " Registrado!",
                                            "success");
                                    } else {
                                        Swal.fire("", tipoDocumentoText + " Editado!",
                                            "success");
                                    }

                                    $("#modalManuales").modal("hide");
                                    $('.inputControls').val('');
                                    $('.inputControlsTXT').val('')
                                    manualesTable.ajax.reload(null, false);
                                    listManuales.ajax.reload(null, false);
                                }
                            }
                        });
                    } 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_manual = $.trim(fila.find("td:eq(0)").text());
                manual = $.trim(fila.find("td:eq(1)").text());
                descripcion = $.trim(fila.find("td:eq(2)").text());
                url = $.trim(fila.find("td:eq(3)").text());
                areaDocumento = $.trim(fila.find("td:eq(5)").text());

                var data = $("#manualesTable").DataTable().row(fila).data();
                var tipo_documento = data['tipo_documento'];

                $('#tipoDocumento').val(tipo_documento).change();

                $('#varManualID').val(id_manual);
                $('#txtManual').val(manual);
                $('#descripcion').val(descripcion);
                $('#txtURL').val(url);

                $('#areaDocumento option').each(function() {
                    if ($.trim($(this).text()) == $.trim(areaDocumento)) {
                        $(this).prop('selected', true);
                    }
                });

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

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

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

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


                Swal.fire({
                    title: "Estás Seguro de Cambiar el Estado de este Manual: " + manual + "?",
                    text: "",
                    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/manual') }}",
                                data: {
                                    varID: id_manual
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 3) {
                                        Swal.fire("", "Manual Anulado!", "success");
                                    } else {
                                        Swal.fire("", "Manual Habilitado!", "success");
                                    }
                                    manualesTable.ajax.reload(null, false);
                                    listManuales.ajax.reload(null, false);
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });

            /* DELETE ANUNCIO ASSIGNED */
            $(document).on("click", ".btnDeleteManual", 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());
                manual = $.trim(fila.find("td:eq(2)").text());


                Swal.fire({
                    title: "Estás Seguro de Eliminar el Documento: " + manual +
                        " asignado al grupo " + grupo + "?",
                    text: "",
                    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/manual/grupo') }}",
                                data: {
                                    id_secuencia: id_secuencia,
                                    grupo: grupo,
                                    manual: manual
                                },
                                method: "POST",
                                success: function(data) {
                                    if (data.save == 1) {
                                        Swal.fire("", "Documento Eliminado!",
                                            "success");
                                        asignadosTable.ajax.reload(null, false);
                                    }
                                }
                            });
                        } catch (error) {
                            Swal.fire("", "Error: " + error, "error");
                        }

                    }
                });
            });


            /* ASSIGN MANUALES SECTION */
            function assignManual(id_manual, id_grupo) {

                return {
                    id_manual: id_manual,
                    id_grupo: id_grupo,
                }

            }

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

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

                var one = fila.find('.checkOptionManuales').is(":checked");
                if (one == true) {
                    fila.find('.checkOptionManuales').val(1);
                    table.cell(fila, 4).data(1);
                    table.cell(fila, 5).data(1);
                } else if (one == false) {
                    fila.find('.checkOptionManuales').val(0);
                    table.cell(fila, 4).data(0);
                    table.cell(fila, 5).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("click", "#markAllManuales", function(e) {
                e.preventDefault();

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

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

                    if (data['value0'] == 0) {
                        $("#listManuales").DataTable().cell(i, 4).data("1");
                        $("#listManuales").DataTable().cell(i, 5).data("1");
                    } else if (data['value0'] == 1) {
                        $("#listManuales").DataTable().cell(i, 4).data("0");
                        $("#listManuales").DataTable().cell(i, 5).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");
                    }

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

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

                var conteoManuales = 0,
                    conteoGrupos = 0;

                var assignedManuales = [];

                Swal.fire({
                    title: "Estás seguro de asignar los Manuales seleccionados a los Grupos seleccionados?",
                    text: "",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Confirmar!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const listManuales = $('#listManuales').DataTable().column(0).data();
                        const listGrupos = $('#listGrupos').DataTable().column(0).data();

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

                            if (dataManuales['value0'] == 1) {
                                conteoManuales += 1;

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

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

                                        assignedManuales.push(assignManual(dataManuales[
                                            'id_manual'], dataGrupos[
                                            'id_grupo']));
                                    }
                                }
                            }
                        }

                        console.log(assignedManuales);

                        if (conteoManuales >= 1 && conteoGrupos >= 1) {
                            try {
                                $.ajax({
                                    beforeSend: function(xhr, type) {
                                        if (!type.crossDomain) {
                                            xhr.setRequestHeader('X-CSRF-Token',
                                                $(
                                                    'meta[name="csrf-token"]'
                                                ).attr('content'));
                                        }
                                    },
                                    url: "{{ url('/api/assign/manuales/grupos') }}",
                                    method: "POST",
                                    data: {
                                        assignedManuales: assignedManuales
                                    },
                                    method: "POST",
                                    async: false,
                                    success: function(data) {
                                        if (data.save == 1) {
                                            if (data.conteo >= 1) {
                                                Swal.fire("", "Manual Asignados! - " +
                                                    data.conteo +
                                                    " grupo o varios ya tenian manuales asignados!",
                                                    "success");
                                            } else {
                                                Swal.fire("", "Manual Asignados!",
                                                    "success");
                                            }

                                            asignadosTable.ajax.reload(null, false);

                                            const manualesTableClear = $(
                                                '#listManuales').DataTable().column(
                                                0).data();

                                            for (var i = 0; i < manualesTableClear
                                                .length; i++) {
                                                $("#listManuales").DataTable().cell(i,
                                                    4).data("0");
                                                $("#listManuales").DataTable().cell(i,
                                                    5).data("0");
                                            }

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

                                            for (var i = 0; i < gruposTableClear
                                                .length; i++) {
                                                $("#listGrupos").DataTable().cell(i, 2)
                                                    .data("0");
                                                $("#listGrupos").DataTable().cell(i, 3)
                                                    .data("0");
                                            }
                                        }
                                    }
                                });
                            } catch (error) {
                                Swal.fire("", "Error: " + error, "error");
                            }
                        } else {
                            Swal.fire("", "Debes seleccionar al menos un Manual y un Grupo!",
                                "warning");
                        }
                    }
                });

            });



            /* END DOCUMENTOR READY */
        });
    </script>
@endsection