@extends('layouts.app')

@section('breadcrumb', 'Administración de usuarios')

@section('content')
    <x-page-header
        title="Administración de usuarios"
        description="Crea usuarios y asigna roles para controlar el acceso al sistema."
    />

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

    <section class="surface mb-4">
        <div class="surface__header">
            <h2 class="surface__title">Nuevo usuario</h2>
        </div>
        <div class="surface__body">
            <form method="POST" action="{{ route('admin.users.store') }}" class="row g-3">
                @csrf
                <div class="col-md-4">
                    <label class="form-label">Nombre</label>
                    <input class="form-control" name="name" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Email</label>
                    <input class="form-control" name="email" type="email" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Contraseña</label>
                    <input class="form-control" name="password" type="password" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Confirmar contraseña</label>
                    <input class="form-control" name="password_confirmation" type="password" required>
                </div>
                <div class="col-md-8">
                    <label class="form-label">Roles</label>
                    <div class="d-flex flex-wrap gap-3">
                        @foreach($roles as $role)
                            <label class="form-check">
                                <input class="form-check-input" type="checkbox" name="roles[]" value="{{ $role->name }}">
                                <span class="form-check-label">{{ $role->name }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="col-12">
                    <button class="btn btn-primary">Crear usuario</button>
                </div>
            </form>
        </div>
    </section>

    <section class="surface surface--flush">
        <div class="surface__header">
            <h2 class="surface__title">Usuarios registrados</h2>
        </div>
        <div class="data-table-wrap">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Roles</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @foreach($users as $user)
                    <tr>
                        <td>{{ $user->name }}</td>
                        <td class="cell-muted">{{ $user->email }}</td>
                        <td>
                            @forelse($user->roles as $role)
                                <span class="status-badge status-badge--info">{{ $role->name }}</span>
                            @empty
                                <span class="text-secondary">Sin rol</span>
                            @endforelse
                        </td>
                        <td class="cell-actions">
                            <button class="btn btn-sm btn-outline-light" data-bs-toggle="collapse" data-bs-target="#edit-user-{{ $user->id }}">
                                Editar
                            </button>
                        </td>
                    </tr>
                    <tr class="collapse" id="edit-user-{{ $user->id }}">
                        <td colspan="4" class="surface__body">
                            <form method="POST" action="{{ route('admin.users.update', $user) }}" class="row g-2">
                                @csrf
                                @method('PUT')
                                <div class="col-md-3">
                                    <input class="form-control form-control-sm" name="name" value="{{ $user->name }}" required>
                                </div>
                                <div class="col-md-3">
                                    <input class="form-control form-control-sm" name="email" type="email" value="{{ $user->email }}" required>
                                </div>
                                <div class="col-md-3">
                                    <input class="form-control form-control-sm" name="password" type="password" placeholder="Nueva contraseña (opcional)">
                                </div>
                                <div class="col-md-3">
                                    <input class="form-control form-control-sm" name="password_confirmation" type="password" placeholder="Confirmar contraseña">
                                </div>
                                <div class="col-12">
                                    <div class="d-flex flex-wrap gap-3">
                                        @foreach($roles as $role)
                                            <label class="form-check">
                                                <input class="form-check-input" type="checkbox" name="roles[]" value="{{ $role->name }}" @checked($user->roles->contains('name', $role->name))>
                                                <span class="form-check-label">{{ $role->name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-sm btn-primary">Guardar cambios</button>
                                </div>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
        @if($users->hasPages())
            <div class="surface__body pt-0">{{ $users->links() }}</div>
        @endif
    </section>
@endsection