@extends('layouts.admin')

@section('title', 'Usuários')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4 p-4 rounded" style="background-color: #f8fafc; border-left: 4px solid rgb(1, 15, 27);">
        <div>
            <h3 class="mb-1" style="color: rgb(1, 15, 27); font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Gestão de Usuários</h3>
            <p class="text-muted mb-0">Gerencie todos os usuários do sistema</p>
        </div>
        <a href="{{ route('admin.users.create') }}" class="btn text-white px-4 py-2" style="background-color: rgb(243, 158, 11); border-radius: 8px; border: none;">
            <i class="fas fa-plus me-2"></i>Novo Usuário
        </a>
    </div>

    <!-- Filters Section -->
    <div class="mb-4">
        <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
            <div class="px-4 py-3" style="background-color: rgb(1, 15, 27); border-radius: 8px 8px 0 0;">
                <h6 class="mb-0 text-white" style="font-weight: 500; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                    <i class="fas fa-filter me-2"></i>Filtros de Busca
                </h6>
            </div>
            <div class="p-4">
                <form method="GET" action="{{ route('admin.users.index') }}" class="row g-3">
                    <div class="col-md-4">
                        <label for="search" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Buscar por Nome/ID</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background-color: #f8fafc; border-color: #d1d5db;">
                                <i class="fas fa-search" style="color: #6b7280;"></i>
                            </span>
                            <input type="text" 
                                   class="form-control" 
                                   id="search" 
                                   name="search" 
                                   value="{{ request('search') }}" 
                                   placeholder="Nome ou ID do usuário"
                                   style="border-color: #d1d5db;">
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="email" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Email</label>
                        <div class="input-group">
                            <span class="input-group-text" style="background-color: #f8fafc; border-color: #d1d5db;">
                                <i class="fas fa-envelope" style="color: #6b7280;"></i>
                            </span>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   value="{{ request('email') }}" 
                                   placeholder="email@exemplo.com"
                                   style="border-color: #d1d5db;">
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <label for="type" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Tipo de Usuário</label>
                        <select class="form-select" id="type" name="type" style="border-color: #d1d5db;">
                            <option value="">Todos os tipos</option>
                            <option value="lawyer" {{ request('type') == 'lawyer' ? 'selected' : '' }}>Individual</option>
                            <option value="firm" {{ request('type') == 'firm' ? 'selected' : '' }}>Empresa</option>
                            <option value="admin" {{ request('type') == 'admin' ? 'selected' : '' }}>Administrador</option>
                        </select>
                    </div>
                    
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn text-white px-4" style="background-color: rgb(243, 158, 11); border-radius: 6px; border: none;">
                            <i class="fas fa-search me-2"></i>Filtrar
                        </button>
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary px-4" style="border-radius: 6px;">
                            <i class="fas fa-undo me-2"></i>Limpar Filtros
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Users Table -->
    <div class="rounded-lg shadow-sm" style="background-color: white; border: 1px solid #e2e8f0;">
        <div class="px-4 py-3 d-flex justify-content-between align-items-center" style="background-color: rgb(1, 15, 27); border-radius: 8px 8px 0 0;">
            <h6 class="mb-0 text-white" style="font-weight: 500; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                <i class="fas fa-users me-2"></i>Usuários Cadastrados
            </h6>
            <span class="badge bg-white text-dark px-3 py-2">{{ $users->total() }} usuários</span>
        </div>
        
        @if($users->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead style="background-color: #f8fafc;">
                        <tr>
                            <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">ID</th>
                            <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Nome</th>
                            <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Email</th>
                            <th class="px-4 py-3 fw-medium" style="color: rgb(1, 15, 27); border-color: #e2e8f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Tipo</th>
                            <th class="px-4 py-3 fw-medium" style="color: #334155; border-color: #e2e8f0;">Status</th>
                            <th class="px-4 py-3 fw-medium" style="color: #334155; border-color: #e2e8f0;">Cadastro</th>
                            <th class="px-4 py-3 fw-medium" style="color: #334155; border-color: #e2e8f0;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                        <tr style="border-color: #f1f5f9;">
                            <td class="px-4 py-3">
                                <span class="badge px-2 py-1" style="background-color: #334155; color: white; font-size: 0.75rem;">#{{ $user->id }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <strong style="color: #334155;">{{ $user->name }}</strong>
                            </td>
                            <td class="px-4 py-3" style="color: #6b7280;">{{ $user->email }}</td>
                            <td class="px-4 py-3">
                                @if($user->type === 'Admin')
                                    <span class="badge px-2 py-1" style="background-color: #334155; color: white; font-size: 0.75rem;">Administrador</span>
                                @elseif($user->type === 'Lawyer')
                                    <span class="badge px-2 py-1" style="background-color: #f8fafc; color: #334155; border: 1px solid #334155; font-size: 0.75rem;">Individual</span>
                                @elseif($user->type === 'Firm')
                                    <span class="badge px-2 py-1" style="background-color: #f8fafc; color: #334155; border: 1px solid #334155; font-size: 0.75rem;">Empresa</span>
                                @else
                                    <span class="badge px-2 py-1" style="background-color: #f8fafc; color: #334155; border: 1px solid #334155; font-size: 0.75rem;">{{ ucfirst($user->type) }}</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if($user->is_active)
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #10b981;"></div>
                                        <span style="color: #334155; font-size: 0.875rem;">Ativo</span>
                                    </div>
                                @else
                                    <div class="d-flex align-items-center">
                                        <div class="rounded-circle me-2" style="width: 8px; height: 8px; background-color: #f59e0b;"></div>
                                        <span style="color: #6b7280; font-size: 0.875rem;">Inativo</span>
                                    </div>
                                @endif
                            </td>
                            <td class="px-4 py-3" style="color: #6b7280; font-size: 0.875rem;">{{ $user->created_at->format('d/m/Y') }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.users.edit', $user->id) }}" 
                                   class="btn btn-sm text-white px-3" 
                                   style="background-color: #334155; border-radius: 6px; font-size: 0.875rem;">
                                    <i class="fas fa-edit me-1"></i>Editar
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="px-4 py-3 d-flex justify-content-between align-items-center" style="background-color: #f8fafc; border-top: 1px solid #e2e8f0;">
                <div style="color: #6b7280; font-size: 0.875rem;">
                    Exibindo {{ $users->firstItem() }} a {{ $users->lastItem() }} de {{ $users->total() }} usuários
                </div>
                <div>
                    {{ $users->links() }}
                </div>
            </div>
        @else
            <div class="text-center py-5">
                <div class="mb-3">
                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                         style="width: 64px; height: 64px; background-color: #f8fafc; color: #334155;">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                </div>
                <h5 style="color: #334155; font-weight: 500;">Nenhum usuário encontrado</h5>
                <p style="color: #6b7280; margin-bottom: 0;">Não há usuários que correspondam aos critérios de busca.</p>
            </div>
        @endif
    </div>
</div>
@endsection