@extends('layouts.admin')
@section('title', 'Gestão de Usuários')
@section('breadcrumb')
    <a href="{{ route('admin.settings.index') }}" class="breadcrumb-item">Ajustes</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Usuários</span>
@endsection

@push('styles')
<style>
.um-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.um-header h2 { font-size:1.2rem; font-weight:800; color:#111827; margin-bottom:2px; }
.um-header p  { font-size:.78rem; color:#6b7280; }

/* KPIs */
.um-kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:600px){ .um-kpi-row { grid-template-columns:1fr; } }
.um-kpi { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:14px 18px; position:relative; overflow:hidden; }
.um-kpi::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c,#6366f1); }
.um-kpi-label { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#9ca3af; margin-bottom:4px; }
.um-kpi-val   { font-size:1.5rem; font-weight:800; color:#111827; }

/* Filter */
.um-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.um-filter input, .um-filter select { padding:7px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:.8rem; color:#374151; background:#fff; outline:none; }
.um-filter input:focus, .um-filter select:focus { border-color:#6366f1; }
.btn-sm-primary { padding:7px 14px; background:#6366f1; color:#fff; border:none; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; }

/* Table */
.um-table-wrap { overflow-x:auto; }
.um-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.um-table th { background:#fafafa; padding:10px 14px; text-align:left; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
.um-table td { padding:11px 14px; border-bottom:1px solid #f8fafc; vertical-align:middle; }
.um-table tr:last-child td { border-bottom:none; }
.um-table tr:hover td { background:#fafafa; }
.avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.82rem; flex-shrink:0; }

/* Role badge */
.role-badge { padding:3px 10px; border-radius:99px; font-size:.67rem; font-weight:700; }

/* Action btns */
.um-actions { display:flex; gap:6px; align-items:center; }
.um-action-btn { padding:5px 10px; border-radius:7px; font-size:.72rem; font-weight:700; border:1px solid; cursor:pointer; background:transparent; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
</style>
@endpush

@section('content')

<div class="um-header">
    <div>
        <h2>👥 Gestão de Usuários</h2>
        <p>Gerencie os usuários e permissões da sua equipe</p>
    </div>
    <button type="button" class="btn btn-primary" onclick="document.getElementById('modal-create').classList.add('active')">
        <i data-lucide="user-plus" style="width:14px;height:14px;"></i> Novo Usuário
    </button>
</div>

{{-- KPIs --}}
<div class="um-kpi-row">
    <div class="um-kpi" style="--c:#6366f1;">
        <div class="um-kpi-label">👤 Total de Usuários</div>
        <div class="um-kpi-val">{{ $totalUsers }}</div>
    </div>
    <div class="um-kpi" style="--c:#22c55e;">
        <div class="um-kpi-label">✅ Ativos</div>
        <div class="um-kpi-val">{{ $activeUsers }}</div>
    </div>
    <div class="um-kpi" style="--c:#f59e0b;">
        <div class="um-kpi-label">🕐 Logins (7 dias)</div>
        <div class="um-kpi-val">{{ $recentLogins }}</div>
    </div>
</div>

{{-- Filtros --}}
<form method="GET" class="um-filter">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="Buscar nome ou e-mail...">
    <select name="role">
        <option value="">Todas as funções</option>
        @foreach($hotelRoles as $role)
        <option value="{{ $role->name }}" {{ request('role') === $role->name ? 'selected' : '' }}>{{ $role->name }}</option>
        @endforeach
    </select>
    <button type="submit" class="btn-sm-primary">Filtrar</button>
    <a href="{{ route('admin.settings.users.index') }}" style="padding:7px 12px;background:#f1f5f9;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;">Limpar</a>
</form>

{{-- Tabela --}}
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #f1f5f9;background:#fafafa;font-size:.84rem;font-weight:700;">
        <span style="display:flex;align-items:center;gap:7px;">
            <i data-lucide="users" style="width:14px;height:14px;color:#6366f1;"></i>
            Usuários cadastrados
        </span>
        <span style="font-size:.71rem;color:#6b7280;font-weight:400;">{{ $users->total() }} registros</span>
    </div>
    <div class="um-table-wrap">
        <table class="um-table">
            <thead>
                <tr>
                    <th>Usuário</th>
                    <th>E-mail</th>
                    <th>Função</th>
                    <th>Status</th>
                    <th>Último Login</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div class="avatar">{{ strtoupper(substr($user->name,0,1)) }}</div>
                            <div>
                                <div style="font-weight:700;">{{ $user->display_name ?? $user->name }}</div>
                                @if($user->id === auth()->id())
                                <div style="font-size:.65rem;background:#fef3c7;color:#b45309;padding:1px 6px;border-radius:4px;font-weight:700;display:inline-block;">Você</div>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td style="color:#6b7280;font-size:.79rem;">{{ $user->email }}</td>
                    <td>
                        @foreach($user->roles as $role)
                        @php
                            $roleColors = [
                                'hotel_admin'     => ['bg'=>'#ede9fe','color'=>'#7c3aed'],
                                'receptionist'    => ['bg'=>'#dbeafe','color'=>'#2563eb'],
                                'housekeeper'     => ['bg'=>'#dcfce7','color'=>'#16a34a'],
                                'financial'       => ['bg'=>'#fef3c7','color'=>'#b45309'],
                                'manager'         => ['bg'=>'#fde8d8','color'=>'#c2410c'],
                            ];
                            $rc = $roleColors[$role->name] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
                        @endphp
                        <span class="role-badge" style="background:{{ $rc['bg'] }};color:{{ $rc['color'] }};">{{ $role->name }}</span>
                        @endforeach
                    </td>
                    <td>
                        @if($user->is_active)
                            <span style="background:#dcfce7;color:#16a34a;padding:3px 10px;border-radius:99px;font-size:.68rem;font-weight:700;">✓ Ativo</span>
                        @else
                            <span style="background:#fee2e2;color:#dc2626;padding:3px 10px;border-radius:99px;font-size:.68rem;font-weight:700;">✕ Inativo</span>
                        @endif
                    </td>
                    <td style="color:#6b7280;font-size:.77rem;">
                        {{ $user->last_login_at ? $user->last_login_at->diffForHumans() : '—' }}
                    </td>
                    <td>
                        <div class="um-actions">
                            {{-- Editar --}}
                            <button type="button" class="um-action-btn" style="border-color:#6366f1;color:#6366f1;"
                                onclick="openEditModal({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ $user->email }}', '{{ $user->roles->first()?->name }}', {{ $user->is_active ? 'true' : 'false' }})">
                                <i data-lucide="pencil" style="width:11px;height:11px;"></i> Editar
                            </button>

                            @if($user->id !== auth()->id())
                            {{-- Toggle --}}
                            <form action="{{ route('admin.settings.users.toggle', $user) }}" method="POST" style="display:inline;">
                                @csrf @method('PATCH')
                                <button type="submit" class="um-action-btn"
                                    style="border-color:{{ $user->is_active ? '#d97706' : '#22c55e' }};color:{{ $user->is_active ? '#d97706' : '#22c55e' }};">
                                    {{ $user->is_active ? 'Desativar' : 'Ativar' }}
                                </button>
                            </form>
                            {{-- Excluir --}}
                            <form action="{{ route('admin.settings.users.destroy', $user) }}" method="POST" style="display:inline;"
                                onsubmit="return confirm('Excluir usuário {{ addslashes($user->name) }}?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="um-action-btn" style="border-color:#ef4444;color:#ef4444;">
                                    <i data-lucide="trash-2" style="width:11px;height:11px;"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align:center;padding:36px;color:#9ca3af;font-size:.84rem;">
                        Nenhum usuário encontrado.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Paginação --}}
    @if($users->hasPages())
    <div style="padding:14px 20px;background:#fafafa;border-top:1px solid #f1f5f9;display:flex;gap:4px;flex-wrap:wrap;">
        @if($users->onFirstPage())
            <span style="padding:5px 10px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;opacity:.4;">‹</span>
        @else
            <a href="{{ $users->previousPageUrl() }}" style="padding:5px 10px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;color:#374151;text-decoration:none;background:#fff;">‹</a>
        @endif
        @foreach($users->getUrlRange(max(1,$users->currentPage()-2), min($users->lastPage(),$users->currentPage()+2)) as $page => $url)
            <a href="{{ $url }}" style="padding:5px 10px;border:1px solid {{ $page === $users->currentPage() ? '#6366f1' : '#e5e7eb' }};border-radius:7px;font-size:.78rem;background:{{ $page === $users->currentPage() ? '#6366f1' : '#fff' }};color:{{ $page === $users->currentPage() ? '#fff' : '#374151' }};text-decoration:none;font-weight:{{ $page === $users->currentPage() ? '700' : '400' }};">{{ $page }}</a>
        @endforeach
        @if($users->hasMorePages())
            <a href="{{ $users->nextPageUrl() }}" style="padding:5px 10px;border:1px solid #e5e7eb;border-radius:7px;font-size:.78rem;color:#374151;text-decoration:none;background:#fff;">›</a>
        @endif
    </div>
    @endif
</div>

{{-- MODAL Criar --}}
<div class="modal-backdrop" id="modal-create">
    <div class="modal">
        <div class="modal-header">
            <h3>👤 Novo Usuário</h3>
            <button class="modal-close" onclick="document.getElementById('modal-create').classList.remove('active')">&times;</button>
        </div>
        <form action="{{ route('admin.settings.users.store') }}" method="POST">
            @csrf
            <div class="modal-body" style="display:grid;gap:13px;">
                <div class="form-group">
                    <label class="form-label">Nome completo *</label>
                    <input type="text" name="name" class="form-input" required placeholder="João da Silva">
                </div>
                <div class="form-group">
                    <label class="form-label">E-mail *</label>
                    <input type="email" name="email" class="form-input" required placeholder="joao@hotel.com">
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="form-group">
                        <label class="form-label">Senha *</label>
                        <input type="password" name="password" class="form-input" required placeholder="Mín. 8 caracteres">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Confirmar Senha *</label>
                        <input type="password" name="password_confirmation" class="form-input" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Função / Permissão *</label>
                    <select name="role" class="form-select" required>
                        <option value="">Selecione...</option>
                        @foreach($hotelRoles as $role)
                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:600;">
                        <input type="checkbox" name="is_active" value="1" checked style="width:16px;height:16px;">
                        Usuário ativo (pode fazer login)
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('modal-create').classList.remove('active')">Cancelar</button>
                <button type="submit" class="btn btn-primary">Criar Usuário</button>
            </div>
        </form>
    </div>
</div>

{{-- MODAL Editar --}}
<div class="modal-backdrop" id="modal-edit">
    <div class="modal">
        <div class="modal-header">
            <h3>✎ Editar Usuário</h3>
            <button class="modal-close" onclick="document.getElementById('modal-edit').classList.remove('active')">&times;</button>
        </div>
        <form id="form-edit" action="" method="POST">
            @csrf @method('PUT')
            <div class="modal-body" style="display:grid;gap:13px;">
                <div class="form-group">
                    <label class="form-label">Nome completo *</label>
                    <input type="text" name="name" id="edit-name" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">E-mail *</label>
                    <input type="email" name="email" id="edit-email" class="form-input" required>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="form-group">
                        <label class="form-label">Nova Senha <small style="color:#9ca3af;">(vazio = mantém)</small></label>
                        <input type="password" name="password" class="form-input" placeholder="Nova senha">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Confirmar Senha</label>
                        <input type="password" name="password_confirmation" class="form-input">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Função *</label>
                    <select name="role" id="edit-role" class="form-select" required>
                        @foreach($hotelRoles as $role)
                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:600;">
                        <input type="checkbox" id="edit-active" name="is_active" value="1" style="width:16px;height:16px;">
                        Usuário ativo
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="document.getElementById('modal-edit').classList.remove('active')">Cancelar</button>
                <button type="submit" class="btn btn-primary">Salvar Alterações</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function openEditModal(id, name, email, role, isActive) {
    document.getElementById('edit-name').value  = name;
    document.getElementById('edit-email').value = email;
    document.getElementById('edit-role').value  = role || '';
    document.getElementById('edit-active').checked = isActive;
    document.getElementById('form-edit').action = `/admin/settings/users/${id}`;
    document.getElementById('modal-edit').classList.add('active');
}
</script>
@endpush