@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-fle color-back">
                        <div class="col-md-2 div-button">
                            <a href="{{ route('dashboard.index') }}" class="btn btn-info">Voltar</a>
                        </div>
                        <div class="col-md-10 div-button">Lista de Usuários</div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="height: 650px; overflow-y:auto;">
                            {{-- <input type="search" name="search" id="usersSearch" class="form-control" placeholder="Digite o que deseja buscar..."> --}}
                            <table class="table table-striped">
                                <thead>
                                    <tr style="position: sticky; top: 0;background-color: white; z-index: 1000;">
                                        <th scope="col">Nome</th>
                                        <th scope="col">E-mail</th>
                                        <th scope="col">Data última atualização</th>
                                        @if (Auth::user()->is_admin == '1')
                                            <th scope="col">Ações</th>
                                        @endif
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($users as $user)
                                        <tr>
                                            <td data-nome="{{$user['name']}}">{{ $user['name'] }}</td>
                                            <td data-email="{{$user['email']}}">{{ $user['email'] }}</td>
                                            <td>{{ \Carbon\Carbon::parse($user['updated_at'])->format('d/m/Y H:i') }}
                                            </td>
                                            @if (Auth::user()->is_admin == '1')
                                                <td>
                                                    <a class="btn btn-primary mb-2" href="{{route('users.edit',['id' => $user['id']])}}"> <i class="fa-solid fa-pen"></i></a>
                                                    <a class="btn btn-danger mb-2" href="{{route('users.remove', ['id' => $user['id']])}}"><i class="fa-solid fa-trash-can"></i></a>
                                                </td>
                                            @endif
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .progress-container {
            width: 100%;
            height: 20px;
            background-color: #ccc;
            position: relative;
            border-radius: 150px;
        }

        .progress-bar {
            height: 100%;
            position: absolute;
            transition: width 1s ease;
            border-radius: 150px;
        }

        .loading {
            animation: loadingAnimation 1.5s ease forwards;
        }

        .no-animation {
            animation: none !important;
        }

        @keyframes loadingAnimation {
            0% {
                width: 0%;
            }

            100% {
                width: 100%;
            }
        }

        .progress-container>span {
            display: block;
            width: 100%;
            position: absolute;
            text-align: center;
            font-weight: 900;
            font-size: 12px;
            line-height: 20px;
            color: #ffffff;
        }
    </style>
@endsection