@extends('app')

@section('titulo', 'Gestionar Usuarios')

@section('content')
<div class="admin-container">
    <h1>Gestionar Usuarios</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="admin-table">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Email</th>
                <th>Rol</th>
                <th>Creado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <form action="{{ route('admin.change-role', $user->id) }}" method="POST" style="display: flex; gap: 5px;">
                            @csrf
                            <select name="role" style="padding: 5px; border-radius: 4px; background: #1c2331; color: #018BF6;">
                                <option value="user" {{ $user->role === 'user' ? 'selected' : '' }}>Usuario</option>
                                <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin</option>
                            </select>
                            <button type="submit" class="btn-small" style="padding: 5px 10px;">Actualizar</button>
                        </form>
                    </td>
                    <td>{{ $user->created_at->format('d/m/Y H:i') }}</td>
                    <td>
                        <form action="{{ route('admin.delete-user', $user->id) }}" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button class="btn-small" style="background: #e74c3c;" onclick="return confirm('¿Estás seguro de eliminar este usuario?')">
                                Eliminar
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" style="text-align: center; padding: 20px; color: #018BF6;">
                        No hay usuarios registrados
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if($users->hasPages())
        <div style="margin-top: 20px;">
            {{ $users->links() }}
        </div>
    @endif
</div>

<style>
    .admin-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .admin-container h1 {
        color: #018BF6;
        text-align: center;
        margin-bottom: 30px;
    }

    .alert {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #27ae60;
        color: white;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        background: #2c3e50;
        border-radius: 8px;
        overflow: hidden;
    }

    .admin-table thead {
        background: #018BF6;
    }

    .admin-table th {
        padding: 15px;
        text-align: left;
        color: white;
        font-weight: bold;
    }

    .admin-table td {
        padding: 12px 15px;
        border-top: 1px solid #1c2331;
    }

    .admin-table tr:hover {
        background: #34526d;
    }

    .btn-small {
        padding: 6px 12px;
        background: #018BF6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.85rem;
        margin-right: 5px;
        transition: background 0.2s;
    }

    .btn-small:hover {
        background: #d400ffff;
    }

    select {
        background: #1c2331;
        color: #018BF6;
        border: 1px solid #018BF6;
        border-radius: 4px;
        padding: 5px;
    }
</style>
@endsection