@extends('layouts.app')
@section('style_files')
    <link rel="stylesheet" href="{{ asset('css/jquery.typeahead.min.css') }}">
@endsection
@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Users Admin</div>

                <div class="card-body">
                    <div id="typeahead_container" class="twitter-wrapper">
                        <form id="form-users" name="form-users">
                            @csrf
                            <div class="input-group">
                                <input class="typeahead" id="search_value" name="search_value" type="text" placeholder="Search User">
                                @if (Auth::user()->user_type->name == 'Admin')
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary typeahead-button" title="Add User" id="add_new_user_button" onclick="addNewUserDialog(event)">
                                            <i class="far fa-plus-square"></i>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </form>
                    </div>
                    <br>
                    <div class="alert alert-success" role="alert" id="success-alert-message" style="display: none;">
                    </div>
                    <div id="users_container">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th class="table_cell_content">Email</th>
                                    <th class="table_cell_content">Type</th>
                                    <th class="table_cell_content">Dealers</th>
                                    <th class="table_cell_content">User Groups</th>
                                    <th style="text-align: center;">Edit</th>
                                    <th style="text-align: center;">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                <tr id="user_row_{{ $user->id }}">
                                    <td id="user_name_{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</td>
                                    <td class="table_cell_content">{{ $user->email }}</td>
                                    <td class="table_cell_content">{{ $user->user_type->name }}</td>
                                    <td class="table_cell_content">
                                        @if(isset($user->dealers))
                                            @foreach ($user->dealers as $dealer)
                                                @if ( ! empty( $dealer_names[$dealer->dealer_id] ) )
                                                    {{ $dealer_names[$dealer->dealer_id] }} <br>
                                                @endif
                                                
                                            @endforeach
                                        @else
                                            None
                                        @endif
                                    </td>
                                    <td class="table_cell_content">
                                        @if(isset($user->user_groups))
                                            @foreach ($user->user_groups as $user_group)
                                                {{ $user_group->name }} <br>
                                            @endforeach
                                        @else
                                            None
                                        @endif
                                    </td>
                                    <td align="center"><a href="#"><i class="fas fa-edit" onclick="editUserDialog(event, {{ $user->id }})"></i></a></td>
                                    <td align="center"><a href="#"><i class="fas fa-trash-alt" onclick="deleteUserDialog(event, {{ $user->id }})"></i></a></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $users->links() }} 
                        @if ($users->total() > 20)
                            <button type="submit" class="btn btn-primary" onclick="usersPaginationData(1, null, 1)">
                                Show All
                            </button>
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts_extra')
    <script src="{{ asset('js/bloodhound.min.js') }}" type="application/javascript"></script>
    <script src="{{ asset('js/typeahead.bundle.min.js') }}" type="application/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $(document).on('click', '.pagination a',function(event)
            {
                event.preventDefault();
                $('li').removeClass('active');

                $(this).parent('li').addClass('active');
                var myurl = $(this).attr('href');
                var page=$(this).attr('href').split('page=')[1];
                usersPaginationData(page, null, 0);
            });
            
            var userList = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                //prefetch: '../data/films/post_1960.json',
                remote: {
                    url: 'users/search#%QUERY',
                    wildcard: '%QUERY',
                    transport: function (opts, onSuccess, onError) {
                        var url = opts.url;
                        var form_values = $("#form-users").serialize();
                        $.ajax({
                            url: url,
                            headers: {
                                'X-CSRF-TOKEN':'{{ csrf_token() }}'
                            },
                            data: form_values,
                            type: "POST",
                            success: onSuccess,
                            error: onError,
                        })
                    }
                }
            });
            $('#search_value').typeahead(null, {
                  name: 'best-pictures',
                  display: 'value',
                  source: userList,
                  highlight: true,
                  templates: {
                    empty: [
                          '<div class="empty-message">',
                            'No user found.',
                          '</div>'
                        ].join('\n')
                }
            }).bind('typeahead:select', function(ev, suggestion) {
                if(suggestion != null) {
                    usersPaginationData(1, suggestion.id, 0);
                } else {
                    usersPaginationData(1, null, 0);
                }
            });
        });

        function usersPaginationData(page,id, showall)
        {
            var html = getLoadingContent();
            $("#users_container").empty().html(html);
            
            $.ajax(
            {
                url: $('meta[name="main-url"]').attr('content')+'/users/pagination',

                type: "post",

                datatype: "html",

                data: {
                    page:page,
                    id:id, 
                    showall: showall,
                    "_token": "{{ csrf_token() }}"
                }
            }).done(function(data){

                $("#users_container").empty().html(data);

                location.hash = page;
            }).fail(function(jqXHR, ajaxOptions, thrownError){

                  alert('No response from server');
            });
        }
    </script>
@endsection