@extends('layouts.app')

@section('title', 'Administración de Usuarios')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0"><i class="fas fa-users-cog"></i> Administración de Usuarios</h1>
                @if($currentUser->hasRole('admin'))
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
                        <i class="fas fa-plus"></i> Nuevo Usuario
                    </button>
                @endif
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Usuarios Totales</h5>
                            <h3 class="mb-0">{{ $users->count() }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-users" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Activos</h5>
                            <h3 class="mb-0">{{ $users->where('estado', true)->count() }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Administradores</h5>
                            <h3 class="mb-0">{{ $users->where('rol', 'admin')->count() }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-crown" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h5 class="card-title">Usuarios Hoy</h5>
                            <h3 class="mb-0">{{ $users->filter(fn($u) => optional($u->created_at)->isToday())->count() }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-day" style="font-size: 2rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="alert alert-info mb-4">
        <h6 class="mb-2"><i class="fas fa-info-circle"></i> Jerarquía de Roles:</h6>
        <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-danger px-3 py-2">1. Administrador (Control Total)</span>
            <i class="fas fa-arrow-right align-self-center"></i>
            <span class="badge bg-warning px-3 py-2">2. Gerente (Gestión Comercial)</span>
            <i class="fas fa-arrow-right align-self-center"></i>
            <span class="badge bg-info px-3 py-2">3. Técnico (Soporte y Red)</span>
            <i class="fas fa-arrow-right align-self-center"></i>
            <span class="badge bg-secondary px-3 py-2">4. Contador (Finanzas)</span>
            <i class="fas fa-arrow-right align-self-center"></i>
            <span class="badge bg-success px-3 py-2">5. Vendedor (Clientes y Ventas)</span>
        </div>
        @if(!$currentUser->hasRole('admin'))
            <p class="mb-0 mt-2"><small><i class="fas fa-lock"></i> Solo el Administrador puede crear, editar roles y eliminar usuarios.</small></p>
        @endif
    </div>

    <div class="card shadow">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-table"></i> Lista de Usuarios</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Email</th>
                            <th>Rol</th>
                            <th>Teléfono</th>
                            <th>Último Acceso</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $roleColors = [
                                'admin' => 'danger',
                                'gerente' => 'warning',
                                'tecnico' => 'info',
                                'vendedor' => 'success',
                                'contador' => 'secondary'
                            ];
                            $roleNames = [
                                'admin' => 'Administrador',
                                'gerente' => 'Gerente',
                                'tecnico' => 'Técnico',
                                'vendedor' => 'Vendedor',
                                'contador' => 'Contador'
                            ];
                        @endphp

                        @forelse($users as $user)
                            <tr class="{{ $user->id === $currentUser->id ? 'table-primary' : '' }}">
                                <td>{{ $user->id }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-sm bg-{{ $roleColors[$user->rol] ?? 'secondary' }} rounded-circle d-flex align-items-center justify-content-center text-white me-2">
                                            {{ strtoupper(substr($user->name, 0, 1)) }}
                                        </div>
                                        <div>
                                            <strong>{{ $user->name }}</strong>
                                            @if($user->id === $currentUser->id)
                                                <span class="badge bg-primary ms-1">Tú</span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="badge bg-{{ $roleColors[$user->rol] ?? 'secondary' }}">
                                        {{ $roleNames[$user->rol] ?? ucfirst($user->rol) }}
                                    </span>
                                    <small class="text-muted d-block">Nivel: {{ \App\Models\User::ROLE_HIERARCHY[$user->rol] ?? 0 }}</small>
                                </td>
                                <td>{{ $user->telefono ?? '—' }}</td>
                                <td>
                                    @if($user->updated_at)
                                        <span class="text-muted">{{ $user->updated_at->diffForHumans() }}</span>
                                    @else
                                        <span class="text-muted">Nunca</span>
                                    @endif
                                </td>
                                <td>
                                    @if($user->estado)
                                        <span class="badge bg-success">Activo</span>
                                    @else
                                        <span class="badge bg-danger">Inactivo</span>
                                    @endif
                                    @if($user->email_verified_at)
                                        <i class="fas fa-check-circle text-success ms-1" title="Email verificado"></i>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        @if($currentUser->canManageUser($user))
                                            <button class="btn btn-sm btn-outline-primary" title="Editar" onclick='editUser(@json($user))'>
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-secondary" title="Cambiar contraseña" onclick='openPasswordModal(@json($user))'>
                                                <i class="fas fa-key"></i>
                                            </button>
                                            @if($user->id != $currentUser->id)
                                                <form method="POST" action="{{ route('admin.usuarios.destroy', $user) }}" style="display: inline;" onsubmit="return confirm('¿Está seguro de eliminar a {{ $user->name }}? Esta acción no se puede deshacer.')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        @else
                                            <button class="btn btn-sm btn-outline-secondary" disabled title="Sin permisos">
                                                <i class="fas fa-lock"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center">No hay usuarios registrados</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@if($currentUser->hasRole('admin'))
<!-- Modal Nuevo/Editar Usuario -->
<div class="modal fade" id="userModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userModalTitle">Nuevo Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('admin.usuarios.store') }}" id="userForm">
                    @csrf
                    <input type="hidden" name="_method" value="POST" id="formMethod">
                    <input type="hidden" name="user_id" id="userId">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nombre Completo <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="userName" class="form-control" required value="{{ old('name') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="userEmail" class="form-control" required value="{{ old('email') }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Teléfono</label>
                                <input type="text" name="telefono" id="userTelefono" class="form-control" value="{{ old('telefono') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Dirección</label>
                                <input type="text" name="direccion" id="userDireccion" class="form-control" value="{{ old('direccion') }}">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Tipo de Usuario <span class="text-danger">*</span></label>
                                <select name="rol" id="userRol" class="form-select" required>
                                    <option value="">Seleccionar rol</option>
                                    @foreach(\App\Models\User::ROLES as $key => $label)
                                        <option value="{{ $key }}" {{ old('rol') == $key ? 'selected' : '' }}>
                                            {{ $label }} (Nivel {{ \App\Models\User::ROLE_HIERARCHY[$key] }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Contraseña <span class="text-danger" id="passwordRequired">*</span></label>
                                <input type="password" name="password" id="userPassword" class="form-control" required>
                                <small class="text-muted" id="passwordHelp">Mínimo 6 caracteres</small>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Confirmar Contraseña <span class="text-danger" id="passwordConfirmRequired">*</span></label>
                                <input type="password" name="password_confirmation" id="userPasswordConfirm" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="email_verified" id="emailVerified" value="1" {{ old('email_verified') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="emailVerified">Email verificado</label>
                                </div>
                                <div class="form-check mt-2">
                                    <input type="hidden" name="estado" value="0">
                                    <input class="form-check-input" type="checkbox" name="estado" id="userEstado" value="1" {{ old('estado', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="userEstado">Usuario activo</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="userForm" class="btn btn-primary" id="submitBtn">
                    <i class="fas fa-save"></i> Crear Usuario
                </button>
            </div>
        </div>
    </div>
</div>
@endif

@if($currentUser->hasRole('admin'))
<!-- Modal Cambiar Contraseña -->
<div class="modal fade" id="passwordModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="passwordModalTitle">Cambiar contraseña</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form method="POST" id="passwordForm">
                    @csrf
                    <input type="hidden" name="_method" value="PUT">
                    <div class="mb-3">
                        <label class="form-label">Nueva contraseña <span class="text-danger">*</span></label>
                        <input type="password" name="password" class="form-control" required minlength="6">
                        <small class="text-muted">Mínimo 6 caracteres</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirmar contraseña <span class="text-danger">*</span></label>
                        <input type="password" name="password_confirmation" class="form-control" required minlength="6">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="passwordForm" class="btn btn-primary">
                    <i class="fas fa-save"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>
@endif

<style>
.avatar-sm {
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
}
</style>

@push('scripts')
<script>
function editUser(user) {
    const modal = document.getElementById('userModal');
    const form = document.getElementById('userForm');
    
    // Cambiar título y botón
    document.getElementById('userModalTitle').textContent = 'Editar Usuario';
    document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save"></i> Actualizar Usuario';

    // Cambiar método y acción del formulario
    document.getElementById('formMethod').value = 'PUT';
    form.action = '/admin/usuarios/' + user.id;

    // Rellenar campos
    document.getElementById('userName').value = user.name;
    document.getElementById('userEmail').value = user.email;
    document.getElementById('userTelefono').value = user.telefono || '';
    document.getElementById('userDireccion').value = user.direccion || '';
    document.getElementById('userRol').value = user.rol;
    document.getElementById('emailVerified').checked = !!user.email_verified_at;
    document.getElementById('userEstado').checked = !!user.estado;

    // Contraseña opcional en edición
    document.getElementById('userPassword').required = false;
    document.getElementById('userPasswordConfirm').required = false;
    document.getElementById('passwordRequired').textContent = '';
    document.getElementById('passwordConfirmRequired').textContent = '';
    document.getElementById('passwordHelp').textContent = 'Dejar en blanco para no cambiar';

    // Mostrar modal
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
}

function openPasswordModal(user) {
    const form = document.getElementById('passwordForm');
    form.action = '/admin/usuarios/' + user.id + '/password';
    document.getElementById('passwordModalTitle').textContent = 'Cambiar contraseña — ' + user.name;
    const bsModal = new bootstrap.Modal(document.getElementById('passwordModal'));
    bsModal.show();
}

// Reset modal al cerrar
document.getElementById('userModal')?.addEventListener('hidden.bs.modal', function () {
    const form = document.getElementById('userForm');
    form.reset();
    form.action = '{{ route("admin.usuarios.store") }}';
    document.getElementById('formMethod').value = 'POST';
    document.getElementById('userModalTitle').textContent = 'Nuevo Usuario';
    document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save"></i> Crear Usuario';
    document.getElementById('userPassword').required = true;
    document.getElementById('userPasswordConfirm').required = true;
    document.getElementById('passwordRequired').textContent = '*';
    document.getElementById('passwordConfirmRequired').textContent = '*';
    document.getElementById('passwordHelp').textContent = 'Mínimo 6 caracteres';
});

// Mostrar modal si hay errores de validación
@if($errors->any())
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('userModal');
    if (modal) {
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
    }
});
@endif
</script>
@endpush
@endsection