@extends('donamarmita-admin')
@section('title', 'Gestão de Utilizadores')
@section('content')

<div class="right_col" role="main" style="min-height: 100vh;">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8 col-sm-8" style="padding-left: 30px;">
                        <div class="page-title">
                            <h1><i class="fa fa-users"></i> Gestão de Utilizadores</h1>
                            <p class="text-muted">Gerir utilizadores com acesso ao painel administrativo</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 text-right" style="padding-right: 35px;">
                        <a href="{{ route('admin.users.create') }}" class="btn btn-success btn-lg">
                            <i class="fa fa-user-plus"></i> Novo Utilizador
                        </a>
                    </div>
                </div>
            </div>

            <div class="clearfix"></div>

            <!-- Alertas -->
            @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong>Erro!</strong> Corrija os seguintes problemas:
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            @if ($message = Session::get('success'))
            <div class="alert alert-success alert-dismissible fade show">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <p>{{ $message }}</p>
            </div>
            @endif

            <!-- Painel Principal -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <div class="row align-items-center">
                        <div class="col-md-6 blue">
                            <h3 class="mb-0"><i class="fa fa-list"></i> Lista de Utilizadores</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Pesquisar utilizadores..." id="searchInput">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="usersTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Avatar</th>
                                    <th>Nome</th>
                                    <th>Email</th>
                                    <th>Perfil</th>
                                    <th>Último Login</th>
                                    <th>Estado</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($users as $user)
                                <tr>
                                    <!-- Avatar -->
                                    <td>
                                        <img src="{{ ($user->client && $user->client->cli_avatar) 
                                            ? asset('images/profile/' . $user->client->cli_avatar) 
                                            : asset('images/profile/user-ava-md.jpg') }}" 
                                             alt="{{ $user->name }}" 
                                             class="img-circle" 
                                             width="40" 
                                             height="40">
                                    </td>

                                    <!-- Nome e Nickname -->
                                    <td>
                                        <strong>{{ $user->client->cli_first_name ?? '' }} {{ $user->client->cli_last_name ?? '' }}</strong>
                                        <br>
                                        <small class="text-muted">#{{ $user->name }}</small>
                                    </td>

                                    <!-- Email -->
                                    <td>{{ $user->client->cli_email ?? $user->email }}</td>

                                    <!-- Perfil -->
                                    <td>
                                        <span class="badge badge-success">{{ $user->profile_role }}</span>
                                    </td>

                                    <!-- Último Login -->
                                    <td>
                                        @if($user->client && $user->client->cli_last_login_date)
                                            {{ \Carbon\Carbon::parse($user->client->cli_last_login_date)->format('d/m/Y H:i') }}
                                        @else
                                            <span class="text-muted">Nunca</span>
                                        @endif
                                    </td>

                                    <!-- Estado -->
                                    <td>
                                        <span class="badge badge-{{ ($user->client && $user->client->cli_status) ? 'success' : 'secondary' }}">
                                            {{ ($user->client && $user->client->cli_status) ? 'Ativo' : 'Inativo' }}
                                        </span>
                                    </td>

                                    <!-- Ações -->
                                    <td class="text-center">
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.users.edit', $user->id) }}" 
                                               class="btn btn-sm btn-primary" 
                                               title="Editar">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            <a href="{{ route('admin.users.show', $user->id) }}" 
                                               class="btn btn-sm btn-info" 
                                               title="Ver Detalhes">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                            <form action="{{ route('admin.users.destroy', $user->id) }}" 
                                                  method="POST" 
                                                  class="d-inline"
                                                  onsubmit="return confirm('Tem a certeza que deseja eliminar este utilizador?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" title="Eliminar">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Paginação -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="text-muted">
                            A mostrar {{ $users->firstItem() }} a {{ $users->lastItem() }} de {{ $users->total() }} registos
                        </div>
                        <div>
                            {{ $users->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        // Pesquisa em tempo real
        $('#searchInput').on('keyup', function() {
            var value = $(this).val().toLowerCase();
            $('#usersTable tbody tr').filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
@endpush

@endsection