@extends('admin.panel')

@section('head')
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="{{ asset('css/usuario.css') }}">
@endsection

@section('contenido')
<div class="main-content">
<div class="panel-contenido">
    <div class="header-panel">
        <h1>👤 Gestión de Usuarios</h1>
        <button class="btn-crear" onclick="mostrarFormularioCrear()">➕ Nuevo Usuario</button>
    </div>

    <!-- Tabla de usuarios -->
    <div class="tabla-usuarios">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Usuario</th>
                    <th>Nombre completo</th>
                    <th>Rol</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($usuarios as $usuario)
                <tr>
                    <td>{{ $usuario->id }}</td>
                    <td>{{ $usuario->usuario }}</td>
                    <td>{{ $usuario->nombres }} {{ $usuario->apellidos }}</td>
                    <td>{{ ucfirst($usuario->rol) }}</td>
                    <td>
                        <span class="estado {{ $usuario->estado === 'activo' ? 'activo' : 'inactivo' }}">
                            {{ ucfirst($usuario->estado) }}
                        </span>
                    </td>
                    <td>
                        <button class="btn-editar" onclick="editarUsuario({{ $usuario->id }})">✏️</button>
                        <button class="btn-habilitar" onclick="toggleEstado({{ $usuario->id }})">
                            {{ $usuario->estado === 'activo' ? '🔒 Desactivar' : '✅ Activar' }}
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Modal para crear usuario -->
    <div class="modal" id="modalCrearUsuario">
        <div class="modal-futurista">
            <h2><i class="fas fa-user-plus"></i> Crear nuevo usuario</h2>

            <form id="formNuevoUsuario" method="POST" action="{{ route('usuarios.store') }}">
                @csrf
                <div class="input-group">
                    <label><i class="fas fa-user"></i> Usuario</label>
                    <input type="text" name="usuario" placeholder="Ej. mmendoza" required>
                </div>

                <div class="input-group">
                    <label><i class="fas fa-id-badge"></i> Nombres</label>
                    <input type="text" name="nombres" placeholder="Ej. Marco" required>
                </div>

                <div class="input-group">
                    <label><i class="fas fa-id-card"></i> Apellidos</label>
                    <input type="text" name="apellidos" placeholder="Ej. Mendoza" required>
                </div>
                <div class="input-group">
                    <label><i class="fas fa-envelope"></i> Correo electrónico</label>
                    <input type="email" name="email" placeholder="Ej. admin@uma.edu.pe" required>
                </div>


                <div class="input-group">
                    <label><i class="fas fa-users-cog"></i> Rol</label>
                    <select name="rol" required>
                        <option value="">Selecciona un rol</option>
                        <option value="programador">Programador</option>
                        <option value="administrador">Administrador</option>
                    </select>
                </div>

                <div class="input-group">
                    <label><i class="fas fa-key"></i> Contraseña</label>
                    <input type="password" name="password" placeholder="••••••••" required>
                </div>

                <div class="modal-acciones">
                    <button type="submit" class="btn-guardar">
                        <i class="fas fa-save"></i> Guardar
                    </button>
                    <button type="button" class="btn-cerrar" onclick="cerrarModal()">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal" id="modalEditarUsuario">
        <div class="modal-futurista">
            <h2><i class="fas fa-edit"></i> Editar Usuario</h2>
            <form id="formEditarUsuario">
                @csrf
                <input type="hidden" name="id" id="edit_id">
                <div class="input-group">
                    <label>Nombres</label>
                    <input type="text" name="nombres" id="edit_nombres" required>
                </div>
                <div class="input-group">
                    <label>Apellidos</label>
                    <input type="text" name="apellidos" id="edit_apellidos" required>
                </div>
                <div class="input-group">
                    <label>Email</label>
                    <input type="email" name="email" id="edit_email" required>
                </div>
                <div class="input-group">
                    <label>Rol</label>
                    <select name="rol" id="edit_rol" required>
                        <option value="programador">Programador</option>
                        <option value="administrador">Administrador</option>
                    </select>
                </div>
                <div class="input-group">
                    <label>Nueva Contraseña (opcional)</label>
                    <input type="password" name="password" id="edit_password" placeholder="••••••••">
                </div>
                <div class="modal-acciones">
                    <button type="submit" class="btn-guardar">Guardar</button>
                    <button type="button" class="btn-cerrar" onclick="cerrarModalEditar()">Cancelar</button>
                </div>
            </form>

    </div>

@if(session('success'))
    <div class="alerta-exito">
        {{ session('success') }}
    </div>
@endif
@if(session('success'))
<div style="background: #00c853; color: white; padding: 1rem 1.5rem; border-radius: 8px; margin: 20px 0; font-weight: bold; animation: fadeIn 0.6s ease;">
    {{ session('success') }}
</div>
@endif

<style>
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}
</style>


</div>
</div>
<script>
    function mostrarFormularioCrear() {
        document.getElementById('modalCrearUsuario').style.display = 'flex';
    }
    function cerrarModal() {
        document.getElementById('modalCrearUsuario').style.display = 'none';
    }
</script>
<script>
function toggleEstado(id) {
    if (!confirm("¿Estás seguro de cambiar el estado del usuario?")) return;

    fetch(`/usuarios/${id}/toggle-estado`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message);
        location.reload(); // Refresca la tabla
    });
}
</script>
<script>
function editarUsuario(id) {
    fetch(`/usuarios/${id}/edit`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('edit_id').value = id;
            document.getElementById('edit_nombres').value = data.nombres;
            document.getElementById('edit_apellidos').value = data.apellidos;
            document.getElementById('edit_email').value = data.email;
            document.getElementById('edit_rol').value = data.rol;
            document.getElementById('modalEditarUsuario').style.display = 'flex';
        });
}

document.getElementById('formEditarUsuario').addEventListener('submit', function(e) {
    e.preventDefault();
    const id = document.getElementById('edit_id').value;
    const formData = new FormData(this);
    formData.append('_method', 'PUT'); // Laravel necesita este método

    fetch(`/usuarios/${id}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        alert(data.message);
        cerrarModalEditar(); // Oculta el modal
        location.reload();
    })
    .catch(() => alert("Error al actualizar el usuario"));
});

function cerrarModalEditar() {
    document.getElementById('modalEditarUsuario').style.display = 'none';
}
</script>


@endsection