@extends('layouts.template')

@section('title', 'Users')

@section('main')
    <h1>Users</h1>
    @include('shared.alert')
    <form method="get" action="/admin/users" id="searchForm">
        <div class="row">
            <div class="col-sm-7 mb-2">
                <p>Filter Username or E-mail</p>
                <input type="text" class="form-control" name="artist" id="artist"
                       value="{{ request()->artist }}"
                       placeholder="Filter Username or E-mail">
            </div>
            <div class="col-sm-5 mb-2">
                <p>Sort by</p>
                <select class="form-control" name="sort" id="sort">
                    @foreach ($orderby as $i => $sort)
                        <option value="{{$i}}" {{ (request()->sort == $i ? 'selected' : '') }}>{{$sort["DisplayName"]}}</option>
                    @endforeach
                </select>
            </div>
        </div>

    </form>

    @if ($users->count() == 0)
        <div class="alert alert-danger alert-dismissible fade show">
            Can't find any user with <b>'{{ request()->name_email }}'</b> in his name or email
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Active</th>
                <th>Admin</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            @foreach($users as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td> @if($user->active == 1) <i class="fas fa-check"></i> @else  @endif </td>
                    <td>@if($user->admin == 1) <i class="fas fa-check"></i> @else  @endif </td>

                    <td>
                        <form action="/admin/users/{{ $user->id }}" method="post" class="deleteForm" novalidate >
                            @method('delete')
                            @csrf
                            <div class="btn-group btn-group-sm" >

                                <a href="/admin/users/{{ $user->id }}/edit" class="btn btn-outline-success @if($user->id == Auth::user()->id) disabled @endif"
                                   data-toggle="tooltip"
                                   title="Edit {{ $user->name }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-outline-danger"
                                        data-toggle="tooltip"
                                        @if($user->id == Auth::user()->id) disabled @endif
                                        data-username="{{ $user->name }}"
                                        title="Delete {{ $user->name }}">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </form>
                    </td>
                </tr>

            @endforeach

            </tbody>
        </table>
    </div>
    {{ $users->links() }}
@endsection

@section('script_after')
    <script>
        $(function () {

            // submit form when leaving text field 'artist'
            $('#artist').blur(function () {
                $('#searchForm').submit();
            });
            $('#sort').change(function () {
                $('#searchForm').submit();
            });

        });

        $(function () {
            $('.deleteForm button').click(function () {
                let username = $(this).data('username');
                let msg = `Delete the user ${username}?`;
                let form =$(this).closest('form');

                // Show Noty
                let modal = new Noty({
                    timeout: false,
                    layout: 'center',
                    modal: true,
                    type: 'warning',
                    text: msg,
                    buttons: [
                        Noty.button('Delete user', ` btn btn-success`, function () {
                            // Delete genre and close modal
                            $(form).submit();
                            modal.close();
                        }),
                        Noty.button('Cancel', 'btn btn-secondary ml-2', function () {
                            modal.close();
                        })
                    ]
                }).show();
            })
        });

    </script>
@endsection