@extends('back.layout')

@section('title')
{{ __('g47') }} - {{ __('n1') }}
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between dir">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('g48') }}</h1>
            </div>
            <div>
                <a href="{{ route('export-users') }}" class="btn btn-success">
                    <i class="fa-solid fa-file-excel"></i>
                </a>
            </div>
        </div>
        <div class="page-content dir" style="overflow-x: scroll;">

            {{-- All Users --}}
            @if (count($users) > 1)
                <div id="users" style="width: 100vh;">
                    <input class="search form-control text-center fw-bold mb-2 shadow-none" placeholder="{{ __('g49') }}" />
                    <table class="table w-100">
                        <thead>
                            <tr>
                                <th class="fs-6 fw-bold text-center sort" data-sort="id">#</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="name">{{ __('g50') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="email">{{ __('h1') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="balance">{{ __('h2') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="tasks">{{ __('h3') }}</th>
                                <th class="fs-6 fw-bold text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($users as $user)
                                @if ($user->id != 1)
                                    <tr>
                                        <td class="fs-6 fw-bold text-center id">{{ $user->id }}</td>
                                        <td class="fs-6 fw-bold text-center name">{{ $user->name }}</td>
                                        <td class="fs-6 fw-bold text-center email">{{ $user->email }}</td>
                                        <td class="fs-6 fw-bold text-center balance">{{ $user->balance }} TRX</td>
                                        <td class="fs-6 fw-bold text-center tasks">{{ \App\Models\User::find( $user->id)->completed_tasks }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('userShow', $user->id) }}" class="btn btn-success fs-6">
                                                <i class="fa-solid fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                    <ul class="pagination"></ul>
                </div>
            @else
                <p class="fw-bold text-center text-dark fs-4">
                {{ __('h4') }}
                </p>
            @endif

        </div>
    </div>
@endsection

@section('jss')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"
        integrity="sha512-MT5YyrGWqMGkIbwkVUZEWGrRDjlNx8loukEdFyzLo4s8INKVxnDQy2eFcpmnWGrFwJ+X8mRTQOJpWCayXz7+Og=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var options = {
            valueNames: ['name', 'email', 'id', 'balance', 'tasks'],
            page: 50,
            pagination: true
        };

        var userList = new List('users', options);
    </script>
@endsection