@include('header')
@include('navigator_menu_principal')
<div class="container">
    <div class="row">
        <div class="h3 col-md-10">Usuarios de {{ $cliente->nombre_cliente }}</div>
        <div class="col-md-2 text-right">
            <button class="btn btn-fidelitas btn-primary" type="button" onclick="location.href='/led/led-clientes'"><i
                    class="fa fa-reply"></i> Volver a clientes</button>
        </div>
    </div>
    <h3></h3>

    <table class="table table-condensed table-striped table-hover" id="tablaUsuarios">
        <thead>
            <tr>
                <th>Nombre y apellido</th>
                <th>E-mail</th>
                <th>Productos</th>
                <th>Acción</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($usuarios as $user)
                <tr>
                    <td class="text-left">{{ $user->first_name . ' ' . $user->last_name }}</td>
                    <td class="text-center">{{ $user->email }}</td>
                    <td class="text-left">@if (NULL != $user->productos)
                    {!! str_replace('|', '<br />', $user->productos) !!} @else --- Todos --- @endif</td>
                    <td class="text-center">
                        <button class="btn btn-primary btn-fidelitas user" data-user-id="{{ $user->user_id }}"
                            data-toggle="modal" data-target="#usuarioProductos"
                            data-usuario="{{ $user->first_name . ' ' . $user->last_name }}"><i class="fa fa-eye"></i>
                            Productos</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
        <tfoot></tfoot>
    </table>
</div>

<div id="usuarioProductos" class="modal fade">
    <div class="modal-dialog" style="width:970px" id="modal-productos">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="productos_title"></h3>
            </div>
            <div class="modal-body" id="productos_body"></div>
        </div>
    </div>
</div>

<form action="/led/led-usuario-productos" id="frmUsuarioProductos" name="frmUsuarioProductos">
    {{csrf_field()}}
    <input type="hidden" name="cliente" value="{{$cliente->cliente}}">
    <input type="hidden" name="user_id" value="">
    <input type="hidden" name="accion" value="">
    <input type="hidden" name="productos" value="">
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', '.user', function () {
            var usr = $(this).data('userId');
            var nom = $(this).data('usuario');
            $('#frmUsuarioProductos [name="user_id"]').val(usr);

            $.ajax({
                method: 'post',
                url: '/led/led-usuario-productos',
                data: $('#frmUsuarioProductos').serialize(),
                beforeSend: function () {
                    $('#productos_title').html('Visibilidad productos para ' + nom);
                    $('#productos_body').html('');
                },
                success: function (response) {
                    $('#productos_body').html(response);
                }

            });

        });

        $('#tablaUsuarios').DataTable({
            "pagingType": "full_numbers",
            "dom": "p<'row'>f<t>lp",
            "ordering": true,
            "columns": [null, null, null, { "orderable": false }],
            "searching": true,
            "order": [[0, "asc"]],
            "info": true,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
            "pageLength": 25,
            "language": {
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "zeroRecords": "No se encontraron resultados",
                //"info": "Mostrando página _PAGE_ de _PAGES_",
                //"info": "Total de Registros: _MAX_", 
                "info": "Mostrando  _START_  de  _END_ - <b>Total:</b> _TOTAL_ registros",
                "infoEmpty": "No hay registros disponibles",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "sSearch": "Buscar",
                "oPaginate": {
                    "sFirst": "Primera",
                    "sPrevious": "Anterior",
                    "sNext": "Siguiente",
                    "sLast": "Última"
                },
            }


        });


        $(document).on('click', '#desasignar', function () {
            var sel = $('#asignados').val();
            if (sel != null) {
                var p = sel.join();
                $('#frmUsuarioProductos [name="productos"]').val(p);
                $.ajax({
                    method: 'post',
                    url: '/led/led-usuario-productos-desasignar',
                    data: $('#frmUsuarioProductos').serialize(),
                    beforeSend: function () {
                        $('#productos_body').html('');
                    },
                    success: function (response) {
                        $('#productos_body').html(response);
                    }

                });
            }
        });


        $(document).on('click', '#asignar', function () {
            var sel = $('#disponibles').val();
            if (sel != null) {
                var p = sel.join();
                $('#frmUsuarioProductos [name="productos"]').val(p);
                $.ajax({
                    method: 'post',
                    url: '/led/led-usuario-productos-asignar',
                    data: $('#frmUsuarioProductos').serialize(),
                    beforeSend: function () {
                        $('#productos_body').html('');
                    },
                    success: function (response) {
                        $('#productos_body').html(response);
                    }

                });
            }

        });


    });
</script>


@include('footer')