@extends('layouts.app')

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/pc_users.js?update=1') }}"></script>
@endsection

@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="ne text-left form-group">
                        <button id="chooseCities" class="btn btn-light">Wybierz miasta</button>
                        <label class="ml-3">
                            Wyszukaj:<br>
                            <input class="d-inline w-auto form-control" type="text" aria-label="Imie"
                                placeholder="Nazwa lub email" id="name">
                        </label>
                        <select class="form-control d-inline" style="width: auto;" id="agreement">
                            <option selected value="">Zgoda marketingowa</option>
                            <option value="1">Tak</option>
                            <option value="0">Nie</option>
                        </select>
                        <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 logowania</option>
                                <option value="login">Nazwy użytkownika</option>
                                <option value="email"> Adresu e-mail</option>
                            </select>
                        </label>
                        <a class="btn btn-small btn-light" id="generate-excel">Eksportuj</a>
                        <div id="countContainer" class="text-right mb-3">
                            Liczba użytkowników spełniających podane kryteria:
                            <span id="userCount"></span>
                        </div>
                    </div>

                    <div id="userOverflow" class="overflow-auto">
                        <table id="userTable" class="table table-striped">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Nazwa użytkownika</th>
                                    <th>Imię</th>
                                    <th>Miasto</th>
                                    <th>E-mail</th>
                                    <th>Data logowania</th>
                                    <th>Data rejestracji</th>
                                    <th>Zgoda market.</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 id="pcumiasta">
                        <div class="mr-1 mt-2 close">x</div>
                        <h5 class="mt-2 ml-2">Wybierz miasta</h5>

                        <div id="show_miasta" class="overflow-auto text-center">
                            <table id="cities" class="position-relative table table-sm">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Miasto</th>
                                        <th>Ilość osób</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div id="loaderImageCity" class="mt-3 lds-ring">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>

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

@section('style')
    <style scoped>
        #cities thead th {
            position: sticky;
            top: 0;
            z-index: 1;

        }

        #pcumiasta {
            border: 2px solid #e46066;
            margin-top: 30px;
            z-index: 1;
            background-color: white;
            display: none;
            width: 90%;
            max-width: 300px;
            position: absolute;
            top: 13px;
            right: 0;
        }

        .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