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

@section('tittle')
    GRUPOS DEL USUARIO
@endsection

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

            <div class="card card-table comman-shadow shadow-lg bg-comentarios">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">GRUPOS DEL USUARIO</h3>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-lg-6">
                            <h6>LISTADO DE USUARIOS</h6>
                            <span><b>Nota:</b> Doble click al usuario para ver el Listado de Grupos en los que está.</span>
                            <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>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <h6 id="clickedUser"></h6>
                            <div class="table-responsive">
                                <table id="gruposUserTable"
                                    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">Principal</th>
                                        </tr>
                                    </thead>
                                    <tbody>

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

        </div>
    </div>

    <input type="hidden" id="hidden_user_id">
@endsection

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

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

            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"
                    },
                ],
                order: [
                    [1, "asc"]
                ],
            });

            $('#allUsersTable').on("dblclick", "tbody td", function() {
                fila = $(this).closest("tr");

                userID = fila.find("td:eq(0)").text();
                userName = fila.find("td:eq(1)").text();

                $('#hidden_user_id').val(userID);

                $('#clickedUser').text("GRUPOS DEL USUARIO: " + userName);

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

                var gruposUserTable = $("#gruposUserTable").DataTable({
                    orderCellsTop: true,
                    ajax: {
                        method: "GET",
                        url: "{{ url('/api/list/groups/user') }}" + "/" + userID,
                    },
                    columns: [{
                            data: 'id_grupo'
                        },
                        {
                            data: 'nombre',
                        },
                        {
                            data: "grupo_principal",
                            className: 'text-center',
                            render: function(data, type, row) {
                                var badge = "";

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

                                return badge;
                            },
                        },
                    ],
                    order: [
                        [1, "asc"],
                    ],
                });
            });

            $(document).on("change", ".checkOptionGrupo", function() {

                fila = $(this).closest("tr");
                group_id = fila.find("td:eq(0)").text();
                user_id = $("#hidden_user_id").val();

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

                groupCheck = fila.find('.checkOptionGrupo').val();

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]')
                                    .attr(
                                        'content'));
                            }
                        },
                        url: "{{ url('/api/update/user/grupo/principal') }}",
                        type: "POST",
                        datatype: "json",
                        data: {
                            user_id: user_id,
                            group_id: group_id,
                            checkOptionGrupo: groupCheck
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                if (data.existe == 1) {
                                    Swal.fire("", "Ya elegiste un Grupo Principal para este Usuario!", "warning");

                                    fila.find('.checkOptionGrupo').val(0);
                                    fila.find('.checkOptionGrupo').prop('checked', false);
                                } else {
                                    toastMixin.fire({
                                        animation: true,
                                        title: "Grupo Principal Definido/Eliminado!"
                                    });
                                }
                            } else {
                                Swal.fire("", "Error al Definir el Grupo Principal!", "error");
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });


        });
    </script>
@endsection