@extends('layouts.menu')

@section('tittle')
    USUARIOS AGREGADOS EN {{ $groupName }}
@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="aggUsersMenu"><span
                                class="badge badge-pill badge-warning text-black">AGREGADOS</span></b></li>
                    <li class="breadcrumb-item"><b class="menu-item-head" id="allUsersMenu"><span
                                class="badge badge-pill badge-info text-white">TODOS</span></b></li>
                </ul>
            </div>

            {{-- USERS ADDED TO GROUP --}}
            <div class="usersAddedView">
                <div class="card card-table comman-shadow shadow-lg bg-solicitudes">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">USUARIOS AGREGADOS EN {{ $groupName }}</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="usersAddedTable" 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">Nombre</th>

                                        <th class="text-wrap text-center">Nvl 1 (Los Marcados Aprueban a los No Marcados)
                                        </th>
                                        <th class="text-wrap text-center">Nvl 2 (Los Marcados Necesitan Aprobación del Nvl
                                            3)</th>
                                        <th class="text-wrap text-center">Nvl 3 (Los Marcados Aprueban los Marcados de Nvl
                                            2)</th>
                                        <th class="text-wrap text-center">Nvl 4 (Los Marcados Pueden Resolver Tickets
                                            Comunes)</th>

                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

            {{-- ALL USERS TO ADD --}}
            <div class="allUsersView">
                <div class="card card-table comman-shadow shadow-lg bg-consultas">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="page-title">USUARIOS PARA AGREGAR EN {{ $groupName }}</h3>
                            </div>
                        </div>
                        <br>
                        <div class="table-responsive">
                            <table id="allUsersTable" 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">Nombre</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

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

        </div>
    </div>
@endsection

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

            $('.usersAddedView').css("display", "contents");
            $('.allUsersView').css("display", "none");

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

                $('.allUsersView').css("display", "contents");
                $('.usersAddedView').css("display", "none ");

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

                $('.allUsersView').css("display", "none");
                $('.usersAddedView').css("display", "contents");
            });

            usersAddedTable = $("#usersAddedTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/admin/configuraciones/gestionGrupos/usuariosGrupo/') }}" + "/" +
                        "{{ $id }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "PKUsuario"
                    },
                    {
                        data: "Nombre",
                        width: "40%",
                        className: "text-wrap"
                    },
                    {
                        data: "aprueba_nvl1",
                        className: 'text-center',
                        render: function(data, type, row) {
                            var badge = "";

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

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

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

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

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

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

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

                            return badge;
                        },
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-danger btn-sm btnDelete' data-aos='fade-in' type='button' title='Quitar Usuario' alt='Quitar Usuario'><i class='material-icons'>delete</i></button></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ],
                /* columnDefs: [{
                    targets: invisibleColumns,
                    visible: false,
                }, ], */
            });

            allUsersTable = $("#allUsersTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/admin/configuraciones/gestionGrupos/usuariosGrupo/listAllUsers') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "PKUsuario"
                    },
                    {
                        data: "FullName"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btn-sm btnAdd' data-aos='fade-in' type='button' title='Añadir Usuario' alt='Añadir Usuario'><i class='material-icons'>add</i></button></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ],
                /* columnDefs: [{
                    targets: invisibleColumns,
                    visible: false,
                }, ], */
            });

            /* FUNCTION TO SMALL SWAL MESSAGE */
            var toastMixinShort = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: false,
                position: 'top-right',
                showConfirmButton: false,
                timer: 200,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixin = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: false,
                position: 'top-right',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            var toastMixinLong = Swal.mixin({
                toast: true,
                icon: 'success',
                title: 'General Title',
                animation: false,
                position: 'top-right',
                showConfirmButton: false,
                timer: 5000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            });

            /* FUNCTION ADD USER TO GROUP */
            $(document).on("click", ".btnAdd", function() {

                fila = $(this).closest("tr");
                secuencia_id = null;
                group_id = "{{ $id }}";
                usuario_id = $.trim(fila.find("td:eq(0)").text());
                fullName_usuario = $.trim(fila.find("td:eq(1)").text());

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/admin/configuraciones/gestionGrupos/usuariosGrupo/insertUserGroup') }}",
                        type: "POST",
                        datatype: "json",
                        data: {
                            secuencia_id: secuencia_id,
                            group_id: group_id,
                            usuario_id: usuario_id,
                            fullName_usuario: fullName_usuario,
                            lvlONE: 0,
                            lvlTWO: 0,
                            lvlTHREE: 0
                        },
                        success: function(data) {
                            if (data.data == 0) {
                                usersAddedTable.ajax.reload(null, false);
                                allUsersTable.ajax.reload(null, false);
                                toastMixin.fire({
                                    animation: true,
                                    title: "Usuario Agregado!"
                                });
                            } else {
                                Swal.fire("", "Ya añadiste este usuario en este grupo!",
                                    "warning");
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            /* FUNCTION CHANGE USER PERMISSIONS */
            $(document).on("change", ".checkOptionValue", function() {

                fila = $(this).closest("tr");
                user_id = fila.find("td:eq(0)").text();
                group_id = $.trim("{{ $id }}");

                var one = fila.find('.check_level_one').is(":checked");
                if (one == true) {
                    fila.find('.check_level_one').val(1);
                } else if (one == false) {
                    fila.find('.check_level_one').val(0);
                }

                var two = fila.find('.check_level_two').is(":checked");
                if (two == true) {
                    fila.find('.check_level_two').val(1);
                } else if (two == false) {
                    fila.find('.check_level_two').val(0);
                }

                var three = fila.find('.check_level_three').is(":checked");
                if (three == true) {
                    fila.find('.check_level_three').val(1);
                } else if (three == false) {
                    fila.find('.check_level_three').val(0);
                }

                var four = fila.find('.check_level_four').is(":checked");
                if (four == true) {
                    fila.find('.check_level_four').val(1);
                } else if (four == false) {
                    fila.find('.check_level_four').val(0);
                }

                levelOneCheck = fila.find('.check_level_one').val();
                levelTwoCheck = fila.find('.check_level_two').val();
                levelThreeCheck = fila.find('.check_level_three').val();
                levelFourCheck = fila.find('.check_level_four').val();

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/admin/configuraciones/gestionGrupos/usuariosGrupo/update/permisos') }}",
                        type: "POST",
                        datatype: "json",
                        data: {
                            user_id: user_id,
                            group_id: group_id,
                            levelOneCheck: levelOneCheck,
                            levelTwoCheck: levelTwoCheck,
                            levelThreeCheck: levelThreeCheck,
                            levelFourCheck: levelFourCheck,
                        },
                        success: function(data) {
                            toastMixin.fire({
                                animation: true,
                                title: "Permiso Cambiado!"
                            });
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            /* REMOVE USER FROM GROUP */
            $(document).on("click", ".btnDelete", function() {
                fila = $(this).closest("tr");

                user_id = fila.find("td:eq(0)").text();
                group_id = $.trim("{{ $id }}");

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/admin/configuraciones/gestionGrupos/usuariosGrupo/delete/usuario') }}",
                        type: "POST",
                        datatype: "json",
                        data: {
                            user_id: user_id,
                            group_id: group_id
                        },
                        success: function(data) {
                            usersAddedTable.ajax.reload(null, false);

                            toastMixin.fire({
                                animation: true,
                                title: "Usuario Eliminado!"
                            });
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });
        });
    </script>
@endsection