@extends('layouts.app')

@section('content')
<div style="padding: 30px 20px 60px; max-width: 1200px; margin: 0 auto;">
    <div style="margin-bottom: 30px;">
        <div style="color: white; font-size: 2rem; font-weight: 800;">👥 Gestão de Usuários</div>
        <div style="color: rgba(255,255,255,0.7); font-size: 0.95rem;">Edite, promova a admin ou remova usuários do sistema.</div>
    </div>

    @if(session('success'))
        <div style="padding: 14px 18px; background: rgba(26, 168, 96, 0.15); border: 1px solid #1aa860; border-radius: 8px; color: #16d97a; margin-bottom: 20px;">
            ✓ {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div style="padding: 14px 18px; background: rgba(220, 53, 69, 0.15); border: 1px solid #dc3545; border-radius: 8px; color: #ff6b7a; margin-bottom: 20px;">
            ✗ {{ session('error') }}
        </div>
    @endif

    <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden;">
        @if($users->count() > 0)
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; min-width: 900px;">
                    <thead>
                        <tr style="border-bottom: 1px solid rgba(255,255,255,0.08);">
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">ID</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Nome</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Email</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Telefone</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Tipo</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Cadastro</th>
                            <th style="text-align: left; padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr style="border-bottom: 1px solid rgba(255,255,255,0.06);">
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.85);">{{ $user->id }}</td>
                                <td style="padding: 14px 18px; color: white; font-weight: 600;">{{ $user->name }}</td>
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.85);">{{ $user->email }}</td>
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.85);">{{ $user->phone ?? '-' }}</td>
                                <td style="padding: 14px 18px;">
                                    @if($user->is_admin)
                                        <span style="padding: 4px 10px; background: #F5B800; color: #111; border-radius: 12px; font-size: 0.8rem; font-weight: 700;">👑 Admin</span>
                                    @else
                                        <span style="padding: 4px 10px; background: rgba(93, 178, 255, 0.15); color: #5db2ff; border-radius: 12px; font-size: 0.8rem; font-weight: 600;">Cliente</span>
                                    @endif
                                </td>
                                <td style="padding: 14px 18px; color: rgba(255,255,255,0.7); font-size: 0.85rem;">{{ $user->created_at->format('d/m/Y') }}</td>
                                <td style="padding: 14px 18px;">
                                    <div style="display: flex; gap: 8px;">
                                        <a href="{{ route('admin.users.edit', $user) }}" style="padding: 6px 12px; background: #0d6efd; color: white; text-decoration: none; border-radius: 6px; font-size: 0.85rem;">Editar</a>
                                        
                                        @if($user->id !== auth()->id())
                                            <form method="POST" action="{{ route('admin.users.destroy', $user) }}" onsubmit="return confirm('Tem certeza que deseja deletar este usuário?')" style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" style="padding: 6px 12px; background: #dc3545; color: white; border: 0; border-radius: 6px; font-size: 0.85rem; cursor: pointer;">Deletar</button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div style="padding: 20px;">
                {{ $users->links() }}
            </div>
        @else
            <div style="padding: 40px; text-align: center; color: rgba(255,255,255,0.6);">
                <div style="font-size: 3rem; margin-bottom: 10px;">👥</div>
                <div style="font-size: 1.1rem; font-weight: 600;">Nenhum usuário encontrado</div>
            </div>
        @endif
    </div>
</div>
@endsection