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

@section('tittle')
    LISTADO DE USUARIOS GS
@endsection

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

            <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">LISTADO DE USUARIOS</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="usersTable" 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">Usuario</th>
                                    <th class="text-center">Correo</th>
                                    <th class="text-center">Telegram</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>


    <div class="modal fade" id="modalEditUser" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog" 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="text" id="pkUsuario" hidden>

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">Nombre:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtNombre"
                                    id="txtNombre">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">Correo:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtCorreo"
                                    id="txtCorreo">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">ID Telegram:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtTelegram"
                                    id="txtTelegram">
                            </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>

    <div class="modal fade" id="modalActualizarDatos" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog" 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="text" id="pkUsuario" hidden>

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">Nombre:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtNombre"
                                    id="txtNombre">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">Correo:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtCorreo"
                                    id="txtCorreo">
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group">
                                <label for="" class="col-form-label" for="asuntoBox">ID Telegram:</label>
                                <input type="text" class="form-control form-control-sm textControls" name="txtTelegram"
                                    id="txtTelegram">
                            </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>
@endsection

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

            $('#btnCancelar').click(function (e) { 
                e.preventDefault();
                
                $('#modalEditUser').modal("hide");
            });

            /* LIST USERS */
            usersTable = $("#usersTable").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                ajax: {
                    url: "{{ url('/api/list/gs/users') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "PKUsuario"
                    },
                    {
                        data: "Nombre"
                    },
                    {
                        data: "Usuario"
                    },
                    {
                        data: "correo"
                    },
                    {
                        data: "id_telegram"
                    },
                    {
                        defaultContent: "<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></div></div>",
                    },
                ],
                order: [
                    [1, "asc"]
                ]
            });

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

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

                pk_usuario = $.trim(fila.find("td:eq(0)").text());
                nombre = $.trim(fila.find("td:eq(1)").text());
                correo = $.trim(fila.find("td:eq(3)").text());
                id_telegram = $.trim(fila.find("td:eq(4)").text());

                $('#pkUsuario').val(pk_usuario);
                $('#txtNombre').val(nombre);
                $('#txtCorreo').val(correo);
                $('#txtTelegram').val(id_telegram);

                $(".modal-header").css("background-color", "#f44336");
                $(".modal-title").css({
                    "color": "white",
                    "font-weight": "900",
                });
                $(".modal-title").text("Editar Datos de: " + nombre);
                $("#modalEditUser").modal("show");
            });

            /* SAVE EDITED USER */
            $('#btnGuardar').click(function(e) {
                e.preventDefault();

                var id_user = $('#pkUsuario').val();
                var user_name = $('#txtNombre').val();
                var user_mail = $('#txtCorreo').val();
                var user_telegram = $('#txtTelegram').val();

                try {
                    $.ajax({
                        beforeSend: function(xhr, type) {
                            if (!type.crossDomain) {
                                xhr.setRequestHeader('X-CSRF-Token',
                                    $(
                                        'meta[name="csrf-token"]'
                                    ).attr('content'));
                            }
                        },
                        url: "{{ url('/api/edit/gs/users') }}",
                        method: "POST",
                        data: {
                            id_user: id_user,
                            user_name: user_name,
                            user_mail: user_mail,
                            user_telegram: user_telegram
                        },
                        success: function(data) {
                            if (data.save == 1) {
                                Swal.fire("", "Usuario Editado!", "success");
                                $('.textControls').val('');
                                $("#modalEditUser").modal("hide");
                                usersTable.ajax.reload(null, false);
                            }
                        }
                    });
                } catch (error) {
                    Swal.fire("", "Error: " + error, "error");
                }
            });

            $('#btnNuevo').click(function (e) { 
                e.preventDefault();
                
                Swal.fire("", "Acción NO Disponible por el Momento!", "warning");
            });

        });
    </script>
@endsection