@extends('layouts.app')

@section('content')
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header h2">Użytkownicy</div>
                <div class="card-body">
                    <div class="text-right">
                        <div class="d-inline text-left form-group float-left">
                            <label class="ml-3">
                                Wyszukaj:<br>
                                <input class="d-inline w-auto form-control" type="text" aria-label="Imie"
                                       placeholder="Imię i nazwisko" id="name">
                            </label>
                            <label class="ml-3">
                                Sortuj wg:
                                <select id="orderBy" class="form-control">
                                    <option selected value="created_at"> Daty rejestracji</option>
                                    <option value="updated_at"> Daty ostatniego logowania</option>
                                    <option value="name"> Imienia i nazwiska</option>
                                    <option value="email"> Adresu e-mail</option>
                                </select>
                            </label>
                        </div>
                        <a href="{{ route('users.create') }}" class="mt-4 mb-4 btn btn-success">Stwórz nowego
                            użytkownika</a>
                    </div>
                    <div id="userOverflow" class="overflow-auto">
                        <table id="userTable" class="table table-striped mt-4">
                            <thead class="thead-dark">
                            <tr>
                                <th>Adres e-mail</th>
                                <th>Imię i nazwisko</th>
                                <th>Data ostatniego logowania</th>
                                <th>Data rejestracji</th>
                                <th>Administrator</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div id="loaderImage" class="lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <div id="errorMessage"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section("style")
    <style scoped>
        .container {
            max-width: 1500px !important;
        }

        .table {
            border-radius: 2px;
            text-align: center;
        }

        .table td {
            vertical-align: middle !important;
        }

        .table thead th {
            position: sticky;
            top: 0;
        }

        .overflow-auto {
            text-align: center;
            max-height: 60vh;
        }

        .table td form {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
@endsection

@section("scripts")
    <script type="text/javascript">
        $(function () {
            let busy = false;
            let pageNumber = 1;
            const imgLoader = $("#loaderImage");
            const errorMessage = $("#errorMessage");
            const table = $("#userTable");
            const usersOverflow = $("#userOverflow");
            const allSearchInput = $("#name, #orderBy");
            const name = $("#name");
            const orderBy = $("#orderBy");
            //initial get users
            busy = true;
            getUsers();

            usersOverflow.scroll(function () {
                if (usersOverflow.scrollTop() + usersOverflow.height() > table.height() - 30 && !busy) {
                    busy = true;
                    pageNumber++;
                    getUsers();
                }
            });

            //search
            //on "input" or on "change"
            let getRequest;
            allSearchInput.on("input", function () {
                clearTimeout(getRequest);
                //call after delay from input
                getRequest = setTimeout(function () {
                    //clear table
                    pageNumber = 1;
                    $("#userTable tbody").html("");
                    getUsers();
                }, 700);
            });

            function getUsers() {

                $.ajax({
                    method: 'GET',
                    url: '/allusers',
                    data: {
                        page: pageNumber,
                        name: name.val().trim(),
                        orderBy: orderBy.val().trim(),
                    },
                    beforeSend: function () {
                        imgLoader.show();
                        errorMessage.hide();
                    },
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    dataType: 'json',
                    success: function (response) {
                        busy = false;
                        const data = response.data;

                        if (data.length < 40) {
                            //end data
                            busy = true;
                            errorMessage.html("To już wszyscy użytkownicy spełniający podane kryteria").show();
                        }

                        $.each(data, function (key, user) {
                            user.created_at = convertDate(user.created_at);
                            user.updated_at = convertDate(user.updated_at);
                            const html = userTemplate(user);
                            table.append($.parseHTML(html));
                        });
                    },
                    error: function () {
                        errorMessage.html("Wystąpił błąd, spróbuj ponownie").show();
                        busy = false;
                    },
                    complete: function () {
                        imgLoader.hide();
                    }
                });
            }

            const userTemplate = (user) => {
                const admin = user.roles[0] && user.roles[0].name.indexOf("admin") !== -1 ? "&#10004;" : "&#10006;";
                return `<tr>
                        <td>${user.email}</td>
                        <td>${user.name}</td>
                        <td>${user.updated_at}</td>
                        <td>${user.created_at}</td>
                        <td>${admin}</td>
                        <td>
                            <form method="post" action="/users/${user.id}" onsubmit="return confirm('Czy na pewno chcesz usunąć użytkownika ${user.name}?');">
                                @csrf
                                <input type="hidden" name="_method" value="DELETE">
                                <button class="btn btn-danger btn-sm">x</button>
                            </form>
                        </td>
                        </tr>`;
            }
        });
    </script>
@endsection