@extends('layouts.admin')
@section('content')

    <div class="row mb-3">
        <div class="col-md-12 d-flex justify-content-between align-items-center">
            <div>
                <h3 class="font-weight-bold mb-1" style="color: var(--dm-text-main);">
                    <i class="bi bi-person-plus-fill text-primary mr-2"></i>
                    Asignar Usuarios al Rol: <span class="text-uppercase text-primary">{{ $role->name }}</span>
                </h3>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Seleccione uno o varios usuarios del sistema para vincularlos a este perfil de acceso.
                </p>
            </div>
            <div>
                <a href="{{ url('admin/roles/' . $role->id) }}" class="btn btn-outline-info font-weight-bold mr-1">
                    <i class="bi bi-eye mr-1"></i> Ver Rol
                </a>
                <a href="{{ url('admin/roles') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left mr-1"></i> Volver a la Lista
                </a>
            </div>
        </div>
    </div>

    <form action="{{ url('admin/roles/' . $role->id . '/asignar') }}" method="POST">
        @csrf

        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-primary">
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                        <div class="d-flex align-items-center mb-2 mb-sm-0">
                            <h4 class="card-title mb-0 mr-3">
                                <i class="bi bi-people mr-1"></i> Seleccionar Usuarios
                            </h4>
                            <span class="badge badge-light border px-2 py-1">
                                Actualmente {{ $role->users->count() }} usuario(s) asignado(s)
                            </span>
                        </div>

                        <div class="d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-outline-primary btn-sm mr-2" id="selectAllAvailable">
                                <i class="bi bi-check-all"></i> Marcar Disponibles
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="deselectAll">
                                <i class="bi bi-x"></i> Desmarcar
                            </button>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- Buscador en tiempo real -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light"><i class="bi bi-search"></i></span>
                                    </div>
                                    <input type="text" id="buscadorUsuario" class="form-control" placeholder="Escriba el nombre o email para filtrar usuarios...">
                                </div>
                            </div>
                        </div>

                        <!-- Lista de Usuarios -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="tablaUsuariosAsignar">
                                <thead>
                                    <tr>
                                        <th style="width: 50px; text-align: center;">Asignar</th>
                                        <th>Usuario</th>
                                        <th>Correo Electrónico</th>
                                        <th>Roles Actuales</th>
                                        <th style="width: 150px; text-align: center;">Estado para {{ $role->name }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($todosLosUsuarios as $user)
                                        @php
                                            $tieneEsteRol = $user->hasRole($role->name);
                                        @endphp
                                        <tr class="usuario-fila {{ $tieneEsteRol ? 'table-light' : '' }}">
                                            <td style="text-align: center; vertical-align: middle;">
                                                @if($tieneEsteRol)
                                                    <i class="bi bi-check-circle-fill text-success" title="Ya posee este rol"></i>
                                                @else
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" 
                                                               class="custom-control-input user-checkbox" 
                                                               id="u_check_{{ $user->id }}" 
                                                               name="usuarios[]" 
                                                               value="{{ $user->id }}">
                                                        <label class="custom-control-label" for="u_check_{{ $user->id }}" style="cursor: pointer;"></label>
                                                    </div>
                                                @endif
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <strong class="usuario-nombre" style="color: var(--dm-text-main);">{{ $user->name }}</strong>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                <span class="usuario-email text-muted">{{ $user->email }}</span>
                                            </td>
                                            <td style="vertical-align: middle;">
                                                @forelse($user->roles as $r)
                                                    <span class="badge {{ $r->name === $role->name ? 'badge-primary' : 'badge-secondary' }} px-2 py-1 mr-1">
                                                        {{ $r->name }}
                                                    </span>
                                                @empty
                                                    <span class="text-muted" style="font-size: 0.85rem;">Sin rol</span>
                                                @endforelse
                                            </td>
                                            <td style="text-align: center; vertical-align: middle;">
                                                @if($tieneEsteRol)
                                                    <span class="badge badge-success px-2 py-1">
                                                        <i class="bi bi-check2"></i> Asignado
                                                    </span>
                                                @else
                                                    <span class="badge badge-light border text-muted px-2 py-1">
                                                        Disponible
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card-footer d-flex justify-content-between align-items-center">
                        <a href="{{ url('admin/roles/' . $role->id) }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left mr-1"></i> Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary font-weight-bold px-4">
                            <i class="bi bi-person-plus-fill mr-1"></i> Asignar Usuarios Seleccionados al Rol
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Buscador en tiempo real de filas
            const buscador = document.getElementById('buscadorUsuario');
            if (buscador) {
                buscador.addEventListener('keyup', function () {
                    const query = this.value.toLowerCase().trim();
                    document.querySelectorAll('.usuario-fila').forEach(fila => {
                        const nombre = fila.querySelector('.usuario-nombre').textContent.toLowerCase();
                        const email = fila.querySelector('.usuario-email').textContent.toLowerCase();
                        if (nombre.includes(query) || email.includes(query)) {
                            fila.style.display = '';
                        } else {
                            fila.style.display = 'none';
                        }
                    });
                });
            }

            // Marcar todos los disponibles
            document.getElementById('selectAllAvailable').addEventListener('click', function () {
                document.querySelectorAll('.user-checkbox').forEach(cb => {
                    // Only check if row is currently visible
                    const row = cb.closest('.usuario-fila');
                    if (row && row.style.display !== 'none') {
                        cb.checked = true;
                    }
                });
            });

            // Desmarcar todos
            document.getElementById('deselectAll').addEventListener('click', function () {
                document.querySelectorAll('.user-checkbox').forEach(cb => cb.checked = false);
            });
        });
    </script>
@endsection