@extends('layouts.admin')

@section('title', 'Usuarios')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Usuarios</h1>
        <p class="text-secondary mb-0">Accesos y roles del sistema</p>
    </div>
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalNewUser">
        <i class="bi bi-plus-lg"></i> Nuevo usuario
    </button>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>Roles</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                    <tr>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->roles->pluck('name')->join(', ') ?: '—' }}</td>
                        <td>{{ $user->is_active ? 'Activo' : 'Inactivo' }}</td>
                        <td>
                            <button
                                class="btn btn-sm btn-outline-primary"
                                type="button"
                                data-bs-toggle="modal"
                                data-bs-target="#modalEditUser{{ $user->id }}"
                            >Editar</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-secondary">No hay usuarios.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($users->hasPages())
        <div class="card-footer">{{ $users->links() }}</div>
    @endif
</div>

<div class="modal fade" id="modalNewUser" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('users.store') }}">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Nuevo usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Nombre</label>
                <input class="form-control mb-3" name="name" required>

                <label class="form-label">Correo</label>
                <input class="form-control mb-3" type="email" name="email" required>

                <label class="form-label">Contraseña</label>
                <input class="form-control mb-3" type="password" name="password" required minlength="12">

                <label class="form-label d-block mb-2">Roles</label>
                <div class="row g-2 mb-3">
                    @foreach($roles as $role)
                        <div class="col-md-6">
                            <label class="form-check">
                                <input class="form-check-input" type="checkbox" name="roles[]" value="{{ $role->id }}">
                                {{ $role->name }}
                            </label>
                        </div>
                    @endforeach
                </div>

                <label class="form-check">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" checked> Activo
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Guardar usuario</button>
            </div>
        </form>
    </div>
</div>

@foreach($users as $user)
<div class="modal fade" id="modalEditUser{{ $user->id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <form class="modal-content" method="POST" action="{{ route('users.update', $user) }}">
            @csrf
            @method('PUT')
            <div class="modal-header">
                <h5 class="modal-title">Editar usuario · {{ $user->name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label class="form-label">Nombre</label>
                <input class="form-control mb-3" name="name" value="{{ $user->name }}" required>

                <label class="form-label">Correo</label>
                <input class="form-control mb-3" type="email" name="email" value="{{ $user->email }}" required>

                <label class="form-label">Contraseña</label>
                <input class="form-control mb-3" type="password" name="password" minlength="12" placeholder="Dejar en blanco para no cambiar">

                <label class="form-label d-block mb-2">Roles</label>
                <div class="row g-2 mb-3">
                    @foreach($roles as $role)
                        <div class="col-md-6">
                            <label class="form-check">
                                <input class="form-check-input" type="checkbox" name="roles[]" value="{{ $role->id }}" @checked($user->roles->contains($role))>
                                {{ $role->name }}
                            </label>
                        </div>
                    @endforeach
                </div>

                <label class="form-check">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($user->is_active)> Activo
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">Guardar cambios</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection