@extends('layouts.app')

@section('title', 'Quản lý Người dùng - Admin NEU')

@section('content')
    <div class="hero-section pb-8">
        <div class="container">
            @include('partials.nav', ['class' => 'mb-8'])

            <h1 class="hero-title mb-6">Quản lý Người dùng</h1>
            
            @include('admin.partials.tabs')
        </div>
    </div>

    <main class="container">
        @if(session('success'))
            <x-alert type="success">
                {{ session('success') }}
            </x-alert>
        @endif
        @if(session('error'))
            <x-alert type="error">
                {{ session('error') }}
            </x-alert>
        @endif

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 gap-3">
            <h2>Danh sách Người dùng</h2>
            <form action="{{ route('admin.users') }}" method="GET" class="d-flex w-100 w-md-auto gap-2">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Tìm tên, email..." class="form-control flex-grow-1 w-md-250px">
                <button type="submit" class="btn btn-primary">Tìm kiếm</button>
            </form>
        </div>

        <div class="card p-0 overflow-hidden">
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>Avatar</th>
                            <th>Tên</th>
                            <th>Email</th>
                            <th>Phân quyền</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>
                                    @if($user->avatar)
                                        <img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="w-8 h-8 rounded-circle">
                                    @else
                                        <div class="w-8 h-8 rounded-circle bg-muted d-flex align-items-center justify-content-center fw-bold fs-6 text-muted">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                    @endif
                                </td>
                                <td><strong>{{ $user->name }}</strong></td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <form action="{{ route('admin.users.role', $user->id) }}" method="POST" class="d-flex align-items-center gap-2">
                                        @csrf
                                        @method('PUT')
                                        <select name="role" class="form-select w-auto h-8 px-2 py-0 fs-6">
                                            <option value="user" {{ $user->role === 'user' ? 'selected' : '' }}>User</option>
                                            <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>Admin</option>
                                        </select>
                                        <button type="submit" class="btn btn-primary h-8 px-3 text-xs">Cập nhật</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        
                        @if($users->isEmpty())
                            <tr>
                                <td colspan="4" class="text-center p-8 text-muted">Không tìm thấy người dùng nào.</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="mt-6">
            {{ $users->links() }}
        </div>
    </main>

    @include('partials.footer', ['class' => 'mt-12'])
@endsection